SPA网站的SEO实践

背景观察基于create-react-doc构建的文档站点，发现网页代码裸露（见下图）。这显然是单页应用程序(SPA)站点的一个常见问题-这对文档的可搜索性(SEO)不利。SPA网站是不是做不了SEO了？那为什么Gatsby、nuxt等框架会成为很多博主搭建博客的首选呢？启用S??EO的此类框架的技术原理是什么？在好奇心的驱使下，作者尝试在creat-react-doc上进行一次SEO赋能之旅。在练习搜索引擎优化之前，先从理论上分析为什么单页应用无法被搜索引擎搜索到。核心是爬虫蜘蛛在爬取过程中不会执行网页中的JS逻辑，所以隐藏在JS中的跳转逻辑不会被执行。看现在SPA站点的打包代码，除了一个根目录index.html，其他都是注入JS逻辑，浏览器自然不会对其进行SEO。此外，详细的搜索引擎优化是一门比较复杂的科学。如果您对SEO优化比较陌生，建议阅读《搜索引擎优化（SEO）新手指南》一文。Google搜索中心提供了17种最佳做法和33种应避免的做法的完整列表。这也是笔者近期实践的一部分。.SPA站点SEO实战案例在轻文档站点的背景下，我们暂时不考虑SSR方案。笔者调研了市面上文档站点的SEO方案后，归纳为以下四类：静态模板渲染方案404重定向方案SSG方案预渲染方案静态模板渲染方案Hexo是最典型的静态模板渲染方案，以及这类框架需要指定一种特定的模板语言（如pug）来开发主题，从而达到直接输出网页内容的目的。404重定向方案404重定向方案的原理主要是利用GitHubPages的404机制进行重定向。典型案例包括spa-github-pages和sghpa。但不幸的是，谷歌在2019年调整了其爬虫算法，因此这种重定向方案目前不利于SEO。spa-github-pages的作者也说过，如果你需要SEO，使用SSG计划或付费计划Netlify。SSG方案SSG方案的全称是staticsitegenerator，中文可以翻译为静态路由方案。社区中的nuxt、Gatsby等框架的SEO赋能技术，无一例外都可以归为此类SSG解决方案。以nuxt框架为例，它在常规路由的基础上，通过执行nuxtgenerate命令将vue文件转化为静态网页。示例：-|页数/---|关于.vue/---|index.vue/变为静态：-|距离/---|关于/-----|index.html---|index.html静态路由后，此时的文档目录结构可以被任何静态站点服务商托管。预渲染方案经过上面SSG方案的分析，SPA站点优化的关键已经跃然纸上——静态路由。与nuxt、Gatsby等框架对常规路由有限制相比，create-react-doc在目录结构的组织上灵活自由。它的建站理念是文件就是网站，迁移已有的markdown文档也很方便。以博客项目结构为例，其文档结构如下：-|基本技能/---|基本/-----|DOM.md-----|HTML5.md应该变成：-|基本技能/---|基本/-----|DOM------|index.html-----|HTML5--------|index.html经过研究，思路和prerender-spa-plugin预渲染方案一拍即合。预渲染方案的原理如下图所示：至此，技术选型确定为使用预渲染方案实现SSG。预渲染方案实践create-react-doc预渲染方案实践中的步骤简单总结如下（完整改动见mr）：将hash路由转化为history路由。因为历史路由结构自然匹配文档静态目录结构。exportdefaultfunctionRouterRoot(){return(-+-+)}在开发环境和生产环境的基础上新增预渲染环境环境，以及用于环境匹配的路由。主要解决主域名下资源文件与子路径的对应关系。过程比较曲折，有兴趣的同学可以看issue。constifProd=env==='prod'+constifPrerender=window.__PRERENDER_INJECTED&&window.__PRERENDER_INJECTED.prerender+constifAddPrefix=ifProd&&!ifPrerender{...}}/>兼容webpack5中的prerender-spa-plugin，正式版目前没有支持webpack5，详见issue，作者有预渲染后回调的需求。因此，当前fork的一个版本已经发布，解决了上述问题。经过以上步骤的实践，终于在SPA站点实现了静态路由。SEO优化加buff，网站秒开？SEO优化就到这里，我们来看看站点优化前后FP、FCP、LCP等指标数据的变化。以博客站点为例，优化前后的索引数据如下（数据索引统计来自不使用阶梯访问gh-pages）：优化前：在访问预渲染方案之前，时间节点第一张图（FP，FCP）大概8s左右，LCP大概17s左右。优化后：接入预渲染方案后，第一个绘制时间节点在1s以内开始，LCP在1.5s以内。优化前后对比：首屏绘制速度提升8倍，最大内容绘制速度提升11倍。我想优化SEO，但我得到了另一种优化网站性能的方法。生成站点地图Sitemap在完成预渲染实现站点静态路由后，离SEO的目标又近了一步。暂且不谈SEO优化的细节，让我们直奔SEO的核心，站点地图。Sitemap的格式和各字段的含义简单解释如下：具体链接。每条数据必须包含和，必填-->http://www.yoursite.com/yoursite.html2021-03-06daily0.8上面sitemap中，lastmod,changefreq,priority字段有对SEO没有影响那么重要，可以看how-to-create-a-sitemap根据上面的结构，作者开发了create-react-doc站点地图生成包crd-generator-sitemap，其逻辑是将预渲染的路由路径拼接成上述格式。用户只需要在站点根目录下的config.yml中添加如下参数，即可在自动发布过程中自动生成站点地图。seo:google:true将生成的站点地图提交到GoogleSearchConsole试一试，最终验证优化前后Google搜索站点的效果。优化前：只找到一条数据。优化后：搜索找到站点地图中声明的位置数据。至此，使用SSG优化SPA站点实现SEO的完整流程已经完全实现。后续剩下的就是参考搜索引擎优化（SEO）新手指南，做一些SEO细节的优化，支持更多的搜索引擎。总结本文从SPA站点SEO的实现入手，介绍了SEO的基本原理，SPA站点SEO的4个实践案例，并结合create-react-docSPA框架进行了一次完整的SEO实践。如果本文对您有帮助，欢迎star和反馈。相关链接create-react-docwhy-is-my-website-not-showing-up-on-google/ATechnicalGuidetoSEOWithGatsby.js优化方向：单页应用多路由预渲染指南除了SSR，没有别的办法了吗？基于SSR/SSG的前端SEO优化原始出处