资讯专栏INFORMATION COLUMN

HTML语义化和SEO优化

caozhijian / 2539人阅读

摘要:什么是语义化基本上都是围绕着几个主要的标签,像标题列表强调等等根据内容的结构化内容语义化,选择合适的标签代码语义化便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。参考资料理解语义化的革新语义化标签一

什么是HTML语义化?

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

写HTML代码时应注意什么?

尽可能少的使用无语义的标签div和span;
在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
不要使用纯样式标签,如:b、font、u等,改用css设置。
需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

面试题

简述一下你对HTML语义化的理解?

用正确的标签做正确的事情。
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

html与SEO优化

标签放网页的标题,各个页面不同。

列举出几个重要的关键词。

网页内容的高度概括。

每个页面只能出现一次H1标签,H2标签可以多次:H1权重很高,普遍认为仅次于title,一般资讯详情页的标题、商品详情页的标题,都放在H1里。

图片一定要添加alt属性,title属性可选:搜索引擎不认识图片上的内容,只能通过alt属性来判断,如果是商品列表页,所有商品都加了alt和title的话,容易造成堆砌关键词,所以我一般是只加alt属性。

每个页面的title不同

换行标签只用来在文本间进行换行,标签间的换行通过margin等等。或者

  


搜索引擎抓取seo内容是从上到下,重要内容html代码放在最前面

搜索引擎看不懂js, 重要内容不要用js输出

尽量少使用iframe框架

谨慎使用display:none,搜索引擎会过滤掉这里面的内容

不断精简代码

html5新增的语义化标签


HTML5节元素标签包括body article nav aside section header footer hgroup ,还有h1-h6 address。

address代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
h1-h6因为hgroup,section和article的出现,h1-h6定义也发生了变化,允许一张页面出现多个h1。

参考资料

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

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

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

相关文章

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

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

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

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

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

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

    dack 评论0 收藏0
  • 我眼中的Web 语义

    摘要:语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的...

    zhichangterry 评论0 收藏0

发表评论

0条评论

caozhijian

|高级讲师

TA的文章

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