网站前端代码优化，让百度高效识别移动页面-建站技术-魔趣建站-我们共同的建站资源共享平台！

网站前端代码优化，让百度高效识别移动页面 [复制链接]

moqu8 2017-2-5

很久没给大家分享了今天来一篇关于前端代码优化，让百度高效识别移动页面。

　　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

　　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的一些兼容性代码。
　　此外div块的个数也值得留意，没有哪家移动页面会过量运用div块；还有典型的只用于适配PC机器的HTML代码，例如：accesskey（假如移动页面用，要不前端招错人了，要不产品招错人了，应该惹起警惕）head和正文两大局部，根本涵盖了一张页面最主要的局部。
　　网站优化人员一定要把握这些运用细节，辅佐前端工程师从正反方向将公司的PC和手机页面泾渭清楚地呈现给搜索引擎。试想假如你每日被抓取页面到达90%的辨认率，而普通程度是70%，这种优化增量是十分显著的。