客服
前端代码优化，让百度高效识别移动页面
开篇先摘一段新闻《中国智能手机市场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,移动前端开发中最重要的标签，响应式设计的根基，如果你的页面是遵守响应式设计的，那么说明这些页面对移动设备有友好的输出。西安网站建设推荐阅读>>> 网站HTML标签SEO优化标准,
典型的的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页面要谨慎使用这些文案。西安做网站推荐阅读>>> 网站代码SEO优化（清理垃圾代码）,
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的一些兼容性代码。西安网站建设推荐阅读>>> SEO代码优化入门的最佳HTML代码教程,
此外div块的个数也值得注意，没有哪家移动页面会过量使用div块；还有典型的只用于适配PC机器的HTML代码，例如：accesskey（如果移动页面用，要不前端招错人了，要不产品招错人了，应该引起警觉）head和正文两大部分，基本涵盖了一张页面最主要的部分。
网站优化人员一定要把握这些使用细节，协助前端工程师从正反方向将公司的PC和手机页面泾渭分明地呈现给搜索引擎。试想如果你每日被抓取页面达到90%的识别率，而一般水平是70%，这种优化增量是非常显著的。
最后，分享一个机器学习的思想给网站优化的新人，此文中心思想截取如下：
你从市场上的芒果里随机的抽取一定的样品（训练数据）， 制作一张表格， 上面记着每个芒果的物理属性， 比如颜色， 大小， 形状， 产地， 卖家， 等等。（这些称之为特征）。
还记录下这个芒果甜不甜， 是否多汁，是否成熟（输出变量）。你将这些数据提供给一个机器学习算法（分类算法/回归算法），然后它就会学习出一个关于芒果的物理属性和它的质量之间关系的模型。
下次你再去市集， 只要测测那些芒果的特性（测试数据），然后将它输入一个机器学习算法。算法将根据之前计算出的模型来预测芒果是甜的，熟的， 并且/还是多汁的。
结合本文中的内容、再结合你已经烂熟于心的搜素引擎工作原理，设想一下，你的所有页面都是芒果，百度是带有识别模型（且该模型会自己训练、纠正自己）的芒果鉴别器，怎么让你的芒果持续性地、每次被拿起来都进入那个又大、又甜、又多汁的篮子？那些一眼就看出来的大甜芒果当然好判断，那些一眼看不出来的呢？我们能不能多生产些一眼就看出来好坏的芒果呢？这样整个果园是不是好收割一点？
文章中的html细节就是模型的冰山一角。
很干很技术，小编表示看得云里雾里，如果你都看懂了，那我就给你orz了！
--百度站长平台
相关文章：
-
绝对地址：网络中的绝对地址是指带有网站域名的网页地址。含有绝对地址的网页能够被搜索引擎更好的收录。 相对地址：只包含本地路径的网页地址，地址通常以/和/表示层级关系。 在网页...
-
网站访问的原理采用的是BS框架，即 browser server。通过Http协议向服务器请求相关页面数据，然后通过浏览器进行解析实现。所以网站的一个基本需求就是一个网站的站点服务器。 目前我所认知...
-
终于把dedecms和discuz整合成功了，分享一下方法 1.安装dedecms，大家都懂的。 2.安装discuz x2，安装的时候我们选择包含ucenter 我把两个程序安装在同一个数据库里，安装成功后我们进入dx后台，然...
-
如何修改discuz首页logo 两种方法简单修改discuz 论坛首页logo，一种是直接从网页后台修改；另外一种是从ftp后台修改。西安网站建设推荐阅读 Discuz目录文件结构表 ， 方法一：从网页后台修改...
-
在你开始搭建一个网站的时候必须得准备以下几个步凑，免得到时手忙脚乱，给网站带来不好的因数： 1，域名 域名就想一个人的名字一样，你首先得想好，必须的和你网站的内容相关，好让...
-
注册好域名租用虚拟主机或者服务器，开始建立一个网站。网站建立成功后，可能多多少少的有些问题。可能是乱码问题，也可能是数据库等等一些原因导致网站无法正常的访问。下面小编就...
-
不需要域名和空间的方法《如何在本地搭建一个网站》。其原理就是利用自己的电脑来作服务器，这里我私人总结了几点好处： 1.不需要申请域名和空间。 2.方便修改主题模板。直接在搭建好...
-
Discuz目录文件结构表最近在学习discuz的程序，真的感觉模板有点复杂（相比织梦DEDE相差甚远）。今天本人将discuz程序目录整理了一下，希望对刚开始接触discuz这个程序的伙伴们有所帮助。 |...
-
一个用户的网站被挂马 很多以prn.开头的文件...这个文件其实是windows禁止建立的..但是可以在dos建立 所以在dos下用更改属性 结果不让改? 然后想恢复权限 不让恢复 ，网站的跟目录被加了几个文...
-
域名是互联网的入口，域名的重要性不言而喻。一旦域名被盗，且转移到其他注册商，将给域名所有人带来巨大的损失。以下小贴士是从网络上搜集的经验汇总，希望给处于域名被盗困境中的...
- 上一篇：网站HTML标签SEO优化标准
- 下一篇：seo怎么优化：手把手的教你SEO优化代码