本文作者为 360 奇舞团前端开发工程师
最近在一个 Vue 项目中，发现了许多在开发前、中、后期需要特别注意的细节，以确保性能和 SEO 的最佳结合。
本文将聊聊 Vue 项目要做 SEO 优化方向侧的一些相关内容
，即搜索引擎优化，是指通过优化网站的内容、结构和技术，使其在搜索引擎的自然搜索结果中获得更高的排名，从而增加网站的曝光率和流量。SEO 涉及多方面的优化措施，包括关键词研究、内容创作、技术优化、用户体验提升等，目标是让搜索引擎更容易理解和评估你的网站内容。
要提升搜索引擎，先了解下搜索引擎的大致工作原理是什么。进而来寻找可以从哪些方面入手。
搜索引擎的工作原理
搜索引擎使用爬虫程序（例如 360 搜索的“360 蜘蛛”）抓取和索引互联网上的内容。这些爬虫会自动扫描网页、跟踪链接并更新索引，以帮助提供准确的搜索结果。为了确保你的内容能够被这些爬虫正确抓取和索引，需要对网站的结构、内容和技术进行优化。
大致流程：
客户端渲染的问题
Vue 的客户端渲染（CSR）意味着页面内容通过 JavaScript 在浏览器中动态加载。搜索引擎爬虫在抓取页面时可能无法执行 JavaScript，因此可能无法看到和索引动态加载的内容。为了解决这个问题，我们可以考虑以下优化策略：
: 在构建时生成静态 HTML 文件，确保搜索引擎爬虫可以抓取并索引所有页面内容。可以使用 插件来实现这一点。
: 在服务器端生成完整的 HTML 内容，然后将其发送到客户端，从而确保页面在加载时已经包含了所有内容。 这一框架，专门用于实现服务端渲染。
页面初始加载速度
首屏内容加载慢可能导致页面在搜索引擎中的排名下降。因为需要等到 JavaScript 执行完毕，页面内容才会显示。搜索引擎通常偏好加载速度快、用户体验好的网页。通过服务端渲染（SSR）或预渲染，可以显著提升页面的加载速度，提供更好的用户体验。
动态 Title、Meta 标签的优化
为了确保搜索引擎能够正确抓取页面的 Meta 信息，可以使用 插件动态设置页面的 。
链接和路由
Vue 项目通常是单页应用，所有页面内容通过 JavaScript 动态加载。这种路由方式可能不够友好，尤其是当页面内容需要通过 Ajax 请求来加载时，这可能影响搜索引擎的索引。
因此在 Vue 项目中进行 SEO 优化时，服务端渲染（SSR）和预渲染（Prerendering）是两个重要的技术手段。
预渲染（Prerendering）
预渲染（Prerendering）是在构建时生成静态 HTML 文件的过程。与 SSR 不同，预渲染是在构建阶段生成静态页面，而不是在每次请求时动态生成。这些静态 HTML 文件可以直接提供给搜索引擎爬虫和用户浏览器，确保内容被正确索引。
可以借助 插件进行优化,在文件引入即可，这是官网给出来的一个简单的基础demo，还有很多配置可以去官网进行查看。
在这需要注意的是，项目中有多少个路由，就需要在配置中配置几个路由，最终的产物形态会把配置的路由打包成多页的形式产出。
解决动态的渲染 title、meta的相关信息
在需要动态变更的页面中加入：
改善 SEO: 静态 HTML 文件可以确保搜索引擎爬虫能够抓取并索引所有页面内容，无需执行 JavaScript。
较低的服务器负担: 预渲染是在构建时完成的，服务器在运行时只需提供静态 HTML 文件，减轻了服务器的负担。
预渲染的配置通常比 SSR 更简单，特别适合内容较少或内容不频繁更新的页面。
如果页面内容频繁更新，可能需要定期重新生成静态 HTML 文件，以确保内容的最新性。
缺点：
1. 对于需要频繁动态更新的内容，预渲染可能不是最佳选择，因为它生成的是静态页面。
2. 有非常多的页面，例如商品页，需要seo，预渲染也是不适合的
3. 动态的更新title、描述、关键字 无效
服务端渲染（SSR）
服务端渲染（SSR）指的是在服务器端生成完整的 内容，并将这些内容发送到客户端。这意味着，用户在访问页面时，服务器会先处理和渲染所有的内容，然后将渲染后的 发送给用户浏览器。这种方式使得页面在加载时已经包含了全部的内容，浏览器只需显示这些内容，而不需要等待 完全执行。
Vue有一套自己的服务端渲染框架 -
是 的一个框架，专门设计用于实现服务端渲染。它为 应用提供了 支持，并自动处理许多配置和优化任务。
: 也提供了官方的服务端渲染工具包——，允许开发者手动实现 ，适合需要高度定制的项目。
按照官网上安装即可：
不仅在下面自动生成的路由配置，在创建组件时，只需将组件放入到下即可，引用时无需导入直接创建。
可以参考官方文档直接调取里面的API，因为是Vue深度结合的，用起来也是极为方便的。
服务端渲染解决了上面所说的预渲染的一些问题，并且 可以很好的结合项目做SSR:
提高 SEO 性能: 搜索引擎爬虫可以直接抓取服务器端生成的 HTML 内容，确保所有页面都能够被索引。
提升加载速度: 由于服务器发送的是完整的 HTML 内容，用户可以更快地看到页面内容，改善用户体验。
更好的用户体验: 初始页面加载速度较快，用户可以更快地看到和交互内容，特别是对于内容丰富的页面。
不足：
服务端渲染增加了服务器的负担，因为服务器需要处理渲染任务
实现 SSR 需要处理更多的服务器配置和开发细节，可能会增加开发和维护的复杂性
如果是一个较为成熟的vue项目，后期引入，学习成本和接入的成本较高
vue项目可以使用Nuxt.js，Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。
如果是项目开始的时候，就知道要做SEO，建议使用比较成熟的SSR框架
相关信息：
nuxt官网 https://www.nuxtjs.cn/
- END -
如果您关注前端+AI 相关领域可以扫码进群交流
扫码进群2或添加小编微信进群1😊
奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。