SEO: SSR + 客户端 Hydration

PHP+VUE React 等项目交互做seo可以使用这种方法

服务端（SSR） 渲染完整的 <title>、<meta>、<body> 内容

客户端（JS） 加载 JS 后接管页，给 DOM 绑定事件、实现交互

这种方法只要确保内容一致就不会判定作弊、不会降权，因为爬虫只认 SSR 输出的最终 HTML；
（比如 SSR 是 SEO 关键词堆砌，客户端是广告 / 垃圾内容）

Google：会渲染 JS，但优先信任 SSR 直出内容
百度：几乎只读取 SSR 直出内容，根本不会执行你后面的 JS 替换
所有搜索引擎：以首屏、服务端直出的内容为主要收录依据

DEMO

<html>
<head>
  <title>服务端渲染的标题 </title>
  <meta name="description" content="服务端描述，SEO 核心">
</head>
<body>
  <div id="app">
    <h1>文章标题</h1>
    <p>文章正文内容，收录关键</p>
  </div>

  <script>
    const app = document.getElementById('app')
    app.innerHTML = `
      <h1 style="color:red">文章标题 客户端美化</h1>
      <p>文章正文内容</p>
      <div>动态加载的轮播/推荐/组件</div>
    `
  </script>
</body>
</html>

SEO: SSR + 客户端 Hydration

评论 {{ comments.length }}