当前位置: 首页 > Web前端 > HTML

网页语义的SEO和ARIA

时间:2023-04-02 13:39:03 HTML

快速理解网页语义的时候,只知道网页语义有利于SEO,便于屏幕阅读器阅读,却不知道如何利于SEO,便于读者阅读阅读,带着这个问题,进行了一些探索和总结。SEO什么是SEO?SEO(SearchEngineOptimization,搜索引擎优化)是一种利用搜索引擎搜索规则来提高目标网站在相关搜索引擎中排名的方法。通俗地说,就是根据搜索引擎的规则对你的网站进行优化,使你的网站能够排在用户搜索结果的前列,增加网站的访问量。SEO常用的方式是采用DIV+CSS布局。采用div-css布局的网站对搜索引擎非常友好,避免了Table嵌套层数太多搜索引擎无法抓取的问题,简洁结构化的代码更方便。有利于突出重点,适合搜索引擎抓取。尽量不要使用表格布局,因为搜索引擎懒得爬取超过3层嵌套表格布局的内容。TDK优化TDK,即title、description、keywords。1、标题在SEO中,标题的优化起着重要的作用。无论是从用户体验的角度还是从搜索引擎的排名效果来看,标题都是页面优化最重要的因素。标题分隔符通常包括,,_,-和空格。其中_对百度比较友好,-对谷歌比较友好。英文站点可以使用空格,中文站点则较少。推荐做法:每个网页都应该有一个唯一的标题,避免所有页面使用相同的默认标题。标题要清晰,包含网页最重要的内容。文章标题不是很长,也可以加一些关键词,比如文章标题_关键词_站名。用户通常从左到右浏览。重要的内容应该放在标题的前面,供用户使用。语言描述。如果您同时拥有中英文网站名称,请尽量使用用户熟悉的名称作为标题描述示例:Alibaba1688.com-全球领先的采购和批发平台,批发网络京东(JD.COM)-正品低价,质量保证,发货及时,轻松购物!2.description描述不作为权重计算的参考因素。该标签的有无不影响网页的权重,只会作为搜索结果摘要的选择目标。用户最有可能使用网站摘要来决定是否浏览该网站。推荐方法:网站首页、频道页、产品参数页等没有大段文字可以概括的网页,最适合用description来准确描述网页。不要堆积关键字为每个网页创建不同的描述,并避免将它用于所有网页。同样的描述长度合理,但不能太长或太短(最好100-150个字符,对应中文50到75个汉字)。示例:3.关键词关键词在搜索排名中的权重不高,但合理的设置可以提高关键词密度,优化搜索结果页面体验。通过增加关键词密度来提高关键词在搜索引擎中的排名是SEO优化的常用方法。SEO的核心思想是在每个页面抓取几个关键词(一般不超过5个)进行核心优化,所以设置一到三个与本页面内容相关的主要关键词就足够了。关键字在英文状态下用逗号分隔。不要再滥用关键词,那样会给搜索引擎留下不好的印象。示例:使用HTML结构1、h标签h标签在html代码中为“标题”也就是说,就像一篇文章一样,标题是文章最重要的对象,也是搜索引擎在排名时重点关注的对象。html中有六个h标签,分别是h1/h2/h3/h4/h5/h6,分别代表不同的层次。h1标题的权重更大,依此类推。一般情况下,每个页面都应该有一个唯一的h1标题,但是在html5中h1标题可以出现多次,每个有结构轮廓的标签都可以有自己独立的h1标题,比如header,footer,section,aside,article。关于h标签的使用,需要根据实际情况使用,不能随意滥用。比如一篇文章中不可能有多个一级标题,那么h1在同一篇文章中只能出现一次,而h2等可以出现多次。根据你需要表达的内容的重要性,可以分别使用不同的h标签。特别注意,h标签中最好有关键字!但不是虐待。在页面中合理使用h1-h6标签,可以使页面内容的主次结构清晰,有利于搜索引擎识别内容重点。2.Altalt是图片中的标注,对图片优化非常重要。搜索引擎无法有效识别图片内容。给img加上alt属性,相当于告诉搜索引擎图片是什么,从而获得更好的图片排名。一般在插入图片的时候,我们会在alt中设置图片的描述内容,可以包含关键词但不要刻意堆砌。尤其要注意的是,这些内容不能重复,否则很容易被搜索引擎惩罚!例子:第三,strong,em标签这些标签可以把文字变成另一种突出的风格,如果它是粗体,它变成斜体。它们不仅可以在视觉上吸引读者的注意力,搜索引擎也会将它们标记为关键词。strong被认为是“增强”,em被认为是“强调”,即这两个标签具有特殊的含义,对于网站优化非常重要。很多时候,我们在优化网站的时候,都会突出关键词。这时候用strong或者em比用b或者i要好很多。4.Nofollow站内链接使用Nofollow,可以影响搜索引擎的排名。它实际上是HTML标签中的一个属性。它的主要作用是告诉搜索引擎蜘蛛不要跟踪带有nofollow属性标签的链接,即告诉搜索引擎蜘蛛禁止抓取和传递权重。比如在网站的一些评论和留言中,总会有雇主留下的各种链接地址,久而久之就会形成大量的垃圾链接。这对主站影响很大,会导致这些链接之间互相传递权重,最后分散主站的权重。添加方法:第一种添加nofollow属性标签的方法是比较常见的。主要作用是告诉搜索引擎蜘蛛不要跟踪这个链接,第二种方法添加nofollow属性标签主要是告诉搜索引擎这是一个出站链接,不允许跟踪。虽然在出站链接上加上nofollow属性标签后,搜索引擎蜘蛛第一次发现这个链接时还是会抓取这个链接,但是搜索引擎会自动记录这个链接的nofollow属性值。因此,不会为该链接导出权重。链接网址1.统一网址http://www.domainname.comhttp://domainname.comhttp://www.domainname.com/index.htmlhttp://domainname.com/index.html以上四个其实就是首页.虽然不会给访问者带来什么麻烦,但是对于搜索引擎来说,有四个相同内容的网址,很可能会被误认为作弊。而这四页的权重就会被分散。2、如果301跳转网址发生变化,一定要将旧地址301指向新地址,否则之前的一些包含权重就白费了。3、URL层级链接目录层级越浅,权重越大。在没有其他反向链接的情况下,每个目录的权重只是其父目录权重的一部分,因此该权重将低于其父目录。也就是说,层级离首页越远,权重越小。这是一个前提,即没有其他外链影响。因此,网站在建立外部链接或调整内部链接布局后,会出现一些低级目录的权重高于上级目录的情况。特别是在特定目录关键字的排名能力方面。京东98%以上的页面,URL层级都在顶级域名下,顶多也在一级目录下。这样既保证了权重最好的主域名被继承,又减少了权重的分层损失。例如:京东一级分类页面URL:http://channel.jd.com/electronic.htmlhttp://channel.jd.com/home.html二级分类URL:http://list.jd.com/670-677-678-0-0-0-0-0-0-0-1-1-1-1-1-72-4137-0.html从上面的网址来看,不超过两级链接层,尽可能减少链接的层次。同时也要尽可能的短(摘自【京东SEO】京东网站优化分析)ARIA什么是ARIAAccessibleWebInitiativeBarrier-freeRichInternetApplicationSpecification(WAI-ARIA,简称ARIA)。主要针对视障人士、聋人、行动不便的残疾人和假装残疾人的测试人员。尤其是对于眼睛看不见的盲人来说,他们需要借助屏幕阅读器等辅助设备来浏览网页,屏幕阅读器可以朗读或输出盲文。2015年5月21日,W3CHTML工作组(HTMLWorkingGroup)发布了在HTML中使用ARIA的标准工作草案(NotesonUsingARIAinHTML)。该文档实际上指导开发者如何将WAI-ARIA1.1规范(AccessibleRichInternetApplicationsspecification,WAI-ARIA1.1)规定的无障碍辅助信息添加到HTML文档中,从而使残障人士更容易访问Web内容和访问网络应用程序。ARIA使用规范根据ARIA规范中描述的要求,Web开发人员可以使用role和aria-*为HTML元素添加ARIA属性。其中role标识了一个元素的角色,aria-*描述了与之相关的事物的特征和状态。一些HTML元素在ARIA中会有相应的默认属性,但并不是所有的HTML元素都会有。下面是一些具有默认角色属性的元素:元素角色属性a带有href属性的是:role=link,没有role=linkarticlerole=articleasiderole=complementarybodyrole=documentbuttonrole=buttondialogrole=dialogdlrole=listh1-h6role=heading,带有aria-level=1-6`表示标题级别inputtype="button"role=buttoninputtype="checkbox"role=checkboximgalt="sometext"role=img没有默认角色属性的元素可以通过显式设置属性值声明角色和aria-*。如:

//按钮被禁用
注意:当使用的元素(HTML5)是语义的并且有对应的默认角色属性使用这些元素时,不应重新定义角色属性和aria-*状态。推荐使用而不是。使用角色时不能违反标签本身的语义。例如,不允许在按钮元素上使用role=title,因为按钮元素具有与标题语义冲突的默认特征。这里只是简单介绍一下ARIA的基本使用、注意事项以及与ARIA相关的常用HTML元素。更深入的理解请阅读大魔君在w3cplus上的这篇文章。从web语义到SEO和ARIA,END非常感谢前辈们的辛勤付出,让我们站在了巨人的肩膀上。全文参考:【京东SEO】京东站优化分析SEO优化实战Web前端开发学习3:SEO代码优化WAI-ARIA无障碍Web规范