Angular Universal 7.x.x动态设置页面标题SEO问题求助

这个问题在Angular Universal 7.x版本里确实很常见——核心原因就是你推测的那样：服务器端渲染（SSR）会先返回初始的HTML骨架，而爬虫/预渲染工具不会等待客户端JS完成异步请求后再抓取更新后的内容。下面给你两种靠谱的解决方案：

方案一：使用路由Resolve守卫（推荐） #

这种方法会在路由激活之前就完成数据请求，服务器端渲染时会自动等待请求完成，再渲染组件并生成包含正确标题的HTML。

步骤1：创建Resolve守卫 #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { BackendService } from './backend.service';
import { Observable } from 'rxjs';

@Injectable()
export class DetailResolve implements Resolve<any> {
  constructor(private backendService: BackendService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // 返回你的数据请求Observable
    return this.backendService.getDetail();
  }
}

步骤2：配置路由 #

在你的路由模块中，给目标路由添加resolve配置：

import { DetailComponent } from './detail.component';
import { DetailResolve } from './detail.resolve';

const routes = [
  {
    path: 'detail', // 你的实际路由路径
    component: DetailComponent,
    resolve: {
      detailData: DetailResolve // 绑定刚才创建的守卫
    }
  }
];

步骤3：在组件中使用解析后的数据 #

此时组件可以直接从路由快照中拿到已加载的数据，无需再发起异步请求：

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html'
})
export class DetailComponent implements OnInit {
  constructor(
    private titleService: Title,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    // 从路由数据中获取已解析的详情数据
    const detailData = this.route.snapshot.data['detailData'];
    this.titleService.setTitle(detailData.title);
  }
}

方案二：在组件中让服务器端等待异步请求完成 #

如果不想修改路由配置，可以在组件中判断当前是否处于服务器端环境，强制等待请求完成后再设置标题：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { BackendService } from './backend.service';
import { isPlatformServer } from '@angular/common';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html'
})
export class DetailComponent implements OnInit {
  constructor(
    private titleService: Title,
    private backendService: BackendService,
    @Inject(PLATFORM_ID) private platformId: Object // 注入平台标识
  ) {}

  async ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      // 服务器端环境：将Observable转为Promise，让SSR等待请求完成
      const detailData = await this.backendService.getDetail().toPromise();
      this.titleService.setTitle(detailData.title);
    } else {
      // 客户端环境：正常订阅请求
      this.backendService.getDetail().subscribe(detailData => {
        this.titleService.setTitle(detailData.title);
      });
    }
  }
}

验证方案 #

用你提到的预渲染工具重新检测，就能看到爬虫抓取到的HTML已经包含动态设置的页面标题了。

内容的提问来源于stack exchange，提问作者BYUNGJU JIN