前端SEO

发表于

前端流行框架如Vue、React大多采用单页面形式，针对SEO会有那些问题？

爬虫存在的问题

目前Google的长青状态的爬虫以支持动态解决JavaScript，渲染时间大概为5s。但是相对来说，必应、百度等其它爬虫依旧会有这个问题。

以下技术方案以vue举例.

单页面存在的问题

单页面应用的页面一般为单页面public/index.html，内容为下面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

通过JavaScript解析动态渲染为需要展示的页面

  1. 爬虫不会解析JavaScript，页面节点爬取简单
  2. 不能单独设置TDK（title、description、description）
  3. 客户端渲染，首屏加载相对服务端慢，但是对服务端压力小

相对需求

  1. 多页面，可以实现根据不同页面实现不同的节点，便于爬取
  2. 可设置动态TDK

解决方案-SSR

针对vue、react等技术，社区提供了成熟的实现方案
方案

  • Vue技术栈 — nuxtjs
  • React技术栈 — nextjs

简易流程

  1. 用户通过浏览器预览页面，浏览器请求node服务
  2. node服务上，nuxtjs通过asyncData、fetch等方法异步请求后端服务数据，预渲染页面，返回附带html的页面到浏览器
  3. 浏览器交互时，执行vue的如: Create、mounted、destroy等生命周期。
  4. 每个page/页面.vue可以根据head单独设置不同的TDK，可以动态设置渲染

要求限制

  • 开发中的限制。浏览器端特定的代码只能在某些生命周期钩子中使用；一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。
  • 更多的与构建配置和部署相关的要求。服务端渲染的应用需要一个能让 Node.js 服务器运行的环境，不像完全静态的 SPA 那样可以部署在任意的静态文件服务器上。
  • 更高的服务端负载。在 Node.js 中渲染一个完整的应用要比仅仅托管静态文件更加占用 CPU 资源，因此如果你预期有高流量，请为相应的服务器负载做好准备，并采用合理的缓存策略。
  • node环境
  • vue版本

解决方案-预渲染

针对多页面通过prerender-spa-plugin库实现。使用详情参见
针对TDK可以通过vue-meta库实现。使用详情参见
应用场景

  • 为数不多页面的seo，例如关于我们、联系我们之类的
  • seo要求不高

存在的问题

  • 在本地router.js文件中配置好的路由，可以进行单独的页面预渲染，不能是动态路由，每添加一个预渲染页面就需要手动在配置项新增一个
1
2
3
4
5
6
7
8
module.exports = {plugins: [
  ...
  new PrerenderSPAPlugin({
  // Required - The path to the webpack-outputted app to prerender.
  staticDir: path.join(__dirname, 'dist'),
  // Required - Routes to render.
  routes: [ '/', '/about', '/some/deep/nested/route' ],})
]}
  • 可以通过vue-meta实现每个页面的TDK，但不能为动态渲染，业务场景如商品详情页中，该页面的title应该为请求接口后拿到的商品名，此时不能实现。

解决方案-无头浏览器爬取

本着爬虫不能解析JavaScript的原则，如果实现页面的解析爬取并返回给爬虫，就能做到针对原有项目最小改动（甚至无改动）的情况下，实现对seo需求的实现。
chrome爬虫本身可以解析JavaScript，所以提供了一套解决方案puppeteer.js。
puppeteer为chromium官方binding，其他语言也有类似binding，例如go和rust。

大概功能

  • 官方文档使用详情参见
  • 可实现的大概功能
  • 网页截图或者生成 PDF
  • 爬取 SPA 或 SSR 网站
  • UI 自动化测试，模拟表单提交，键盘输入，点击等行为
  • 捕获网站的时间线，帮助诊断性能问题
  • 创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例
  • 测试 Chrome 扩展程序
  • …

简易实现

express.zip.

存在的问题

  • node环境
  • 单页面资源依靠相对路径，爬取资源失败
  • 爬取失败存在程序奔溃，持久化处理问题

解决方案-静态化

nuxtjs可以实现静态化打包，不同于单页面的CSG的方案，也就是SCG方案。

  1. 克隆 nuxtjs.org repository
  2. 使用 npm install 命令安装依赖
  3. 运行 npm run generate
  4. 生成 dist 目录
    Nuxt3可以实现混合渲染，针对不同的路由设置不同的渲染。

多页面应用的可行性

vue-cli可以配置设置为多页面应用

  • 同单页面一样，设置为多页面依旧是单一节点html
  • 可以为不同页面设置静态化TDK，固定不可变更
  • seo问题依旧存在
------本文结束 感谢阅读------