如何为可嵌入第三方站点的Vue应用做SEO优化？

Google能否正常爬取客户端渲染的Vue应用内容 #

目前Googlebot已经支持执行JavaScript、抓取客户端渲染生成的内容，只要满足以下条件就能正常识别库存内容：

• Vue应用和对应的库存API不要拦截Googlebot的UA请求，不要设置额外的权限校验
• 库存列表的渲染逻辑要在应用初始化后自动触发，不要绑定到点击、滚动等用户交互行为后才执行
• 不要使用过度复杂的阻塞型JS逻辑，Googlebot给单页分配的JS执行资源有限，超时会导致内容爬取失败
  如果要进一步提升收录稳定性，可以把通用Vue应用改造为服务端渲染（SSR）或静态站点生成（SSG）模式，根据经销商ID预生成对应库存内容，爬取成功率会更高

iframe是不是不佳的选择 #

iframe方案非常不推荐，核心原因有：

• iframe内的内容会被Google判定为你方托管Vue应用的域名下的内容，不会计入经销商站点的内容权重，完全达不到你们的收录需求
• 还会额外带来加载速度慢、移动端适配异常、跨域安全风险等问题
  更推荐的嵌入方式是让经销商粘贴如下代码片段到他们页面需要展示库存的位置，渲染出的内容会直接挂载到经销商站点的DOM树中，会被判定为经销商站点的原生内容：

<!-- 经销商站点粘贴的嵌入代码 -->
<div id="dealer-inventory" data-dealer-id="当前经销商的唯一ID"></div>
<script src="你方托管的通用Vue应用JS资源地址"></script>

测试Google实际爬取内容的方法 #

你可以用以下官方工具验证爬取结果：

• 用Google Search Console的「URL检查」工具，输入经销商站点的页面地址，选择「测试实时URL」，执行完成后查看「已渲染的页面」和「抓取的HTTP响应」，就能直接看到Googlebot实际爬取到的内容，还能定位JS执行错误
• 也可以在本地浏览器中先禁用JavaScript访问经销商页面，再开启JS对比渲染结果，模拟爬虫的执行逻辑，快速排查内容加载问题

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