例子:https://stackblitz.com/edit/angular-SEO-service?file=src%2Fapp%2Fapp.component.ts
<title>Page title - site title</title>
<!-- open graph -->
<Meta property="og:site_name" content="Sekrab Garage">
<Meta property="og.type" content="website">
<Meta property="og:url" content="pageUrl"/>
<Meta name="description" property="og:description" content="description is optional">
<Meta name="title" property="og:title" content="Page title">
<Meta name="image" property="og:image" content="imageurl">
<!-- twitter related -->
<Meta property="twitter:site" content="@sekrabbin">
<Meta property="twitter:card" content="summary_large_image"/>
<Meta preoprty="twitter:creator" content="@sekrabbin">
<Meta property="twitter:image" content="imageurl">
<Meta property="twitter:title" content="title">
<Meta property="twitter:description" content="description">
<!-- general and for compatibility purposes -->
<Meta name="author" content="Ayyash">
<!-- cononical, if you have multiple languages, point to default -->
<link rel="canonical" href="https://elmota.com"/>
<!-- alternate links, languages -->
<link rel="alternate" hreflang="ar-jo" href="ar link">
<Meta property="og:locale" content="en_GB" />
我们将创建一个服务,在根中提供,注入到根组件中。 然后我们需要一种方法来更新不同 routes 的标签。 所以最终,我们需要一个“添加标签”和“更新标签”的公共方法。
使用 Angular 提供的两个服务:Meta 和 Title。
@Injectable({
providedIn: 'root'
})
export class SEOService {
// inject title and Meta from @angular/platform-browser
constructor(
private title: Title,
private Meta: Meta
) {
// in constructor, need to add fixed tags only
}
AddTags() {
// Todo: implement
}
UpdateTags() {
// Todo: implement
}
}
我们还需要 DOCUMENT 注入令牌来附加链接。 服务现在看起来像这样:
@Injectable({
providedIn: 'root',
})
export class SEOService {
constructor(
private title: Title,
private Meta: Meta,
@Inject(DOCUMENT) private doc: Document
) {}
AddTags() {
const tags = [
{ property: 'og:site_name', content: 'Sekrab Garage' },
{ property: 'og.type', content: 'website' },
{ property: 'og:url', content: 'pageUrl' },
{ property: 'twitter:site', content: '@sekrabbin' },
{ property: 'twitter:card', content: 'summary_large_image' },
{ property: 'twitter:creator', content: '@sekrabbin' },
{ property: 'twitter:image', content: 'imageurl' },
{ property: 'twitter:title', content: '[title]' },
{ property: 'twitter:description', content: '[description]' },
{ property: 'og:locale', content: 'en_GB' },
{
name: 'description',
property: 'og:description',
content: '[description]',
},
{ name: 'title', property: 'og:title', content: '[title]' },
{ name: 'image', property: 'og:image', content: 'imageurl' },
{ name: 'author', content: 'Ayyash' },
];
// add tags
this.Meta.addTags(tags);
// add title
this.title.setTitle('[Title] - Sekrab Garage');
// add canonical and alternate links
this.createCanonicalLink();
this.createalternateLink();
}
private createalternateLink() {
// append alternate link to body, Todo: url and hreflang
const _link = this.doc.createElement('link');
_link.setAttribute('rel', 'alternate');
_link.setAttribute('hreflang', 'en');
_link.setAttribute('href', '[url]');
this.doc.head.appendChild(_link);
}
private createCanonicalLink() {
// append canonical to body, Todo: url
const _canonicalLink = this.doc.createElement('link');
_canonicalLink.setAttribute('rel', 'canonical');
_canonicalLink.setAttribute('href', '[url]');
this.doc.head.appendChild(_canonicalLink);
}
UpdateTags() {
// TOOD: find out what we need to update
}
}
并非所有的 Meta tag 都需要更新,因此我们使用两个 array,分别维护需要更新和不需要更新的 tag.
// outside service class
const tags = [
{ property: "og:url", content: "pageUrl" },
{ property: "twitter:image", content: "imageurl" },
{ property: "twitter:title", content: "[title]" },
{ property: "twitter:description", content: "[description]" },
{ name: "description", property: "og:description", content: "[description]" },
{ name: "title", property: "og:title", content: "[title]" },
{ name: "image", property: "og:image", content: "imageurl" }
]
const fixedTags = [
{ property: "og:site_name", content: "Sekrab Garage", dataAttr:'ayyash' },
{ property: "og.type", content: "website" },
{ property: "twitter:site", content: "@sekrabbin" },
{ property: "twitter:card", content: "summary_large_image" },
{ property: "twitter:creator", content: "@sekrabbin" },
{ property: "og:locale", content: "en_GB" },
{ name: "author", content: "Ayyash" }
]
原文地址:https://cloud.tencent.com/developer/article/2135000
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。