资讯专栏INFORMATION COLUMN

前端进阶系列(一):SEO和HTML语义化

dack / 1768人阅读

摘要:语义化和的重要性约定,对所列出来的标签进行解析。比如,会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。我觉得这就是语义化标签出现的意义吧。

基本概念

SEO:(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传,从而获取收益。

HTML语义化:根据内容的结构的语义化,选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时利于SEO优化。

使用SEO和语义化的目的

前面也做了基本的阐述:

SEO就是为了对品牌的自我宣传,从而获得收益;

语义化的目的:

在没有css的情况下,页面也能呈现出很好的内容结构,代码结构;

提升用户体验:例如title、alt用于解释名词和解释图片信息;

有利于SEO优化:和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;

方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备;

语义化更据有可读性,便于团队开发和维护。

语义化和SEO的重要性

Google、Yahoo、Bing 约定,对 http://schema.org 所列出来的标签进行解析。

原因其实很简单,因为schema标签对搜索引擎很重要。
目前,搜索引擎的发展趋势是全能化,简单化,让用户在最短的时间里获取到想要的信息,让用户在点击搜索结果之前就获取到足够的信息进行判断。

比如Google general search,Google会根据你搜索的关键词推荐网页、新闻、图片、视频、音乐、商品、地图、本地结果、实时结果等等。

比如Google onebox,Google会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。

还有前段时间Google推出的网站截图预览,snippets lists等等。

Google的目标是要整合所有资源,让用户能方便获取到。资源有很多种,文字目前搜索引擎可以完全识别到,但是图片、flash、音乐、视频搜索引擎不能识别或只能识别一小部分,所以以目前的技术,尚不能整合网站上所有呈现出来的资源,所以需要用户进行配合。

我觉得这就是语义化标签出现的意义吧。

搜索引擎希望每个网站都把不同的资源标记出来,并打上搜索引擎容易识别的标签,利于搜索引擎进行判断归类,并在搜索结果中更好的呈现出来。

从SEO角度来看,对搜索引擎重要的就是对SEO重要的。

网站如果按照schema上的规则进行重写代码,方便了搜索引擎对信息的抓取,对网站内容在搜索结果中的呈现会有很好的帮助,能够适应搜索引擎的发展趋势。也许对某些关键词排名不会有明显的效果,但是从长远来看,对于从搜索引擎获取流量应该有不小的帮助。

HTML5的革新—语义化标签

W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。

参考文章:

理解HTML语义化

HTML 5的革新——语义化标签(一)

标签语义化对 SEO 来说有多重要?重要性体现在哪里?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98236.html

相关文章

  • 前端进阶系列():SEOHTML语义

    摘要:语义化和的重要性约定,对所列出来的标签进行解析。比如,会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。我觉得这就是语义化标签出现的意义吧。 基本概念 SEO:(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传,从而获取收益。 HTM...

    songjz 评论0 收藏0
  • 前端进阶系列():SEOHTML语义

    摘要:语义化和的重要性约定,对所列出来的标签进行解析。比如,会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。我觉得这就是语义化标签出现的意义吧。 基本概念 SEO:(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传,从而获取收益。 HTM...

    cartoon 评论0 收藏0
  • 每日前端进阶第三题:说说你对HTML5语义的理解

    摘要:作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。 作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上...

    番茄西红柿 评论0 收藏0
  • 每日前端进阶第三题:说说你对HTML5语义的理解

    摘要:作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。 作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上...

    番茄西红柿 评论0 收藏0
  • 每日前端进阶第三题:说说你对HTML5语义的理解

    摘要:作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。 作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上...

    Kaede 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<