這些天,在給博客的標(biāo)簽頁(yè)(tag)添加跳轉(zhuǎn)和META動(dòng)態(tài)申明時(shí),居然讓我醍醐灌頂,發(fā)現(xiàn)之前的動(dòng)態(tài)適配的做法是多么的苦逼和小白! 必須申明的是,本文的所有做法僅適合非響應(yīng)式網(wǎng)站,并且需要一個(gè)額外的移動(dòng)站,比如: 創(chuàng)建移動(dòng)站點(diǎn)后,我們?cè)偻ㄟ^(guò)一個(gè)js來(lái)判斷訪問(wèn)者的UA信息,實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)功能 [詳細(xì)部署方法]。 所以,移動(dòng)站點(diǎn)的創(chuàng)建主要是為了彌補(bǔ)PC站在移動(dòng)小屏設(shè)備下顯示不佳的缺憾。然而,搜索引擎卻會(huì)將他們視為不同的站點(diǎn),從而影響SEO。為了解決這個(gè)問(wèn)題,我們就必須遵循搜索引擎的移動(dòng)適配原則,對(duì)2個(gè)站點(diǎn)進(jìn)行移動(dòng)適配。 目前張戈掌握的幾個(gè)搜索引擎的移動(dòng)適配做法如下:
下面主要分享下META標(biāo)注和移動(dòng)跳轉(zhuǎn)的部署方法: 一、完整代碼示例以首頁(yè)舉例,實(shí)現(xiàn)移動(dòng)適配META標(biāo)注、移動(dòng)站跳轉(zhuǎn)的做法如下: ①、在PC站點(diǎn)部署代碼:head部分: <!-- 載入U(xiǎn)A判斷的js --> <script src="http:///wp-content/themes/HotNewspro/js/uaredirect.js" type="text/javascript"></script> <!--移動(dòng)端訪問(wèn)首頁(yè)跳轉(zhuǎn)到移動(dòng)首頁(yè)--> <script type="text/javascript">uaredirect("http://m./");</script> <!--百度移動(dòng)適配META申明--> <meta name="mobile-agent" content="format=xhtml;url=http://m./" /> <!--谷歌、雅虎等移動(dòng)META申明--> <link href="http://m./" rel="alternate" media="only screen and (max-width: 1000px)" /> footer部分: <a title="移動(dòng)版" href="http://m./#mobile" rel="nofollow">移動(dòng)版</a> ②、在移動(dòng)站點(diǎn)部署代碼:head部分: <!-- 載入U(xiǎn)A判斷的js --> <script src="http:///wp-content/themes/MobilePack/uaredirect.js" type="text/javascript"></script> <!--非移動(dòng)端訪問(wèn)將跳轉(zhuǎn)至PC頁(yè)--> <script type="text/javascript">uaredirect("http://");</script> <!--谷歌、雅虎等移動(dòng)META反向申明--> <link href="http://" rel="canonical" /> footer部分: <a title="電腦版" href="http://m./#mobile">電腦版</a> 以上則為首頁(yè)的移動(dòng)適配+跳轉(zhuǎn)的完整代碼,但一個(gè)網(wǎng)站有N多頁(yè)面,所以我們必須做成動(dòng)態(tài)代碼,實(shí)現(xiàn)每個(gè)網(wǎng)頁(yè)的移動(dòng)適配及跳轉(zhuǎn)! 二、動(dòng)態(tài)部署代碼要做動(dòng)態(tài)部署代碼,就得考慮建站程序所用語(yǔ)言,目前最流行的建站語(yǔ)言主要是php和asp。php以wordpress為主,其次有emlog、typecho等,asp則主要是ZBlog。 以往張戈博客的文章分享的適配全部都是wordpress專用的,而且代碼繁雜,通用性很差!最近,張戈在給博客的標(biāo)簽頁(yè)做移動(dòng)適配的時(shí)候,突來(lái)靈感,找到了一個(gè)最簡(jiǎn)單通用的方法,可以應(yīng)用到所有建站程序! 核心思想很簡(jiǎn)單:既然是每個(gè)頁(yè)面都要做移動(dòng)適配,那么先動(dòng)態(tài)獲得當(dāng)前頁(yè)面地址,然后進(jìn)行規(guī)則替換即可! ①、Wordpress專用我們先將如下代碼加到header.php <?php global $wp; <!-- 獲取當(dāng)前頁(yè)面地址 --> $current_url = home_url(add_query_arg(array(),$wp->request)); <!-- 將地址中的http://替換為http://m. --> $target_url = str_replace("http://","http://m.","$current_url"); ?> 然后繼續(xù)添加如下代碼,就能完成所有頁(yè)面的PC站點(diǎn)的移動(dòng)跳轉(zhuǎn)和移動(dòng)適配: <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)" /> 至于移動(dòng)站的適配,依葫蘆畫瓢,把進(jìn)行替換的那句中的http://和http ②、PHP通用I、PC站點(diǎn): 在PC站點(diǎn)的head部分添加php函數(shù)(WP可直接加入function.php模板中),用于獲取當(dāng)前頁(yè)面的移動(dòng)地址: <?php <!-- 獲取當(dāng)前頁(yè)面對(duì)應(yīng)的移動(dòng)頁(yè)地址 --> 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; } ?> 然后繼續(xù)添加如下代碼,則可在PC站所有頁(yè)面的head中動(dòng)態(tài)輸出【移動(dòng)適配\跳轉(zhuǎn)】所需要的代碼: <script src="http://../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、移動(dòng)站點(diǎn) 相應(yīng)的在移動(dòng)站點(diǎn)中部署如下函數(shù),用于獲取移動(dòng)站點(diǎn)所有頁(yè)面對(duì)應(yīng)的PC頁(yè)地址: <?php <!-- 獲取當(dāng)前頁(yè)面對(duì)應(yīng)的PC頁(yè)地址 --> 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; } ?> 在移動(dòng)站中繼續(xù)添加輸出代碼: <script src="http://../Mobile/../uaredirect.js" type="text/javascript"></script> <script type="text/javascript">uaredirect("<?php curPcURL(); ?>");</script> <link href="<?php curPcURL(); ?>" rel="canonical" /> ③、ASP版本ASP張戈非常不熟悉,所以就不詳細(xì)說(shuō)明了!有了上面的參考,相信用ASP建站程序的童鞋能輕而易舉的完成! 下面僅提供獲取地址代碼,自己參考折騰吧! I、獲取PC站當(dāng)前頁(yè)對(duì)應(yīng)的移動(dòng)站地址: <% 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、獲取移動(dòng)站當(dāng)前頁(yè)面對(duì)應(yīng)的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() %> 有了以上代碼,相信你能寫出移動(dòng)適配的輸出代碼的,不是么? ④、JS通用版本(適配暫時(shí)不可用):這個(gè)極其簡(jiǎn)單,直接獲取當(dāng)前頁(yè)面地址,然后替換成對(duì)應(yīng)的移動(dòng)或PC地址即可: PC頁(yè)面head部分: <script src="http://../PC/../uaredirect.js" type="text/javascript"> <script type="text/javascript"> //替換 var thisURL = document.location.href.replace(/^http:\/\//,"http://m."); //跳轉(zhuǎn) 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> 移動(dòng)頁(yè)面head部分: <script src="http://../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> 簡(jiǎn)單是簡(jiǎn)單,但這個(gè)方法的移動(dòng)適配是不可行的(跳轉(zhuǎn)可行),因?yàn)樗阉饕鏁簳r(shí)還無(wú)法識(shí)別js輸出內(nèi)容。不過(guò),誰(shuí)也無(wú)法拍板說(shuō)搜索引擎以后不會(huì)識(shí)別。因此,張戈還是把這個(gè)方法貼出來(lái),也許多年后能用上,不是么? 三、注意事項(xiàng)①、代碼針對(duì)的是非WWW的頂級(jí)域名,如果是帶www的,需要修改代碼才行,自己摸索吧; ②、代碼中用到的UA判斷uaredirect.js,移動(dòng)站和PC站是不一樣的!可直接下載張戈博客移動(dòng)站和PC站的uaredirect.js,放到不同位置,然后相應(yīng)修改代碼中路徑即可; ③、PHP版本中用到的函數(shù)帶,推薦加入到主題模板的function函數(shù)模版當(dāng)中; ④、本文分享的移動(dòng)適配僅涉及Meta標(biāo)注的方法,至于另一種sitemap對(duì)應(yīng)關(guān)系提交方法請(qǐng)移步查看; ⑤、文章看起來(lái)非常復(fù)雜、詳盡,我相信真有需要的童鞋絕對(duì)看得懂!如果看完還是不會(huì),張戈可提供有償服務(wù),協(xié)助貴站完成移動(dòng)適配,單次服務(wù)費(fèi)用:20元。當(dāng)然還是推薦自己完成,比較有成就感! |
|
來(lái)自: 花草田園 > 《網(wǎng)站運(yùn)營(yíng)》