韶关网站优化：更好的SEO的HTML5语义指南

2019.08.09 mf_web

113

语义学的概念起源于语言学领域。它的字面意思是“意义研究”。因此，语义学是在不同的能指（例如单词，符号和符号）之间找到连接的学科。由于HTML是一种标记语言而不是编程语言，因此语义是其中非常重要的一部分。如果您明智地使用HTML5语义，您可以使您的网站更易于访问，改善用户体验，并获得更好的搜索引擎排名。

韶关网站优化在本指南中，我们将研究什么是HTML5语义以及它可以为SEO做些什么。然后，我们将为您提供一些实用技巧，可以帮助您改进HTML页面的语义。

什么是HTML5语义？

语义从一开始就是HTML的一个组成部分。然而，它只是在HTML5推出后才引起广泛关注。众所周知，HTML4.01及其之前的版本还包括语义标签，最重要的是所有HTML页面上都需要的<html>，<head>和<body>标签。

此外，所有具有某种含义的HTML标签，例如标题（<h1>，<h2>，<h3>，<h4>，<h5>，<h6>），有序和无序列表（<ol>，<ul>，<li>），段落（<p>），图片（<img>），表格（<table>，<thead>，<tbody>，<tfoot>，<tr>，<td>），表单元素（<form>，<fieldset>，<label>，<input>，<textarea>），链接（<a>）也是语义元素。

HTML5 为语言添加了多个新的语义标记，例如<figure>，<header>，<footer>（块级标记）和<strong>，<em>和<mark>（内联级标记）。然而，真正重要的是引入了四个分区标签：<article>，<aside>，<nav>和<section>。它们允许您为每个HTML页面创建有意义的文档大纲。

语义如何改善SEO？

搜索引擎排名取决于许多不同的因素。谷歌的算法在过去几年中越来越重视质量内容。因此，如果你想在谷歌和其他搜索引擎上排名很高，你需要写清楚的副本，他们可以正确理解。这就是HTML5语义出现在图片中的地方。

默认情况下，搜索引擎机器人无法理解您的内容结构。您可以将他们视为盲人，他们看不到图像，布局和样式元素。虽然他们可以阅读文本（因此关键字优化仍然很重要），但他们看不到内容的不同部分如何相互关联。您可以通过两种不同的方式为这种无意义的结构添加含义：

使用HTML语义，
通过丰富的片段，或者换句话说，结构化数据。

由于丰富的片段是另一个主题，因此在本指南中我们不会讨论它。但是，如果要创建在搜索引擎中排名很好的高质量内容，则需要使用这两种技术。

找到最好的语义元素

HTML5语义起初看起来很容易，但是，您需要避免一些陷阱。最重要的是要理解并非所有语义标签都是出于同一目的。语义标签有三种主要类型：

块级切片元素，
块级非分段元素，
内联级元素。

块级切片元素创建可由搜索引擎机器人读取的文档大纲。正如我之前提到的，其中有四个：

<article>用于文章或评论等独立内容片段，
<section>标记
逻辑上属于一起的其他内容块，例如标签内容，
<旁边>用于侧边栏，
导航部分的 <nav>。

令人惊讶的是，<main>标签不是分段元素，但它仍然是一个语义标签。您可以随时将四个切片元素添加到HTML页面。但是，您只能在每个HTML页面上使用<main>一次。

如何从文档大纲中排除分段元素？

分割元素的有趣之处在于它们标记了存在于整个页面轮廓之外的内容。因此，分区元素可以有自己的标题（<h1>，<h2>，<h3>，<h4>，<h5>，<h6>），标题（<header>）和页脚（< footer>）。

这些非分段语义标签仅属于分段元素，但不会添加到整个页面的轮廓。首先，这可能听起来有点奇怪但你可以通过关注标题部分来理解它。例如，这是有效的HTML5代码：

五

<html>

<body>

<h1>Title of the Entire Page</h1>

<h2>Subtitle of the Entire Page</h2>

<h1>Title of the Article Section</h1>

<h2>Subtitle of the Article Section</h2>

</article>

</body>

</html>

这是一个非常简单的代码示例，但您可以看到您可以为文章使用单独的<h1>标记。这是可能的，因为<article>存在于页面轮廓之外，否则你不能在同一页面上使用两个<h1>标签。

页眉和页脚的行为方式类似。例如，<article>标记可以有一个单独的<header>和<footer>，它在语义上只属于它（但将从整个页面的轮廓中排除）：

五

<html>

<body>

<header>Header of the Entire Page</header>

<header>Header of the Article Section</header>

<footer>Footer of the Article Section</footer>

</article>

<footer>Footer of the Entire Page</footer>

</body>

</html>

从SEO的角度来看，这种语义排除非常有用，因为搜索引擎可以将自包含块视为单独的实体。

明智地使用非语义元素

除了语义元素，如果你想在搜索引擎排名中做得好，你还需要注意非语义标签。非语义标签也有自己的目的。当您需要仅出于样式原因标记内容时，可以使用它们。

例如，当您想要向一组彼此不相关的内容添加左边距时，您需要引入一个HTML类，以便您可以使用CSS对其进行样式设置。这是非语义<div>标签是最佳选择，因为它没有为组分配结构意义。块级<div>标记也具有内联级别的等价物：<span>您可以以相同的方式使用，仅适用于内联级别内容。

很多时候，要确定是否需要语义或非语义元素并不容易。一般来说，过多的语义标签也会损害文档大纲，因为页面结构太复杂了。

计划您的文档大纲

规划您的文档大纲是它自己的艺术形式，需要大量的练习。但是，有些工具可以帮助您创建逻辑文档结构。分析页面结构的HTML大纲就是这样的工具。

有一些独立的应用程序，例如HTML Outliner，您只需复制粘贴HTML代码或插入页面URL，然后应用程序返回文档大纲，其中包含所有潜在问题，例如缺少标题。查看大纲并尝试估计相对于页面的复杂性，它既不是太简单也不太复杂。

您还可以使用浏览器扩展程序，例如适用于Firefox的HeadingsMaps或适用于Chrome的HTML5大纲。这些浏览器扩展的最大优点是可以让您分析任何URL的文档大纲。因此，您可以快速查看竞争对手是否使用正确的HTML5语义。此外，它也是一个很好的学习机会，可以了解其他开发人员如何使用HTML5语义标记其页面结构。