HTML5 的语意化标签与SEO 的关系

其实现在多数人使用的版本都是HTML5,这个版本大约在2014 年左右才开始流行起来,它实际上指的就是包括HTML、CSS和JavaScript 在内的一套技术组合。它的原本目的就是希望能够减少网页浏览器需要的插件程序,所以目前多数前端工程师也都是用HTML5 ,特别是在网络应用迅速发展的时候, HTML5 的标准也符合现代的网络需求。

html5语义化标签与SEO

HTML 5 的出现,就是为了承接HTML4,现在跟大家聊聊到底HTML5 到底改善了什么?

  • <canvas>标签替代Flash
  • 简化的语法
  • 提供了一系列语意标签(Semantic Elements),包括<header>、<nav>、<main>、<footer>、<mark>、<time>
  • 更利于SEO 搜寻。

下面画个图让你明白一下语意化标签的放置位置
语意标签的放置位置

语意化标签使用时刻

<header>:网页的标头,通常放置网站标题。
<nav>:网页的选单或导览列。
<main>:网页的主要内容。
<aside>:网页的侧栏、附加内容。
<article>:一篇文章内容。
<section>:自订的区块。
<footer>:网页的页尾。
<mark>:强调一小块内容。
<time>:显示日期时间。

语意化标签带来的改变

  • SEO优化
    因为结构明确的关系,所以搜索引擎在搜索网站的同时,可以更精准。同时也因为架构明确,会被搜索引擎判断是个架构完整网页,也会提升网站的排名。
  • 使用友善
    如果访客有视障,屏幕阅读器会完全根据标记来理解你的网页,并就单词念给是视障人士听,而非逐字念出(常常逐字念出,意思就完全大相径庭)
  • 维护方便
    最后一个好处是,维护查找标签,就大概可以知道哪些部分是标题或是选单,网站管理员的维护工作会更简单与容易。

添加评论

电子邮件地址不会被公开。 必填项已用*标注