古腾堡编辑器开启SEO结构高亮按钮，进行SEO语义化布局

开启结构高亮按钮，整个网页的SEO语义化布局清晰可见

我们在编辑器加入了一个结构高亮的按钮，如上图所示，开启后，编辑器将会把SEO相关的语义化标签进行高亮显示，这样你可以轻松的调整整个页面的语义化布局。

如果你不了解HTML结构语义化是什么，可以看下我们下面的介绍。

为什么HTML语义化对SEO至关重要

在网页构建中，语义化的HTML标签（如 <section>、<article>、<header>、<nav> 等）能帮助搜索引擎理解页面的内容结构和重点。这不仅有助于提高页面在搜索引擎中的可读性和可排名性，还能改善辅助设备（如屏幕阅读器）的可访问性。

语义结构良好的网页，可以让：

• 搜索引擎更精准地识别内容层级；

• 关键内容更容易被索引；

• 页面在结构化数据、知识图谱中表现更好；

• 用户在视觉与逻辑上获得一致体验。

因此，编辑器中正确使用语义化标签是网页SEO优化的重要基础。

主要语义标签介绍

在编辑器的“结构高亮”模式下，以下标签会被高亮显示。请根据页面内容合理使用这些标签：

H标签的层级与搭配规范

H标签（<h1>–<h6>）用于表示内容的层级结构：

• <h1>： 页面或文章的主标题，每页仅应出现一次。

• <h2>： 内容的主要分区标题，对应一级主题。

• <h3>： <h2> 的子标题，用于进一步细分内容。

• <h4>–<h6>： 用于层级更深的结构，一般在长文档或复杂布局中使用。

正确的H标签结构有助于：

• 搜索引擎理解内容主次关系；

• 生成更清晰的摘要与索引；

• 用户快速浏览页面内容。

• 建议：标题层级不要跳级（如 <h2> 后直接 <h4>），每个标题前后应有对应的内容支撑。

aria-labelledby 参数的作用

在外容器区块中，我们也加入了aria-labelledby参数选项，可以选填。

为了让页面在结构语义化的同时，兼顾可访问性（Accessibility）标准，每个外层容器（如 <section>、<article>、<aside>、<header>、<nav>）都可以设置 aria-labelledby 属性，用于指明该区域的标题来源。

   基本概念

• aria-labelledby 用于建立一个 区域与标题之间的语义关联。

• 它的值通常是该区域内某个标题元素（如 <h2>、<h3>）的 id。

• 屏幕阅读器或搜索引擎解析页面时，会使用此属性来理解“这个区域的主题或标题是什么”。

示例说明：

<section aria-labelledby="service-title">
<h2 id="service-title">我们的服务</h2>
<p>我们提供网页设计、SEO优化与内容策略等服务。</p>
</section>

在这个例子中：

• <section> 的 aria-labelledby="service-title" 表示：这个区块的“语义标题”是 ID 为 service-title 的元素。

• 屏幕阅读器会朗读为：“区域：我们的服务。内容：我们提供网页设计、SEO优化与内容策略等服务。”

即使用户看不见网页布局，也能准确理解每个内容区块的意义。

为什么它对SEO和结构都有帮助

• 搜索引擎爬虫能更容易识别每个 <section>、<article> 等的标题与内容对应关系；

• 辅助设备（如语音阅读器）能更友好地导航整页结构；

• 让语义结构更“可读”，不仅是给人看，也给机器看；

• 对于未来的结构化数据、AI摘要抓取等，都有潜在正面影响。

aria-labelledby 的加入让你的编辑器功能不仅仅是“视觉高亮”，而是真正意义上的结构辅助工具。

• 搜索引擎理解每个区块的语义层次；

• 屏幕阅读器正确朗读页面；

• 编辑者构建更高质量、更标准化的网页内容。

了解以上内容之后，那么我们下面将对wordpress的几种类型的SEO语义化进行分析，参考最基本的结构，可以让你更好的进行排版。

需要值得注意的是，我们的主题已经提供最基础的布局，编辑器所输出的内容都在 <main>标签内，也就是网页的主体部分的结构。

首页的结构优化

首页通常是整个网站内容结构的索引，应突出导航与主要版块。
常见布局示意：


<header>
<h1>网站主标题或品牌口号</h1>
</header>
<section>
<h2>最新资讯</h2>
<article><h3>文章标题</h3></article>
<article><h3>文章标题</h3></article>
</section>
<section>
<h2>服务介绍</h2>
...
</section>
<aside>
<h2>推荐阅读</h2>
</aside>

单页面布局的语义搭配示例

单页面（如“关于我们”“联系我们”等）通常以内容块为主，逻辑上可分为多个主题区块：


<header>
<h1>关于我们</h1>
</header>
<section>
<h2>公司简介</h2>
<p>...</p>
</section>
<section>
<h2>团队介绍</h2>
<article><h3>创始人</h3></article>
<article><h3>设计团队</h3></article>
</section>

文章页面布局的语义搭配示例

文章页的结构应清晰突出主内容，辅助内容放入 <aside>：


<article>
<header>
<h1>文章标题</h1>
<p>发布时间 / 作者 / 分类</p>
</header>
<section>
<h2>段落主题</h2>
<p>...</p>
</section>
<section>
<h2>总结与展望</h2>
<p>...</p>
</section>
</article>
<aside>
<h2>相关文章</h2>
</aside>

分类页布局的语义搭配示例

分类页通常展示若干 article 项，标题应反映分类主题：


<header>
<h1>分类名称：科技新闻</h1>
</header>
<section>
<article>
<h2>文章标题</h2>
<p>摘要...</p>
</article>
<article>
<h2>文章标题</h2>
<p>摘要...</p>
</article>
</section>
<nav>
<h2 class="screen-reader-text">分页导航</h2>
<!-- 分页按钮 -->
</nav>

通过“结构高亮”功能，编辑者可以在古腾堡编辑器中直观地识别页面语义结构，确保：

页面结构清晰；SEO 友好；内容层级合理；各类模板（首页、单页、文章页、分类页）都具备语义一致性。