1. 前言

本文详细讲解了如何为网站执行 SEO, 文章中的部分内容及方法有些过时了, 但是涉及理念依然有效, 而且内容比较全面, 希望对正你的 SEO 工作有帮助.

• 1. 前言
• 2. 什么是 Angular universal
• 3. 为什么需要 SSR(服务器端渲染)
• 4. Angular Universal 如何解决 FCP 和 SEO 问题
• 5. 开启 SSR
• 6. 开启客户端水合(Client Hydration)
• 7. 使用 Universal 构建和运行
• 8. Prerender 预渲染静态 HTML
  • 8.1. 预渲染路径配置
• 9. SEO 优化
  • 9.1. 关键词与描述的优化
  • 9.2. 内部跳转优化
  • 9.3. 样式文件打包
  • 9.4. 添加 robots.txt
  • 9.5. 自动生成 sitemap
• 10. 使用 Nginx 部署
  • 10.1. 安装 Nginx
  • 10.2. 安装 Node
  • 10.3. 安装 PM2
  • 10.4. 配置并启动 pm2
  • 10.5. 配置 Nginx 反向代理
• 11. troubleshooting
  • 11.1. 问题 1: Configuration ‘development’ is not set in the workspace
  • 11.2. 问题 2: ReferenceError: window is not defined
  • 11.3. 问题 3: Flex Layout loaded on the server without FlexLayoutServerModule
  • 11.4. 问题 4: XMLHttpRequest is not defined
  • 11.5. 问题 5： \dist\demo-web\browser...ReferenceError: Image is not defined
• 12. 相关阅读
• 13. 参考文档

1. 前言

当初选择将应用做成 SPA(单页应用)的时候主要是觉得用户体验非常丝滑, 当时也知道 SPA 很难做 SEO, 还是毅然决然的选择做成 SPA 应用. 当时还是 Angularjs 1.X 的时候, 就觉得 Angular 的理念跟自己对前端的看法特别契合, 后来将框架升级到 Angular 11 继而 13, 虽然费了很多时间和精力, 但是收获非常多, 由于本文的重点是 SSR 与 prerendering,所以这里不赘述原因了. 之前也了解到 Angular Universal 是做服务器端渲染的套件(SSR), 乘最近有空刚好将其引入到项目. 实现地过程中虽然遇到问题, 但是还是有些小兴奋的感觉, 一来解决了首次访问应用时白屏的问题, 二来将当初打算舍弃的 SEO 能力也找了回来, 而且整个对引入 SSR 实现 SEO 的过程还是相当轻松的, 特写此文, 以防遗忘, 也希望给后来者有所帮助.