创建移动站点后，可以通过一个js来判断访问者的UA信息，实现自动跳转功能 ，然而，搜索引擎却会将他们视为不同的站点，从而影响SEO。为了解决这个问题，我们就必须遵循搜索引擎的移动适配原则，对2个站点进行移动适配。
下面主要分享下META标注和移动跳转的部署方法：
以首页举例，实现移动适配META标注、移动站跳转的做法如下：
head部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!--移动端访问首页跳转到移动首页-->
<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='http://m.zhangge.net/';
}
}
})(window);
</script>
<!--百度移动适配META申明-->
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhangge.net/" />
<!--谷歌、雅虎等移动META申明-->
<link href="http://m.zhangge.net/" rel="alternate" media="only screen and (max-width: 1000px)" />
|
footer部分：
|
1
|
<a title="移动版" href="http://m.zhangge.net/#mobile" rel="nofollow">移动版</a>
|
head部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--非移动端访问将跳转至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='http://zhangge.net/';
}
}
})(window);
</script>
<!--谷歌、雅虎等移动META反向申明-->
<link href="http://zhangge.net" rel="canonical" />
|
footer部分：
|
1
|
<a title="电脑版" href="http://zhangge.net/#pc">电脑版</a>
|
以上则为首页的移动适配+跳转的完整代码，但一个网站有N多页面，所以我们必须做成动态代码，实现每个网页的移动适配及跳转！
要做动态部署代码，就得考虑建站程序所用语言，目前最流行的建站语言主要是php和asp。php以wordpress为主，其次有emlog、typecho等，asp则主要是ZBlog。
核心思想很简单：既然是每个页面都要做移动适配，那么先动态获得当前页面地址，然后进行规则替换即可！
我们先将如下代码加到header.php
|
1
2
3
4
5
6
7
|
<?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站点的移动跳转和移动适配：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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. 换一个位置即可！这还要多简单？？
I、PC站点：
在PC站点的head部分添加php函数（WP可直接加入function.php模板中），用于获取当前页面的移动地址：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?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));
if ($_SERVER["SERVER_PORT"] != "80") {$pageURL .= $_SERVER["SERVER_NAME"] . ":" .$_SERVER["SERVER_PORT"] . $this_page;}
else {$pageURL .= $_SERVER["SERVER_NAME"] . $this_page;}
echo $pageURL;
}
?>
|
然后继续添加如下代码，则可在PC站所有页面的head中动态输出【移动适配\跳转】所需要的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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页地址：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?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));
if ($_SERVER["SERVER_PORT"] != "80") {$pageURL .= $_SERVER["SERVER_NAME"] . ":" .$_SERVER["SERVER_PORT"] . $this_page;}
else {$pageURL .= $_SERVER["SERVER_NAME"] . $this_page;}
echo $pageURL;
}
?>
|
在移动站中继续添加输出代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<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" />
|
下面仅提供获取地址代码，自己参考折腾吧！
I、获取PC站当前页对应的移动站地址：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%
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站地址：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%
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()
%>
|
有了以上代码，相信你能写出移动适配的输出代码的，不是么？
这个极其简单，直接获取当前页面地址，然后替换成对应的移动或PC地址即可：
PC页面head部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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站是不一样的！；
③、PHP版本中用到的函数带，推荐加入到主题模板的function函数模版当中；
④、本文分享的移动适配仅涉及Meta标注的方法，至于另一种sitemap对应关系提交方法请移步查看；
本文转载于：http://zhangge.net/4369.html 内容略有精简。