专栏首页SEO「知识」SEO深入学习---HTML语义介绍

「知识」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),作者:黄伟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动页面SEO优化最基本的3要素

    黄伟SEO
  • 「实用性」最全的SEO优化技巧总结

    黄伟SEO
  • SEO新手必知50个SEO术语词解释

    黄伟SEO
  • Python爬虫:抓取整个互联网的数据

    爬虫,也叫网络爬虫或网络蜘蛛,主要的功能是下载Internet或局域网中的各种资源。如html静态页面、图像文件、js代码等。网络爬虫的主要目的是为其他系统提供...

    蒙娜丽宁
  • 百发有戏,有戏吗?

    百度今日联合中信信托、中影股份和德恒律师事务所共同推出“百发有戏”。这是一款投资与消费紧密结合的新兴互联网金融产品,用户为特定电影投资至少10元之后,将获得一些...

    罗超频道
  • 【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示1、数据格式准备工作2、业务层实现3、控制层实现4、前端视图处理

    前面一节 我们已经实现博客类别的dao层的实现,其中特别讲解了博客类别的分页的实现,那么现在我们实现了后台的分页,那么前台分页怎么显示呢,这时候我们用到了eas...

    yukong
  • NVIDIA Jetson OpenCV开发实战教程(上)

    本系列为NVIDIA 2015年=2016年陆续录制的,但对于NVIDIA Jetson新手来说,学习OpenCV开发依旧很具有学习意义。总共9节课。

    GPUS Lady
  • 02 . Ansible高级用法(运维开发篇)

    ansible是python中的一套模块,系统中的一套自动化工具,可以用作系统管理,自动化命令等任务

    youmen
  • 浅谈JavaScript如何操作html DOMJavaScript 能够改变页面中的所有 HTML 元素改变 HTML 样式** JavaScript 有能力对 HTML 事件做出反应**添加和删除

    ** 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。**

    desperate633
  • Ajax请求过程中显示“进度”的简单实现

    Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Aja...

    蒋金楠

扫码关注云+社区

领取腾讯云代金券