「知识」SEO深入学习---HTML语义介绍

我们现在经历的那些,无论好的坏的,全部都是微不足道的小事。度过那些摇摇晃晃的日子,所有艰辛也会内化成为力量,留下闪光又珍贵的回忆和一路上坚韧不拔的勇气。

今天给大家讲解一个看似与SEO关系不大的知识点,在下面的讲解中,也许你就能感觉到它的重要程度了。接下来各位同学直接往下看吧,有任何问题,可以直接给我留言。 — — 及时当勉励,岁月不待人。

文档结构语义HTML5介绍

时本文总计约 1500 个字左右,需要花 5 分钟以上仔细阅读。

文档结构语义HTML5,其实,在很早就出来了,也许对于前端人员来说,是非常了解了。不过在实际中,却很少有前端人员按照这个来进行操作。在开始讲之前,黄伟老师就跟大家说明下:为什么语义HTML5对SEO也是很重要的?

在这先不谈SEO优化手法,原创文章等等,搜索引擎蜘蛛来抓取一个页面,它看到的是HTML代码,它也只能基于HTML代码来先进行基础的页面分析,它不能像人工一样知道页面,哪个地方的重要的,哪个地方的次要的(也许我们会想到大数据,人工智能来进行综合分析,但我这讲的是最先进行的基础分析)。从有利于提高搜索引擎分析这方面来说,语义HTML5,无疑是规范了HTML写作手法,让搜索引擎(机器)更快更准备的理解相关内容的意思。

通过上面比较简单的解释,相信各位同学都有所明白它的重要性了。下面就给大家具体的讲解下语义HTML5的相关内容。

1

什么是语义HTML5?

对于HTML标签的作用其实就是主要用于格式化内容,这些标签告诉浏览器如何在页面上显示排版内容。但他们没有指出它们包含的内容类型或内容在页面中扮演的角色。

语义HTML5通过定义特定的标签来清楚地表明这些标签包含的内容扮演了什么角色,从而解决了这个缺点。这些明确的信息可帮助Google和百度等机器人/抓取工具更好地了解哪些内容很重要,哪些是附属的等等。通过在页面中添加语义HTML标记,就相当于我们直接给搜索引擎提供其他信息,帮助Google和百度了解页面各个部分的角色和相对重要性。

例如

这些是非语义HTML元素的例子。他们只能向浏览器传达内容应该如何显示。他们没有提供这些内容在网页上所扮演的角色。

这些是语义元素。他们明确界定了他们所包含内容的作用。

2

为什么我需要使用它?

对于用户来说,用眼睛就很容易识别网页的各个部分。标题,菜单和主要内容都非常容易的识别。

但搜索引擎蜘蛛,它是看不到,所以,它想通过视觉来进行查看与理解页面内容,这是很难做到的。

因此,他们需要我们的帮助。如果我们可以明确的告诉搜索引擎,这些页面的哪一部分是页眉,哪些是页脚和哪些是页面用于导航。最重要的是,告诉他们哪些是最重要的内容,你给他们一个明确的指示。

我一直认为成功的搜索引擎优化就是许多许多小细节的累积。这是可以提高搜索引擎对我们网站的内容的理解的小细节之一,这将有助于我们的搜索引擎优化工作。

3

HTML语义元素都有哪些?

语义HTML标签的例子包括<nav>,<footer>和<section>。还有更多可以使用的语义HTML5标签(例如<blockquote>和<em>),但在本文中,我只查看那些需要将页面内容划分为基本部分的语义HTML标签。

以下HTML5标签可用于<div>标签的位置,以将页面内容分解为各自实现特定角色的标识部分。如果都是这样,搜索引擎为什么不喜欢呢。

这种明确的划分和明确的角色归属到内容的每个部分使得页面更加清晰,更加容易为搜索引擎正确编制索引。

注意:由于这些标签的行为完全像<div>标签,因此它们可以简单地替换页面中现有的<div>,而不会影响布局。

语义HTML5的例子

超简单的语义HTML5示例:

这里我们简单地定义了页面的每个部分扮演的角色 - 标题,导航,主要,页脚。

更复杂的例子

在这里我们已经在我们的主要内容中建立了一个层次、有一个涵盖主标签中心内容的全方位文章。这概述了该页面的该部分的主题。在那篇文章中,我们有多个子主题来开发由嵌套部分标识的主题。

相关内容

间接相关

注意:旁边的内容不一定是主要内容旁边的边栏。它也可以用于主要内容下面的块,其中包含标题,文本和指向其他页面的链接

在这里,我们已经确定了与主要内容之外的页面间接相关的内容。在这里我们表明,旁边的内容与主要文章没有直接关系。

有关HTML语义的内容就先讲解到这里,这次讲解的也只是一些基本知识,下期将给各位同学具体讲解这些HTML语义元素在SEO中有什么意思,这样理解下来,希望对你的SEO技能有所帮助。

您的关注与分享就是我最大的动力

原文发布于微信公众号 - SEO答疑学堂(shareseo)

原文发表时间:2018-02-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构与工程

《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天:人生若只如初见简单记录了笔者初...

25980
来自专栏Material Design组件

Human Interface Guidelines — Loading

18340
来自专栏IT派

10个免费好用功能强大的网页动画效果库

动效设计是2018年的热门趋势之一。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。今天...

50900
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

58930
来自专栏IMWeb前端团队

微信小程序之购物车功能

本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟...

64590
来自专栏lonelydawn的前端猿区

ReactJS的简单介绍和使用

一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一...

22680
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 和iOS Simulator 那点事

React Native 和iOS Simulator 那点事 尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.o...

39240
来自专栏Android群英传

不怕搞事,自定义View云扩散效果

11120
来自专栏大数据钻研

前端开发,从草根到英雄(第一部分)

我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

30550
来自专栏施炯的IoT开发专栏

Windows Phone Developer Tools RTW 新特性-Panorama控件

    昨天实践了一下Pivot控件,今天就趁热打铁,继续来看看Windows Phone Developer Tools RTW 中加入的新特性-Panora...

20690

扫码关注云+社区

领取腾讯云代金券