网站实现移动适配之Meta标注、移动跳转.docx

必须申明的是，本文的所有做法仅适合非响应式网站，并且需要一个额外的移动站，比如：创建移动站点后，我们再通过一个js来判断访问者的UA信息，实现自动跳转功能。所以，移动站点的创建主要是为了弥补PC站在移动小屏设备下显示不佳的缺憾。然而，搜索引擎却会将他们视为不同的站点，从而影响SEO。为了解决这个问题，我们就必须遵循搜索引擎的移动适配原则，对2个站点进行移动适配。 目前几个搜索引擎的移动适配做法如下：百度：xml对应关系适配、Meta标注适配（特有）；谷歌：Meta标注适配 （同样适合雅虎、必应等国外搜索引擎）；360：txt对应关系适配。下面主要分享下META标注和移动跳转的部署方法： 一、完整代码示例以首页举例，实现移动适配META标注、移动站跳转的做法如下： 、在PC站点部署代码：head部分：uaredirect(/);footer部分：移动版 、在移动站点部署代码：head部分：uaredirect();footer部分：电脑版以上则为首页的移动适配+跳转的完整代码，但一个网站有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);$target_url = str_replace(http:/,http:/m.,$current_url);?然后继续添加如下代码，就能完成所有页面的PC站点的移动跳转和移动适配：script src=/js/uaredirect.js type=text/javascriptuaredirect();meta name=mobile-agent content=format=xhtml;url= /link href= rel=alternate media=only screen and (max-width: 1000px) /至于移动站的适配，依葫芦画瓢，把进行替换的那句中的http:/和http:/m. 换一个位置即可！这还要多简单？ 、PHP通用I、PC站点：在PC站点的head部分添加php函数（WP可直接加入function.php模板中），用于获取当前页面的移动地址：?phpfunction curMobURL() $pageURL = http; if ($_SERVERHTTPS = on) $pageURL .= s; $pageURL .= :/m.;$this_page = $_SERVERREQUEST_URI; if (strpos($this_page, ?) != false) $this_page = reset(explode(?, $this_page); if ($_SERVERSERVER_PORT != 80) $pageURL .= $_SERVERSERVER_NAME . : .$_SERVERSERVER_PORT . $this_page; else $pageURL .= $_SERVERSERVER_NAME . $this_page; echo $pageURL;?然后继续添加如下代码，则可在PC站所有页面的head中动态输出【移动适配跳转】所需要的代码：uaredirect();meta name=mobile-agent content=format=xhtml;url= /link href= rel=alternate media=only screen and (max-width: 1000px) /II、移动站点相应的在移动站点中部署如下函数，用于获取移动站点所有页面对应的PC页地址：?phpfunction curPcURL() $pageURL = http; if ($_SERVERHTTPS = on) $pageURL .= s; $pageURL .= :/;$this_page = $_SERVERREQUEST_URI; if (strpos($this_page, ?) != false) $this_page = reset(explode(?, $this_page); if ($_SERVERSERVER_PORT != 80) $pageURL .= $_SERVERSERVER_NAME . : .$_SERVERSERVER_PORT . $this_page; else $pageURL .= $_SERVERSERVER_NAME . $this_page; echo $pageURL;?在移动站中继续添加输出代码：uaredirect();link href= rel=canonical / 、ASP版本ASP张戈非常不熟悉，所以就不详细说明了！有了上面的参考，相信用ASP建站程序的童鞋能轻而易举的完成！下面仅提供获取地址代码，自己参考折腾吧！I、获取PC站当前页对应的移动站地址：%Function GetLocationURL()Dim UrlDim ServerPort,ServerName,ScriptName,QueryStringServerName = Request.ServerVariables(SERVER_NAME)ServerPort = Request.ServerVariables(SERVER_PORT)ScriptName = Request.ServerVariables(SCRIPT_NAME)QueryString = Request.ServerVariables(QUERY_STRING)Url=http:/m.&ServerNameIf ServerPort 80 Then UrlUrl = Url & : & ServerPortUrlUrl=Url&ScriptNameIf QueryString Then UrlUrl=Url&?& QueryStringGetLocationURL=UrlEnd FunctionResponse.Write GetLocationURL()%II、获取移动站当前页面对应的PC站地址：%Function GetLocationURL()Dim UrlDim ServerPort,ServerName,ScriptName,QueryStringServerName = Request.ServerVariables(SERVER_NAME)ServerPort = Request.ServerVariables(SERVER_PORT)ScriptName = Request.ServerVariables(SCRIPT_NAME)QueryString = Request.ServerVariables(QUERY_STRING)Url=http:/&ServerNameIf ServerPort 80 Then UrlUrl = Url & : & ServerPortUrlUrl=Url&ScriptNameIf QueryString Then UrlUrl=Url&?& QueryStringGetLocationURL=UrlEnd FunctionResponse.Write GetLocationURL()%有了以上代码，相信你能写出移动适配的输出代码的，不是么？ 、JS通用版本（适配暂时不可用）：这个极其简单，直接获取当前页面地址，然后替换成对应的移动或PC地址即可：PC页面head部分：/替换var thisURL = document.location.href.replace(/http:/,http:/m.);/跳转uaredirect(thisURL);/适配document.write();移动页面head部分：var thisURL = document.location.href.replace(/http:/m./,http:/);uaredirect(thisURL);document.write();简单是简单，但这个方法的移动适配是不可行的（跳转可行），因为搜索引擎暂时还无法识别js输出内容。不