深入了解Web语义化：SEO和ARIA的关系

在对Web语义化进行快速理解时，我们通常知道它对SEO和屏幕阅读器阅读有利，但却未必了解其具体如何影响SEO和便于阅读器的使用。带着这个疑问，我进行了一番探索和总结。

▍SEO与Web语义化

什么是SEO？
SEO（Search Engine Optimization，搜索引擎优化）是一种通过遵循搜索引擎的规则来提高网站在搜索引擎排名中的方式。简单来说，就是通过优化网站，使其能够在用户搜索时更容易地出现在前面，从而提高网站的访问量。

常用的SEO方式

采用DIV+CSS布局：
使用DIV+CSS布局的网站对搜索引擎非常友好。这种布局避免了过多的表格嵌套，使搜索引擎更容易抓取内容。简洁且结构化的代码有助于突出重点，适应搜索引擎的抓取需求。
尽量避免表格布局：
搜索引擎对表格布局嵌套超过3层的内容不太愿意抓取。因此，尽量避免使用复杂的表格布局，以提高页面在搜索引擎中的可识别性。

通过采用这些SEO方式，我们可以更好地利用Web语义化的特性，使网站在搜索引擎结果中脱颖而出，提高其可见性和访问量。

一、Title（标题）

在SEO中，标题的优化对于页面的排名和用户体验至关重要。Title不仅仅是页面的名片，还是搜索引擎判断页面内容的重要标志。合理的Title能够提升页面在搜索结果中的曝光度。

推荐做法：

独一无二的标题：每个网页都应该有一个独特的标题，避免使用相同的默认标题。
主题明确：标题应该清晰明确，突显网页中最重要的内容。
简明精练：避免罗列与网页内容不相关的信息，保持标题简洁。
关键词加入：如果标题不是很长，可以适度加入关键词，提高搜索引擎对页面的理解。
重要内容靠前：用户通常从左到右浏览，将重要内容放在标题的前部分。
使用用户熟知的语言描述：在多语言网站中，选择用户更熟悉的语言做为标题描述。

示例：

通过这些建议，能够更好地优化Title，提高页面的可见性和吸引用户点击的可能性。

二、Description

Description并非权值计算的关键因素，它在搜索引擎的排名中并不直接影响网页的权值，而是作为搜索结果摘要的一个选择目标。用户往往通过网站的摘要来决定是否点击浏览该网站。

推荐做法：

选择适当的页面使用：网站首页、频道页、产品参数页等缺乏大段文字用于摘要的页面最适合使用description。
准确描述网页内容：避免过度堆砌关键词，确保描述准确传达网页主题。
为每个网页创建独特描述：避免所有网页使用相同的描述，为每个页面创造独特而有吸引力的描述。
合理长度：描述的长度最好在100-150个字符之间，中文对应大约50到75个汉字。

示例：

通过合理地优化Description，可以更好地吸引用户点击，并提高页面的点击-through rate（点击率）。

三、Keywords

Keywords在搜索排名的权重相对较低，但通过合理的设置，可以增加关键词的密度，从而优化搜索结果页的体验。尽管关键词密度对搜索引擎排名的影响不大，但仍然是SEO优化中的一项常用手段。

SEO的核心思想是每个页面集中优化几个关键词（通常不超过5个）。因此，在设定关键词时，应选取与页面内容相关的主要关键词，控制在一到三个为宜。关键词之间用英文逗号分隔，避免过度使用关键词，以免给搜索引擎留下不良印象。

示例：

通过精准选择与页面相关的主要关键词，有助于提高页面在搜索引擎中的可识别性，优化搜索结果，提供更好的用户体验。

▍使用HTML结构化

一、h标签

在HTML代码中，h标签代表“标题”，就像一篇文章中的标题是最重要的一部分一样，搜索引擎在排名时也会重点考虑标题的权重。HTML中的h标签共有六个，分别是h1/h2/h3/h4/h5/h6，代表不同的级别，其中h1标题具备更大的权重，以此类推。

通常情况下，每个页面应该有一个唯一的h1标题。但在HTML5中，h1标题可以在结构大纲的标签中多次出现，例如header、footer、section、aside、article等。

关于h标签的使用，需要根据实际情况进行合理使用，避免滥用。在一篇文章中，不应该出现多个一级标题，因此h1在同一篇文章中只能出现一次，而h2等可以出现多次。根据内容的重要程度，使用不同级别的h标签，并注意在h标签中合理使用关键字。滥用h标签是不可取的。

通过在页面中合理利用h1-h6标签，可以使页面内容的主次结构清晰，有助于搜索引擎更好地识别和理解内容的重要性。

二、alt属性的重要性

alt属性是图像的注释，在图像优化中至关重要。搜索引擎尚不能有效地识别图像内容，因此为img添加alt属性相当于向搜索引擎提供了图像的描述，从而有助于获得更好的图像排名。

一般来说，在插入图像时，我们应该在alt属性中设置图像的描述内容，其中可以包含关键字，但不要刻意堆砌。需要特别注意的是，这些描述内容应该是独一无二的，避免重复，否则可能会受到搜索引擎的惩罚。

示例：

通过合理使用alt属性，不仅可以提升图像在搜索引擎中的可识别性，还有助于提高图像的排名，为网页的整体优化做出贡献。

三、strong和em标签的应用

这两个标签可以改变文字的样式，使其更为突出，如加粗或斜体。除了在视觉上引起读者的关注外，搜索引擎也会将它们视为关键字的标识。在这其中，strong被视为“加强”，而em则表示“强调”，因此这两个标签具有特殊的语义含义，对于网站优化至关重要。在网站优化的过程中，通常我们会强调关键字，而使用strong或em相比于使用b或i更为合适。

四、nofollow属性

nofollow属性通常用于站内链接，对搜索引擎的排名产生一定的影响。实际上，它是HTML标签中的一种属性，其主要作用是告诉搜索引擎蜘蛛，不要跟踪带有nofollow属性的链接，即禁止爬取和传递权重。

举例来说，在网站的评论留言中，常常会包含各种链接地址，而这些链接如果不加处理，就有可能形成大量垃圾链接。这对主网站的影响是不可忽视的，因为这些链接之间可能互相传递权重，最终导致主网站的权重分散。

添加方法：

第一种方法是较为常见的nofollow属性标签添加方式，主要用于告诉搜索引擎蜘蛛不要跟踪该链接。而第二种方法主要用于告诉搜索引擎这是一个出站链接，不允许跟踪。尽管在加入nofollow属性标签后，搜索引擎蜘蛛在第一次发现链接时仍然会爬取它，但搜索引擎会自动记录这条链接的nofollow属性值，从而不给该链接导出权重。

▍规范化URL

一、统一URL格式

在处理网站链接时，需要注意统一URL的格式，以避免潜在的搜索引擎问题。

实际上，这四个URL都指向同一个首页。尽管对于访客来说不会带来什么困扰，但对搜索引擎而言，它们被视为四个独立的网址，内容相同，有可能被错误地认为是一种作弊手段。这样会导致这四个页面的权重被分散。

通过规范化URL，我们可以确保相同内容的页面被正确识别为同一页面，有助于避免搜索引擎的误判，并确保页面的权重集中，提高网站在搜索结果中的排名。

二、301重定向

在URL发生变化时，务必进行301重定向，将旧地址指向新地址。否则，之前的收录和权重努力可能会付之东流。

三、URL目录结构

链接目录结构越浅，页面权重越大。在没有其他外部链接的情况下，每个目录的权重仅是其上级目录权重的一部分。因此，离首页的目录层级越深，页面权重越小。

需要注意的是，这是在没有其他外部链接的前提下。在进行外部链接建设或内部链接布局调整后，可能会出现一些低级目录权重高于上级目录的情况，尤其是在特定目录关键词排名方面。

以京东为例，绝大多数页面的URL层级都在顶级域名之下，最多只有一级目录。这确保了权重最高的继承主域名，减少了权重的分层流失。

例如：

京东一级分类页URL：

http://channel.jd.com/electronic.html
http://channel.jd.com/home.html

二级分类URL：

http://list.jd.com/670-677-678-0-0-0-0-0-0-0-1-1-1-1-1-72-4137-0.html

从上述URL可以看出，链接的层级都不超过两层，尽量减少链接的层级，保持简短（摘自京东站内优化分析）。

▍ARIA简介

ARIA，即无障碍丰富互联网应用规范（WAI-ARIA），是无障碍网络倡议的一部分。其主要目标是为视觉缺陷、失聪、行动不便的残障人士以及模拟残障的测试人员提供更丰富的互联网体验。特别针对盲人等视觉障碍者，他们在浏览网页时通常需要借助辅助设备，如屏幕阅读器，屏幕阅读器能够以语音或盲文形式输出页面内容。

2015年5月21日，W3C HTML工作组发布了关于在HTML中使用ARIA的标准工作草案（Notes on Using ARIA in HTML）。该文档提供了实际指导，指导开发者如何将WAI-ARIA 1.1规范中规定的无障碍辅助信息添加到HTML文档中，从而更容易使残障人士获取Web内容并访问Web应用。这项标准的目的是创建更包容、无障碍的互联网环境，使得互联网对所有用户都更加友好。

ARIA使用指南

根据ARIA规范的要求，Web开发人员可以通过添加role和aria-*属性来为HTML元素增加ARIA支持。在这里，role用于标识元素的作用，而aria-*用于描述与该元素相关的特征和状态。虽然一些HTML元素在ARIA中有默认属性，但并非所有元素都有。以下是一些具有默认role属性的元素：