什么是语义化HTML?独立站该如何优化语义化HTML?

尽管我们都了解谷歌搜索引擎排名机制(抓取、索引、排名),但Googlebot是如何理解每一个网页的呢?

当我们打开网页,右击->检查时,会打开一个充满代码的文件,而这个文件正是网络爬虫真正阅读的内容。

而SEO的第一原则就是让搜索引擎理解网页。而这里就不得不提一个重要的概念 – 语义化HTML。

什么是语义化HTML?

语义化HTML(英文为:Semantic HTML)狭义上指一类拥有特定意义的HTML标签,而广义上指使整个网页更有意义、更有可读性的HTML。网页上使用这些特定意义的HTML标签可以使搜索引擎更容易理解网页结构和内容。

目前语义化HTML标签约有一百个了,由于语义化HTML有自定义功能,所以通过语义化HTML标签标记内容的方法实则无穷无尽。

阅读更多:https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

常见语义化HTML标签:

  • <aside>:表示侧边栏板块。
  • <details>:与<summary>标签配合使用,表示下拉菜单的内容。
  • <footer>:也叫页脚,用于标识版权声明、隐私政策和联系信息等元数据。在ARIA中传递contentinfo 的语义角色。
  • <header>:也叫页眉,是定义网页的介绍性容器,通常包含徽标、搜索栏和导航。
  • <main>:表示网页上主要、独特的内容,一个网页只有一个<main>标签。它使得搜索引擎立即识别页面的主要内容。
  • <nav>:表示网页上的主要导航。
  • <section>:用于将相关内容分组到一个独立的逻辑块中。
  • <summary>:与 <details> 标签配合使用,构成下拉菜单的完整部分。
  • <time>:用于表示特定时间,例如日历日期、时钟时间或持续时间它使与时间相关的数据可由机器读取。

SEO需要尤其重视的语义化HTML标签如下:

  1. H1-H6:用于建立清晰的层级结构,并可用于描述特定部分的内容;
  2. <ul>/<ol>:用于组织内容,其中包含无序列表和有序列表;
  3. <table>:用于更直观的展示数据对比;
  4. <img>:用于展示照片和图形并提供背景信息。通过alt属性,可以描述图像中包含的内容,这对于视障用户尤其重要;
  5. <article> :表示文章板块,所有新闻报道、博客文章和其他类型的可重复使用内容都可以用此标签;
  6. <a>:表示链接或锚点,在页面之间建立清晰的超链接,展示网站上不同内容之间的联系;
  7. <figure>:用户标记图片、图表、代码等,嵌套<figcaption>配合使用;
  8. <figcaption>:<figure>的子标签,配合<figure>提供上下文,一般为标题、图例或描述。不同于图片Alt,是访客可见的。

为什么语义化HTML很重要?

尽管我们已经多次提到语义化HTML对于SEO的重要性,但我依然要再提一次!

  1. 语义化HTML让搜索引擎更便捷的理解网页内容,有助于提升网页索引效率。
  2. 语义化HTML标签构成的网页对视障人士更友好,帮助他们更轻松地浏览网站和内容;
  3. 可以增强结构化数据标记,提高出现在富媒体搜索结果中的几率;
  4. 语义化HTML让代码更易于阅读和维护;
  5. 使用语义化HTML标签的网站,SEO、技术人员和设计师更能协同工作。

WP+Elementor独立站如何优化语义化HTML?

1、将各个网页的非语义化HTML改成语义化HTML

在block的布局标签下,找到如下图,就可以修改特定板块的HTML标签。

Elementor后台截图

2、规范化文章各个标题(H1~H6)

确保每个页面只有一个H1。

不要通过调整非标题标签的字体大小来表示标题!按逻辑顺序嵌套使用H2~H6标签,<h2> 用于主标题,<h3> 用于子标题,不要为了调整字体大小而跳级使用标题标签

3、语义化HTML配合Schema结构化数据

语义化标签配合Schema.org标记,能让搜索引擎更深入理解网页内容。

4、优化图片、表格、视频等

图片提供alt描述图片内容,使用<figcaption>补充说明图片、表格、视频等。

本页内容目录