Angular Universal动态标题SEO问题：AJAX请求晚于服务端渲染

嗨，我来帮你搞定这个SEO痛点！在Angular Universal里，如果API请求拖到服务端渲染完成后才执行，那搜索引擎爬虫看到的只会是默认标题，完全达不到我们要的优化效果。我给你两个实用的解决方案，一步步来：

方案一：用路由Resolver预加载标题数据 #

这是最推荐的方式——Resolver会在路由激活之前就完成数据请求，等服务端开始渲染时，标题已经妥妥拿到手了。

步骤1：创建标题Resolver #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { TitleService } from './title.service'; // 你的标题请求服务
import { Observable } from 'rxjs';

@Injectable()
export class TitleResolver implements Resolve<string> {
  constructor(private titleService: TitleService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    // 可以根据路由参数动态获取对应标题，比如页面ID
    const pageId = route.paramMap.get('id');
    return this.titleService.getPageTitle(pageId);
  }
}

步骤2：给路由配置Resolver #

在你的路由模块里，为需要动态标题的路由添加resolve配置：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourTargetComponent } from './your-target.component';
import { TitleResolver } from './title.resolver';

const routes: Routes = [
  {
    path: 'detail/:id',
    component: YourTargetComponent,
    resolve: {
      pageTitle: TitleResolver
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [TitleResolver] // 别忘了注册Resolver
})
export class AppRoutingModule {}

步骤3：在组件中设置标题 #

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

@Component({
  selector: 'app-your-target',
  templateUrl: './your-target.component.html',
  styleUrls: ['./your-target.component.css']
})
export class YourTargetComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private titleService: Title
  ) {}

  ngOnInit(): void {
    // 从路由快照里取出预加载好的标题
    const pageTitle = this.route.snapshot.data['pageTitle'];
    this.titleService.setTitle(pageTitle);
  }
}

方案二：在组件中强制服务端等待API请求 #

如果不想用Resolver，也可以在组件里直接处理，但要特意判断服务端环境，确保渲染前完成请求：

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

@Component({
  selector: 'app-your-target',
  templateUrl: './your-target.component.html',
  styleUrls: ['./your-target.component.css']
})
export class YourTargetComponent implements OnInit {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private titleService: Title,
    private apiTitleService: TitleService
  ) {}

  async ngOnInit(): Promise<void> {
    if (isPlatformServer(this.platformId)) {
      // 服务端环境下，等待API请求完成再渲染
      const pageTitle = await lastValueFrom(this.apiTitleService.getPageTitle());
      this.titleService.setTitle(pageTitle);
    } else {
      // 客户端环境正常订阅更新标题
      this.apiTitleService.getPageTitle().subscribe(title => {
        this.titleService.setTitle(title);
      });
    }
  }
}

关键注意点 #

• 一定要用Angular官方的HttpClient做API请求，第三方AJAX库（比如axios）不会被Universal识别，服务端不会等待其完成。
• RxJS 7+里toPromise()已弃用，改用lastValueFrom或firstValueFrom更稳妥。

这样处理后，服务端渲染时会先完成标题请求，把正确的标题注入到HTML里，搜索引擎爬虫就能抓取到动态生成的标题啦！

内容的提问来源于stack exchange，提问作者Remi Padt