导言
最近，我对项目进行了一轮SEO优化，并在此分享总结。我们都知道，使用Vue/React等框架开发的SPA（单页面应用）天生对SEO不友好。尽管现在有各种技术手段可以改善这一问题，例如使用预渲染，但它们仍然存在一些缺陷。即便如此，Vue/React等框架的潮流仍然难以抵挡。对于一些产品，他们可能凭借其他独特的亮点而不依赖SEO普及，而对于一些需要登录才能使用的应用，SEO也可能显得不那么重要。
如果项目确实对SEO和首屏加载速度有刚性需求，同时又使用了Vue/React等技术，并希望尽量减少代码开发的附加难度，那么有一种相对直接的方式，就是采用服务端渲染的框架，比如Vue的Nuxt.js、React的Next.js/Gatsby。
因此，本文将不涉及单页面应用的SEO优化，而是专注于基于服务端渲染（SSR）/静态生成（SSG）的网站SEO优化。文章将回顾传统SEO的优化方式，并探讨基于Gatsby的SEO优化策略。
服务端渲染SSR与静态网站渲染SSG
服务端渲染（SSR）指的是客户端向服务器发送请求，服务器在运行时动态生成HTML内容，并将其返回给客户端。相比之下，静态站点渲染（SSG）则在构建时执行，将HTML在静态存储中，以便在请求时直接发送给客户端。通常情况下，静态站点在运行时更快，因为无需服务器处理，但其缺点在于任何数据更改都需要完全重建。相反，服务端渲染会动态处理数据，无需进行完全重建。
对于Vue/React等框架，引入SSR/SSG的主要原因是为了提升SEO和首屏加载速度。
搜索引擎的工作原理
搜索引擎的后台包含庞大的数据库，存储着大量关键词，每个关键词对应多个网址。这些网址是由搜索引擎蜘蛛或网络爬虫程序从互联网上收集而来。
蜘蛛在互联网上爬行，从一个链接到另一个链接，对内容进行分析，提取关键词并加入数据库。如果蜘蛛认为是垃圾或重复信息，就会舍弃。用户进行搜索时，搜索引擎能够检索与关键字相关的网址并显示给用户。
搜索引擎通过特定算法给每个含有关键字的网页进行评分排名，并返回搜索结果。这些包含关键字的内容可以是文章标题、描述、关键字、内容，甚至是链接。在蜘蛛抓取网页内容并提取关键词的过程中，一个关键问题是蜘蛛是否能够理解。如果网站内容是Flash和JavaScript等，蜘蛛就难以理解，即使关键字再贴切也无效。相反，如果搜索引擎能够识别网站内容，就会提高该网站的权重，增加对该网站的友好度。这个过程被称为搜索引擎优化（SEO）。
通过确保网站内容可被搜索引擎理解，提高网站的友好度，可以有效提升在搜索结果中的排名。
SEO目标
SEO的主要目标是使网站更容易被各大搜索引擎抓取和收录，提高对搜索引擎的友好度，确保在用户搜索相关关键词时，网站能够排名靠前，从而增加产品的曝光率和流量。
SEO优化方式
在前端领域，有很多可以参与和实施的优化方式。虽然很多SEO优化策略涉及到网站整体设计，而前端在这方面只能发挥协调作用，因为大部分这些决策在项目开始时就已经定好。例如，控制首页链接数量、扁平化目录层次、优化网站结构布局以及分页导航写法等。
对于一些注重SEO的网站，通常会设有专门的SEO部门或SEO优化工程师岗位。有关网页关键词和描述的优化工作通常交由他们来完成，而一些我们难以触及的优化方式则不在本文详细探讨，感兴趣的读者可以进一步了解。
网页TDK标签
在SEO优化中，每个页面的TDK标签都应该是独特的。这包括：
title： 当前页面的标题，强调页面的重点，尽量避免每个页面的title相同。
description： 当前页面的描述，简洁列举几个关键词，不过度堆积。
keywords： 当前页面的关键词，对网页内容进行高度概括。
由于每个页面的内容不同，TDK标签需要根据产品业务提炼出核心关键词。在React项目中，可以使用react-helmet插件来动态设置头部标签。例如，在Next.js中，也可以使用自带的Head组件。
语义化标签
根据内容的结构化，选择合适的HTML5标签可以使代码更具语义化。使用诸如header、footer、section、aside、article、nav等语义化标签可以让搜索引擎更好地解析页面内容。
合理运用h1~h6标签
在一个页面中，应该合理使用h1~h6标签。通常情况下，一个页面只应出现一次h1标签，而h2标签通常用作二级标题或文章中的小标题。其他h3-h6标签应按照顺序层层嵌套，不得断层或反序。
例如，在首页的logo上通常会使用h1标签，但如果网站设计只展示了带有logo图标而无文字的情况，可以通过将h1标签中的文字设置为font-size为零来隐藏。
图片的alt属性
一般情况下，除非图片仅用于纯展示，没有任何实际信息，否则应该为img标签添加alt属性。这有助于搜索引擎蜘蛛抓取到图片的相关信息。当网络无法加载图片或者图片地址失效时，alt属性的内容将替代图片呈现。
a标签的title属性
同样，a标签的title属性充当提示文字的作用。当鼠标悬停在超链接上时，将显示该属性的文字提示。通过添加title属性，可以微小地增强SEO效果。
404 页面
404页面首先对用户体验十分重要，它能够提供友好的界面，避免用户因为莫名其妙的提示而感到困扰。其次，对搜索引擎蜘蛛也非常友好，不会因为页面错误而停止抓取，而是能够继续返回抓取网站的其他页面，有助于维持整体的搜索引擎流量。
nofollow 属性的使用
nofollow属性有两种常见的用法：
用于meta元标签，告诉爬虫该页面上的所有链接都无需追踪。
用于a标签，告诉爬虫该链接无需追踪。
通常，nofollow属性在a标签中使用较多。它主要有三个作用：
集中网页权重：为了将权重集中并分配给其他必要的链接，使用rel='nofollow'告诉蜘蛛不要追踪某些链接，以避免爬虫抓取无关紧要的页面，提高爬虫的抓取效率。一旦蜘蛛抓取了外部链接，就不会再回到当前页面。
付费链接：为了防止付费链接对搜索引擎排名产生影响，搜索引擎如Google建议使用nofollow属性。
防止不可信的内容：在博客或评论中，为了避免页面链接到垃圾站点或拉圾页面，nofollow属性可以用来防止不可信的内容。
建立robots.txt文件
robots.txt文件包含一条或多条规则，每条规则指定特定的抓取工具是否可以抓取网站中的特定文件路径。
关键词解释：
User-agent 表示网页抓取工具的名称。
Disallow 表示不应抓取的目录或网页。
Allow 表示应该抓取的目录或网页。
Sitemap 网站的站点地图的位置。
User-agent: * 表示对所有搜索引擎都有效。你也可以指定特定搜索引擎，如 User-agent: Baiduspider 表示百度搜索引擎，以及 User-agent: Googlebot 等。通过这些设置，可以为不同搜索引擎配置访问内容的规则。
参考例子有百度的robots.txt、京东的robots.txt等。robots文件是搜索引擎访问网站时的第一个文件，根据其中设置的规则，进行网站内容的爬取。通过使用Allow和Disallow来控制访问目录和文件，引导爬虫抓取网站信息。
robots.txt主要用于避免网站收到过多的请求，告知搜索引擎应该抓取哪些页面以及不应该抓取哪些页面。如果希望某些页面不被抓取，可以通过Disallow设置。这有助于实现有针对性的SEO优化，向搜索引擎展示有用的链接，同时保护敏感或无用的文件。
即使希望搜索引擎抓取网站上的所有内容，也应该设置一个空的robots文件。因为蜘蛛在抓取网站内容时首先访问robots文件，如果文件不存在，服务器会记录一条404错误日志。创建一个robots.txt文件并放置在网站根目录下是一个良好的实践。
空的robots.txt文件：
如果想更详细了解robots.txt文件，可以查看以下资源：
通常，涉及目录较多的情况下，网站工具会动态生成robots.txt文件，例如使用生成robots.txt。
建立网站地图Sitemap
当一个网站刚刚上线时，可能外部链接还不够多，爬虫难以发现所有网页；或者网页之间缺乏良好的衔接关系，爬虫可能会错过一些页面。这时候，Sitemap就变得尤为重要。
Sitemap是一个对网站栏目和链接进行分类的文件，能够帮助搜索引擎全面收录站点的网页地址。它提供了站点网页地址的权重分布信息以及内容更新情况，从而提高爬虫的爬取效率。一个Sitemap文件中的网址数量不能超过5万个，文件大小也不能超过10MB。
Sitemap文件可以包含两种格式：HTML（面向用户）和XML（面向搜索引擎）。最常见的是XML文件，它使用6个标签，其中关键标签包括链接地址（loc）、最后修改时间（lastmod）、更新频率（changefreq）和索引优先权（priority）。
爬虫如何知道网站是否提供了Sitemap文件呢？这就是通过robots.txt文件中的路径设置。
首先，在网站的根目录下查找robots.txt文件，例如腾讯网的robots.txt如下：
这里找到了Sitemap的路径。
Sitemap XML文件示例（只列出一部分）：
loc：页面永久链接地址，可以是静态页面也可以是动态页面。
lastmod：页面的最后修改时间，非必填项。搜索引擎根据此项与changefreq相结合，判断是否重新抓取loc指向的内容。
一般来说，网站开发完成后，Sitemap会通过自动生成工具来创建，比如Sitemap生成工具。这有助于确保搜索引擎可以更好地理解和抓取网站的内容。
结构化数据
结构化数据（Structured Data）是一种标准化的格式，通过这种格式，可以向Google提供关于网页含义的清晰信息，帮助搜索引擎更好地理解网页内容。通常使用JSON-LD格式，以下是一个Google官方示例代码：
这个示例明确指定了网页属于"食谱"类型，包含了作者、发布时间、描述和烹饪时间等信息。通过这种方式，Google搜索结果可能会展示这些提示信息，提高用户在搜索中找到相关结果的几率。
Google官方提供了各种字段用于描述不同类型的信息，通过查阅相关文档，可以轻松按照规定格式使用。
需要注意的是，这种SEO优化方式通常针对Google搜索引擎，因此设置了结构化数据的网站通常面向国际用户，而不仅限于国内。结构化数据是一种SEO优化方式，还有一种是AMP网页，对此感兴趣的可以了解一下AMP。
Google还提供了测试工具Structured Data Testing Tool，通过输入网站网址，可以检查网站是否设置了结构化数据。
性能优化
性能优化涉及多个方面，包括减少HTTP请求、控制页面大小、懒加载、利用缓存等等。这些优化措施旨在提高网站加载速度，提供更好的用户体验。这不仅是SEO的问题，而是开发中普遍需要关注的事项。
当网站加载速度过慢时，搜索引擎爬虫可能会因超时而离开，因此性能优化是确保网站在搜索引擎中表现良好的关键因素。
Gatsby 中的 SEO 优化
虽然 Gatsby 本身采用静态生成方式，对于 SEO 已经具备一定的优势，但为了进一步提升网站在搜索引擎中的表现，仍然需要进行 SEO 优化。
Gatsby 社区强大，提供了许多插件，通过使用这些插件，可以轻松快速地配置 SEO 优化。以下是一些常用的插件：
gatsby-plugin-robots-txt
首先，在 gatsby-config.js 文件中进行配置：
通过这个插件，可以方便地生成 robots.txt 文件，控制搜索引擎爬虫对网站的访问。
gatsby-plugin-sitemap
同样，在 gatsby-config.js 文件中进行配置：
这个插件用于生成网站的 sitemap，提供给搜索引擎一个清晰的网站结构，有助于更好地索引和理解网站内容。
Gatsby 网页 TDK 设置
在 Gatsby 中，通过使用标准脚手架和参考官方文档，我们可以轻松地设置网页的标题（Title）、描述（Description）和关键字（Keywords），以优化网页的 SEO。
为此，通常在 Gatsby 项目中会创建一个名为 SEO.js 的文件，该文件包含了用于设置网页头部信息的方法。以下是一个示例的 SEO.js 文件：
在需要设置网页头部信息的页面模板文件中，只需引入 SEO.js 并传递相应的变量参数即可完成 TDK 的设置。这样的封装有助于在整个项目中保持一致的 SEO 设置，提高代码的可维护性。
结构化数据在 Gatsby 项目中的应用
在 Gatsby 项目中，为了提高 SEO 效果，我们可以使用结构化数据（Structured Data）来描述不同类型页面的内容。以下是一个示例，展示如何在项目中利用 Gatsby 构建结构化数据。
首先，在项目的根目录下创建一个文件 ./src/components/JsonLd.js，该文件用于封装外部包含的 script 标签作为组件。
接着，我们在 ./src/utils/json-ld/ 目录下创建多个文件，分别用于描述不同类型的结构化数据。
./src/utils/json-ld/article.js - 文章详情结构化数据描述
./src/utils/json-ld/item-list.js - 文章列表结构化数据描述
./src/utils/json-ld/organization.js - 公司组织结构化数据描述
在页面模板文件中，引入所需的结构化数据类型文件，并通过 JsonLd 组件将数据传递给页面头部。
通过这样的设置，我们可以有效地使用结构化数据来提高网站在搜索引擎中的可见性和搜索结果的质量。
Lighthouse：网站性能优化的得力工具
如果你关心自己网站的性能表现和搜索引擎优化（SEO），那么 Lighthouse 就是你不可或缺的利器。通过在 Chrome 浏览器中安装 Lighthouse 插件，你可以轻松地生成网站性能和 SEO 方面的详细报告。
安装 Lighthouse 插件后，打开 Chrome 浏览器的开发者工具（F12），进入你的网站，并点击 "Generate report"，Lighthouse 将为你的网站生成相应的报告。
报告的内容包括：
性能方面的建议：
在报告的下方，你会看到一些建议，针对性能和 SEO 等方面。你可以根据这些建议来改善你的代码，提高网站的加载速度和用户体验。
SEO 优化建议：
Lighthouse 不仅关注性能，还关注网站的搜索引擎优化。通过分析报告中的 SEO 部分，你可以了解如何进一步优化你的网站，提高在搜索引擎中的排名。
文章到这里就结束了。希望这篇文章对你更深入了解 Lighthouse 工具和 SEO 优化有所帮助。SEO 的优化方法多种多样，而上文提到的只是其中一小部分。事实上，SEO 优化的目标是吸引更多用户点击和使用网站。如果网站提供高质量的内容、良好的用户体验以及出色的性能，用户将自然而然地成为你的推广者，这比单纯的 SEO 优化更为可靠和持久。
