如何解决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 举报,一经查实,本站将立刻删除。