【移动搜索】如何让百度准确地识别页面类型

 SEO优化教程     |      2018-08-23 09:33

    前段时间,百度站长平台微信公众帐号全网首发携程SEO负责人安琦老师的文章《前端代码优化带来搜索引擎高效地识别移动页面》,阅读量超高,被读者誉为“五星好评的干货”。该文章是安琦老师参加杭州VIP大讲堂移动化培训后,与其前端同事深入研究的结果,得到了百度内部工程师的高度认可:

  开篇先摘一段新闻《中国智能手机市场6年首现负增长》,文中指出:“IDC报告显示,2015年第一季度中国手机市场出货量为1.1亿部左右,同比下滑3.7%。其中智能手机市场出货量为1亿部左右,同比下降2.5%。这是过去6年以来,中国智能手机市场第一次出现季度同比下滑的情况。”

  这意味这什么呢?简单说,我国智能机不但普及,且已趋饱和,移动红利即将消耗贻尽。那对于网站优化人员又意味着什么?结果上讲,重大网站没有完成移动化需亡羊补牢,中小网站去完成移动化迫在眉睫。

  制作出用户体验良好的手机页面只是万事俱备,最为关键的临门一脚是获得搜索引擎的青睐,这样才能得到精准的用户,很多网站拥有PC和移动两套页面,从经验上看,精准、高效地被搜索引擎识别不但促进移动页面的排名和流量获取,对PC页面也有额外的效果加成。

  在经历了一轮轮移动H5项目,看过很多移动页面识别和优化的国外文章,更重要的是多次和百度相关人对话和解决问题后,我将一些常见的HTML识别细节总结了两部分,用于促进移动页面被搜索引擎识别、收录,让更多优质流量更早、更多地分发到自己页面。

  一、head标签中的部分

  1.URL设计

  URL尽量含有通用已成趋势的移动命名,例如“m./wap./3g./mobi./mobile./mob/wml/”,可以在子域名等方面体现

  2.页面顶部的doctype标签

  作为协议的重要部分,doctype中是否移动化也很重要,检查是否存在与移动相关的声明,如这些关键词,openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html

  例:“<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”””>”

  3.meta标签中的viewport属性和x-ua-compatible 属性

  viewport,移动前端开发中最重要的标签,响应式设计的根基,如果你的页面是遵守响应式设计的,那么说明这些页面对移动设备有友好的输出。

  典型的的viewport代码是这样的,,判断移动与否的关键属性值为width,如果width=device-width这是典型的移动友好的设计,增加判定为移动页面的砝码,如果width有具体值,且值大于典型的移动屏幕(应该小于600),那么该页面被判定为PC页面的几率大大增加。

  但,META中还有一个很独特的属性作为SEO人员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味非常强烈的功能性代码。示例代码如此,,从百度工程师处得知,该代码会有较强暗示当前页面为PC页面的功能,需选择性使用。

  4.title中的移动暗示

  制作移动页面时,在title标签中写明:“移动版”、“手机版”、“WAP版”、“触屏版”不仅是照顾用户体验的方案,也利于页面的移动识别,反之PC页面要谨慎使用这些文案。

  5.链接link标签的media和href属性中需要注意的细节(多为样式文件)

  media属性值为screen时,表示屏幕中的显示样式,link的href所填写的URL(基本为样式文件的URL)就比较重要了,一定程度加大不同设备的偏重。此时URL中尽量出现/wap,/mobile/这样的命名,同URL设计一样,用于提高页面识别为移动的效率和概率。如URL中含有pc字样则加大识别为PC页面的几率。

  6.一些通用的PC类识别HTML代码

  embed:经常用于嵌入多媒体

  object:用于嵌入对象

  marquee:老旧的滚动特效实现代码

  iframe:想必网站优化人员很熟悉了,典型的PC常用标签

  这些典型的用于PC或者老旧的、HTML5已经有更高效替代方案的旧标签,意味着使用它们将增加页面的PC属性,需要有目的地取舍。

  7.一些javascript中典型的PC特征

  加载swfobject、含有activexobject语句:移动页面根本不会使用如此重的多媒体引用方案(不信你问问你的前端工程师)

  含有netscape(网景)、msie(IE)、firefox(火狐)、browser.msie(IE)这些典型的非移动端浏览器兼容代码的

  设置了timer的 ,以及JS代码含有settimeout的(此处不知道为什么设置timer还有识别的问题),均大幅增加识别为PC页面的可能性

  以上这些中出现的内容,

  二、正文body中需要注意的部分

  链接和文本遵照的原则基本与head中一样——多出现移动相关的字眼;页面设置的宽度不要超过常规移动设备的大小;那些常识中(除非招错前端工程师)绝对只用于PC的一些兼容性代码。