javascript - 如何使用 Angular 通用 SSR 和 ngx-seo 插件设置元标记？解释

Question

在这个例子中，我将解释如何在 Angular Universal SSR 项目中实现由https://github.com/samvloeberghs/kwerri-oss创建的 ngx-seo 插件。

使用此实现，您将拥有出色的 SEO，因为元标记将设置在服务器上，而不是客户端。这可以通过将在服务端执行的路由解析器来实现。

让我们开始吧:)

1. 安装插件npm i ngx-seo

更新：

1.1BrowserTransferStateModule在您的 app.module.ts 文件中导入 2. 在您的路由器文件中实现 Angular 提供的属性，该属性resolve为您要设置元标记的每个路径调用，如下所示（如果需要，您可以为每个路由使用单独的解析器）：

{
    path: 'path-of-your-page',
    loadChildren: () => import('.....import the module of your page....').then(m => m.ModuleName),
    resolve: { pageData: PageResolver }
}

3. 在项目的某处创建 page.resolver.ts 文件 - https://angular.io/api/router/Resolve 解析器文件将负责从您的 API 或 Angular 提供的 TransferState 中检索数据。

4. 导入import { TransferState, makeStateKey } from '@angular/platform-browser';

5. 装饰你的 page.resolver.ts 类@Injectable({ providedIn: 'root' })

6. 在 PageResolver 类解析器接口中实现如下： implements Resolve<type of the data that you manipulate>

7. 在 PageResolver 类的构造函数中注册 TransferState 和 SeoSocialShareService，如下所示：

constructor(
    private transferState: TransferState,
    private seoSocialShareService: SeoSocialShareService
  ) { }

8. 在实现的方法中

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<type of the data that you manipulate> | Promise<any> | any 
// open the resolve method
{

从 Resolve 接口，创建一个 const 来存储状态键，如下所示：

const stateKey = makeStateKey<type of the data that you manipulate>(state.url);

我选择 state.url 作为 TransferState 的键

现在一切准备就绪，可以开始设置元标记了。我个人的选择是使用 TransferState，因此我不会一直通过访问者会话进行 API 调用。这对于不会发生太大变化的内容很有用，因此您可以减少对该访问者会话的 API 调用。

接下来，如果您决定使用 TransferState，则检查是否存在具有特定 stateKey 的状态。我选择了 RxJs 操作符，这样我就可以在我的 API 调用的管道中点击以设置元标记并将响应保存在传输状态中，并将状态数据返回为 Observable。

    // check if that key exist in the transfer state
    if (this.transferState.hasKey(stateKey)) {

      // get the state data from transfer state
      const stateData = this.transferState.get<type of the data that you manipulate>(stateKey, null);

      this.seoSocialShareService.setCanonicalUrl(the domain + state.url);

      const seoData: SeoSocialShareData = {
        author: .....,
        keywords: .....,
        title: ......,
        etc.
      };

      this.seoSocialShareService.setData(seoData);

      // return the state datа as Observable
      return of(stateData);
    }
    else {

      return this.yourService.CallApiEndpoint() // httpClient call
        .pipe(
          tap({
            next: (response) => {

              this.seoSocialShareService.setCanonicalUrl(the domain + state.url);

              const seoData: SeoSocialShareData = {
                author: .....,
                keywords: .....,
                title: ......,
                etc.
              };

              this.seoSocialShareService.setData(seoData);

              // save the response in the TransferState so you can retrieve on the next request
              this.transferState.set(stateKey, response);

            }
          })
        );

    }

} 
// close the resolve method

所以像这样我们有一个解析器，它将在服务器端执行，它会在该状态返回给请求者之前设置所有元标记。无论请求是由某个爬虫还是网站访问者发出的，都会执行此流程。

接下来是移动到视图 component.ts 文件并从我们的解析器中检索解析的数据，以便稍后我们可以显示或操作它。

在我们的 component.ts 文件中，我们必须注册 Angular 提供的 ActivatedRoute 类以获取解析的数据，如下所示：

constructor(
    private activatedRouter: ActivatedRoute
  ) { }

现在我们可以在代码中的某处检索解析的数据，通常在 ngOnInit(){} 方法中，如下所示： const pageData = this.activatedRouter.snapshot.data.pageData as type of the data that you manipulate; 然后在集成解析器之前删除您的 component.ts 文件中的所有 API 调用。解析器将提取数据并将其传输到您的组件视图。

有了这个，我们已经在我们的 Angular Universal SSR 应用程序上完全集成了 seo 元标记。

您可以在这里测试您的集成https://developers.facebook.com/tools/debug

快乐编码:)

标签： javascriptangulartypescriptseoserver-side-rendering