WordPress古腾堡编辑器SEO语义化布局操作介绍

WordPress语义化布局介绍与本教程实操简介

在超级区块WordPress主题-商城版和超级区块WordPress主题-标准版的古腾堡编辑器我们加入了SEO语义化布局高亮的功能。

进入页面、区块模板、文章的编辑器进行编辑时，右上角会出现一个结构高亮的按钮，点击按钮之后，可以将SEO相关的语义化标签进行高亮显示，这样清晰的显示，可以让你针对整个页面的内容对SEO的语义进行布局，让搜索引擎更好的理解你的网站内容。

本次教程主要说明首页和单页面、文章页、分类目录列表的语义化排版进行实战教程说明。

首页通常是整个网站内容结构的索引，应突出导航与主要版块，因此在首页中，我们需要采用多章节，每个章节用H2标题进行区分。

首页的还有一个值得注意的是，较早前的旧框架和主题中，H1标题一般是习惯标注为网站的logo图片，但这样的做法在现代搜索引擎的优化中，将H1标签至于logo图片是有所浪费的，因此我们建议在主题选项的SEO优化设置中，关闭将首页LOGO使用H1的选项，而是将H1标签放入编辑器的第一个章节中输出。

首页的布局容器我们主要用2个容器，

章节：section ，主要将我们的首页进行章节区分，如：公司banner、公司介绍、公司产品、公司新闻等等分为章节进行排版，章节内需要有H1或者H2标题，只能存在一个，H3/H4/H5/H6标题则无限制（和论文一样，一个章节只能有一个大标题）
头部：header, 这个我们用一次，将H1标题的章节内放入header,header内放入H1标题和描述，将最核心的介绍和关键词放这里，突出首页的作用。

banner幻灯片是首页常见的第一个章节，取决于你的banner内容是什么：

如果第一张banner是公司介绍、公司广告语，整体网站相关的文字，那么你可以将幻灯片的第一张图片中的文字设为H1标题；

这样的情况，将动效幻灯片设为头部章节section，设置幻灯片第一张图片的文字为H1标题，其余的设为H2标题即可。

如果你的banner是介绍某个新发布的产品、新发布的服务，不是整个网站的核心内容关键词，那么不建议将

这样的情况，不要设置banner为章节，而是将banner设为无语义化的div，所有的幻灯片标题设为div，因为我们不打算将H1标题放banner上，那么H1标题之前的内容是不允许出现任何标题的。

不使用幻灯片banner做第一章节，那么你可以制作一个图文并茂的内容，放入H1标题

现代网站也有很多不使用BANNER作为第一章节的做法，如WEB主题公园的首页，就是一个图文并茂的内容，第一个章节section内插入一个header，将H1标题放入其内，在写一些段落进行描述，这样的结构是非常适合第一章节的使用的。

一般来说首页的第二个章节是公司介绍，

如果第一章节你使用的banner，且设置的无语义化、无标题的banner，那么第二个章节你可以用，section内插入一个header，将H1标题放入其内，在写一些段落进行描述，再加入视频、图片等介绍公司信息，用这个章节作为网站的H1核心标题输出和介绍。

如果第一章节使用的banner或者其他模块有语义化和H1标题，那么第二章节就是使用section布局外容器，内部放入一个H2标题+内容，可以有H3/H4/H5的标题层级，注意标题需要按H2>H3>H4>H5>H6的顺序，不要打乱他们的顺序，比如 H2> H4> H3

其他章节，依旧采用section布局外容器，内部放入一个H2标题+内容的形式就可以了，注意标题的顺序在章节内不要分散，H2标题在章节内只能存在一个。

单页面的做法和首页差不多，也是多章节，其中第一章节使用header标签内置H1标题的形式，如关于我们页面，章节分别为：公司介绍、公司优势、工厂图片、证书和奖项、公司历史，那么第一章节的公司介绍作为H1标题章节，其余章节为H2章节，这样的组合就可以了。

文章页分为普通文章和自定义排版文章

普通文章是指新闻、百科等普通文字性为主的文章，这类型的文章可以通过主题默认的双栏或者通栏模式书写，其结构已经固定无需再进行设置

自定义排版文章是指产品类型、案例类型、服务介绍类型的文章，和单页面类似。

自定义排版的文章可以参考单页的做法即可，但有所不同的是，文章的详情要被article容器包裹。

以产品为例，那么排版我们可以区分几种章节：

章节1：产品头图、产品标题、产品简介、产品详情，这几部分的内容放入article容器中，在进行区分章节，其中产品头图+产品标题简介的内容，设为header和H1标签，产品详情可以分为多章节+H2标题进行介绍

章节2：推荐产品列表，这个章节需要放在article容器之外，使用H3标题+列表的形式即可，外容器使用aside，而不用section，因为这是和文章主体强相关的内容。

章节3：其他内容，可使用section+H2的组合，这个内容可以是和文章主题非强相关的内容。

分类目录、标签等列表再超级区块系列中可以使用区块模板完整的替换掉默认的列表，那么这时候我们就可以用编辑器进行布局了。

分类目录和标签的主要的内容是标题和主列表，那么我们这里我们不需要用到章节section外容器，使用div即可，header放入标题和描述，然后放入一个主列表内容，最后可选放入aside容器，放一些强相关的内容即可了。