Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值

Jerry Wang

发布于 2022-10-06 08:08:08

7380

发布于 2022-10-06 08:08:08

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-10-04，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全