如何为Angular JS动态页面实现SEO友好的HTML渲染？

1. 实现服务端渲染（SSR） #

AngularJS本身没有官方SSR支持，但可以通过以下两种方式基于Node.js实现：

• 使用prerender.io的Node.js中间件：在Express后端引入该中间件，配置爬虫UA白名单，当检测到爬虫请求时，将页面交由prerender服务渲染为完整HTML后返回，确保爬虫能拿到带规范标签的静态页面。
• 基于无头浏览器自定义渲染：用Puppeteer（不推荐已停更的PhantomJS）在Node后端做UA判断，若为爬虫请求则启动无头浏览器加载页面，等待AngularJS渲染完成后，把完整HTML返回给爬虫。

2. 动态配置Meta标签与优化路由 #

• 动态设置页面Meta标签：在AngularJS的控制器或路由resolve中，根据当前页面内容（比如商品数据）修改标题、描述等标签。示例代码：

app.controller('ProductCtrl', function($scope, $rootScope, productData) {
  $rootScope.pageTitle = productData.title;
  $rootScope.pageDesc = productData.description;
});

模板中绑定标签：

<title>{{pageTitle}}</title>
<meta name="description" content="{{pageDesc}}">

• 开启HTML5路由并配置服务器重写：AngularJS默认的哈希路由（#/路径）对SEO不友好，开启HTML5模式后，需在Express后端配置重写规则，将所有路由请求转发到index.html，确保爬虫能获取对应路由的渲染内容。示例配置：

const path = require('path');
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

3. 适配Google动态渲染方案 #

Google支持动态渲染逻辑：针对爬虫返回渲染完成的HTML，针对普通用户返回原生AngularJS页面。在Node后端做UA检测，识别到Googlebot等爬虫时，返回预渲染的HTML（可结合Puppeteer实现渲染并缓存结果提升性能），否则返回原页面。

4. 添加结构化数据标记 #

在页面中嵌入Schema.org结构化数据，帮助Google快速理解页面内容。比如商品页可添加Product类型的JSON-LD，通过AngularJS动态生成内容：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{product.name}}",
  "description": "{{product.description}}",
  "image": "{{product.imageUrl}}"
}
</script>

5. 预渲染静态页面（适合内容稳定场景） #

如果页面内容更新频率低（比如商品详情页、博客文章），可使用prerender-spa-plugin在构建阶段将所有路由预渲染为静态HTML文件，部署到Node服务器后，爬虫请求时直接返回对应静态页即可。

内容的提问来源于stack exchange，提问作者Prabhakar--PK