这些天,在给博客的标签页(tag)添加跳转和 META 动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白!
总结前,先来回顾下小白张戈在移动适配这条道路上的摸爬滚打:
- 百度开放适配专用 sitemap 制作说明
- 360 站长平台移动适配文件制作说明
- 完美实现移动主题在 360 网站卫士缓存全开情况下的切换
- 移动搜索 SEO 分享:利用 Meta 声明来做百度开放适配
- 利用 Meta 申明来做百度、谷歌、雅虎、微软等搜索的开放适配
必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:
张戈博客的 PC 站是:https://zhang.ge
对应的移动站点是: http://m.zhang.ge
创建移动站点后,我们再通过一个 js 来判断访问者的 UA 信息,实现自动跳转功能 [详细部署方法]。
所以,移动站点的创建主要是为了弥补 PC 站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响 SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对 2 个站点进行移动适配。
目前张戈掌握的几个搜索引擎的移动适配做法如下:
百度:xml 对应关系适配、Meta 标注适配(特有)[相关文章 1] [相关文章 2];
谷歌:Meta 标注适配 (同样适合雅虎、必应等国外搜索引擎)[相关文章];
360:txt 对应关系适配[相关文章]。
下面主要分享下META 标注和移动跳转的部署方法:
一、完整代码示例
以首页举例,实现移动适配 META 标注、移动站跳转的做法如下:
①、在 PC 站点部署代码:
head 部分:
<!--移动端访问首页跳转到移动首页--> <script type="text/javascript"> (function(Switch){ var switch_pc = window.location.hash; if(switch_pc != "#pc"){ if(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href='m./'; } } })(window); </script> <!--百度移动适配 META 申明--> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/" /> <!--谷歌、雅虎等移动 META 申明--> <link href="m./" rel="alternate" media="only screen and (max-width: 1000px)" />
footer 部分:
<a title="移动版" href="m./#mobile" rel="nofollow">移动版</a>
②、在移动站点部署代码:
head 部分:
<!--非移动端访问将跳转至 PC 页--> <script type="text/javascript"> (function(Switch){ var switch_mob = window.location.hash; if(switch_mob != "#mobile"){ if(!/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href='/'; } } })(window); </script> <!--谷歌、雅虎等移动 META 反向申明--> <link href="/" rel="canonical" />
footer 部分:
<a title="电脑版" href="/#pc">电脑版</a>
以上则为首页的移动适配+跳转的完整代码,但一个网站有 N 多页面,所以我们必须做成动态代码,实现每个网页的移动适配及跳转!
二、动态部署代码
要做动态部署代码,就得考虑建站程序所用语言,目前最流行的建站语言主要是 php 和 asp。php 以 wordpress 为主,其次有 emlog、typecho 等,asp 则主要是 ZBlog。
以往张戈博客的文章分享的适配全部都是 wordpress 专用的,而且代码繁杂,通用性很差!最近,张戈在给博客的标签页做移动适配的时候,突来灵感,找到了一个最简单通用的方法,可以应用到所有建站程序!
核心思想很简单:既然是每个页面都要做移动适配,那么先动态获得当前页面地址,然后进行规则替换即可!
①、Wordpress 专用
我们先将如下代码加到 header.php
<?php global $wp; /*-- 获取当前页面地址 --*/ $current_url = home_url(add_query_arg(array(),$wp->request)); /*-- 将地址中的 http://替换为 http://m. --*/ $target_url = str_replace("http://","http://m.","$current_url"); ?>
然后继续添加如下代码,就能完成所有页面的 PC 站点的移动跳转和移动适配:
<script type="text/javascript"> (function(Switch){ var switch_pc = window.location.hash; if(switch_pc != "#pc"){ if(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href='<?php echo $target_url; ?>'; } } })(window); </script> <meta name="mobile-agent" content="format=xhtml;url=<?php echo $target_url; ?>" /> <link href="<?php echo $target_url; ?>" rel="alternate" media="only screen and (max-width: 1000px)" />
至于移动站的适配,依葫芦画瓢,把进行替换的那句中的 http://和 http://m. 换一个位置即可!这还要多简单??
②、PHP 通用
I、PC 站点:
在 PC 站点的 head 部分添加 php 函数(WP 可直接加入 function.php 模板中),用于获取当前页面的移动地址:
<?php /*-- 获取当前页面对应的移动页地址 --*/ function curMobURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://m"; $this_page = $_SERVER["REQUEST_URI"]; if (strpos($this_page, "?") !== false) $this_page = reset(explode("?", $this_page)); // 请注意将这行代码中的 www 换成实际主站的域名前缀,如果是 www 请保持 $domain=preg_replace('/^www\./i','.',$_SERVER["SERVER_NAME"]); if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $domain . ":" .$_SERVER["SERVER_PORT"] . $this_page; } else { $pageURL .= $domain . $this_page; } echo $pageURL; } ?>
然后继续添加如下代码,则可在 PC 站所有页面的 head 中动态输出【移动适配\跳转】所需要的代码:
<script type="text/javascript"> (function(Switch){ var switch_pc = window.location.hash; if(switch_pc != "#pc"){ if(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href='<?php curMobURL(); ?>'; } } })(window); </script> <meta name="mobile-agent" content="format=xhtml;url=<?php curMobURL(); ?>" /> <link href="<?php curMobURL(); ?>" rel="alternate" media="only screen and (max-width: 1000px)" />
II、移动站点
相应的在移动站点中部署如下函数,用于获取移动站点所有页面对应的 PC 页地址:
<?php /*-- 获取当前页面对应的 PC 页地址 --*/ function curPcURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://"; $this_page = $_SERVER["REQUEST_URI"]; if (strpos($this_page, "?") !== false) $this_page = reset(explode("?", $this_page)); // 请注意将这行代码中的 m 和 www 换成实际的移动站和 PC 站域名前缀 $domain=preg_replace('/^m\./i','www.',$_SERVER["SERVER_NAME"]); if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $domain . ":" .$_SERVER["SERVER_PORT"] . $this_page; } else { $pageURL .= $domain . $this_page; } echo $pageURL; } ?>
在移动站中继续添加输出代码:
<script type="text/javascript"> (function(Switch){ var switch_mob = window.location.hash; if(switch_mob != "#mobile"){ if(!/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href='<?php curPcURL(); ?>'; } } })(window); </script> <link href="<?php curPcURL(); ?>" rel="canonical" />
③、ASP 版本
ASP 张戈非常不熟悉,所以就不详细说明了!有了上面的参考,相信用 ASP 建站程序的童鞋能轻而易举的完成!
下面仅提供获取地址代码(仅兼容主站是顶级域名),自己参考折腾吧!
I、获取 PC 站当前页对应的移动站地址:
<% Function GetLocationURL() Dim Url Dim ServerPort,ServerName,ScriptName,QueryString ServerName = Request.ServerVariables("SERVER_NAME") ServerPort = Request.ServerVariables("SERVER_PORT") ScriptName = Request.ServerVariables("SCRIPT_NAME") QueryString = Request.ServerVariables("QUERY_STRING") Url="http://m."&ServerName If ServerPort <> "80" Then UrlUrl = Url & ":" & ServerPort UrlUrl=Url&ScriptName If QueryString <>"" Then UrlUrl=Url&"?"& QueryString GetLocationURL=Url End Function Response.Write GetLocationURL() %>
II、获取移动站当前页面对应的 PC 站地址:
<% Function GetLocationURL() Dim Url Dim ServerPort,ServerName,ScriptName,QueryString ServerName = Request.ServerVariables("SERVER_NAME") ServerPort = Request.ServerVariables("SERVER_PORT") ScriptName = Request.ServerVariables("SCRIPT_NAME") QueryString = Request.ServerVariables("QUERY_STRING") Url="http://"&ServerName If ServerPort <> "80" Then UrlUrl = Url & ":" & ServerPort UrlUrl=Url&ScriptName If QueryString <>"" Then UrlUrl=Url&"?"& QueryString GetLocationURL=Url End Function Response.Write GetLocationURL() %>
有了以上代码,相信你能写出移动适配的输出代码的,不是么?
④、JS 通用版本(适配暂时不可用):
这个极其简单,直接获取当前页面地址,然后替换成对应的移动或 PC 地址即可:
PC 页面 head 部分:
<script type="text/javascript"> (function(Switch){ var switch_pc = window.location.hash; var thisURL = document.location.href.replace(/^http:\/\//,"http://m."); if(switch_pc != "#pc"){ if(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href = thisURL ; } } })(window); document.write('<meta name="mobile-agent" content="format=xhtml;url='+thisURL+'" /><link href="'+thisURL+'" rel="alternate" media="only screen and (max-width: 1000px)" />'); </script>
移动页面 head 部分:
<script type="text/javascript"> (function(Switch){ var switch_mob = window.location.hash; var thisURL = document.location.href.replace(/^http:\/\/m\./,"http://"); if(switch_mob != "#mobile"){ if(!/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){ Switch.location.href=thisURL; } } })(window); document.write('<link href="'+thisURL+'" rel="canonical" />'); </script>
简单是简单,但这个方法的移动适配是不可行的(跳转可行),因为搜索引擎暂时还无法识别 js 输出内容。不过,谁也无法拍板说搜索引擎以后不会识别。因此,张戈还是把这个方法贴出来,也许多年后能用上,不是么?
三、注意事项
①、代码针对的是非 WWW 的顶级域名,如果是带 www 的,需要修改代码才行,自己摸索吧;
②、代码中用到的 UA 判断 uaredirect.js,移动站和 PC 站是不一样的!可直接下载张戈博客移动站和 PC 站的 uaredirect.js,放到不同位置,然后相应修改代码中路径即可;
③、PHP 版本中用到的函数带,推荐加入到主题模板的 function 函数模版当中;
④、本文分享的移动适配仅涉及 Meta 标注的方法,至于另一种 sitemap 对应关系提交方法请移步查看;
⑤、文章看起来非常复杂、详尽,我相信真有需要的童鞋绝对看得懂!如果看完还是不会,张戈可提供有偿服务,协助贵站完成移动适配:https://zhang.ge/pay/。当然还是推荐自己完成,比较有成就感!
四、成果展示
张戈博客做好移动适配有 2 个多月了,目前效果非常不错,主流移动搜索基本已完全替换为 m.zhang.ge:
百度移动搜索:
神马搜索:
好了,以上就是张戈博客关于移动适配和跳转的终结篇,希望对你有所帮助!
第一次来这,围观下博主文章
哎,我的还没开通移动站点。
很强大很详细
谢谢楼主分享,很不错的样子
受用了
感觉默认的几个移动站点太难看了,没用 = =
好强大
可算学习了。
百度有一个js跳转吧
这个就是修改自百度js,但是这个更完善
直接来个响应式不就ok了?
在做移动端适配遇到问题时偶然找到你这个博客,关于适配的问题你研究得真深!我博客也是wordpress搭建的,选了一个响应式的主题,我还需要做移动适配么?希望有机会QQ交流一下!谢谢!PS:如有可能,能否跟您换一个友链,方便我下次回访:)
初次相识,先换个内页友链如何?我的内页友链在留言板,主要也是为了方便互访,你可以随便放到哪个内页。
响应式的主题也可以提交适配,可以在我博客站内搜索一下响应式
好特别的网站,很喜欢。谢谢分享,不过我完全小白
很高兴找到这么一篇有价值的文章,可是。。万分期待回家测试,dede用不了,获取到的是程序php地址,心碎一地。。。
理论上php通用,wp以外的网站,文章只提供一个思路,发现问题还得自己继续折腾。如果只是做跳转,完全可以用js来做,就不限定语言了。
百度移动收录问题请教探讨。
文章分析得很好,有问题请教,谢谢。
PC页是响应式 还能做M站吗? 最近搞了一个 感觉被降权了啊 谷歌那边一切正常
受教了 博客收藏了 这是不带www,带了www的是不是url输出的地方加上www??
是的
:!: 为何我在pc上部署了,手机访问没有跳转还是www的
还有我的是两个不同的主题,电脑版的是一个主题,手机版的是另外一个主题
向你学习啊,能否转载呢?
保留原文链接即可,另外不建议转载半个月内发布的文章。
那自适应主题移动适配怎么做?
自适应网站禁止百度转码即可。
具体应该怎么做呢?
善用搜索功能,不要什么都等别人来告诉你。
站内搜索下禁止百度转码
目前你的站点好像没有启用m.zhang.ge的二级域名啊,我用手机访问也是显示https://zhang.ge
换成自适应主题就不需要做这些了。
感谢分享,这些搜索引擎呀,也不知道统一一下标准,我的pc和移动站参数一模一样,所以我定义$url 和 $murl(有m的为移动站,这两个都是以 / 结尾!!!),然后在footer中把移动链接写为
非常非常感谢您的分享,解决了我的难题,真的太感谢了,不知道求了多少人,终于把这个搞定了,谢谢!!!
文章比较负载,有需求的人就会看得懂了。
我是一直不喜欢再开个域名来做移动适配的方案,还是自适应的主题来的好,只要做好了标记,移动权重一样杠杠的!
当你的主题不是自适应的时候,就只能这样了。。。
谢谢博主,过阵子正好能用上,而且和PHP那个几乎一模一样
Jager你好,我的站点是响应式的,因为部分代码需要设置在移动端不加载,所以我使用了wp_is_mobile()这个函数,但是我又给网站做了纯静态缓存,所以wp_is_mobile()就不起作用了。。。所以我必须额外再做一个移动站点么?(如果Jager你有更好的办法恳请赐教~ :oops: ),如果在配置一个移动站点,我必须在服务器上再添加一个wp绑定m.ls12.me么?(wp貌似自带跳转)
我不怕麻烦,我很乐意折腾。O(∩_∩)O谢谢Jager
自适应不好么
移动站是分成两个模板调用同一个数据库的方式最好吗?
谢谢,好文章,非常喜欢,会常来拜读
我用了这个代码,跳转的是m.www.xxx.com/xxx/xxx
好尴尬,不会改代码
大神能指点下带www的域名怎么使用吗
大神请教一下:我们站存在一些页面(量比较大)我使用了canonical标签进行了规范,另我站移动站先做的移动站权重较pc站权重高,是否有必要在移动站加入指向pc站的canonical标签,且我站pc站点已经有alternate标签了,是否有必要再添加mobile-agent标签?会不会起冲突~~
你好,看了你的【利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配】这篇文章,感觉写的很好。不过有一点我还是不太明白,我的官网是www.sakuradk2.com,手机端是h5.sakuradk2.com,目前只做谷歌的SEO。如果做谷歌meta开放适配的话,还需要做开放适配映射 sitemap吗?这个sitemap和sitemap.xml有什么不同吗?
另外,之前我做的手机端访问PC官网网址,直接在PHP代码进行header跳转,导致PC端的排名都没有了。如果我做了meta适配的话,请问PC端的排名多久可以恢复呢?
谷歌的话具体看下谷歌的移动适配规范,很久很久没关注这块了,你可以去看下官方的要求。