需求：界面需要实现 SEO

SEO（Search Engine Optimization），即搜索引擎优化，是指通过对网站的内容、结构、代码等进行优化，从而提高网站在搜索引擎中的排名和曝光度，进而吸引更多的流量和用户。

要素

SEO有几个要素：

多页面
title、描述、关键字

缘故

单页面应用通常使用JavaScript和AJAX技术来动态加载内容，因此搜索引擎爬虫难以抓取和索引页面的内容。这意味着搜索引擎可能无法正确地理解和评估网站的内容，从而导致排名下降。

相比之下，多页面应用通常具有独立的URL和HTML文件，每个页面都有自己的标题、描述和关键词。这使得搜索引擎易于理解和索引网站的内容，并能够更好地评估网站的质量和相关性。

另外，多页面应用还可以提供更好的用户体验，因为它们可以快速加载每个页面，而不需要在每次更改时重新渲染整个页面。这可以提高网站的速度和性能，从而提高用户满意度和留存率。

所以，虽然单页面应用也可以实现SEO，但多页面应用更为友好，因为它们可以更好地满足搜索引擎的需求，并提供更好的用户体验。

补充

这里爬虫抓取的页面不是控制台的dom结构哈

是点击右键->查看网站源码

这个是nuxtJs官网的源码，你会发现这个dom结构会显示，内容就会被爬虫抓取到

这个是vue.js官网的，你看这就是SPA显示的源码，能抓到的内容不多

解决方式

第一种（SPA实现预渲染）

使用插件实现打包多页面

prerender-spa-plugin

1、vue项目中安装prerender-spa-plugin

npm install prerender-spa-plugin -s

2、vue.config.js配置在vue.config.js文件中，导入prerender-spa-plugin插件：

const PrerenderSPAPlugin = require('prerender-spa-plugin');

配置插件：在module.exports中添加插件的配置：

module.exports = {
  // ...其他配置项

  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 配置项
      })
    ]
  }
};

配置插件选项：在PrerenderSPAPlugin的构造函数中，可以配置一些选项来指定预渲染的路由、输出目录等。以下是一个示例配置：

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: ['/', '/about', '/contact'], // 需要预渲染的路由（就是打包的多页面）
  renderer: new Renderer({
    // renderer 配置项
  })
})

使用插件实现修改title、关键字、描述

安装 npm install vue-meta-info -s
到页面组件中配置

metaInfo:{ 
    title:"努力" 
    meta:[{
        name:'关键字，前端'， content:'描述'
    }]
}

解决问题

打包多页面
每个页面单独的title、关键字
接口数据在html生成之前就放在页面上，爬虫可以爬到数据

存在问题

预渲染无法配置动态路由
如果title、关键字是接口数据（动态数据）配置到页面组件metaInfo中，会报错

总结

适合做一个项目中只有几个页面需要做SEO项目

第二种（服务端渲染SSR）

以NuxtJs示例

具体流程如下：

用户通过浏览器或其他客户端设备访问网站。
客户端发送HTTP请求到服务端服务器。
服务端服务器接收到请求后，将请求转发给Node服务。
Node服务接收到请求后，根据请求的URL和路由配置，调用相应的Nuxt.js页面组件来处理请求。
Nuxt.js页面组件执行相关的数据获取、异步操作等，并生成对应的HTML响应。
Node服务将生成的HTML响应返回给服务端服务器。
服务端服务器将HTML响应返回给客户端。
客户端接收到HTML响应后，渲染页面内容，并展示给用户。

方式差异

前端预渲染（Prerendering）和服务器端渲染（Server-Side Rendering，简称SSR）是两种常见的前端渲染方式，它们有一些区别和适用场景。

预渲染（Prerendering）：预渲染是指在构建时生成静态HTML文件，这些文件包含了页面的内容。当用户请求该页面时，服务器直接返回预先生成的静态HTML文件，而不需要在客户端进行额外的数据获取和渲染操作。预渲染通常使用静态网站生成器（如Gatsby、Next.js等）或构建工具（如Webpack）来实现。

优点：
- SEO友好：搜索引擎可以直接抓取并索引预渲染的静态HTML文件，有利于页面的搜索排名。
- 首屏加载快：由于预渲染的静态HTML文件已经包含了页面内容，用户打开页面时能够立即看到内容，提供更好的用户体验。
- 简化服务器压力：预渲染将渲染工作提前到构建阶段完成，减轻了服务器的负担。
缺点：
- 不适用于动态内容：预渲染生成的静态HTML文件无法包含动态内容，对于需要频繁更新或依赖用户交互的页面，预渲染可能不太适合。
服务器端渲染（Server-Side Rendering，简称SSR）：服务器端渲染是指在服务器端将页面的内容渲染成HTML，并将完整的HTML响应发送给客户端。客户端收到HTML响应后，可以直接展示页面内容，然后再加载和执行前端代码来增强交互性。服务器端渲染通常使用框架（如React、Vue等）的服务器端渲染模式或专门的服务器端渲染框架（如Next.js、Nuxt.js等）来实现。

优点：
- 动态内容支持：由于服务器端渲染是在每次请求时生成HTML，因此可以包含动态内容，如从数据库获取数据、根据用户权限生成不同的内容等。
- 更好的可访问性和SEO：由于服务器端渲染生成的HTML包含了完整的页面内容，搜索引擎能够更好地理解和索引页面，同时也有利于屏幕阅读器等辅助技术的使用。
缺点：
- 首屏加载慢：由于服务器端渲染需要在每次请求时生成HTML，相比预渲染，首屏加载时间可能会稍慢一些。
- 对服务器压力较大：服务器端渲染需要在每次请求时进行渲染，对服务器的负载要求较高。

所以，预渲染适用于静态内容较多、不需要频繁更新的页面，可以提供更快的首屏加载和更好的SEO效果；而服务器端渲染适用于动态内容较多、需要根据用户请求生成不同内容的页面，可以提供更好的可访问性和动态交互。选择哪种方式取决于具体的项目需求和优化目标。

总结

菜鸟的学习日记，滴水之积成海，点滴之聚成川。

如何 SEO