专业IT科技资讯平台,关注科技、手机、电脑、智能硬件、电脑知识!
当前位置:主页 > 建站 > 东东观点 >

前端代码优化,让百度高效识别移动页面

导读:

 开篇先摘一段新闻《中国智能手机市场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””http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>”


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


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


  典型的的viewport代码是这样的,<meta name=“viewport” content=“width=device-width, initial-scale=1.0″>,判定移动与否的枢纽属性值为width,假如width=device-width这是典型的移动友好的设计,增加判断为移动页面的砝码,假如width有详细值,且值大于典型的移动屏幕(应该小于600),那么该页面被判断为PC页面的几率大大增加。


  但,META中还有一个很独特的属性作为SEO职员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味非常强烈的功能性代码。示例代码如斯,<meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” />,从百度工程师处得知,该代码会有较强暗示当前页面为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页面的可能性


  以上这些<head></head>中泛起的内容,


  二、正文body中需要留意的部门


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


  此外p块的个数也值得留意,没有哪家移动页面会过量使用p块;还有典型的只用于适配PC机器的HTML代码,例如:accesskey(假如移动页面用,要不前端招错人了,要不产品招错人了,应该引起警觉)head和正文两大部门,基本涵盖了一张页面最主要的部门。


  网站优化职员一定要掌握这些使用细节,协助前端工程师从正反方向将公司的PC和手机页面泾渭分明地呈现给搜索引擎。试想假如你逐日被抓取页面达到90%的识别率,而一般水平是70%,这种优化增量长短常明显的。


  最后,分享一个机器学习的思惟给网站优化的新人,此文中央思惟截取如下:



  你从市场上的芒果里随机的抽取一定的样品(练习数据), 制作一张表格, 上面记着每个芒果的物理属性, 好比颜色, 大小, 外形, 产地, 卖家, 等等。(这些称之为特征)。


  还记实下这个芒果甜不甜, 是否多汁,是否成熟(输出变量)。你将这些数据提供应一个机器学习算法(分类算法/回归算法),然后它就会学习出一个关于芒果的物理属性和它的质量之间关系的模型。


  下次你再去市集, 只要测测那些芒果的特性(测试数据),然后将它输入一个机器学习算法。算法将根据之前计算出的模型来猜测芒果是甜的,熟的, 并且/仍是多汁的。


  结合本文中的内容、再结合你已经烂熟于心的搜素引擎工作原理,设想一下,你的所有页面都是芒果,百度是带有识别模型(且该模型会自己练习、纠正自己)的芒果鉴别器,怎么让你的芒果持续性地、每次被拿起来都进入那个又大、又甜、又多汁的篮子?那些一眼就看出来的大甜芒果当然好判定,那些一眼看不出来的呢?我们能不能多出产些一眼就看出来好坏的芒果呢?这样整个果园是不是好收割一点?


  文章中的html细节就是模型的冰山一角。


  很干很技术,小编表示看得云里雾里,假如你都看懂了,那我就给你orz了