如何构建SEO优化的Angular网站？求可参考的Github项目

你遇到的核心问题是Angular默认的客户端渲染（CSR）模式导致初始HTML为空，爬虫和Ctrl+U都无法看到实际内容。以下是针对性的解决方法和优化方案：

一、启用服务端渲染（SSR）：Angular Universal #

这是解决Angular SEO最直接的方案，它会在服务器端预渲染页面的完整HTML，返回给浏览器和搜索引擎爬虫，这样Ctrl+U能看到完整内容，爬虫也能正常抓取。

• 快速接入：用Angular CLI直接添加SSR支持

  ng add @nguniversal/express-engine
  

• 构建与运行：

  npm run build:ssr
  npm run serve:ssr
  

• 关键注意点：处理服务器端的异步数据，用TransferState服务把服务器端获取的数据同步到客户端，避免重复请求，同时确保服务器端能访问到API接口。

二、静态站点生成（SSG） #

如果你的站点内容更新频率低，静态生成是更轻量的选择，它会预渲染所有页面为静态HTML文件，部署简单且抓取友好。

• Angular 16+支持原生SSG，或者用@nguniversal/static-engine实现，构建命令：

  npm run build:prerender
  

• 生成的静态文件在dist目录下，直接部署到静态托管服务即可。

三、优化页面元数据与结构化数据 #

• 动态设置Meta标签：用Angular的Meta和Title服务，为每个页面设置独立的标题、描述等，示例代码：

  import { Meta, Title } from '@angular/platform-browser';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-page',
    templateUrl: './page.component.html'
  })
  export class PageComponent implements OnInit {
    constructor(private meta: Meta, private title: Title) {}
  
    ngOnInit(): void {
      this.title.setTitle('自定义页面标题');
      this.meta.updateTag({ name: 'description', content: '页面的详细描述，帮助搜索引擎理解内容' });
      this.meta.updateTag({ name: 'keywords', content: '关键词1,关键词2' });
    }
  }
  

• 添加结构化数据：为页面添加Schema.org格式的结构化数据，帮助搜索引擎识别内容类型（比如文章、商品），可以在组件中动态生成script标签注入到页面。

四、优化路由与链接 #

• 使用默认的PathLocationStrategy（不要用hash路由），确保路由路径是搜索引擎友好的格式（比如/article/123而非/#/article/123）。
• 页面内跳转全部使用<a routerLink="路径">，不要用自定义点击事件跳转，这样爬虫能顺着链接遍历全站内容。

可用的Github参考项目 #

• Angular官方的SSR模板：通过Angular CLI生成的SSR项目就是标准的可SEO基础模板，包含了Universal的核心配置，无需额外找第三方项目。
• 社区SEO Starter项目：在Github搜索关键词「Angular SSR SEO starter」，可以找到不少维护活跃的开源项目，这些项目已经集成了SSR、Meta优化、结构化数据等SEO功能，直接克隆就能作为项目基础。

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