前端工程师们都知道，搜索引擎优化 (SEO) 对于网站流量和排名的重要性。然而，如何为一个 Headless CMS 系统制定有效的 SEO 策略，这可不是一件简单的事情。
在这篇文章中，我们将会探讨如何构建一个 SEO 友好的 Headless CMS，包括优化下沉渲染的技巧和方法。我们将会讲解如何减少加载时间，如何使网站内容易于理解、可访问、可跟踪，在页面标记中使用正确的元数据，以及如何设置优化 header。
为什么需要 SEO 友好的 Headless CMS？
通常情况下，你会希望你的页面获得最好的排名，并且获得更多的流量，这需要你加入一些在搜索引擎中显示的信息，为搜索引擎提供足够的信息，帮助他们理解和分类你的内容。
除此之外，作为 Headless CSM，你需要知道如何构建一个能够对搜索引擎友好的服务，其最终效果是使你网站的可见性和可读性达到最高，搜索引擎也能够很容易地处理这些内容。
优化下沉渲染
首先，让我们来谈谈如何优化下沉渲染。
当页面在浏览器中渲染完成后，搜索引擎爬虫会根据 HTML 元素的层次结构来理解内容。如果你的网站内容的 DOM 结构混乱且不规范，搜索引擎爬虫可能会无法正确解析。尤其是当你使用单页面应用 (SPA) 技术时，这就更加重要了。因此，为了让搜索引擎更容易解析网站的结构和内容，你需要有以下计划和实践:
1. 使用优化过的 HTML 标记
这个规则很基础：使用正确的标记。
- Headings: 使用正确的标题标记：H1 到 H6，最好按照标题层级来使用。
- Paragraphs: 使用
标记将文本代码段化.
- Lists: 使用
- 和
- 标记来插入列表。
- Sectioning: 使用 <header>，<footer>，<main> 和 <article> 标签来定义页面的 "section"。
这些标记是 SEO 最基本的结构，让网站更清晰，更易于理解。如果你能在 headless CMS 上提供这些标记，那么你会让爬虫更容易分析你的页面。
2. 为图片添加 alt 标签
图片不但可以美化你的页面，同时也可以增加你的排名，让你的内容变得更具有互动性和易懂性。
但是，搜索引擎并不能理解图片的内容，所以你需要使用 alt 标签来描述它们。
在 Headless CMS 中，如果图片被上传到数据库中，alt 标签可以作为上传时的一个注释字段。这样，不管图片的大小，浏览器都会像加载任何其他标记一样地加载它。
3. 使用网站地图
一个网站地图能够帮助搜索引擎爬虫更好地了解你的网站结构，加速它们的爬取行为。
如果你想要一个 Headless CMS 管理的网站地图，你需要在提交给 Google Search Console 和声明一个网站地图。
一些 Headless CMS 会自动生成至少一部分 sitemap。在此基础上，如果你使用 Node.js 构建服务器，你就可以利用第三方插件从响应中输出 sitemap。
让我们看看如何在 Fastify 构建的后端应用中使用 sitemap：
-- -------------------- ---- -------
----- ------- - ---------------------------
----- ------- - ---------------------
-------------------------------- -
---- -----------------------------------
----- ----- ---- -- -
----------------- -- -- ----------- --
-
---
---------------------在调用 fastify.register 注册 sitemap 插件之后，第三方插件将构建基于 fastify.get(options.url) 的路由映射，其中 options.url 是 sitemap 生成路径的模板。输出类似于这样的 sitemap.xml 文件：
-- -------------------- ---- -------
----- ------------- ------------------
------- ----------------------------------------------------
-----
-----------------------------
-------------------------------------------
------
-----
------------------------------------
-------------------------------------------
------
-----
------------------------------------
-------------------------------------------
------
---
---------4. 优化 Headless CMS Graphics Rendering
提高渲染性能真的很重要。
对于前端开发人员来说，保证页面快速 loading 是至关重要的，尤其是在 Headless CMS 中。
提速的一种方法是使用较小的图像。稍后将讨论以下更改应用程序的几种方法。
另外，CSS 样式中的 "background-image" 将延迟加载图像。为了使头部内容及其所包含的内容在加载时更快和更完整地出现，请使用 "background-color" 作为占位符，直到图像加载完成。
设置 Metadata
你准备好给你的内容吸引自然流量了吗？那我们就需要为它们添加一些元数据。元数据是一组描述站点文档的数据，最常用的是 title、description、keywords 等。这些元数据可以让搜索引擎更快地了解你的网页，有利于搜索引擎对你的网页内容进行分类和排名。
元数据对网页需求很高。对于 Headless CMS 开发来讲，我们需要为应用程序数据或其内置"Editor"编辑部分提供可自定义可能的元数据。
例如，在 Strapi Headless CMS 上，开发人员可以使用某些配置值为每个标题标记指定单独的 HTML title 元素，以便为 SEO 奠定更完美的基础。
-- -------------------- ---- -------
-- ------ ----------------------
-
------- -
-------- ----- -------
------------ -------- ------
--
----------- -
------- ----------
----------------- -----------
------- -
-
----- ----------------
------ ----------
-------- ---------
--
-
----- -----------------
------ -----------
-------- --- ------- ------
--
---
-
-
-上述示例中，开发人员可以更改 Strapi 示例应用程序上的元数据，以便搜索引擎可以在 Google 和 LinkedIn 链接预览中显示更准确的信息。
另一个元数据示例是像 Twitter Cards 或 Facebook Open Graph 等特定平台的元数据值。
优化 Web 响应头部
HTTP Headers 是由服务器发送的与服务器响应一起返回的消息。其中包括一些信息，例如 Web 服务器、数据的 MIME 类型和所连接的浏览器。
为了提高 Headless CMS Web 应用程序和服务器的响应速度，必须对其发送的 HTTP Headers 进行定期审核和更新。
例如，如果你的 Example CMS 使用 Apache 作为 Web 服务器，那么你可以添加这几行到 .htaccess 文件中:
<IfModule mod_headers.c>
Header always append X-FRAME-OPTIONS "SAMEORIGIN"
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1;mode=block"
Header set Access-Control-Allow-Origin "*"
Header set Referrer-Policy "origin-when-cross-origin"
Header set Permissions-Policy "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"
</IfModule>这样，你就会增加你应用程序的一些解决方案, 包括防止 clickjacking 和另一些安全相关的问题。
为了加速网站加载速度，并且让你的搜索排名如愿，还需要注意以下几个方面:
避免轮询「做得好」（400ms） - 此策略稍微恶心，主要是由于两次握手和三次握手等传输开销引起的。这种情况，你的最好选择应该是一次性地批量执行请求。
其他头部信息：检查是否包含无用或不必要的头部信息（例如，是否包含 Cookies，或者是否处理浏览器不请求的 CORS 核心头部）。
例如，当 nginx 将请求传递给 Node.js 进程时，添加以下响应头：
-- -------------------- ---- -------
-------- -- --------------------------------------------------------- -
------- ---
---------- ----
---------- ------------- -------- ----------------- -----------
---------- --------------- -----
---------- ---------------------- --------
---------- ---------------- --- ------------
---------- --------------- --------------------------------
---------- ------------------ --------------- ---------- --------------- -------- ------------ ----------------- ------------- ---------------- ------- ------------------------
-在开始分析头文件之前，请确保你已经仔细检查了响应正文以及它的负载响应。
结论
一个 SEO 友好的 Headless CMS 应该追求速度、清晰，并且内容要丰富易懂。它应该是结构化的，由页面剖面、提交 Metadata、优化 HTTP 头部构成。
通常情况下，一个优秀的 Headless CMS 应该能够自动化添加数据，减少管理员的工作量，并且应该有更少的前端开发工作量。
希望这篇文章对你有所帮助，让你有更多的时间去思考你的优化和营销策略，减少浪费时间的事情发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a39f2d91dce0dc87fc7d5