Google渲染JS的两波机制
如果你的网站大量使用JavaScript渲染内容，有一个事实你需要知道：Google不是一次性把你的页面渲染好的。它用的是两波索引机制。
第一波，Googlebot抓取你的页面HTML，索引其中已经存在的文本内容。第二波，Google的Web Rendering Service（WRS）用无头Chrome渲染页面，执行JavaScript，然后索引动态生成的内容。问题在于，第二波可能延迟几小时到几天。据Google Search Central的官方文档，WRS队列优先级取决于页面的重要性和刷新频率。
这意味着你的JS渲染的内容，在Google索引里有延迟。更糟的情况是，如果WRS渲染失败（比如JS执行超时、资源加载被robots.txt屏蔽），你的内容根本不会进入索引。
3个常见的JS SEO问题
内容在DOM里但Google看不到。 比如你用React/Vue的客户端渲染，页面HTML源码里只有一个空的div和一个script标签。用户打开浏览器能看到内容，但Googlebot第一波抓取时什么都看不到。虽然第二波WRS会渲染，但如果渲染失败，内容就丢了。
懒加载的内容没被抓取。 图片懒加载、无限滚动、点击展开，这些交互触发的内容加载对用户很友好，但Googlebot不会点击或滚动。如果你的核心内容需要用户交互才出现，Google很可能索引不到。
JS和CSS资源被robots.txt屏蔽。 很多人觉得CSS和JS文件不需要搜索引擎抓取，就在robots.txt里全部Disallow。但Google官方明确说过，渲染页面需要加载CSS和JS来判断布局、判断内容是否可见。屏蔽了这些资源，Google可能判断你的页面内容不可见而降权。
SSR vs 预渲染 vs 动态渲染
三种解决方案，适用场景不同。
服务端渲染（SSR）：服务器直接输出完整HTML，浏览器拿到时内容已经在DOM里。Next.js、Nuxt.js都原生支持SSR。这是最彻底的方案，Googlebot第一波就能看到全部内容。代价是服务器压力增大，每次请求都要执行渲染逻辑。
预渲染（Prerendering）：构建时把所有页面静态生成HTML。Gatsby、Next.js的static export模式走这条路。适合内容变化不频繁的站点。优势是部署简单（纯静态文件），劣势是数据更新需要重新构建。
动态渲染：服务器检测请求方是不是爬虫，如果是爬虫就返回预渲染的HTML，如果是普通用户就返回正常页面。这是过渡方案，Google官方表示可以接受但不推荐长期使用。适合改造老项目时临时过渡。
据Google Search Central的建议，优先考虑SSR或预渲染，动态渲染作为最后手段。如果你的项目是全新的，直接上SSR，别走弯路。
4步检测你的页面是否被正确渲染
第一步：查看页面源代码。 在浏览器里右键”查看网页源代码”（不是F12的Elements面板），搜索你的核心内容关键词。如果源代码里找不到，说明内容是JS动态渲染的，Google第一波抓不到。
第二步：用Google的URL检查工具。 Search Console的URL检查工具会显示Google看到的渲染后页面。检查”已抓取的网页”和”渲染的网页”两个标签，如果两者内容不一致，说明存在JS渲染问题。
第三步：site:搜索测试。 在Google搜索框输入 site:你的域名 "你的核心内容片段"，如果搜不到，说明这段内容没被索引。可能是JS渲染问题，也可能是noindex等其他原因。
第四步：用Mobile-Friendly Test。 Google的移动友好测试工具会完整渲染你的页面并截图。如果截图里内容缺失或布局错乱，说明Google渲染你的页面有问题。
不同框架的具体修复建议
Next.js项目：用getServerSideProps或getStaticProps替代useEffect里的数据获取。app router模式下默认是服务端组件，内容会直接出现在HTML里。如果用了客户端组件，确保核心内容不依赖useEffect。
Vue/Nuxt项目：Nuxt 3默认支持SSR，确认nuxt.config.ts里ssr: true。如果用了fetch异步获取数据，用useFetch或useAsyncData替代，它们会在服务端执行。
WordPress站点：纯PHP渲染的WordPress天然对SEO友好，内容直接在HTML里。如果装了页面构建器插件（Elementor等），检查生成的HTML是否包含实际内容而非空div占位。加了太多JS交互插件的站点要留意。
SPA老项目改造：如果已经是纯客户端渲染的SPA，不想全部重构成SSR，可以用Prerender.io这类服务做动态渲染。把中间件加到服务器配置里，爬虫请求时返回快照HTML。但这是过渡方案，新项目别走这条路。
JavaScript SEO的核心逻辑就一句话：确保Google拿到你的页面HTML时，核心内容已经在里面。做到这一点，剩下的SEO工作和普通网站没区别。做不到这一点，你发再多外链、写再好的meta标签都白费。
0 条评论