移动版本的优化——说白了就是ＰＣ和移动端网页的对接

最新推荐文章于 2024-03-25 21:49:28 发布

转载最新推荐文章于 2024-03-25 21:49:28 发布 · 7.1k 阅读

文章标签：

#移动 #优化 #搜索引擎 #移动搜索 #手机搜索

前端专栏收录该内容

18 篇文章

订阅专栏

本文探讨了移动搜索优化的三种情况：独立URL的移动版本、URL不变的移动版本和没有移动版本。针对每种情况提供了优化策略，包括转向、Meta标注和Sitemap通知等方法。同时介绍了百度和Google对移动版本网页的不同处理方式，以及URL不变移动版本的优势和局限性。

其实很久之前就注意到了，看小说的时候发现很多网址前面有个“m.”，当时就怀疑这是移动端的标志了，还曾经试图去掉“m.”看能不能转为PC端的，此处吐槽一下，本人觉得在很多情况下PC端的看起来比移动端的爽，虽然有很多广告这点很头疼！

以下内容基本摘自昝辉先生的《SEO实战密码》。上图：

移动搜索一般指的是手机搜索。Pad、平板电脑类设备通常被视同PC，因为屏幕尺寸和用户体验更靠近PC。

　　网页的移动搜索优化分为几种情况：

　　１.有移动版本，并且有专用的与PC版不一样的URL；

　　２.有移动版本，但URL不变，与PC的一样；

　　３.没有移动版本。

　　独立ＵＲＬ的移动版本

　　在独立的的URL上建立专门为手机优化过的移动版本，移动版与PC版虽然URL不用，页面排版布局页也非常不同，但内容相同，是一一对应的。

　　１.自主适配

转向，适用于所有搜索引擎。百度建议使用301转向（永久转向），不要使用JS转向；Google表态使用301、302、JS转向都可以，更推荐302（暂时转向）。

注意：转向要在对应的页面之间进行，不要把所有的页面都转向移动版的首页，会使得搜索引擎无法判断，用户体验也不好。不如不转向，给用户一个排版和体验不怎么样的页面，比给用户一个找不到想要的信息的页面好。

2.Meta标注

技术原因不能做转向，可以用meta标签告诉搜索引擎两个版本之间的对应关系。百度和Google使用的标签不同。

百度要求在PC版页面HTML代码<head>部分加上meta标注：

  <meta name="mobile-agent" content="format=html5;url=http://m.domain.com/123.html">

即通知百度，本PC页（http://www.domain.com/123.html）对应的手机页面在http://m.domain.com/123.html。

Google的要求是，在PC页面标注：

  <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.domain.com/123.html">

同时在对应的手机页面（http://m.domain.com/123.html）标注：

  <link rel="canonical" href="http://www.domain.com/123.html">

Google要求在PC和手机页面同时都要加meta标注。

3.对应关系Sitemap

如果转向、meta都不能做，还可以通过Sitemap通知搜索引擎PC页面和手机页面的对应关系。

百度：登录百度站长平台，在“其他工具”-“开放适配”部分提交对应关系Sitemap，页面对应关系可以是url级别或者pattern级别的。Sitemap制作方法百度有详细说明：http://zhanzhang.baidu.com/wiki/62.

Google，可以在PC版本的正常Sitemap中加入同样的rel=“alternate”meta标注，手机页面的rel="canonical"标注也要保留。

也可以自主适配、meta标注、Sitemap都做，要注意，转向及标注的URL必须一致。不要出现一个移动页面对应多个PC页面，或一个PC页面对应多个移动页面的情况。

URL不变的移动版本

没说的，共用一套代码，针对手机浏览器做的优化主要通过CSS控制布局排版、导航的简化，以及JS控制广告、侧栏等的删减。即响应式设计。

注意：不要禁止搜索引擎抓取CSS、JS及图片文件，不然搜索引擎无法判断页面在手机端是否易用。

长远来看， URL不变的移动版本最为理想：

1.网站维护更简单；

2.用户分享更方便，信号集中在一个URL；

3.不用转向，避免了过程中出错，影响用户体验，速度也更快。

如果要使用URL不变的移动版本，目前百度建议在自适应的页面加上这样的meta标注，帮助度娘理解页面适用于PC和手机，会根据屏幕尺寸调整布局和效果。

    <meta name="applicable-device" content="pc,mobile">

缺点：移动版使用同样的HTML代码，其中有的内容可能在手机上通过CSS隐藏，如导航的简化、减少图片显示、删除侧栏等，然而HTML代码中还存在，浪费了带宽和下载时间。

没有移动版本

没有移动版本，PC页面在手机上显示效果也不好，百度和Google的处理方法不一样。

百度会尽量将网站转码，也就是生成一个适合手机浏览的移动页面，供搜索用户访问，虽然在移动搜索结果中显示的URL、标题等是网站的，用户点击搜索结果后看到的也是网站内容，但实际上用户访问的是度娘服务器上的移动页面，没有真正访问网站页面。

如果站长不希望页面被转码，可以在页面上加这个meta标签:

   <meta http-equiv="Cache-Control" content="no-transform">

另一折中解决方法是使用百度的PC网站快速移动化工具：SiteApp（注意和Sitemap区分）：http://siteapp.baidu.com/。

站长添加要移动化的站点域名，选择模板，定制导航，SiteApp就生成一个WebApp。站长再选择一个移动版本的子域名，如m.domain.com，将子域名解析到百度服务器，用户就可以通过移动版本访问手机页面，和前面讨论的独立URL的移动版本是一样的。

优点：SiteApp有多套模板可供选择，提供后台流量统计、优化工具，更重要的是实时同步PC页面内容，站长无需维护，省时省力。

　缺点：较为简陋，体验不太好。

　Google没有转码机制，对没有移动版本的网站，直接返回PC版本。

　百度如果找不到对应的移动版本，转码效果又不好时，也会直接返回PC版本。