Angular SSR 应用的 SEO 实现一个例子 - met

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

]