共计 3526 个字符，预计需要花费 9 分钟才能阅读完成。
背景
察看基于 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 优化
原文出处
