无头CMS和SEO：技术最佳实践

在搜索引擎结果页面 (SERP) 中争夺黄金位置一直被认为过于复杂。然而，要想进入搜索引擎结果的前三名，关键在于掌握以下三个要素：

• 页面结构和易于抓取
• 网站性能
• 为内容创作者奠定坚实基础

身处 JAMStack 世界并使用无头 CMS 并不会改变 SEO 的关键优先事项。

从传统CMS迁移到无头CMS在页面性能、安全性、用户体验以及向多个平台分发内容方面，都具有显著的SEO优势。由于无头CMS不像传统CMS那样可以即插即用地安装插件来管理SEO因素，因此您需要遵循一些最佳实践才能快速获得出色的SEO效果。

简而言之，传统CMS和无头CMS之间最明显的区别在于能否即时编辑元数据。由于传统CMS与您的域名紧密集成，并控制着内容的呈现方式，因此使用WordPress或Drupal等平台可以让您轻松地添加页面标题、描述和其他元标签。

由于 GraphCMS 具有跨平台灵活性，无头 CMS 无法控制内容的呈现方式，因此必须以不同的方式处理此功能。

公认的页面优化和站外优化最佳实践依然不变。高质量的原创内容、恰当的关键词选择和布局、内容之间的相互链接、域名权重、社交分享以及来自权威来源的反向链接，这些都是内容团队应该继续遵循的准则。

然而，优秀的SEO早在编辑团队撰写和优化内容之前就开始了。项目的构建和技术实现是内容团队可以拓展的基准。那么，当您的技术团队迁移到无头CMS时，如何才能利用现代技术栈获得最佳的SEO效果呢？

易于抓取和页面结构

使用 Schema.org 结构化数据标记模式。

Schema.org 由大多数主流搜索引擎共同合作开发，它为网站开发者提供了一系列预定义的属性，用于丰富其 HTML 标签。页面标记为内容添加了结构，使其更容易被搜索引擎理解，从而提供更丰富的搜索结果。

搜索引擎机器人努力理解网页内容。通过结构化数据提供关于网页含义的明确线索，可以帮助它们更好地进行索引和理解。例如，以下是谷歌提供的 LSON-LD 结构化数据片段，它有助于理解联系信息的结构：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "name": "Unlimited Ball Bearings Corp.",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-401-555-1212",
    "contactType": "Customer service"
  }
}
</script>

同样，如果您的内容更偏向指导性或增强性，例如创建食谱或教程，结构化数据也有助于您的内容在图形化搜索结果中以精选摘要的形式展示。例如，如果您在谷歌搜索“苹果派食谱”，您看到的将不再是指向食谱的列表，而是在顶部看到一个“精选”结果，该结果可能是食谱本身，也可能是指向与该搜索词相关的热门网站的链接。

了解你的元标签。

元标签是描述页面内容的最重要元素。它们对用户不可见，但可以帮助搜索引擎确定页面内容的主题。以下是四个关键的元标签及其各自推荐的最大文本长度：

• 标题标签（70 个字符）
• 元描述 - 内容的简短描述（160 个字符）
• 元关键词——与页面相关的关键词有哪些（5-10个关键词）
• 元机器人——搜索引擎应该如何处理页面

由于开发者可以使用像 GraphCMS 这样不受限制的无头 CMS 自由设计网站的内容架构，因此应该将元标签作为字符串字段添加到所有相关的内容模型中。这样，内容作者就可以轻松地添加相关的元数据。

定期进行灯塔审计。

Lighthouse 是一款开源的网页审核工具。它会对网页进行一系列测试，并生成一份包含 Lighthouse 评分和一系列建议的报告。审核类别包括性能、可访问性、渐进式 Web 应用等。

近年来，静态网站生成器（如 Gatsby 和 Hugo）的兴起也为在启动新项目时采用无头架构提供了强有力的论据。测试 Gatsby 的开箱即用模板时，其性能得分远高于大多数传统 CMS 的基本主题，这使得新项目在页面性能和优化方面拥有先发优势。

网站性能

使用 React 或 Vue，SEO 就掌握在你手中。

虽然加载速度肯定有利于使用 React 和 Vue 构建的单页应用程序，但如果您采取必要的预防措施，就可以避免一些 SEO 挑战。

添加元数据组件至关重要。然而，基于 JavaScript 且在客户端动态渲染的 Web 应用程序可能根本无法被抓取和索引。无法正确读取的组件将被视为空值。以下是一些正确管理元数据的措施：

• 要管理 React Web 应用的元数据，可以了解一下React Helmet 。像React Router这样的组件可以通过创建不同页面之间的路径，使网站的 URL 结构对搜索引擎更加友好。
• 如果客户端禁用了 JavaScript，您可以考虑使用同构 JavaScript技术，该技术会在服务器端运行 JavaScript，然后再将其发送到客户端。或者，您也可以使用像 Prerender 这样的工具来预渲染网站，并以完整的 HTML 格式返回内容。

使用静态网站生成器

像 Hugo、Jekyll 和 Gatsby 这样的静态站点生成器 (SSG) 通常可以帮你解决主要的 SEO 技术难题。它们不仅能保证应用在交付时已预先构建，从而实现极快的加载速度，还能帮你处理繁重的元数据管理和内容映射工作。不妨了解一下 Gatsby 的 React Helmet 和 Sitemap 插件。

使用 CDN

内容分发网络 (CDN)，例如 Cloudflare，允许您将内容分发到通常分布在全球各地的庞大服务器网络中。当用户访问您的网站时，您的网站会返回两部分内容：基本文本和数据，以及从 CDN 获取媒体和/或脚本的指令。用户的浏览器会执行这些指令，并向 CDN 请求媒体。

优化图像

优化无头 CMS 中的图片大小。以 GraphCMS 为例，您可以在 GraphQL 查询中预先定义图片资源的最大尺寸。即使经验不足的内容创建者向 CMS 上传了大尺寸图片，您的这些预防措施也能确保快速加载。

利用图片和视频的懒加载技术。首先下载最重要的内容，仅在需要时才获取媒体资源。这样可以减小页面大小，加快页面加载速度。

请使用 SVG 或 WebP 格式的图片。这些格式的图片经过矢量化处理，可获得最佳画质，并且尺寸经过优化，可实现最快的加载速度。

为您的图片添加 Open Graph 元标签。用户可以快速获得内容的视觉摘要，因此 Google 非常喜欢它们。

HTTPS Everywhere

升级到 HTTPS，确保您与用户的通信安全。用户对默认不安全的网站越来越警惕，而且谷歌已将 HTTP 网站标记为不安全，因此您没有任何理由不添加这一层加密和安全措施。

HTTPS 网站加载速度更快，而我们都知道，页面加载速度对排名至关重要。更具体地说，HTTPS 自 2014 年以来一直是谷歌排名算法中的一个因素。

为内容创作者奠定基础

在内容创作者发布内容之前很久，技术团队就可以在网站创建过程中实施一些优化措施。一个鼓励您使用合适的属性丰富所有内容的CMS系统可以根据您的具体用例进行定制，并使您能够更轻松地正确地实施所有内容。

首先，请确保所有页面都遵循友好的 URL 结构，例如 example.com/page-title-with-keywords，而不是像 example.com/pageid1234 这样的通用 URL。SEO 友好的 URL 旨在更好地匹配用户的搜索内容，提高相关性，并让用户清楚地知道点击后会跳转到哪里。包含关键词且简短的 URL 通常比冗长的 URL 效果更好。

您的 URL 应该鼓励用户在页面中包含目标关键词，并且页面内容本身应该使用清晰定义的标签，例如 H1、H2 等。当您在 URL 中包含关键词时，该关键词会告诉搜索引擎“此页面与此关键词相关”，而元标签则能强化这种内容关联性，从而增强页面与搜索结果的相关性。

这样一来，搜索引擎就能准确地知道你的内容是关于什么的，以及它与搜索这些查询的用户的相关性如何。

当搜索“纽约披萨”时，谷歌会优先显示与搜索查询几乎完全相同的页面：

其次，要赋予内容团队权力，让他们尽可能丰富页面内容。页面元素越少，加载速度越快，在搜索引擎结果页面 (SERP) 上的排名就越高。反之，页面中的图片和媒体越多，读者体验就越好，跳出率越低，页面加载速度也越快。如果做得好，网站对资源的处理方式以及资源的优化使用可以显著提升搜索引擎优化 (SEO) 效果。

确保内容团队上传的资源经过适当的尺寸调整和压缩，以避免对页面性能产生不利影响。创建新文章时，确保内容团队能够为图片提供相关的文件名和替代文本属性，以便在索引时遵循最佳实践。

最后，确保页面易于分享。我们已经讨论过启用 OpenGraph 和 Twitter Card 元信息的重要性，这能让分享的链接更轻松地传递正确的图片和页面信息。如果页面能够通过社交媒体和书签网站轻松分享，并包含图片、标题和页眉，读者就能更轻松地扩大页面的传播范围，从而全面提升反向链接、推荐流量和品牌知名度——增强页面的权重，并在排名时提高其可信度。

最终结论

只要方法得当，SEO并不难。在市场营销或内容团队开始创作内容之前，先打好技术基础，就能在内容创作完成后迅速提升搜索引擎排名，而无需在后期再花费时间进行技术调整和修复。花时间为内容团队设置好技术参数，可以让他们专注于自己最擅长的领域，也能让您安心，确保网站在搜索引擎中获得最佳表现。与内容团队保持密切沟通，了解SEO因素的任何变化，并确保定期审核和检查网站，及时发现任何可能影响SEO的更改。

坦白说：我为GraphCMS工作，这篇文章最初发表在博客的“无头 CMS 和技术 SEO 最佳实践”栏目下。