【转】移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇

2015-06-29 SEO
字号:T|T

转自:http://zhangge.net/4369.html

 

这些天,在给博客的标签页(tag)添加跳转和META动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白!

总结前,先来回顾下小白张戈在移动适配这条道路上的摸爬滚打:

  1. 百度开放适配专用sitemap制作说明
  2. 360站长平台移动适配文件制作说明
  3. 完美实现移动主题在360网站卫士缓存全开情况下的切换
  4. 移动搜索SEO分享:利用Meta声明来做百度开放适配
  5. 利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配

必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:

张戈博客的PC站是:http://zhangge.net

对应的移动站点是: http://m.zhangge.net

创建移动站点后,我们再通过一个js来判断访问者的UA信息,实现自动跳转功能 [详细部署方法]。

所以,移动站点的创建主要是为了弥补PC站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对2个站点进行移动适配。

目前张戈掌握的几个搜索引擎的移动适配做法如下:

百度:xml对应关系适配、Meta标注适配(特有)[相关文章1]  [相关文章2];

谷歌:Meta标注适配 (同样适合雅虎、必应等国外搜索引擎)[相关文章];

360:txt对应关系适配[相关文章]。

下面主要分享下META标注和移动跳转的部署方法:

一、完整代码示例

首页举例,实现移动适配META标注、移动站跳转的做法如下:

①、在PC站点部署代码:

head部分:

footer部分:

②、在移动站点部署代码: 

head部分:

footer部分:

以上则为首页的移动适配+跳转的完整代码,但一个网站有N多页面,所以我们必须做成动态代码,实现每个网页的移动适配及跳转!

二、动态部署代码

要做动态部署代码,就得考虑建站程序所用语言,目前最流行的建站语言主要是php和asp。php以wordpress为主,其次有emlog、typecho等,asp则主要是ZBlog。

以往张戈博客的文章分享的适配全部都是wordpress专用的,而且代码繁杂,通用性很差!最近,张戈在给博客的标签页做移动适配的时候,突来灵感,找到了一个最简单通用的方法,可以应用到所有建站程序!

核心思想很简单:既然是每个页面都要做移动适配,那么先动态获得当前页面地址,然后进行规则替换即可!

①、Wordpress专用

我们先将如下代码加到header.php

然后继续添加如下代码,就能完成所有页面的PC站点的移动跳转和移动适配:

至于移动站的适配,依葫芦画瓢,把进行替换的那句中的http://和http://m. 换一个位置即可!这还要多简单??

②、PHP通用

I、PC站点:

在PC站点的head部分添加php函数(WP可直接加入function.php模板中),用于获取当前页面的移动地址:

然后继续添加如下代码,则可在PC站所有页面的head中动态输出【移动适配\跳转】所需要的代码:

II、移动站点

相应的在移动站点中部署如下函数,用于获取移动站点所有页面对应的PC页地址:

在移动站中继续添加输出代码:

③、ASP版本

ASP张戈非常不熟悉,所以就不详细说明了!有了上面的参考,相信用ASP建站程序的童鞋能轻而易举的完成!

下面仅提供获取地址代码,自己参考折腾吧!

I、获取PC站当前页对应的移动站地址:

II、获取移动站当前页面对应的PC站地址:

有了以上代码,相信你能写出移动适配的输出代码的,不是么?

④、JS通用版本(适配暂时不可用):

这个极其简单,直接获取当前页面地址,然后替换成对应的移动或PC地址即可:

PC页面head部分:

移动页面head部分:

简单是简单,但这个方法的移动适配是不可行的(跳转可行),因为搜索引擎暂时还无法识别js输出内容。不过,谁也无法拍板说搜索引擎以后不会识别。因此,张戈还是把这个方法贴出来,也许多年后能用上,不是么? 

三、注意事项

①、代码针对的是非WWW的顶级域名,如果是带www的,需要修改代码才行,自己摸索吧;

②、代码中用到的UA判断uaredirect.js,移动站和PC站是不一样的!可直接下载张戈博客移动站和PC站的uaredirect.js,放到不同位置,然后相应修改代码中路径即可;

③、PHP版本中用到的函数带,推荐加入到主题模板的function函数模版当中;

④、本文分享的移动适配仅涉及Meta标注的方法,至于另一种sitemap对应关系提交方法请移步查看

⑤、文章看起来非常复杂、详尽,我相信真有需要的童鞋绝对看得懂!如果看完还是不会,张戈可提供有偿服务,协助贵站完成移动适配:http://zhangge.net/pay/。当然还是推荐自己完成,比较有成就感!

四、成果展示

张戈博客做好移动适配有2个多月了,目前效果非常不错,主流移动搜索基本已完全替换为m.zhangge.net:

百度移动搜索

360移动搜索

神马搜索

好了,以上就是张戈博客关于移动适配和跳转的终结篇,希望对你有所帮助!

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《【转】移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇》
日志链接:http://qieyi.org/seo/94.html
博客名称:惬意SEO博客

百度开放适配专用sitemap制作说明
  • 360站长平台移动适配文件制作说明
  • 完美实现移动主题在360网站卫士缓存全开情况下的切换
  • 移动搜索SEO分享:利用Meta声明来做百度开放适配
  • 利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配
  • 必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:
    张戈博客的PC站是:http://zhangge.net 对应的移动站点是: http://m.zhangge.net
    创建移动站点后,我们再通过一个js来判断访问者的UA信息,实现自动跳转功能 [详细部署方法]。 所以,移动站点的创建主要是为了弥补PC站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对2个站点进行移动适配。

    目前张戈掌握的几个搜索引擎的移动适配做法如下:

    百度:xml对应关系适配、Meta标注适配(特有)[相关文章1]  [相关文章2]; 谷歌:Meta标注适配 (同样适合雅虎、必应等国外搜索引擎)[相关文章]; 360:txt对应关系适配[相关文章]。
    下面主要分享下META标注和移动跳转的部署方法:

    一、完整代码示例

    首页举例,实现移动适配META标注、移动站跳转的做法如下:

    ①、在PC站点部署代码:

    head部分: footer部分:

    ②、在移动站点部署代码: 

    head部分: footer部分: 以上则为首页的移动适配+跳转的完整代码,但一个网站有N多页面,所以我们必须做成动态代码,实现每个网页的移动适配及跳转!

    二、动态部署代码

    要做动态部署代码,就得考虑建站程序所用语言,目前最流行的建站语言主要是php和asp。php以wordpress为主,其次有emlog、typecho等,asp则主要是ZBlog。 以往张戈博客的文章分享的适配全部都是wordpress专用的,而且代码繁杂,通用性很差!最近,张戈在给博客的标签页做移动适配的时候,突来灵感,找到了一个最简单通用的方法,可以应用到所有建站程序! 核心思想很简单:既然是每个页面都要做移动适配,那么先动态获得当前页面地址,然后进行规则替换即可!

    ①、Wordpress专用

    我们先将如下代码加到header.php 然后继续添加如下代码,就能完成所有页面的PC站点的移动跳转和移动适配: 至于移动站的适配,依葫芦画瓢,把进行替换的那句中的http://和http://m. 换一个位置即可!这还要多简单??

    ②、PHP通用

    I、PC站点: 在PC站点的head部分添加php函数(WP可直接加入function.php模板中),用于获取当前页面的移动地址: 然后继续添加如下代码,则可在PC站所有页面的head中动态输出【移动适配\跳转】所需要的代码: II、移动站点 相应的在移动站点中部署如下函数,用于获取移动站点所有页面对应的PC页地址: 在移动站中继续添加输出代码:

    ③、ASP版本

    ASP张戈非常不熟悉,所以就不详细说明了!有了上面的参考,相信用ASP建站程序的童鞋能轻而易举的完成! 下面仅提供获取地址代码,自己参考折腾吧! I、获取PC站当前页对应的移动站地址: II、获取移动站当前页面对应的PC站地址: 有了以上代码,相信你能写出移动适配的输出代码的,不是么?

    ④、JS通用版本(适配暂时不可用):

    这个极其简单,直接获取当前页面地址,然后替换成对应的移动或PC地址即可: PC页面head部分: 移动页面head部分: 简单是简单,但这个方法的移动适配是不可行的(跳转可行),因为搜索引擎暂时还无法识别js输出内容。不过,谁也无法拍板说搜索引擎以后不会识别。因此,张戈还是把这个方法贴出来,也许多年后能用上,不是么? 

    三、注意事项

    ①、代码针对的是非WWW的顶级域名,如果是带www的,需要修改代码才行,自己摸索吧; ②、代码中用到的UA判断uaredirect.js,移动站和PC站是不一样的!可直接下载张戈博客移动站和PC站的uaredirect.js,放到不同位置,然后相应修改代码中路径即可; ③、PHP版本中用到的函数带,推荐加入到主题模板的function函数模版当中; ④、本文分享的移动适配仅涉及Meta标注的方法,至于另一种sitemap对应关系提交方法请移步查看; ⑤、文章看起来非常复杂、详尽,我相信真有需要的童鞋绝对看得懂!如果看完还是不会,张戈可提供有偿服务,协助贵站完成移动适配:http://zhangge.net/pay/。当然还是推荐自己完成,比较有成就感!

    四、成果展示

    张戈博客做好移动适配有2个多月了,目前效果非常不错,主流移动搜索基本已完全替换为m.zhangge.net: 百度移动搜索 360移动搜索 神马搜索 好了,以上就是张戈博客关于移动适配和跳转的终结篇,希望对你有所帮助!__惬意SEO博客',}" >

    【上一篇】

    【下一篇】

    1 篇回应 (访客:1 篇, 博主:0 篇)

    NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复|头像相关帮助!

    回到顶部