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

这些天,在给博客的标签页(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:

百度移动搜索

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

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

神马搜索

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:42   其中:访客  32   博主  10

  1. 1980jz 0 来自天朝的朋友 未知浏览器 Unknow Os 河北省廊坊市 联通

    第一次来这,围观下博主文章

  2. php粉丝网 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 宽带通

    哎,我的还没开通移动站点。

  3. 圆月博客 5 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

    很强大很详细

  4. 香港虚拟主机 2 来自天朝的朋友 未知浏览器 Unknow Os 重庆市 电信

    谢谢楼主分享,很不错的样子

  5. 宋小北 1 来自天朝的朋友 未知浏览器 Unknow Os 北京市 联通

    受用了

  6. ysbinang 1 来自天朝的朋友 未知浏览器 Unknow Os 黑龙江省哈尔滨市 哈尔滨工业大学

    感觉默认的几个移动站点太难看了,没用 = =

  7. Phnomi 4 来自天朝的朋友 未知浏览器 Unknow Os 天津市 联通

    好强大

  8. 热腾网 6 来自天朝的朋友 未知浏览器 Unknow Os 河北省石家庄市 联通

    可算学习了。

  9. pptv官方下载 www.ipptvs.com 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 犀思云(北京)云计算科技有限公司

    百度有一个js跳转吧

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      这个就是修改自百度js,但是这个更完善

  10. 三维一度 0 来自天朝的朋友 QQ浏览器 Windows XP 上海市 电信

    直接来个响应式不就ok了?

  11. 方法SEO博客 4 来自天朝的朋友 谷歌浏览器 Windows 7 河北省廊坊市 联通

    在做移动端适配遇到问题时偶然找到你这个博客,关于适配的问题你研究得真深!我博客也是wordpress搭建的,选了一个响应式的主题,我还需要做移动适配么?希望有机会QQ交流一下!谢谢!PS:如有可能,能否跟您换一个友链,方便我下次回访:)

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      初次相识,先换个内页友链如何?我的内页友链在留言板,主要也是为了方便互访,你可以随便放到哪个内页。

      响应式的主题也可以提交适配,可以在我博客站内搜索一下响应式

  12. 失控- 1 来自天朝的朋友 谷歌浏览器 Windows 8.1 江苏省苏州市 电信

    好特别的网站,很喜欢。谢谢分享,不过我完全小白

  13. 小小m 0 来自天朝的朋友 火狐浏览器5.0 Windows 7 湖北省武汉市 联通

    很高兴找到这么一篇有价值的文章,可是。。万分期待回家测试,dede用不了,获取到的是程序php地址,心碎一地。。。

    • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.2 NX40X Build/KOT49H 广东省广州市 移动

      理论上php通用,wp以外的网站,文章只提供一个思路,发现问题还得自己继续折腾。如果只是做跳转,完全可以用js来做,就不限定语言了。

  14. ziliang 1 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1_3 like Mac OS X) AppleWebKit 北京市 联通

    百度移动收录问题请教探讨。

  15. ziliang 1 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1_3 like Mac OS X) AppleWebKit 北京市 联通

    文章分析得很好,有问题请教,谢谢。

  16. 科学上网 5 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省宜昌市 移动

    PC页是响应式 还能做M站吗? 最近搞了一个 感觉被降权了啊 谷歌那边一切正常

  17. 寻梦 2 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 263网络通信股份有限公司

    受教了 博客收藏了 这是不带www,带了www的是不是url输出的地方加上www??

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      是的

      • 寻梦 2 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 北京网联光通技术有限公司(信联云网)

        :!: 为何我在pc上部署了,手机访问没有跳转还是www的

      • 寻梦 2 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 北京网联光通技术有限公司(信联云网)

        还有我的是两个不同的主题,电脑版的是一个主题,手机版的是另外一个主题

  18. 前端SEO 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省福州市 电信

    向你学习啊,能否转载呢?

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      保留原文链接即可,另外不建议转载半个月内发布的文章。

  19. 崔小可 3 来自天朝的朋友 谷歌浏览器 Windows 7 宁夏银川市 联通

    那自适应主题移动适配怎么做?

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省深圳市 联通

      自适应网站禁止百度转码即可。

      • 崔小可 3 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 7_1_2 like Mac OS X) AppleWebKit 宁夏银川市 联通

        具体应该怎么做呢?

        • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 电信

          善用搜索功能,不要什么都等别人来告诉你。
          站内搜索下禁止百度转码

  20. 亿品元素 2 来自天朝的朋友 谷歌浏览器 Windows 7 广东省清远市 铁通

    目前你的站点好像没有启用m.zhangge.net的二级域名啊,我用手机访问也是显示http://zhangge.net

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      换成自适应主题就不需要做这些了。

  21. 天涯海角 0 来自天朝的朋友 火狐浏览器 Windows 10 内蒙古包头市 内蒙古科技大学

    感谢分享,这些搜索引擎呀,也不知道统一一下标准,我的pc和移动站参数一模一样,所以我定义$url 和 $murl(有m的为移动站,这两个都是以 / 结尾!!!),然后在footer中把移动链接写为

  22. 大朝 0 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

    非常非常感谢您的分享,解决了我的难题,真的太感谢了,不知道求了多少人,终于把这个搞定了,谢谢!!!

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_2 广东省深圳市宝安区 电信

      文章比较负载,有需求的人就会看得懂了。

  23. 明月登楼 5 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 联通

    我是一直不喜欢再开个域名来做移动适配的方案,还是自适应的主题来的好,只要做好了标记,移动权重一样杠杠的!

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      当你的主题不是自适应的时候,就只能这样了。。。

  24. 尿尿煮饺子 0 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省大连市 联通

    谢谢博主,过阵子正好能用上,而且和PHP那个几乎一模一样

  25. 一曲长歌辞烟雨 3 来自天朝的朋友 火狐浏览器 Windows 10 浙江省绍兴市 电信

    张戈你好,我的站点是响应式的,因为部分代码需要设置在移动端不加载,所以我使用了wp_is_mobile()这个函数,但是我又给网站做了纯静态缓存,所以wp_is_mobile()就不起作用了。。。所以我必须额外再做一个移动站点么?(如果张戈你有更好的办法恳请赐教~ :oops: ),如果在配置一个移动站点,我必须在服务器上再添加一个wp绑定m.ls12.me么?(wp貌似自带跳转)

    • 一曲长歌辞烟雨 3 来自天朝的朋友 火狐浏览器 Windows 10 浙江省绍兴市 电信

      我不怕麻烦,我很乐意折腾。O(∩_∩)O谢谢张戈

  26. 阳光幼教 1 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通

    自适应不好么

  27. 营销创新 0 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    移动站是分成两个模板调用同一个数据库的方式最好吗?

  28. 阿狸派 1 未知系统 谷歌浏览器 Windows 7 北美地区

    谢谢,好文章,非常喜欢,会常来拜读

加载中,请稍候...