语义HTML5为我们提供了一个改进网站和优化搜索引擎的机会。我们可以通过使用机器可读的语义HTML5元素来描述页面大纲来充分利用这些机会。特殊命名的容器可以帮助搜索引擎和浏览器更容易地识别我们的页面是如何安排的。
例如，
现在是它自己的元素，
也是这样，等等。你有能力用这些术语来描述你的页面大纲。顺便说一下，重要的是不要混淆
和标题容器(
)。这些也有我们应该遵守的语义规则;特别是它们的相对水平，如下所示。
下面我们来看看HTML5元素的SEO机会，以及如何以及为什么使用它们。
真正的文章
也许最重要的语义HTML5元素是
。这样就可以将理想的内容解析为屏幕阅读器和阅读器视图，搜索引擎将为页面上的独特内容找到一个硬编码的信号。您可以通过切换reader视图来测试如何在浏览器中加载页面。
如果你没有看到你的切换开关，或者在页面代码中没有
容器，你根本不会得到这个选项，或者它不会单独加载任何东西。如果您在reader视图中获得内容，它将是web管理员包装在单个
容器中的内容。作为开发人员，我们可以用直接的特性来设计这些容器。
多篇文章
虽然每个页面有多个
元素在语法上不是不正确的，但这仍然不是一个好主意。这样你不会得到阅读器视图选项，也没有搜索引擎的好处。对于列出帖子的博客主页，你可能会认为每一篇博客帖子都是一篇“文章”，除了一篇文章的摘录不是真正的东西。
相反，尝试对收集相关细节的每个post摘要使用语义正确的
元素。在本例中，
可以正确地嵌套为
的子节点。
和
之间的父-子关系可以逆转，但我们不建议这样做，除非情况符合逻辑。
让一个
包装一个页面的独特内容:
<身体itemscope itemtype = ” https://schema.org/WebSite ” >
跳过导航
<头id =“顶级”class =“margin-bottom-small”>
<导航类= “容器container-small ” >
< div class = “行” >
< div class = ” grid-full”>
…
< / div >
< / div >
< / nav >
< /头>
<文章类= “容器container-small ” >
<标题>
SEO for Developers by Detlef Johnson< h1>
< /头>
<节课= “行” >
< div class = ” grid-half”>
语义HTML5 < h2 > < / h2 >
我们正在做HTML5语义元素…
技术债务
技术债务是代码库中的代码老化，替换或重构代码似乎没有什么乐趣。最常见的技术债采用不清楚的变量名和数据库列名的形式。
SEO从业者经常针对自己痛苦的技术债务提出建议。实现语义HTML5可能有点像这样。
如果您正在使用带有模板语言(如JSX)的现代框架，并且所有内容都是
或，那么对于成功实现
、
、
、
、
、
、
的重命名，可能会令人生畏，这取决于您处于进程的多早阶段。你等待的时间越长，技术债务就越复杂。
语义细节
我们中的许多人都喜欢跳过那些我们最初认为能够工作的代码编写过程中较小的细节，尤其是在截止日期之下。我们利用现有的运营方式，以最小的努力发布网站和应用程序，以提高效率。我们使用框架、任务运行器和工具来提高效率。我们总是盯着闪亮的新事物去学习。
我们也知道，未处理的细节会在未来极大地加重技术债务。从长远来看，您不希望所有元素都以相同的
和元素命名。随着时间的推移，您的代码将变得越来越模糊。将代码组织成逻辑元素。使用HTML5提供的开箱即用的元素。
语义搜索引擎优化概述
在搜索引擎优化中，我们很早就知道标题，特别是顶级的
标题。它们的特殊之处在于它们传达了关于文档和章节大纲的意义。以元素
，
，以及一个或两个
容器(每个链接分组一个)开始您的文档大纲。然后，您可能需要使用
来包装具有
、标题和它自己的
的独特内容。
<文章类= “容器container-small ” >
<标题>
SEO for Developers by Detlef Johnson< h1>
< /头>
<节课= “行” >
< div class = ” grid-half”>