您现在的位置：然然网络科技有限公司 > 然然商学院 > 互联网资讯 > 深圳网络营销介绍机器可读HTML5语义标记的SEO优势

深圳网络营销介绍机器可读HTML5语义标记的SEO优势

发布时间：2019-04-29 12:42 点击量：0次

全网推广营销型网站网站托管信息网站推广全网营销

深圳网络营销介绍机器可读HTML5语义标记的SEO优势

语义HTML5为我们提供了改进网站和优化搜索引擎的机会。我们可以通过使用机器可读的语义HTML5元素来描述页面轮廓，从而充分利用这些机会。特别命名的容器可以帮助搜索引擎和浏览器更轻松地识别我们的页面排列方式。

例如，<header>现在是它自己的元素<nav>，依此类推。您可以使用这些术语描述页面大纲。顺便说一句，重要的是不要混淆<header>标题容器（<h1>）。这些也有我们应该遵循的语义规则; 特别是他们的相对水平，如下所示。

以下是HTML5元素的SEO机会以及使用它们的方式和原因。

正版文章

也许最重要的语义HTML5元素是<article>。这可以通过这样的方式使用，即将理想内容解析为屏幕阅读器和阅读器视图，搜索引擎将在页面上找到针对唯一内容的硬编码信号。您可以通过切换阅读器视图来测试如何使用浏览器中加载的页面。

如果您没有看到切换开关或<article>页面代码中没有容器，则根本没有获得该选项，或者它不会单独加载任何内容。如果您在阅读器视图中获得内容，那么网站管理员将在单个<article>容器中包含该内容。作为开发人员，我们可以直接针对这些容器设置样式。

多篇文章

虽然<article>每页有多个元素在语法上不正确，但它仍然不是一个好主意。您不会以这种方式获得阅读器视图选项，也没有搜索引擎优势。对于列出帖子的博客主页，您可能会将每篇博文都视为“文章”，除了文章的摘录不是真实的。

相反，请尝试在<section>每个帖子摘要中使用语义正确的元素来收集相关详细信息。在这种情况下，<section>可以正确地嵌套为孩子<article>。<article>和之间的亲子关系<section>可以颠倒过来，但除非情况合理，否则我们不会推荐它。

让一个<article>页面包含一个独特的内容：

...

</ DIV>

</ NAV>

</报头>

<头>

<h1> Detlef Johnson的开发者搜索引擎优化</ h1>

</报头>

<h2>语义HTML5 </ h2>

<p>我们正在做HTML5语义元素......

技术债务

技术债务是代码库中的老化代码，看起来替换或重构是没有意义的。最常见的技术债务采用不具洞察力的变量名称和数据库列名称的形式。

搜索引擎优化从业者经常发布反应他们自己痛苦的嵌入式技术债务的建议。实现语义HTML5可能有点像。

如果您使用与像JSX一个模板语言的现代化框架，一切都是一个<div>或一个<span>，重命名为成功实施<main>，<article>，<header>，<nav>，<footer>，<aside>，<section>，可以令人望而生畏，这取决于你是如何在早期。等待的时间越长，技术债务就越多。

语义细节

我们中的许多人更喜欢跳过我们最初认为是编写代码的过程的较小细节，特别是在截止日期之前。我们使用我们现有的操作以最小的努力发布网站和应用程序，以提高工作效率。我们使用框架，任务运行器和工具来提高效率。我们一直在关注要学习的新事物。

我们也知道，未解决的细节可能会极大地增加技术债务。从长远来看，你不希望以后同名所有的元素<div>和<span>元素。随着时间的推移，您的代码将越来越难以识别。将代码组织成逻辑元素。使用HTML5提供的元素开箱即用。

语义SEO大纲

在搜索引擎优化中，我们早就知道标题，特别是顶级<h1>标题。使它们与众不同的是它们传达的关于文档和部分概述的含义。使用元素<main>，<header>或者可能是一个或两个<nav>容器（每个链接分组一个）来启动文档大纲。然后你可能想用它<article>来包装<header>标题，也许是它自己的独特内容<footer>。

<头>

<h1> Detlef Johnson的开发者搜索引擎优化</ h1>

</报头>

<h2>语义HTML5 </ h2>

<p>我们正在做HTML5语义元素......

<h3>文章和章节</ h3>

<p>文章和章节元素应至少有一个标题......

<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支持最旧的浏览器：

<！ - [if lt IE 9]>

使用document.createElement（ “物品”）;

使用document.createElement（ “留出”）;

使用document.createElement（ “页脚”）;

使用document.createElement（ “头”）;

使用document.createElement（ “NAV”）;

使用document.createElement（ “部分”）;

</ SCRIPT>

<！[ENDIF] - >