这些天,在给博客的标签页(tag)添加跳转和META动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白!
必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:
创建移动站点后,我们再通过一个js来判断访问者的UA信息,实现自动跳转功能 [详细部署方法]。
所以,移动站点的创建主要是为了弥补PC站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对2个站点进行移动适配。
目前张戈掌握的几个搜索引擎的移动适配做法如下:
百度:xml对应关系适配、Meta标注适配(特有)[相关文章1] [相关文章2];
谷歌:Meta标注适配 (同样适合雅虎、必应等国外搜索引擎)[相关文章];
360:txt对应关系适配[相关文章]。
下面主要分享下META标注和移动跳转的部署方法:
一、完整代码示例
以首页举例,实现移动适配META标注、移动站跳转的做法如下:
①、在PC站点部署代码:
head部分:
<!-- 载入UA判断的js -->
<script src="http://zhangge.net/wp-content/themes/HotNewspro/js/uaredirect.js" type="text/javascript"></script>
<!--移动端访问首页跳转到移动首页-->
<script type="text/javascript">uaredirect("http://m.zhangge.net/");</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部分:
<a title="移动版" href="http://m.zhangge.net/#mobile" rel="nofollow">移动版</a>
②、在移动站点部署代码:
head部分:
<!-- 载入UA判断的js -->
<script src="http://zhangge.net/wp-content/themes/MobilePack/uaredirect.js" type="text/javascript"></script>
<!--非移动端访问将跳转至PC页-->
<script type="text/javascript">uaredirect("http://zhangge.net");</script>
<!--谷歌、雅虎等移动META反向申明-->
<link href="http://zhangge.net" rel="canonical" />
footer部分:
<a title="电脑版" href="http://m.zhangge.net/#mobile">电脑版</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 src="<?php bloginfo('template_directory'); ?>/js/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("<?php echo $target_url; ?>");</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
②、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));
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中动态输出【移动适配\跳转】所需要的代码:
<script src="http://zhangge.net../PC/../uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("<?php curMobURL(); ?>");</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));
if ($_SERVER["SERVER_PORT"] != "80") {$pageURL .= $_SERVER["SERVER_NAME"] . ":" .$_SERVER["SERVER_PORT"] . $this_page;}
else {$pageURL .= $_SERVER["SERVER_NAME"] . $this_page;}
echo $pageURL;
}
?>
在移动站中继续添加输出代码:
<script src="http://zhangge.net../Mobile/../uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("<?php curPcURL(); ?>");</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 src="http://zhangge.net../PC/../uaredirect.js" type="text/javascript"> <script type="text/javascript"> //替换 var thisURL = document.location.href.replace(/^http:\/\//,"http://m."); //跳转 uaredirect(thisURL); //适配 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 src="http://zhangge.net../mobile/../uaredirect.js"" type="text/javascript"> <script type="text/javascript"> var thisURL = document.location.href.replace(/^http:\/\/m\./,"http://"); uaredirect(thisURL); document.write('<link href="'+thisURL+'" rel="canonical" />'); </script>
简单是简单,但这个方法的移动适配是不可行的(跳转可行),因为搜索引擎暂时还无法识别js输出内容。不过,谁也无法拍板说搜索引擎以后不会识别。因此,张戈还是把这个方法贴出来,也许多年后能用上,不是么?
三、注意事项
①、代码针对的是非WWW的顶级域名,如果是带www的,需要修改代码才行,自己摸索吧;
②、代码中用到的UA判断uaredirect.js,移动站和PC站是不一样的!可直接下载张戈博客移动站和PC站的uaredirect.js,放到不同位置,然后相应修改代码中路径即可;
③、PHP版本中用到的函数带,推荐加入到主题模板的function函数模版当中;
④、本文分享的移动适配仅涉及Meta标注的方法,至于另一种sitemap对应关系提交方法请移步查看;