代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > SEO資訊 >

終極講解移動端適配設置與SEO優化

來源:未知 發布時間:2019-03-30熱度:我要評論
重慶網站建設中同時擁有PC端和移動端幾乎成為標配,主域名做PC端,二級域名做移動端,不建議用二級目錄做移動端。移動設備的訪問量與日俱增,移動端SEO優化的重要內容: 用戶體驗、頁面權重 。 所謂的移動適配針對訪問者和蜘蛛:網站根據訪問者的客戶端信息,判斷是否...

       重慶網站建設中同時擁有PC端和移動端幾乎成為標配,主域名做PC端,二級域名做移動端,不建議用二級目錄做移動端。移動設備的訪問量與日俱增,移動端SEO優化的重要內容:用戶體驗、頁面權重

移動適配于SEO優化

       所謂的移動適配針對訪問者和蜘蛛:網站根據訪問者的客戶端信息,判斷是否用JS跳轉到移動端;對蜘蛛就用<meta>或<link>聲明。完整的移動適配是PC和移動端的URL一一對應。下面是秀站網秀站網總結的最全的移動適配部署。

移動端適配相關部署

移動端Title、Description、Keywords(TDK)設置

       搜索引擎會首先抓取頁面<title>標簽里面的內容,也是網站展示在搜索引擎里面的主要內容。移動端和PC端的<title>可以一致,最好加上“移動端”以示區別。

       對用戶使用搜索引擎,頁面主標題、描述的與用戶使用的關鍵詞匹配程度高,一般會獲得較多流量,參考文章《SEO優化網站建設入門基礎標簽<meta>用法》

<meta http-equiv="keywords" content="關鍵字1,關鍵字2,關鍵字3">
<meta http-equiv="description" content="秀站網秀站網的博客">

       網站Title、Description、Keywords(TDK),搜索引擎對Keywords的權重可以忽略,由于在移動端展示時,標題和描述字數和PC端有一定區別,參考文章《怎么寫好新站網站標題和描述》。

移動端<link>絕對路徑

       PC和移動端采用不同的CSS樣式表,另外由于兩套模板需共用網站根目錄下的favicon.ico圖標等,采用絕對路徑保證正常調用。

<link rel="stylesheet" type="text/css" href="http://www.vi586.com/css/basic.css" media="screen" >
<link rel="shortcut icon" type="image/ico" href="http://www.vi586.com/favicon.ico">

移動端rel="canonical"聲明

       為了解決網站由于URL鏈接不一樣,但網頁內容一樣,避免百度重復收錄的問題

       比如:PC端與移動端對應URL分別為

http://www.vi586.com/seo/ 
http://wap.vi586.com/seo/

       在移動端</head>之前,增加如下代碼:

<!--百度移動申明-->
<link rel="canonical" href="http://www.vi586.com/seo/" />

       里面的鏈接是告訴搜索引擎,這個鏈接是規范、正確、希望百度收錄且參與排名的鏈接(網頁權威鏈接)

需要用rel="canonical"聲明的情況:

①網站進行了改版,將舊的內容搬到新的URL,但沒有做301重定向;

②某些CMS欄目或內容的靜態鏈接和動態鏈接內容相同,而且沒有做301重定向;

③移動端和PC端雖然模板不一樣,但是主要內容一樣,避免分散權重。

移動端<meta>聲明

       不同的移動設備上瀏覽頁面有可能出現橫向滾動條。增加viewport屬性作用是當前viewport的寬度等于設備的寬度,同時不允許用戶手動縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" >

移動端<style>樣式

       CSS樣式有三種寫法:

①外部引用

<link rel="stylesheet" type="text/css" href="http://www.vi586.com/css/basic.css" media="screen" >

②頁面內

<style type="text/css">
.p{width:100%;height:auto;margin:0 auto;}
</style>

③行內樣式

<p class="p" style="background:#c00;border:1px solid #ccc;">行內樣式寫法</p>

       移動端和PC端建議首頁采用②頁面內寫法,其他采用①外部引用寫法,為了讓HTML主體部分代碼簡潔,盡量不采用③行內樣式寫法。

移動端適配PC端相關部署

PC端<meta><link>聲明

       適配只針對存在對應關系的頁面,無對應關系的PC頁面無需任何操作

<meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/">

       name="mobile-agent"為更新后的meta聲明,建議使用。原有meta規則http-equiv="mobile-agent"能夠兼容并繼續生效,已標注過的無需修改。

       橙色部分為移動端對應URL頁面;format有幾種屬性:wml、xhtml、html5,根據實際情況選用。

       在PC端</head>之前,增加如下代碼:

<!--百度移動適配META申明-->
<meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/" />
<!--谷歌、雅虎等移動申明-->
<link href="http://wap.vi586.com/seo/" rel="alternate" media="only screen and (max-width: 640px)" />

PC端<script>識別訪問設備JS跳轉

       腳本標簽,有兩種用法:

①引用

<script type="text/javascript" src="http://www.vi586.com/js/jquery1.42.min.js"></script>

②代碼塊

<script type="text/javascript">
/*代碼塊*/
</script>

       一般頭部引用Jquery庫,執行順序也是從上至下,要注意順序。

通用JS跳轉到移動端代碼

       橙色部分是要跳轉的URL地址。把代碼塊腳本放在<title>之前。

<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="http://wap.vi586.com/seo/";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

siteapp的uaredirect.js

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://wap.vi586.com/seo/","http://www.vi586.com/seo/");</script>

       注意:http://www.vi586.com/seo/是PC版URL,http://wap.vi586.com/seo/是對應的移動版URL,使用的時候注意順序。建議放在<title>下,不然加載時間就長了。

本文地址:http://www.xejrrv.tw/seo/1157.html

    責任編輯:秀站網

    發表評論

    評論列表(條)

      深圳风采手机投注