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

上传人:hw****26 文档编号:3120847 上传时间:2019-05-22 格式:DOCX 页数:7 大小:21.04KB
下载 相关 举报
网站实现移动适配之Meta标注、移动跳转.docx_第1页
第1页 / 共7页
网站实现移动适配之Meta标注、移动跳转.docx_第2页
第2页 / 共7页
网站实现移动适配之Meta标注、移动跳转.docx_第3页
第3页 / 共7页
网站实现移动适配之Meta标注、移动跳转.docx_第4页
第4页 / 共7页
网站实现移动适配之Meta标注、移动跳转.docx_第5页
第5页 / 共7页
点击查看更多>>
资源描述

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 函数模版当中。

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育教学资料库 > 精品笔记

Copyright © 2018-2021 Wenke99.com All rights reserved

工信部备案号浙ICP备20026746号-2  

公安局备案号:浙公网安备33038302330469号

本站为C2C交文档易平台,即用户上传的文档直接卖给下载用户,本站只是网络服务中间平台,所有原创文档下载所得归上传人所有,若您发现上传作品侵犯了您的权利,请立刻联系网站客服并提供证据,平台将在3个工作日内予以改正。