选择无头 WordPress 网站而不是传统的网站架构，会在很大程度上改变搜索引擎优化游戏。这种方法将网站的前端和后端分开，提高了灵活性和速度。但同时也带来了新的搜索引擎优化挑战。
情况是这样的：网站的能见度以及人们如何通过搜索引擎找到你，都取决于你的搜索引擎优化策略。这就是为什么我们今天要介绍一些专门针对无头 WordPress 设置的高级搜索引擎优化策略。
我们将讨论如何确保搜索引擎能正确抓取你的网站、调整元标签等。无论你是在编写网站代码，还是在制定营销策略，你都将获得实用的技巧来提高你的搜索引擎优化技能。
如何使无头 WordPress 网站具有可抓取性
让无头 WordPress 网站具有可抓取性会带来一些传统网站设置不会遇到的独特挑战。主要障碍在于无头网站的内容是使用 JavaScript 在客户端渲染的，这在历史上给搜索引擎机器人的抓取和索引带来了困难。
不过，动态渲染和服务器端渲染等现代技术使解决这些问题变得更加容易。
动态呈现
动态呈现是 JavaScript 内容和搜索引擎爬虫之间的桥梁。它包括向搜索引擎展示网站内容的预渲染静态 HTML 快照，而用户则继续体验动态的交互式版本。
这可以确保爬虫无需执行 JavaScript 就能索引网站内容，从而立即提高网站的可见性和搜索引擎优化性能。
要在无头 WordPress 环境中实现动态呈现，通常需要使用 prerender.io 这样的解决方案，或者使用 Node.js 构建自己的服务器端呈现机制。
Prerender
以下是概念分解：
1. 检测用户代理
你需要区分用户（浏览器）发出的请求和爬虫（如 Googlebot）发出的请求。这可以通过检查传入请求的 HTTP 标头中的用户代理来实现。
2. 向机器人提供静态内容
当检测到爬虫时，服务器会将请求重定向到所请求页面的预渲染静态 HTML 版本，而不是通常的 JavaScript 繁重内容。这可以通过使用预渲染服务或在服务器上安装预渲染设置来实现，预渲染设置可即时或从缓存中生成静态 HTML 页面内容。
3. 如何使用 WordPress 设置
prerender.io 等服务提供可与服务器集成的中间件。这种中间件会拦截传入的请求，检查它们是否来自爬虫，如果是，就从 prerender.io 的缓存中提供预渲染页面，如果没有缓存，就触发新的页面渲染。
如果要构建自定义解决方案，通常会在 Node.js 环境中使用 Puppeteer 来预渲染页面。当 WordPress API 向 Node.js 服务器发送内容时，它会检查用户代理。如果是爬虫，Puppeteer 就会渲染页面、保存静态 HTML 并提供该版本。
可以通过缓存静态页面来优化这一过程，以避免每次爬虫请求都渲染这些页面。
服务器端呈现
服务器端渲染则是指在页面内容到达客户端之前，先在服务器上进行渲染。这意味着，当搜索引擎机器人请求一个页面时，它会收到一个完全呈现的 HTML 页面，从而使其可立即被索引。
您可以通过使用 React 和 Node.js 等各种 JavaScript 框架和库来实现服务器端呈现，从而直接在服务器上呈现内容。这种方法不仅能让搜索引擎更容易访问内容，还能通过加快页面加载时间来改善整体用户体验。
对于服务器端呈现，使用 Next.js 等框架结合 WordPress 的 REST API 或 GraphQL 可以简化流程。
典型的设置可能包括使用 GraphQL 获取数据，并使用 Next.js 在服务器上呈现页面，从而有效地在提供内容之前预先填充内容。
配置规范 URL
为无头 WordPress 网站配置规范 URL 是保持搜索引擎优化完整性的另一种方法，尤其是通过 Gatsby 或 Next.js 等解耦前端提供内容时。
规范 URL 可以向搜索引擎提示哪个版本的内容页面是主要的或 “规范” 的，从而避免重复内容问题。这在无头环境中很有必要，因为在这种环境中，内容可以通过多个路径或端点访问。
为什么规范 URL 很重要
在无头 WordPress 中，由于前端与 WordPress 后台分离，内容重复的风险会增加。规范URL通过引导搜索引擎索引首选 URL 来降低这种风险。这可以确保搜索引擎优化价值被整合到规范页面，而不是被同一内容的多个版本所稀释。
花时间设置规范 URL 还能明确哪个版本的内容应在搜索结果中排名靠前。
如何设置规范 URL
借助 Yoast SEO 插件和 WPGraphQL（用于将 Yoast SEO 数据连接到您的无头设置），在无头 WordPress 环境中实施规范 URL 可以得到有效管理。
下面是网络开发人员安德鲁-凯普森（Andrew Kepson）对涉及几个常用插件的过程的详细介绍：
- 使用 Yoast SEO 插件，直接在 WordPress 管理器中轻松管理规范 URL。通过为每篇内容指定规范 URL，您可以直接从 WordPress 控制首选 URL。
- WPGraphQL 插件会为 WordPress 网站创建一个 GraphQL 端点，允许前端应用程序（使用 Gatsby 或 Next.js 等框架构建）查询 WordPress 内容，包括 Yoast 提供的搜索引擎优化数据。
- 然后，使用 WPGraphQL Yoast SEO 附加组件作为 Yoast SEO 和 WPGraphQL 之间的桥梁，将前者的 SEO 字段（包括规范 URL）连接到后者的模式。这样，无头前端就可以查询并使用 Yoast 中设置的规范 URL，确保在页面头部呈现正确的规范标签。
使用 WPGraphQL 插件在无头环境中配置规范 URL
在实际应用中，一旦安装并激活了Yoast和必要的WPGraphQL插件，您就可以直接从WordPress管理网站的搜索引擎优化数据。
在设置前端应用程序时，您将通过 WPGraphQL 查询 SEO 数据，包括规范 URL，并在页面头部适当地呈现这些数据。这将确保搜索引擎正确识别和索引您的规范 URL，即使在解耦架构中也是如此。
在无头 WordPress 环境中优化元标签
在无头 WordPress 环境中优化元标签，尤其是在使用 React 等前端技术时，对于提高网站的搜索引擎优化性能至关重要。元标签在搜索引擎如何理解并在搜索结果中显示网页方面发挥着重要作用。它们有助于定义标题、描述、关键词和其他有关网页的重要信息，搜索引擎会使用这些信息对内容进行有效索引和排名。
当然，元标签也很重要，因为它们是网页内容的简明摘要，会影响网站在搜索引擎结果中的显示方式并影响点击率。例如，标题标签在搜索结果中显示为可点击的标题，可在搜索引擎优化和用户参与方面发挥巨大作用。
同样，元描述会在搜索结果的标题下方提供页面内容的简要概述，从而进一步鼓励用户点击进入您的网站。
使用 React Helmet 制作元标签
React Helmet 是一个可重复使用的 React 组件，用于管理对文档头部的更改，让您可以轻松地动态修改元标签、页面标题和其他头部元素。它对于无头部的 WordPress 网站尤其有用。
要开始使用 React Helmet，您需要使用 npm 或 yarn 将其安装到您的项目中：
npm install react-helmet # or yarn add react-helmet
安装完成后，你可以将 React Helmet 导入你的组件，并用它来设置各种元标签。例如，要设置页面标题和元描述，可以这样做：
import { Helmet } from 'react-helmet';
function MyPage() {
return (
<>
<Helmet>
<title>My Page Title</title>
<meta name="description" content="A concise description of my web page." />
</Helmet>
{/* Rest of your component */}
</>
);
}
React Helmet 还支持动态数据，允许您根据 React 应用程序中的道具或状态设置元标签。这种灵活性是为特定页面和内容类型动态定制搜索引擎优化元数据的关键。
您可以管理的其他重要头部元素包括结构化数据（使用 JSON-LD 实现丰富的片段）、用于社交媒体分享的 Open Graph 标签，甚至还有用于增强可访问性的元素。
优化 schema 标记
优化 schema 标记是增强 WordPress 网站搜索引擎优化的另一个重要因素，无论是在传统设置还是无头环境中。
Schema 标记是微数据的一种，它可以在搜索结果中直接显示丰富的片段（包括星级评价、产品价格等详细信息），从而丰富网站的搜索引擎结果。这可以大大提高可见度和点击率。
在传统的 WordPress 设置中，schema 标记通常通过 Yoast SEO 等搜索引擎优化插件进行管理，这些插件简化了直接在 WordPress 仪表板中添加和自定义 schema 类型的过程。这些插件会根据页面或文章的内容自动生成必要的代码片段。这使得添加变得超级简单，无需接触任何一行代码。
但在无头WordPress环境中，管理 schema 标记就需要更多的实践了。您基本上是在使用一个独立的前端应用程序（比如使用 React 构建的网站），这意味着您需要在开发网站时手动将 schema 标记整合到内容中。这可能需要使用 JavaScript 或前端搜索引擎优化工具将 schema 标记动态注入 HTML。
对于无头 WordPress 网站，您可以使用 React Helmet 等工具来管理网页的头部，包括添加 schema 标记。正如我们已经介绍过的，React Helmet 可让您在 React 组件中直接动态设置元标记、标题以及 JSON-LD 格式的结构化数据。
以下是在无头环境中管理 schema 标记的简化方法：
1. 使用客户端库
像 React Helmet 这样的客户端库对于在页面中手动插入 schema 标记非常有用。这包括创建 JSON-LD 结构化数据片段，并使用 React Helmet 将其包含在页面头部。
2. 创建脚本
要手动创建 JSON-LD 脚本，首先要以 Google 和其他搜索引擎可以理解的 JSON 格式定义内容结构。这包括根据 Schema.org 指南指定文章、人物或事件等类型及其属性。
3. 使用可用工具
然后，您可以使用服务器端渲染技术将这些脚本嵌入网页的 HTML 中，通常是在头部。Google 的结构化数据标记助手（Structured Data Markup Helper）等工具可以帮助生成正确的 JSON-LD 语法。
Google Structured Data Markup Helper
思考语音搜索优化
在无头 WordPress 设置的背景下优化语音搜索涉及到将搜索引擎优化最佳实践与无头架构的技术细节相结合的战略方法。以下是如何在无头 WordPress 环境中有效优化语音搜索，确保您的内容在语音输入搜索中排名靠前。
1. 让结构化数据为你工作
我们在这里已经详细讨论了 “如何”，但要正确优化无头网站，实施结构化数据（schema 标记）是必要的。
结构化数据可以帮助搜索引擎理解网站的上下文和内容，使其更容易在响应语音查询时显示您的信息。在无头设置中，您可能需要在 React（我们已经讨论过）、Vue 或 Angular 组件中手动插入模式标记，具体取决于您的前端使用哪种组件。
Angular
2. 关注会话内容和关键词
由于语音搜索是口语化的，因此语音搜索查询往往会模仿语音模式并使用会话式措辞。它们通常也比文本搜索更长。在网站上创建内容时，应力求使用符合人们说话方式的自然语言。是的，这意味着要更加重视语音搜索中常见的长尾关键词和基于问题的查询。
3. 针对 “附近的” 搜索加强本地搜索引擎优化
很多时候，人们使用语音搜索是为了查找本地的信息，比如查找附近的企业或服务。为了针对这些搜索优化您的无头 WordPress 网站，请确保您网站的内容包含本地关键字和短语。确保维护最新的 Google My Business 列表并纳入本地结构化数据，以提高本地语音搜索查询的可见性。
4. 创建常见问题页面和部分
语音搜索用户通常会寻求特定问题的快速答案。创建常见问题解答页面或部分，简明扼要地回答常见问题，可以满足这些用户的需求。
考虑创建动态的常见问题版块，通过 API 从 WordPress 获取内容，并以易于访问的格式显示在前端。使用适当的标题和结构化数据来构建这些常见问题解答，可以进一步提高它们在语音搜索结果中的可发现性。
5. 充分利用丰富片段和特色片段
目标是以符合丰富片段和特色片段条件的方式构建内容，这些片段会在搜索结果中显著显示。
这包括清晰地构建内容，并使用模式标记来突出关键信息。在无头 WordPress 环境中，确保您的内容 API 以前端应用程序可以用来生成片段友好格式的方式提供内容结构。
创建深思熟虑的分类法
在无头 WordPress 环境中创建经过深思熟虑的分类法，就是要以结构化、直观的方式组织内容，使网站访客和搜索引擎都能从中受益。
要创建适用于无头网站的有效分类法，您可以采取以下措施：
- 了解受众和内容：从分析内容开始，确定主要主题，了解受众在寻找什么。这种洞察力将为创建相关类别和标签提供指导。
制定类别：类别应代表网站涵盖的广泛主题。它们提供了将内容组织成主要主题的层次结构。确保类别明确，涵盖内容范围广，没有过多重叠。 - 使用标签显示细节：标签可提供更详细的信息，让您可以标记内容的特定方面。它们可以帮助人们和搜索引擎在更广泛的类别中找到更具体主题的内容。
- 简化和优化导航：分类法应增强网站导航功能，使用户更容易找到内容。在分类和标签中加入搜索引擎友好型关键词，以提高网站的可见度。
- 保持清晰，避免重复：确保每个类别和标签都是独一无二的，以避免混淆用户和削弱搜索引擎优化工作。定期审核有助于完善分类法，合并或删除多余的类别或标签。
- 在无头网站中整合分类标准：在无头 WordPress 网站中，确保正确实施分类法，以便通过 API 访问类别和标签，并由前端应用程序动态使用。
- 定期审查和更新：随着网站的发展，定期审查分类法，确保它仍然准确地反映内容。
有时，将其概念化为现实生活中的样子会有所帮助。下面是一个简单的例子： 想象一下一个烹饪博客，里面有各种食谱。下面是一个组织良好的分类法：
- 类别：代表博客主要内容支柱的宽泛主题，如菜系（意大利菜、墨西哥菜、日本菜）、膳食类型（早餐、午餐、晚餐、小吃）和特殊饮食（素食、无麸质、Keto）。
- 标签：更具体的描述，可以跨越类别，如 “快餐”（30 分钟以内的食谱）、”假日”（圣诞节、感恩节食谱），或基于成分的标签，如 “鸡肉”、”意大利面” 或 “牛油果”。
这种结构可以让访客快速浏览到他们感兴趣的食谱类型，无论他们是在寻找快捷早餐、素食甜点还是传统意大利菜。它还有助于搜索引擎了解博客的内容，提高网站在特定主题搜索结果中的可见度。
需要关注的性能指标
在管理由无头内容管理系统提供支持的网站时，深入了解性能指标是必不可少的。您所使用的配置将前端显示与后端内容管理分离开来，这就为潜在的速度减慢留下了很多机会。因此，了解网站的性能是关键。
您需要关注传统的性能指标，如核心网站生命周期和网站加载时间，以确保最佳的搜索引擎优化性能。
Core Web Vitals
谈到网站性能，我们不能不提到 Core Web Vitals。它们是 Google 量化网站用户体验的方法，主要关注三个方面。下面简要介绍一下这三个方面的内容：
- 最大内容页面（LCP）：衡量页面主要内容的加载速度。加载速度越快越好，因为这意味着人们无需翘首以盼就能看到你的内容。
- 首次输入延迟（FID）： 这与响应速度有关。页面加载后，如何快速响应用户的互动？如果访客发现自己点击时没有立即反应，就会产生挫败感。
- 累积布局偏移（CLS）：您是否遇到过刚要点击时，文字或按钮却发生移动的情况？这就是 CLS 的测量结果。稳定性在这里至关重要。人们不应该感觉自己在点击一个移动的目标。
改善这些指标可以带来更好的用户体验，而 Google 则会以潜在的更高搜索排名作为奖励。
最小化 JavaScript 和异步加载
将 JavaScript 最小化并使用异步脚本加载可以减少网站加载所需的时间。通过将代码精简到最基本的部分，并允许脚本同时运行而不阻塞页面加载，从根本上简化了后端操作，从而确保前端有更好的性能。
花时间完善无头内容管理系统环境中的性能指标，不仅仅是为了给谷歌打勾。它既要为网站访客打造无缝、引人入胜的体验，又要确保搜索引擎能够找到并青睐您的内容。这需要在技术优化和以用户为中心的设计之间取得平衡，而正确的设计可以让您的网站与众不同–同时您还可以享受无头提供的灵活性。
小结
在无头 WordPress 中优化搜索引擎并不像听起来那么令人生畏。在这里，我们为您介绍了一些要点，告诉您如何让您的网站不仅可见，而且还能吸引搜索引擎和真实用户。
从确保您的网站便于搜索引擎抓取，到调整元标签，再到确保您的网站能很好地与语音搜索配合，我们都做了一些介绍。
评论留言