vue3 中 SEO 落地实践

网站被搜索引擎抓取，才能建立索引及快照，才能被更多人所知的。为了让网站更好的被蜘蛛抓取，想要把我们重点内容放在比较重要的位置；首要访问TDK信息，其次是网站的导航等信息

若不想被网络爬虫所爬取，可以使用robots.txt文件设置，静态网页和页面dom结构样式大变会影响seo的搜索排名

从技术层面出发推荐一下 vite-plugin-ssr 实现页面直出，可直接使用vue语法实现seo，对开发者最友好，vue官方推荐

客户端渲染和服务端渲染有什么区别呢？

客户端渲染（Client-side Rendering，CSR）是在浏览器端完成应用程序渲染。当用户访问一个CSR的应用程序时，浏览器会下载HTML、CSS和JS文件，并使用JS文件来渲染应用程序。渲染顺序是先将HTML渲染成DOM，再将CSS应用到DOM上，最后使用JS对DOM进行操作并对视图进行更新。优点是可以提高用户体验，因为每次客户端和服务器交互只需要请求数据，不需要请求整个页面，减轻了服务器的压力。但它也存在缺点，由于客户端渲染需要下载框架和执行页面脚本，会影响页面加载速度；对于 SEO（搜索引擎优化）也会存在不利影响，因为搜索引擎无法获取通过 JavaScript 动态生成的内容。

服务端渲染（Server-side Rendering，SSR）是在服务器端生成HTML并将其发送到浏览器。当用户访问一个SSR的应用程序时，服务器将渲染组件并将结果HTML发送到浏览器。此外，SSR可以提供在CSR中无法实现的SEO（Search Engine Optimization）和性能优化方案。优点是可以减少浏览器的运算量，因为页面的渲染和数据的处理都在服务器端完成，减轻了客户端的压力；同时对于 SEO（搜索引擎优化）也有利，因为服务器端生成的页面内容可以被搜索引擎抓取到。缺点是需要频繁地向服务器请求数据，降低了网站的响应速度。

DOM 层面我们可以做哪些有利于seo的优化

利用好 TKD (title，keywords，description)

<title>设置好标题</title>
<meta name="keywords" content="设置好关键字" />
<meta name="description" content="设置好描述" />

标签语义化

h1 每个页面只能有一个

设置img的 alt 属性

DOM 嵌套层级不要太深

页面所有的链接跳转最好用a标签，当整个页面的js被disable的时候，利用a标签的原生能力，页面能够正常跳转，不被影响

合理利用a标签的rel=”nofollow”=> 链接所指向的页面不被搜索引擎蜘蛛所跟踪，避免一些没必要的影响，从而提升seo排名

…

不要div+span一把索,HTML元素那么多，适合你的很多

延伸知识点：标签语义化不仅仅是为 seo ，他还有有利无障碍访问，利用原生标签能力帮我们节约代码，同时优化用户体验，更多骚操作等你去发现（比如form 元素及表单能做的那些事,关注原生标签和属性，你会发现很多意想不到的事情

SSR和CSR相结合，关键页面使用SSR，页面直出（重要内容放在html里，有利于搜索引擎爬取，不要放在js 里），非关键页面直接使用CSR
页面设计多曝光关键点（比如小说作品介绍不要展开收起，等等

关于SSR和CSR的介绍

简单说:SSR就是服务端渲染好DOM，发送给浏览器，浏览器直接渲染DOM，CSR就是服务端只给js，DOM结构由浏览器自己渲染

他们之间的区别

            ssr             csr

seo         友好            不友好

白屏问题      无              有

占用服务器资源 多              少

用户体验      差              好

解释：

用户点击跳转或者操作的时候，浏览器并不会真正的进行跳转，即不会刷新，而是通过前端路由的方式，动态的渲染页面，所以CSR用户体验会更加好

由于SSR在服务端完成页面渲染，所以他需要消耗更多的服务器资源

我们使用SSR和CSR相结合，是不是就是完美结合了，称之为同构渲染她分为首次渲染(首次访问或者刷新页面)和非首次渲染

首次渲染DOM结构，解决用户白屏问题，有利于SEO优化，但是此刻页面无法响应用户操作

非首次渲染，需要像等待js等的资源加载完成，并且等客户端激活之后，才能响应用户操作

两者相结合就完整的实现了页面的功能

服务端渲染

服务端渲染的是应用的当前的快照，他不存在数据变更后重新渲染的情况，也不是响应式的，利用这点，我们可以减少服务端渲染过程中创建的响应式数据对对象的开销，只需要获取组件要渲染的subTree即可，不需要渲染器完成真实DOM的创建

服务端渲染的过程中会忽略虚拟节点中事件相关的props，所以组件代码在客户端运行时，需要把这些事件正确的绑定到元素上面，这就叫客户端激活

客户端激活

对于同构渲染来说，组件代码会在客户端和服务端分别执行一次，在服务端，组件会被渲染为静态的HTML字符串，发送给浏览器，浏览器再把这段纯静态的HTML渲染出来。客户端在渲染的时候就不需要在渲染已经存在的dom

所以有两件很重要的事需要去做

页面重点dom元素与虚拟节点对象之间建立联系

为页面中的dom元素添加事件绑定和相关的props

关于 vite-plugin-ssr

为什么选型 vite-plugin-ssr，官方推荐的插件，没有额外的学习负担，作者能积极响应issue。关于语法和更多的使用技巧可参考官方文档

在使用中遇到哪些问题

无法响应用户操作，只有a链接可以跳转

由于直出DOM结构，碰到浏览器不支持的属性或者报错时，不会白屏，但是会丧失所有响应

1234低版本浏览器报错 Uncaught ReferenceError: globalThis is not defined ?

解决方案：

  <script>
  (function() {
      if (typeof globalThis === 'object') return;
      Object.defineProperty(Object.prototype, '__magic__', {
          get: function() {
              return this;
          },
          configurable: true
      });
      __magic__.globalThis = __magic__;
      delete Object.prototype.__magic__;
  }());
  </script>

页面报红 Hydration completed but runtime-core.esm-bundler.js:4629 contains mismatches.

激活不匹配,具体情况具体解决

若只有客户端渲染没有服务端渲染的，我们可以编写 ClientOnly 组件

利用只有客户端独有的生命周期，而服务端没有的生命周期实现，比如 onMounted

import { ref, onMounted, defineComponent } from 'vue'

export default defineComponent({
  name: 'ClientOnly',
  setup(_, { slots }) {
    const show = ref(false)
    onMounted(() => {
      show.value = true
    })
    return () => (show.value && slots.default ? slots.default() : null)
  },
})

总结

服务端渲染 (SSR)

vite-plugin-ssr 文档

vite-plugin-ssr

sunseekers