乐趣区

关于seo:SEO-在-SPA-站点中的实践

jiezi

背景

察看基于 create-react-doc 搭建的文档站点, 发现网页代码赤裸裸的一片(见下图)。这显然是单页利用 (SPA) 站点的通病 —— 不利于文档被搜索引擎搜寻 (SEO)。

难道 SPA 站点就无奈进行 SEO 了么, 那么 Gatsby、nuxt 等框架又为何能作为不少博主搭建博客的首选计划呢, 此类框架赋能 SEO 的技术原理是什么呢? 在好奇心的驱动下, 笔者尝试对 creat-react-doc 进行赋能 SEO 之旅。

搜索引擎优化

在实际之前, 先从实践上剖析为何单页利用不能被搜索引擎搜寻到。外围在于 爬虫蜘蛛在执行爬取的过程中, 不会去执行网页中的 JS 逻辑 , 所以 暗藏在 JS 中的跳转逻辑也不会被执行。

查看以后 SPA 站点打包后的代码, 除了一个根目录 index.html 外, 其它都是注入的 JS 逻辑, 因而浏览器天然不会对其进行 SEO。

此外, 搜索引擎详优化是一门较简单的学识。如果你对 SEO 优化比拟生疏, 倡议浏览搜索引擎优化 (SEO) 老手指南 一文, Google 搜寻核心给出了全面的 17 个 最佳做法, 以及 33 个 应防止的做法, 这也是笔者近期在实际的局部。

SEO 在 SPA 站点中的实际案例

在轻文档站点的背景前提下, 咱们暂不思考 SSR 计划。

对市面上文档站点的 SEO 计划调研后, 笔者总结为如下四类:

  • 动态模板渲染计划
  • 404 重定向计划
  • SSG 计划
  • 预渲染计划

动态模板渲染计划

动态模板渲染计划以 hexo 最为典型, 此类框架须要指定特定的模板语言 (比方 pug) 来开发主题, 从而达到网页内容直出的目标。

404 重定向计划

404 重定向计划的原理次要是利用 GitHub Pages 的 404 机制进行重定向。比拟典型的案例有 spa-github-pages、sghpa。

然而遗憾的是 2019 年 Google 调整了爬虫算法, 因而此类重定向计划在当下是无利于 SEO 的。spa-github-pages 作者也示意如果须要 SEO 的话, 应用 SSG 计划或者付费计划 Netlify。

SSG 计划

SSG 计划全称为 static site generator, 中文可译为 路由动态化计划。社区上 nuxt、Gatsby 等框架赋能 SEO 的技术无一例外能够归类此类 SSG 计划。

以 nuxt 框架为例, 在 约定式路由 的根底上, 其通过执行 nuxt generate 命令将 vue 文件转化为动态网页。

例子:

-| pages/
---| about.vue/
---| index.vue/

动态化后变成:

-| dist/
---| about/
-----| index.html
---| index.html

通过路由动态化后, 此时的文档目录构造能够托管于任何一个动态站点服务商。

预渲染计划

通过上文对 SSG 计划的剖析, 此时 SPA 站点的优化要害曾经跃然纸上 —— 动态化路由 。相较于 nuxt、Gatsby 等框架存在约定式路由的限度, create-react-doc 在目录构造上的组织灵便自在。它的建站理念是 文件即站点, 同时它对存量 markdown 文档的迁徙也非常便捷。

以 blog 我的项目构造为例, 其文档构造如下:

-| BasicSkill/
---| basic/
-----| DOM.md
-----| HTML5.md

动态化后应该变成:

-| BasicSkill/
---| basic/
-----| DOM
-------| index.html
-----| HTML5
-------| index.html

通过调研, 该构思与 prerender-spa-plugin 预渲染计划一拍即合。预渲染计划的原理能够见如下图:

至此技术选型定下为应用预渲染计划实现 SSG。

预渲染计划实际

create-react-doc 在预渲染计划实际的步骤简略详情如下(残缺改变可见 mr):

  • 革新 hash 路由为 history 路由。因为 history 路由构造与文档动态化目录构造人造匹配。
export default function RouterRoot() {
  return (
-    <HashRouter>
+    <BrowserRouter>
      <RoutersContainer />
-    </HashRouter>
+    </BrowserRouter>
  )
}
  • 在开发环境、生成环境的根底上新增 预渲染环境 , 同时对路由进行环境匹配。其次要解决了 资源文件 与主域名下的子门路 的对应关系。过程比拟波折, 感兴趣的同学能够见 issue。
const ifProd = env === 'prod'
+ const ifPrerender = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender
+ const ifAddPrefix = ifProd && !ifPrerender

<Route
  key={item.path}
  exact
-  path={item.path}
+  path={ifAddPrefix ? `/${repo}${item.path}` : item.path}
  render={() => { ...}}
/>
  • 兼容 prerender-spa-plugin 在 webpack 5 的应用。

官网版本以后未反对 webpack 5, 详见 issue, 同时笔者存在对预渲染后执行回调的需要。因而以后 fork 了一份版本 进去, 解决了以上问题。

通过上述步骤的实际, 终于在 SPA 站点中实现了动态化路由。

SEO 优化附加 buff, 站点秒开?

SEO 优化至此, 来看下站点优化前后 FP、FCP、LCP 等指标数据的变动。

以 blog 站点为例, 优化前后的指标数据如下(数据指标统计来自未应用梯子拜访 gh-pages):

优化前: 接入预渲染计划前, 首次绘制(FP、FCP) 的工夫节点在 8s 左右, LCP 在 17s 左右。

优化后: 接入预渲染计划后, 首次绘制工夫节点在 1s 之内开始, LCP 在 1.5s 之内。

比照优化前后: 首屏绘制速度晋升了 8 倍, 最大内容绘制速度晋升 11 倍。本想优化 SEO, 后果站点性能优化的形式又 get 了一个。

生成站点地图 Sitemap

在实现预渲染实现站点路由动态化后, 间隔 SEO 的指标又近了一步。暂且抛开 SEO 优化细节, 单刀直入 SEO 外围腹地 站点地图。

站点地图 Sitemap 格局与各字段含意简略阐明如下:

<?xml version="1.0" encoding="utf-8"?>
<urlset>
  <!-- 必填标签, 这是具体某一个链接的定义入口，每一条数据都要用 <url> 和 </url> 蕴含在外面, 这是必须的 -->
  <url>
    <!-- 必填, URL 链接地址, 长度不得超过 256 字节 -->
    <loc>http://www.yoursite.com/yoursite.html</loc>
    <!-- 能够不提交该标签, 用来指定该链接的最初更新工夫 -->
    <lastmod>2021-03-06</lastmod>
    <!-- 能够不提交该标签, 用这个标签通知此链接可能会呈现的更新频率 -->
    <changefreq>daily</changefreq>
    <!-- 能够不提交该标签, 用来指定此链接绝对于其余链接的优先权比值，此值定于 0.0-1.0 之间 -->
    <priority>0.8</priority>
  </url>
</urlset>

上述 sitemap 中, lastmod、changefreq、priority 字段对 SEO 没那么重要, 能够见 how-to-create-a-sitemap

根据上述构造, 笔者开发了 create-react-doc 的站点地图生成包 crd-generator-sitemap, 其逻辑就是将预渲染的路由门路拼接成上述格局。

应用方只需在站点根目录的 config.yml 增加如下参数便能够在自动化发版过程中主动生成 sitemap。

seo:
  google: true

将生成的站点地图往 Google Search Console 中提交试试吧,

最初验证下 Google 搜寻站点优化前后成果。

优化前: 只搜寻到一条数据。

优化后: 搜寻到站点地图中申明的地位数据。

至此应用 SSG 优化 SPA 站点实现 SEO 的残缺流程残缺实现了一遍。后续便剩下参照 搜索引擎优化 (SEO) 老手指南 做一些 SEO 细节方面的优化以及反对更多搜索引擎了。

小结

本文从 SPA 站点实现 SEO 作为切入点, 先后介绍了 SEO 的基本原理, SEO 在 SPA 站点中的 4 种实际案例, 并联合 create-react-doc SPA 框架进行残缺的 SEO 实际。

如果本文对您有所帮忙, 欢送 star、反馈。

相干链接

  • create-react-doc
  • why-is-my-website-not-showing-up-on-google/
  • A Technical Guide to SEO With Gatsby.js
  • 优化向：单页利用多路由预渲染指南
  • 除了 SSR，就没有别的方法了吗？
  • 基于 SSR/SSG 的前端 SEO 优化

原文出处

退出移动版