中小型网站移动端优化方案

    google seo 小Q 来源:小Q网络营销 7189次浏览 8个评论

    “移动”对各大互联网公司的意义已不言而喻。这两年,各家公司来自移动端的流量均上升迅猛。权威网络分析公司公布的数据显示通过移动设备上网的流量占全球网络总流量的54%。移动互联网营销是一个大的趋势, 但是怎么样去做恐怕还都一筹莫展。要做好移动端网络营销,首要的是要做好移动端网站的优化工作。下面小Q主要为大家讲解如何做好谷歌移动端网站的优化工作。做好移动端是要以搜索引擎优化的前提下尽可能去照顾用户体验。

    移动端解决方案的选择

    网站移动端的建设,Google给出了三种移动页面解决方案中(M站,响应式页面,随机移动页面)针对这三种解决方案的优缺点,归纳总结如下,大家可根据自身的实际情况选择适合自己的解决方案。

    1)响应式页面通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备(桌面设备、平板电脑、移动设备、非视觉性浏览器),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。“自适应网页设计”是 Google 推荐使用的一种方法。

    要向浏览器表明您的网页会自行调整以适应所有设备,请向文档的标头添加以下元标记:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    响应式页面优点包括:
    1. Google官方推荐的移动页面解决方案。从目前来看,Google的移动化优化策略都是已响应式为基础的。例如Google刚刚推出的“Mobile Friendly”测评来说,响应式页面的整体评价要比独立移动页面好很多
    2. 能针对不同的移动端设备自动适应屏幕的大小,减少了跨屏幕访问者浏览时的阻碍,利于用户体验
    3. PC页面和Mobile页面使用同一个URL,利于SEO权重,容易获得好排名,进而获得更多流量
    4. 从维护上来说,不会像M站页面一样需要维护两套代码,减轻了技术压力和开支
    5. 只通过修改CSS和JS便可实现,实现起来技术成本较低。

    响应式页面缺点包括:
    1. 一定要控制好响应式页面的代码量,方式网页加载速度过慢从而导致流量流失
    2.  因为主要继承PC页面的功能设计,视觉设计,互动设计,所以网页自定义的要素比较 少

    2)随机移动页面:(这个不推荐使用)该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解,针对不同设备类型生成不同版本的 HTML。

    3)M站该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备,然后使用 HTTP 重定向和 Vary HTTP 标头重定向到相应的页面。
    M站优点:
    1.  独立移动页面能够更多的自定义页面的视觉,互动以及功能模块,更能满足网站的功能设计
    M站缺点:
    1.  需要单独维护一套独立的移动页面代码,需要的技术投入较大,而且是长期性的
    2. 非Google官方推荐的移动页面的解决方式,跟Google移动化产品的发展方向明显不一致。

    选择哪种方案需要根据你自身的实际情况来决定,响应式页面对于中小企业来说是比较好的选择,也是谷歌推荐的解决方案。但如果你的业务对于页面上的自定义功能要求非常高,那么相对来说M站会更适合你。

    对于一些很小的企业来说,如果你的网站是WordPress或者是Magento搭建的,那么你实现响应式页面是非常简单的,买个响应式的主题或者模板,给你的网站安装好,就行了,省时省力,操作简单。

    移动站的优化策略
    基于响应式页面的移动站点和基于独立移动页面的移动站点进行优化时的差别还是非常大的。现在就来分情况看下这两种移动站点该如何进行优化。

    响应式移动站点的优化:
    1)URL:由于响应式移动站点的URL规则都继承PC站点的URL规则,因此,只要做好PC站点的URL优化后响应式移动站点无需特别优化
    2)代码量:响应式移动站点一定要控制好页面代码的数量,避免代码过多过重导致的页面加载缓慢从而影响访问者的用户体验
    3)Meta:响应式页面会自动继承PC端的meta信息,无需特别优化
    4)移动网站地图(移动sitemap):必须要单独为移动页面制作一个适合Google的移动端蜘蛛爬行的移动网站地图,并提交到Google网站管理员工具中
    5)CSS和JS:一定要外调CSS和Javascript文件
    6)404页面:要有404页面,最好404页面在几秒后自动跳转回首页。404页面能够挽救不少你本来应该丢掉的流量
    7)Hreflang语言标签:在PC页面中标注即可
    8)Schema:没有特别设置的情况下,富文本摘要以及各种形式的结构化数据标签只需要在PC端标注就好了,响应式页面上会自动继承
    9)Flash优化:不要在移动端使用flash文件
    10)图片优化:一定要使用专门为移动端优化过图片大小的图片,而不能直接在移动端使用PC端的图片。当然,更为简单的做法让程序来自动的缩放图片的大小以适应不同的设备

    独立移动页面的优化(M站的优化)
    1)URL:URL的优化是独立移动页面优化的核心,重中之重。对于独立移动页面来说,必须要设定好独立移动页面和PC页面之间的对应关系。
    2)代码量:控制好代码数量,不要太多即可
    3)Meta:由于不继承PC页面的meta信息,需要重新优化meta规则和信息
    4)移动网站地图:如果说对于响应式页面来所移动网站地图可有可无的话,那么对于独立移动页面来说,移动网站地图就是必须的,因为独立移动页面没有移动网站地图的话很难被Google及时收录和排名!
    5)CSS和JS:一定要外调CSS和Javascript文件
    6)404页面:要有404页面,最好404页面在几秒后自动跳转回首页。
    7)Hreflang语言标签:需要在独立移动页面的代码中重新标注
    8)Schema:需要在移动独立页面的代码冲重新部署素有的schema标签
    9)Flash优化:不要在移动端使用Flash
    10)图片优化:一定要使用专门为移动端优化过图片大小的图片,而不能直接在移动端使用PC端的图片。当然,更为简单的做法让程序来自动的缩放图片的大小以适应不同的设备

    选择好了适合你自己移动策略,并做好对应的移动端优化之后,就需要来检测一下你的操作是否正确。

    移动优化效果观测

    移动端优化是未来SEO的重点,因此,Google给我们这些SEO从业者提供的一些列工具也随着这一趋势不断增添着关于移 动优化效果的观测工具,常用的工具有
    1)移动设备的易用性:Google webmaster tool中的“移动设备的易用性”。
    2)Google最新推出的Mobile Friendly评测工具。
    3)移动页面抓取测速工具。

    我们需要根据这三个工具提供的数据来不断的对我们的移动页面进行优化,下面详细说下这三个工具的使用方法:

    1)移动设备的易用性(Mobile Usability):Mobile Usability 是Google webmaster tool中提供的一款关于移动页面质量的监控工具,它只在一定的大原则方面提供指导意义,敦促你要遵守Google 倡导的移动页面标准。如果你的 移动页面在这几个方面做得不好,它会提醒你这些页面违反者这些原则,促使你改进。

    我们来具体的看一下这个功能,首先你点开左侧的Mobile Usability的按钮,然后在右侧上半部分你能看到Google根据自己mobile页面原则提示你的错误的总数

    移动设备易用性

    移动设备易用性

    在这个页面,Google会具体的提示你在哪一项原则上你的页面出了多少错误。例如上面这个图中我们可以看到:
    1  未配置视口(Viewpoint not configured)  —  1,060
    2  小字号(Small font size)–  1,060
    3   触控元素间距离太近(Touch elements too close)–  1,060
    4  未按视口调整内容尺寸(Content not sized to viewpoint)–  1,059

    这些提示很容易理解
    1  表示你需要为这1060个页面配置视窗
    2  表示你的移动端的字体过小,需要更换合适的字体大小
    3  表示你的触摸模块的间距过小(或者过大),需要对应的调整
    4  表示你需要根据视窗尺寸的大小调整内容的大小

    如果你一旦检测到了这些错误,你需要及时的向你的程序员反应这些问题,及时的改进,特别一提的是,这些标准同时也是你的站点能不能出现”mobile friendly”这个标签的标准。所以,这些问题不仅仅能够影响访问者的用户体验,同时它们也直接的影响你的移动网页的排名和流量。

    2)Google最新推出的Mobile Friendly评测工具,地址为:https://www.google.com/webmasters/tools/mobile-friendly/

    这个工具使用起来相当的简单,你只需要把你要检测页面的URL输入到顶端的搜索框中,然后点击analyze就可以了。然后,你能看到在左边会返回 你的 页面出现了那些问题,在中间则会显示你的这个网页在手机端在Google看来是什么样子的,而在最右边则会询问你一些网站的基本情况以便能更好的手机 移 动站点的数据,进一步分析移动站点。
    当然,对于做营销的人来说,左边出现的错误提示才是真正有意义的东西,我们可以根据这些提示向工程师反应问题,来改进我们的移动页面。

    3)Page Speed网页测速工具地址为:https://developers.google.com/speed/pagespeed/insights/

    Google 的网页测速工具在很早之前就已经出现了,但是,mobile网页测速功能是最近才上线的。它的使用方法和上面的mobile friendly检测工具一 样,你只需要输入URL点击分析就可以了。(当然,如果你要检测移动页面的话,首先要点击Mobile这个tap)

    测速工具

    测速工具

    当你点击分析后,这个工 具就会给你返回你这个页面的网速评分,如图中的页面就获得了60分的评分。当然如果你的网页上存在一些要素影响了 网页的加载速度的话,这个工 具都会给你在下面做出具体的提示,例如“缩小Javascript文件”,“优化图片”等等,总之如果这个工具提示了你有这些 问题,你需要根据这些提示 改进移动页面的这些要素。正如你知道的,页面的加载速度本身也是一个比较重要的影响SEO排名的一个因素,因此如果你的移动页面 加载速度比较难的话,本身影响用户体验丢失流量不说,更会影响你关键词的排名。


    版权所有丨 转载请注明中小型网站移动端优化方案
    喜欢 (8)

    您必须 登录 才能发表评论!

    (8)个小伙伴在吐槽
    1. 抢到沙发!yeah~~~ Q神,关于M站优化的问题能不能再扩展一下,移动端和pc端URL的处理之间的关系该如何处理? 坐等Q神指点!
      小黑屋3422015-04-16 11:33
      • 小Q
        @小黑屋342: 这篇文章只是从宏观和整体上阐述了如何做好移动端优化,还有很多细节的东西由于字符原因就没发表出来。放心吧,你在博客留言了,我会私下把移动端优化的全部方案发给你。 PS: 移动端优化的底稿可是有近万字呢。发给你慢慢看去吧。哈哈。
        小Q2015-04-18 00:13
    2. 关于移动端优化一劳永逸的方法还是响应式页面,不管是对技术还是对SEO维护起来都更方便,不会出现漏改的情况。等着我们家做自适应
      **艳2015-04-17 16:07
      • 小Q
        @**艳: 恩恩 ,自适应确实是最佳的解决方案,在以后它的优势也会越来越突出。
        小Q2015-04-18 00:07
    3. 学习学习。。。
      叽叽歪歪2015-04-17 18:23
    4. 您好,请问为什么不推荐 “随机移动页面” 这个方式呢?google文档确实是首要推荐自适应设计,不过目前我们没这个能力做。我们目前做到pc到平板的尺寸,通过css和js,可以很完美的适应,可是要适应手机的话,为保证客户的用户体验,很多内容是要拿到的,这个没法通过css和js控制。我们目前就采用的“随机移动页面”这个方式,通过判断客户的设备,如果是手机访问就读取不一样的html内容。还有麻烦您是否也能发一份移动端优化的全部方案给我,我是做技术了,刚开始学做seo,望大神指教。非常感谢!!!
      emily2016-08-17 18:51