例子：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" } ]
