机器可读HTML5语义标记的SEO优势
语义HTML5为我们提供了改善网站并针对搜索引擎进行优化的机会。 通过使用机器可读的语义HTML5元素来描述页面轮廓，我们可以充分利用这些机会。 特殊命名的容器可以帮助搜索引擎和浏览器更轻松地识别我们的页面排列方式。
例如， <header>现在是它自己的元素， <nav>等等。 您可以使用这些术语来描述页面轮廓。 顺便说一句，重要的是不要将<header>与标题容器（ <h1> ）混淆。 这些还有我们应该遵循的语义规则。 特别是关于它们的相对水平，如下所示。
这是HTML5元素的SEO机会以及使用方式和使用方式的原因。
正版文章
也许最重要的语义HTML5元素是<article> 。 可以通过这种方式使用：将理想的内容解析为屏幕阅读器和阅读器视图，搜索引擎将在页面上找到用于唯一内容的硬编码信号。 您可以通过切换阅读器视图来测试它如何与浏览器中加载的页面一起工作。
如果看不到切换开关，或者页面代码中没有<article>容器，则根本看不到该选项，否则将不会单独加载任何内容。 如果您在阅读器视图中获得内容，则将是网站管理员将其包装在单个<article>容器中的内容。 作为开发人员，我们可以直接指定这些容器的样式。
多篇文章
虽然从语法上说每页有多个<article>元素并不是错误的做法，但这仍然不是一个好主意。 您不会以这种方式获得读者视图选项，也没有搜索引擎的好处。 对于列出帖子的博客主页，您可以将每个博客帖子都视为“文章”，只是文章的摘录不是真实的。
相反，请尝试对收集相关详细信息的每个帖子摘要使用语义正确的<section>元素。 在这种情况下， <section>可以正确地嵌套为<article>的子代。 可以颠倒<article>和<section>之间的父子关系，但是除非情况允许，否则我们不建议这样做。
让一个<article>包装页面的唯一内容：
<body itemscope itemtype =“ https://schema.org/WebSite”>
<a class="visual-hidden-hidden-hidden-hiddenfocusable" href="#main">跳过导航</a>
<header class =“ margin-bottom-**all”>
<nav class =“ container container-**all”>
<div class =“ row”>
<div class =“ grid-full”>
...
</ div>
</ div>
</ nav>
</ header>
<main tabindex =“-1” class =“ content”>
<article class =“ container container-**all”>
<标题>
<h1> Detlef Johnson的开发人员SEO </ h1>
</ header>
<section class =“ row”>
<div class =“ grid-half”>
<h2>语义HTML5 </ h2>
<p>我们正在做HTML5语义元素...
技术债务
技术债务是代码库中的老化代码，看起来替换或重构起来毫无乐趣。 最常见的技术债务是不易理解的变量名称和数据库列名称的形式。
SEO从业人员通常会针对自己痛苦的嵌入式技术债务分配建议。 实现语义HTML5可能有点类似。
如果您使用带有模板语言（例如JSX）的现代框架，并且所有内容都是<div>或<span>，请重命名以成功实现<main> ， <article> ， <header> ， <nav> ， <footer> ， <aside> ， <section>似乎令人生畏，这取决于您在此过程中有多早。 您等待的时间越长，技术债务的负担就越大。
语义细节
我们中的许多人更喜欢跳过最初认为较小的细节，而这对于将起作用的代码编写过程特别是在截止日期时更是如此。 我们会利用现有的操作来发布网站和应用程序，而只需付出最小的努力便可以提高工作效率。 我们使用框架，任务运行器和工具来提高效率。 我们一直在盯着闪亮的新事物学习。
我们还知道，未解决的细节可能会极大地加重技术债务的负担。 从长远来看，您不希望所有元素都以相同的<div>和<span>元素命名。 随着时间的流逝，您的代码将变得越来越难以识别。 将代码组织成逻辑元素。 使用HTML5开箱即用的元素。
语义SEO大纲
在SEO中，我们很早就了解标题，尤其是顶级<h1>标题。 使它们与众不同的是它们传达的有关文档和章节轮廓的含义。 使用元素<main> ， <header>以及可能一个或两个<nav>容器（每个链接分组一个）开始文档大纲。 然后，您可能想使用<article>用<header> ，标题以及也许是它自己的<footer>包裹独特的内容。
<article class =“ container container-**all”> <标题> <h1>开发人员SEO，作者Detlef Johnson </ h1> </ header> <section class =“ row”> <div class =“ grid-half”> <h2>语义HTML5 </ h2> <p>我们正在做HTML5语义元素... <h3>文章和章节</ h3> <p> Article和Section元素应至少具有一个标题... <h3>标题</ h3> <p>标题提供6个级别来组织内容...
每个<section>应该至少有一个标题; 可能更多。 您的标题将按照从<h1>到标题为<h6>内容的降序排列最有意义的内容。 像对待项目符号和概述级别一样考虑它们。 实际上很少会同时使用全部6个级别，但是在需要时它们将随时为您使用。
SEO语义
您会听到来自SEO社区的建议，即每个页面上始终只能有一个<h1>元素，所有元素都是独立的。 这是可靠的建议。 将其视为整个页面标题。 但是，拥有一个以上绝对不是错-这取决于您的文档轮廓。 您可以选择增加<section>或<aside>的顶部标题，也可以在台式机和移动设备之间显示不同的<h1>内容。
使用标题
每个<section>肯定都应有一个标题，也许从第二级（ <h2> ）开始，然后从那里开始，具体取决于该节的内容。 使用您的最佳判断，并从W3C验证服务获取提示。 当您缺少<section>标题时，这可以警告您。 每个部分都可以有自己的<header>和<footer> ，这在您考虑时是有意义的。
网站管理员提示：在网站范围的页眉或页脚中编码一组仅用于管理员的快速链接，并插入名称/值对的规范页面拼写，因此与使用书签等其他工具相比，您可以更快地单击并检查页面验证。
抛开
对于<aside> ，建议这些容器适用于相关内容，这些内容不是<article>标识的唯一内容的一部分，例如广告块。 当然，这些仍然是页面唯一的。 <aside>将很好地嵌套在<article>或<section>并且也可以独立站立。 <aside>容器也可以具有标题<header>和<footer> -这完全取决于您。
页脚包装器
那应该是足够的信息来帮助您入门。 当准备好包装HTML5语义标记时，可以将<footer>元素用于页面页脚，并在一个或多个<nav>元素中使用其网站范围的链接。 除非另有说明，否则默认情况下，大多数这些语义HTML5元素都被视为块元素。
以下示例polyfill甚至支持最古老的浏览器：
<！-[如果是IE 9]> <脚本> document.createElement（“ article”）; document.createElement（“ aside”）; document.createElement（“ footer”）; document.createElement（“ header”）; document.createElement（“ nav”）; document.createElement（“ section”）; </ script> <！[endif]->
外卖：描述性
当您另外使用语义上合理的<div>来包装内容的一部分作为上述内容之一的分组时，要寻找的最重要的问题是问自己一个问题：我可以使用更具描述性的元素吗？ 它可以与我的应用程序代码一起使用吗？ 例如，我可以使用行类名称或其他网格逻辑设置样式吗？ 在充分利用HTML5语义标记之前，您的答案应该是肯定的。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。如若转载，请注明出处:http://www.botadmin.cn/sylc/10182.html