移动端页面SEO优化需要注意的10个要点

如今，移动互联网已经成为互联网组成的非常重要的一个分支，如果说以前对移动页面没有很规范的优化和高质量内容评判划分标准，但现在随着各大搜索引擎发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级，移动端的SEO优化也受到广大站长和SEO的青睐。

以目前马海祥测试的数据来看，关键词研究、网站架构和URL设计、页面关键词布局、文案写作、导航及内部链接系统设计等大部分PC版网站优化技术依然适用，没必要把移动页面优化当成一个和PC页面优化完全不一样的技术，说到底，为搜索用户提供高质量内容的目标是一样的，只不过需要考虑手机用户的特殊用户体验需求。

目前的移动搜索排名就是PC搜索排名加上移动因素进行一些调整，下面我就在马海祥博客上跟大家谈谈移动页面特殊的地方，这些要点在独立URL的移动站和自适应设计的移动站都适用。

1、非主体内容、功能大幅精简

PC版页面经常看到两三行顶部导航，这在手机上就没法看了，通常手机版本要大幅删减导航系统，包括顶部导航、面包屑和侧栏导航，即使保留完整主导航，也得折叠起来，用户点击时再打开，如果要显示顶部导航，最多5、6个就差不多了。

同样，广告、页脚、相关文章、Tag链接等PC页面上常见的内容，能删则删，手机上很难容得下这些内容，同时，删减这些内容页可以使页面HTML代码大幅减少，提高页面打开速度。

使用CSS可以隐藏导航等内容，但会产生冗余代码，如果需要隐藏的比较多，不如直接从HTML代码中删除，减小页面文件。

对此，马海祥建议各位站长可以通过删除、缩小、压缩图片，提高打开速度，尽量删除没有十分必要的功能。

2、移动网页的尺寸定位

初涉移动端的设计师，基本都会在尺寸问题上纠结好一阵子才能摸到头绪，我也花了很长时间才弄明白（之前我曾在马海祥博客《详解移动端设备页面尺寸设计原理》一文中跟大家详细的介绍过，有兴趣的博友，可以看下），在此，感觉有必要在此跟大家介绍一下不同系统下的要求：

（1）、IOS系统下的尺寸及分辨率

iPhone界面尺寸：320x480、640x960、640x1136

iPad界面尺寸：1024x768、2048x1536

以上单位都是像素哦，至于分辨率一般网页UI和移动UI基本上都只要72 ppi。

当然，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用640x960或者640x1136的尺寸设计。

（2）、Android系统下的尺寸及分辨率

Android界面尺寸：480x800、720x1280、1080x1920...（单位：像素）

Android比iPhone的尺寸多了很多套，马海祥建议取用720x1280这个尺寸，这个尺寸720x1280中显示完美，在1080x1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

3、创建移动网页

为网站的指定内容创建移动网页，图片、文字格式、导航和网页功能的某些方面(包括尺寸)可能都需要进行调整或转换，这种方法的缺点是网站的传统主页可能也会在移动浏览器上运行，或者需要多点击一次鼠标才能从传统主页到达移动网页。

（1）、界面基本组成元素

移动网站的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。

这里取用640x960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：

状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40 px

导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px

主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px

内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px（为什么是734呢？这是因为：960-40-88-98=734）

至于我们经常说的iPhone5/5s的640x11136的尺寸，其实就是中间的内容区域高度增加到：910 px

马海祥博客提示：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变化，尺寸高度也还是没有变化的，只不过大家再设计iOS7风格的界面的时候多多注意一下。

Android中的大屏手机，我们取用720x1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：

状态栏高度为：50 px

导航栏高度为：96 px

主菜单栏高度为：96 px

内容区域高度为：1038 px（1280-50-96-96=1038）

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96 px

写之前我翻了好多关于Android的界面尺寸教程，都没找到像iOS一样具体的规范，或许因为在安卓中这些控件的高度都能用程序自定义，都没有提到具体的尺寸数值，所以就自己找了Android的设计规范，尺寸都是自己在PS中量的。

Android为了在界面上区别于iOS，Android 4.0开始提出一套HOLO的UI风格，这一风格最明显的变化就是将下方的主菜单移动到了导航栏下面，这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。

（2）、移动页面的字体大小

iPhone上的字体英文为：HelveticaNeue；至于中文，Mac下用的是黑体-简，Win下则为华文黑体。

下图是用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。

Android上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。

同样，在用户体验的调查中，可以看出用户可接受的文字相应问题。

在此，建议大家多留心下一些大公司的数据研究，你会发现很多你根本没考虑到的问题哦（具体可查看马海祥博客《基于页面易读性的文字编排设计要点》的相关介绍）。

其实马海祥觉得还有个更简单的方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小咯。

总之，方法是自己找的，想办法解决问题，自己实践，比别人告诉你印象更深刻，不是么？

4、页面内容是否能正常访问？

Flash在很多手机上打不开，比如iPhone早就不支持Flash了，复杂的JS效果也可能导致页面内容在手机上根本不能显示，想要被搜索引擎读取的内容和链接不要放在JS或Flash中，就算用户手机能显示，搜索引擎也不一定能解析出来。

页面是否弹窗强制APP下载或用户登录后才能看到内容？这是百度冰桶算法主要打击的对象（具体可查看马海祥博客《百度移动搜索冰桶算法上线带给了我们什么信息》的相关介绍）。

还要注意不要用robots文件禁止搜索引擎蜘蛛抓取CSS、JS和图片等外部文件，不然搜索引擎蜘蛛可能无法判断页面布局，甚至无法正常访问内容。

5、采取移动网页和传统网页相结合的形式

这种方法只要求一套网站内容，但至少要有两套CSS样式：一个用于电脑版本；另一个用于移动版本。

事实上，你可以建立多个版本的CSS样式，根据不同的移动浏览器自动调用不同的CSS，这种方法可以避免重复内容问题，但它并不是百分之百的可靠，不要期望移动设备能一直都选择正确的样式表。

6、使用动态移动网页

这是最可靠的方法，但也是代价最高的方法，你需要雇佣一个程序员，帮你实现通过侦测客户端而对网站内容进行实时转码的功能，而且由于移动技术的不断变化，这也只是一个短期的解决办法，但是，如果你想为用户提供最佳体验，将SEO的最高水平应用到移动站点中，这将是你最好的选择。

7、页面打开速度

百度现在给出的参考数字是，页面在手机上需要3秒之内打开，不然用户就跑了，以前给的数字是4秒，除了主机速度、带宽等，打开速度也和下面的内容精简有很大关系（具体可查看马海祥博客《提高网站在移动端打开速度的方法技巧》的相关介绍）。

8、做好自主适配

如果是独立URL的移动站，首先做好自适配，手机用户访问了PC版，自动转向到移动版URL，PC用户由于某种原因访问了移动URL，自动转向到PC版URL，这个转向百度建议用301，Google用301、302都可以（具体可查看马海祥博客《百度移动搜索开放适配服务的3种方法》的相关介绍）。

自适应设计也要检测用户浏览器类型，返回不同版本，百度建议自适应页面加上这行代码，告诉百度这个URL适用于PC和移动版本：<meta name=”applicable-device” content=”pc,mobile”>

不过百度也不一定认可这个标签，马海祥博客做自适应已经一个半月了，也加了上面的meta标签，但百度至今也不认，还在给本博客转码。

9、页面是否方便手机用户浏览、点击？

这是个用户体验问题，而用户体验是现在SEO，尤其是移动SEO的重要内容之一，包括很多细节，例如：

（1）、字体是否够大？如果字体太小，用户需要放大才能阅读，显然谈不上移动友好。

（2）、上下滑动页面一般是必要的，但需要左右滑动页面才能看全内容，在手机上是很不方便的。

（3）、是否有大面积广告？在PC页面上，大量广告就够讨厌的了，在手机上简直就没法忍了。

（4）、导航和内容中的链接是否容易点击？按钮是否足够大？字距、行距是否足够？不要低估了用户们手指头的粗度，手机页面广告点击率大大超过PC端，不是因为手机用户喜欢广告，而是误点的太多了。

（5）、Title不要太长，PC搜索结果中页面标题可以显示20多个字，在移动搜索结果中，这么长就被显示成两行了，虽然占的地方大了，但其实视觉上比较乱，反而不明显。

（6）、购物或其他功能是否够简单？在手机上填写表格比在电脑上难多了。

（7）、手机横竖方向变化时，页面是否自动调整显示宽度？

10、本地查询词

由于使用场景的特性，移动搜索有更强地域性，在手机上搜索吃喝玩乐、旅游、地图、路线、天气等的用户数量很大，做移动SEO时，更要关注地名＋主查询词这种搜索，如“北京饭馆”，“中关村酒吧”之类的词。

页面针对特定地理位置时，比如页面就是关于“王府井酒店”的，百度建议使用地理扩展meta标注省市名称，甚至具体坐标。

马海祥博客点评：

越来越多的屏幕也让移动搜索的能量被扩大，这就需要各位站长结合网站特点，而且认为自身网站特别的有跨平台的需要的时候，可以针对产品的内容提炼出需要移动化的产品，根据目前统计的数据，大部分的网站通过移动搜索的流量逐年上涨，为了适应不同屏幕，全面的将网页改造成为Html5网站内容也是大势所趋。