书签网 书签网
广告位出租
立即入驻
本站文字广告内测 10元/月
大量收录新站，搜索引擎收录很快

移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇

建站笔记2年前 (2023)发布 小萝卜头
323 0 0
这些天，在给博客的标签页(tag)添加跳转和 META 动态申明时，居然让我醍醐灌顶，发现之前的动态适配的做法是多么的苦逼和小白！
总结前，先来回顾下小白张戈在移动适配这条道路上的摸爬滚打：

  1. 百度开放适配专用 sitemap 制作说明
  2. 360 站长平台移动适配文件制作说明
  3. 完美实现移动主题在 360 网站卫士缓存全开情况下的切换
  4. 移动搜索 SEO 分享：利用 Meta 声明来做百度开放适配
  5. 利用 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="https://zhang.ge/m./";
    }
  }
})(window);
</script>
<!--百度移动适配 META 申明-->
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/" />
<!--谷歌、雅虎等移动 META 申明-->
<link href="https://zhang.ge/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="https://zhang.ge/";
    }
 }
})(window);
</script> 
<!--谷歌、雅虎等移动 META 反向申明-->
<link href="https://zhang.ge/" 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="https://zhang.ge/<?php echo $target_url; ?>";
    }
  }
})(window);
</script>
<meta name="mobile-agent" content="format=xhtml;url=<?php echo $target_url; ?>" />
<link href="https://zhang.ge/<?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="https://zhang.ge/<?php curMobURL(); ?>";
    }
  }
})(window);
</script>
<meta name="mobile-agent" content="format=xhtml;url=<?php curMobURL(); ?>" />
<link href="https://zhang.ge/<?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="https://zhang.ge/<?php curPcURL(); ?>";
    }
  }
})(window);
</script> 
<link href="https://zhang.ge/<?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：

百度移动搜索：

移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇

360 移动搜索：移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇

神马搜索：

移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇

好了，以上就是张戈博客关于移动适配和跳转的终结篇，希望对你有所帮助！

收录于{张戈博客} 原文链接原文链接

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

实现WordPress提交评论的时删除该页面的WP-Super-Cache缓存的方法
小萝卜头
260
WordPress博客友好对话框+文章随机推荐滚动条插件（附代码版）
小萝卜头
269
WordPress开启颜色评论但不造成XSS漏洞的小方法
小萝卜头
449
DIY一个又有趣又好玩的404页面，降低跳出率
小萝卜头
430
仿异次元百度分享工具条张戈修改版
小萝卜头
1,820
解决IE响应式的解决方案css3-mediaqueries.js不生效问题
小萝卜头
345

暂无评论

暂无评论...

热门文章

宁海，小众宝藏城市的惊喜之旅
60
书签网（ishuqian.com），是集网址、资源、资讯于一体的导航站，简约优雅的界面风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验
  • 加入我们
  • 广告合作
  • 关于书签

    • Copyright © 2014-2024 书签网 | Theme By OneNav |  国旗赣ICP备2022011209号  | 赣公网安备 44040302000165号 | 由：又拍云联盟 和酷盾安全酷盾安全 提供CDN云存储和防护服务