ijd8.COM

A simple blog for an old Ma Nong.

HTML5 新元素页面结构对 SEO 影响很大

Permalink

现在想起这个话题,原因有三个:HTML4 10年没更新了;Flash 深度退出历史舞台;移动端普及程度很高。还有就是想起多年前使用这个主题做的一个博客程序,发现很容易被搜索引擎搜到。

除了关键的内容外,还需要良好的页面结构,以让搜索引擎更好的根据页面标签分辨页面内容的主次关系。

结构上定义

  • <header> 定义了站点的头部信息,也就是页眉,一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。
  • <nav> 定义导航链接,也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构,分类等。良好的信息架构,更有利于蜘蛛的爬行和权重的分布。
  • <footer> 定义了底部信息,也就是页脚。放置页脚导航,一些比如公司介绍,联系我们之类的信息。一般来说对网站比较不重要,有可能搜索引擎会降低其位置的权重。
  • <section> 该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的 <section> 标签找出其信息架构。
  • <article> 定义文章区域,可以更有利于搜索引擎识别网页的内容以及判断相关性。
  • <aside> 定义页面内容之外的内容,在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于区域。aside标签的文字信息与 article 标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。

块元素标签

  • <figure> 定义媒介内容的分组,以及它们的标题,
  • <figcaption> 定义 figure 元素的标题。这两个元素可以说非常好的使媒介和文字说明联系在了一起。有利于搜索引擎理解内容。文字说明是可见的。
  • <time> 定义日期/时间,time标签可能会作为一个来判断网页文字源,也就是能够通过time标签来识别哪篇文章是原创的。
  • <audio> 定义音频
  • <video> 定义视频

结构变化

之前结构,传统的 div+css 写法:

HTML: 传统的 div+css 写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="header">
            Here goes logo, navigation, etc.
        </div>
        <div id="main-content">
            A place for website's main content
        </div>
        <div id="footer">
            Footer information, links, etc.
        </div>
    </body>
</html>

使用 HTML5 写法

HTML: 使用 HTML5 写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <header>
            Here goes logo, navigation, etc.
        </header>
        <main>
            A place for website's main content
        </main>
        <footer>
            Footer information, links, etc.
        </footer>
    </body>
</html>

稍完整的页面结构对比如下图:

总结

好的页面结构可以帮助搜索引擎解读,但还有其它的方式,如 MicrodataJson-LD,这都能很好的给搜索引擎输出页面的内容。

Write a Comment

Submit Comment Login
Based on Golang + fastHTTP + sdb | go1.16.7 Processed in 1ms