Facebook分享OG标签无法正常工作

问题描述

我正在尝试在Angular网站上使用Facebook Share。为此，我实现了Angular Universal并创建了SEO服务以生成OG标签。当我尝试共享给定的URL时，收到“ 404未找到”错误消息。

非常奇怪的是，当我检查网页内容时，可以看到og meta属性显示得很好。

我已经附上了相关代码和屏幕截图。

任何帮助将不胜感激！

预先感谢

import { Component,OnInit,Input } from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import { FirebaseService } from './../../firebase.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { SeoService } from './../../seo.service';

@Component({
  selector: 'app-view-work',templateUrl: './view-work.component.html',styleUrls: ['./view-work.component.scss']
})
export class ViewWorkComponent implements OnInit {

  item: any;

  constructor(
    public firebaseService: FirebaseService,private router: Router,private route: ActivatedRoute,private db: AngularFirestore,private seo: SeoService
  ) {
    this.route.data.subscribe(routeData => {
      /* tslint:disable:no-string-literal */
      const data = routeData['data'];
      if (data) {
        this.item = data.payload.data();
        this.item.id = data.payload.id;
      }
    });

    this.seo.generateTags({
      title: 'View work',description: 'Unique,handmade ceramic pieces',image: '/src/assets/images/olga_goldin.jpg',slug: `view-work/${this.item.id}`
    });
  }

  ngOnInit() {
    this.route.data.subscribe(routeData => {
      /* tslint:disable:no-string-literal */
      const data = routeData['data'];
      if (data) {
        this.item = data.payload.data();
        this.item.id = data.payload.id;
      }
    });
  }

  getShareURL() {
    return `https://fygpractice.com/view-work/${this.item.id}`;
  }


}

<div class="container-desktop">
    <div class="text">
        <mat-divider></mat-divider>
        <h5 class="header">Name</h5>
        <h5 class="item">{{item.title}}</h5>
        <mat-divider class="divider"></mat-divider>
        <h5 class="header">Description</h5>
        <h5 class="item">{{item.description}}</h5>
        <mat-divider class="divider"></mat-divider>
        <h5 class="header">Price</h5>
        <h5 class="item">${{item.price}}</h5>
        <mat-divider class="divider"></mat-divider>
        <h5 class="header">Materials</h5>
        <h5 class="item">${{item.materials}}</h5>
        <mat-divider class="divider"></mat-divider>
        <h5 class="header">Dimensions</h5>
        <h5 class="item">{{item.height}}" x {{item.width}}" x {{item.depth}}"</h5>
        <div class="buttons">
            <a mat-raised-button color="warn" href="{{item.etsy}}">Purchase</a>
            <img class="facebook" src='./../../../assets/images/facebook_blue_50.png' shareButton="facebook" url="{{getShareURL()}}">
        </div>
    </div>
    <div class="image">
        <img mat-card-image src={{item.downloadURL}}>
    </div>
</div>

import { Injectable } from '@angular/core';
import { Meta,Title } from '@angular/platform-browser';


@Injectable({
  providedIn: 'root'
})
export class SeoService {

  constructor(private meta: Meta,private titleService: Title) { }

  generateTags(tags) {
    // default values
    tags = {
      title: 'Angular SSR',description: 'My SEO friendly Angular Component',image: 'https://angularfirebase.com/images/logo.png',slug: '',...tags
    };

    // Set a title
    this.titleService.setTitle(tags.title);

    // Set meta tags
    this.meta.updateTag({ name: 'twitter:card',content: 'summary' });
    this.meta.updateTag({ name: 'twitter:site',content: '@angularfirebase' });
    this.meta.updateTag({ name: 'twitter:title',content: tags.title });
    this.meta.updateTag({ name: 'twitter:description',content: tags.description });
    this.meta.updateTag({ name: 'twitter:image',content: tags.image });

    this.meta.updateTag({ property: 'fb:app_id',content: 'xxx[![enter image description here][1]][1]' });
    this.meta.updateTag({ property: 'og:type',content: 'article' });
    this.meta.updateTag({ property: 'og:site_name',content: 'AngularFirebase' });
    this.meta.updateTag({ property: 'og:title',content: tags.title });
    this.meta.updateTag({ property: 'og:description',content: tags.description });
    this.meta.updateTag({ property: 'og:image',content: tags.image });
    this.meta.updateTag({ property: 'og:url',content: `https://fygpractice.com/${tags.slug}` });
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）