標籤：頁尾 廣告 images 還需 意思 seo pre 包含 隱藏
現在很多網站都使用了自適應網頁設計（Response-Web-Design），以滿足龐大的移動端使用者群的需要。但是在技術上設計了自適應的網頁之後，出於SEO的考慮，你還要照顧到如何對百度更友好，即告訴百度“我是自適應頁面”，方便百度進行識別校正。
自適應網頁設計
瀏覽器對自適應識別校正代碼
在自適應網頁設計中，我們使用meta標籤來告訴瀏覽器網頁的自適應規則。如：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
這個meta，user-scalable=no 是聲明網頁禁止縮放。
通用搜尋引擎對自適應識別校正代碼
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" />
這兩個meta，no-siteapp和no-transform，是告訴搜尋引擎不要把網頁轉碼。
自適應網站設計對百度友好的關鍵
其實，使用上面兩個meta聲明，百度就能識別自適應網頁了。
不過，為了對百度更友好，讓百度更方便識別校正，我們要再添加一個meta標籤。
方法也很簡單，只要在上面viewport標籤下面再添加一個applicable-device標籤就行：
<meta name="applicable-device" content="pc,mobile">
這個meta標籤，表示頁面同時適合在行動裝置和PC上進行瀏覽。(可以只設一個值)
不是所有網站都適合自適應設計
自適應網頁設計(Responsive Web Design)是指可以自動識別終端裝置螢幕的大小從而做出相應調整的網頁設計方法。這種網頁設計方法完美解決了如何在不同大小的網路裝置上呈現同樣的網頁效果。大家公認自適應至少有4個好處：提升使用者體驗；PC端和移動端SEO保持一致；避免重複內容和出錯內容；連結統一。
而自適應比較明顯的缺陷是，開發成本比較高，尤其是要構建包含額外編程的複雜的自適應網站，所需的時間會比較長。如果網站需求較簡單，有許多開源模板可供選擇。
對於已經比較成熟PC網站來說，如果要實現全站的自適應，有可能需要推掉原來所有的代碼進行重構，時間和技術成本都比較大，而且如果一個網站有多個portal（入口），會大大增加架構設計的複雜度，所以現在有很多網站只在移動端實現了響應式布局設計。
一天完成把PC網站改為自適應！原來這麼簡單！網站自適應，很多人都認為是很進階需要很多時間去實現的東西，不願意去把一個現成的網站改成自適應，寧願單獨另外做一個移動站。我之前覺得實現網站自適應，要設計很多套CSS，並且要結合jQuery，來實現自適應不同的裝置。我還以為要重新設計文章的圖片，或者要用到JavaScript來控製圖片尺寸，因為圖片過大就會超出手機螢幕，而這個工作量是非常可怕的。種種顧慮使我一直不敢著手開刀，造成至今網站還只是一個PC版，而也沒有多做一個移動版。
經常在群裡看到大家都說移動流量怎麼多怎麼多，有的還說移動流量大大超過了PC流量，說移動流量的廣告點選率也比PC流量高，潛移默化的作用，我也慢慢受到了感染，於是決定把網站改成自適應！
我為什麼是把網站改為自適應，而不是改為一個單獨的移動站？因為我想一勞百逸，不想同時維護PC站和移動站，這將為日後更新文章節省大量的時間。
由於是第一次接觸，沒有實際經驗，所以需要邊找資料看案例邊修改代碼。
令我感到非常意外的是，我竟然僅需一天時間就完成了修改工作！
先看看我的修改成果吧
PC版網頁
手機版網頁
此手機版顯示的內容比較少，事實上，手機版網頁中，在文章結尾也顯示Google廣告，文章結尾還有使用者留言，使用者照樣可以在手機上評論，此外，“擴充閱讀”後面還顯示了PC版中的側欄幾個欄目的文章列表，最後，在頁尾的搜尋方塊著色層上方投放了百度移動的自適應廣告。
網站改為自適應有多簡單？
下面就說說如何把網頁改為自適應吧，我為什麼說很簡單？因為你不需要任何高深的網頁設計技術，你只需要懂一點html、一點css，而修改耗時對於一張普通網頁來說，確實只需幾個小時。
我把整個改動過程分為兩個步驟。
第一步，非常簡單，把如下代碼直接複製到<head></head>裡面。
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
前面兩個meta，no-siteapp和no-transform，是告訴搜尋引擎不要把網頁轉碼。第三個meta，聲明網頁可以縮小放大。
第二步，在<head></head>裡加上如下css代碼。
<style type="text/css"> @media(max-width:960px){ }</style>
這段css代碼，意思是在螢幕寬度小於960px的時候執行的樣式，當然你可以把960px改為其他更小的寬度，例如760px。
接下來，我們要做的就是把那些不需要在手機網頁上顯示的內容隱藏掉。如何隱藏？這就需要看懂網頁的html代碼了，需要分析每一個模組使用的div，例如頭部的div、導覽列的div、本文的div、側欄的div、頁尾的div，然後，我們就使用css隱藏不用顯示的div，代碼很簡單，就是display:none。
舉例說明，比如網頁結構如所示：
網頁結構圖
手機網頁只需顯示本文，我們把其他部分全部隱藏，代碼如下：
<style type="text/css"> @media(max-width:960px){ /* 網頁全螢幕顯示 */ body {width:100%;} /* 本文全螢幕顯示 */ #divMain{width:100%} /* 為了避免本文圖片超出螢幕寬度 */ /* 本文圖片寬度最多是螢幕寬度的90% */ #divMain img{max-width:90%} /* 隱藏頭部、導航、側欄、頁尾 */ #divHead{display:none} #divNav{display:none} #divSide{display:none} #divBottom{display:none}}</style>
這樣，當在手機瀏覽網頁時，就只顯示本文了。
網頁自適應就是這樣做的！
看了這個執行個體，是不是很簡單？網頁自適應就是這樣做的！
不過要把手機網頁自適應得有頭有尾，你還需要補充編寫一些代碼，例如編寫針對手機網頁的頭部、導航和頁尾的div，編寫後預設為隱藏，在手機裡再顯示。
如所示網頁結構：
包含手機模組的網頁結構
css就可以這樣寫
<style type="text/css"> /* 預設隱藏手機版頭部、導航和頁尾 */#divHead_mobile{display:none}#divNav_mobile{display:none}#divBottom_mobile{display:none}@media(max-width:960px){ /* 網頁全螢幕顯示 */ body {width:100%;} /* 本文全螢幕顯示 */ #divMain{width:100%} /* 為了避免本文圖片超出螢幕寬度 */ /* 本文圖片寬度最多是螢幕寬度的90% */ #divMain img{max-width:90%} /* 隱藏頭部、導航、側欄、頁尾 */ #divHead{display:none} #divNav{display:none} #divSide{display:none} #divBottom{display:none} /* 顯示手機版頭部、導航和頁尾 */ #divHead_mobile{display:block} #divNav_mobile{display:block} #divBottom_mobile{display:block}}</style>
至此，你就可以自適應設計出一個漂亮的手機版頁面了。
看完這個執行個體，是不是覺得自適應設計其實是非常容易的呢？當然了，這隻是一個最基本的自適應設計，著重是介紹思路，你可以在此思路的指引下，完成更加複雜的設計。
自適應網站設計對百度友好的關鍵：添加applicable-device標籤(轉)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
