1、必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:创建移动站点后,我们再通过一个 js 来判断访问者的 UA 信息,实现自动跳转功能。所以,移动站点的创建主要是为了弥补 PC 站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响 SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对 2 个站点进行移动适配。目前几个搜索引擎的移动适配做法如下:百度:xml 对应关系适配、Meta 标注适配(特有);谷歌:Meta 标注适配 (同样适合雅虎、必应等国外搜索引擎);360:txt 对应关系适配。下面主要分享下 META 标注
2、和移动跳转的部署方法:一、完整代码示例以首页举例,实现移动适配 META 标注、移动站跳转的做法如下: 、在 PC 站点部署代码:head 部分:uaredirect(“http:/ 部分:移动版 、在移动站点部署代码:head 部分:uaredirect(“http:/“);footer 部分:电脑版以上则为首页的移动适配+跳转的完整代码,但一个网站有 N 多页面,所以我们必须做成动态代码,实现每个网页的移动适配及跳转!二、动态部署代码要做动态部署代码,就得考虑建站程序所用语言,目前最流行的建站语言主要是 php 和 asp。php 以 wordpress 为主,其次有 emlog、type
3、cho 等,asp 则主要是 ZBlog。以往张戈博客的文章分享的适配全部都是 wordpress 专用的,而且代码繁杂,通用性很差!最近,张戈在给博客的标签页做移动适配的时候,突来灵感,找到了一个最简单通用的方法,可以应用到所有建站程序!核心思想很简单:既然是每个页面都要做移动适配,那么先动态获得当前页面地址,然后进行规则替换即可! 、Wordpress 专用我们先将如下代码加到 header.php$current_url = home_url(add_query_arg(array(),$wp-request);$target_url = str_replace(“http:/“,“ht
4、tp:/m.“,“$current_url“);?然后继续添加如下代码,就能完成所有页面的 PC 站点的移动跳转和移动适配:/js/uaredirect.js“ type=“text/javascript“uaredirect(“);“ /“ rel=“alternate“ media=“only screen and (max-width: 1000px)“ /至于移动站的适配,依葫芦画瓢,把进行替换的那句中的 http:/和http:/m. 换一个位置即可!这还要多简单?、PHP 通用I、PC 站点:在 PC 站点的 head 部分添加 php 函数(WP 可直接加入 function.p
5、hp 模板中),用于获取当前页面的移动地址: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“SERVE
6、R_NAME“ . “:“ .$_SERVER“SERVER_PORT“ . $this_page;else $pageURL .= $_SERVER“SERVER_NAME“ . $this_page;echo $pageURL;?然后继续添加如下代码,则可在 PC 站所有页面的 head 中动态输出【移动适配跳转 】所需要的代码:uaredirect(“);“ /“ rel=“alternate“ media=“only screen and (max-width: 1000px)“ /II、移动站点相应的在移动站点中部署如下函数,用于获取移动站点所有页面对应的 PC页地址:functio
7、n 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_P
8、ORT“ . $this_page;else $pageURL .= $_SERVER“SERVER_NAME“ . $this_page;echo $pageURL;?在移动站中继续添加输出代码:uaredirect(“);“ rel=“canonical“ / 、ASP 版本ASP 张戈非常不熟悉,所以就不详细说明了!有了上面的参考,相信用ASP 建站程序的童鞋能轻而易举的完成!下面仅提供获取地址代码,自己参考折腾吧!I、获取 PC 站当前页对应的移动站地址:“80“ Then UrlUrl = Url /跳转uaredirect(thisURL);/适配document.write();
9、移动页面 head 部分:var thisURL = document.location.href.replace(/http:/m./,“http:/“);uaredirect(thisURL);document.write();简单是简单,但这个方法的移动适配是不可行的(跳转可行),因为搜索引擎暂时还无法识别 js 输出内容。不过,谁也无法拍板说搜索引擎以后不会识别。三、注意事项、代码针对的是非 WWW 的顶级域名,如果是带 www 的,需要修改代码才行,自己摸索吧;、代码中用到的 UA 判断 uaredirect.js,移动站和 PC 站是不一样的!可直接下载张戈博客移动站和 PC 站的 uaredirect.js,放到不同位置,然后相应修改代码中路径即可;、PHP 版本中用到的函数带,推荐加入到主题模板的 function 函数模版当中。