前端项目优化方案 前端代码优化，让百度高效识别移动页面

文中指出：“IDC报告显示，2015年第一季度手机市场出货量为1.1亿部左右，同比下滑3.7%。其中智能手机市场出货量为1亿部左右，同比下降2.5%。前端项目优化方案这是过去6年以来，智能手机市场第一次出现季度同比下滑的情况。”

简单说，我国智能机不但普及，且已趋饱和，移动红利即将消耗贻尽。

结果上讲，重大网站没有完成移动化需亡羊补牢，中小网站去完成移动化迫在眉睫。

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

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

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

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

例：“!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile1.0//EN””””

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页面的功能，需选择性使用。

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

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

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

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

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

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-62918-1.html