現(xiàn)在很多網(wǎng)站都使用了自適應(yīng)網(wǎng)頁設(shè)計（Response-Web-Design），以滿足龐大的移動端用戶群的需要。但是在技術(shù)上設(shè)計了自適應(yīng)的網(wǎng)頁之后，出于SEO的考慮，你還要照顧到如何對百度更友好，即告訴百度“我是自適應(yīng)頁面”，方便百度進行識別校驗。
自適應(yīng)網(wǎng)頁設(shè)計
瀏覽器對自適應(yīng)識別校驗代碼
在自適應(yīng)網(wǎng)頁設(shè)計中，我們使用meta標簽來告訴瀏覽器網(wǎng)頁的自適應(yīng)規(guī)則。如：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
這個meta，user-scalable=yes 是聲明網(wǎng)頁可以縮小放大。
通用搜索引擎對自適應(yīng)識別校驗代碼
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
這兩個meta，no-siteapp和no-transform，是告訴搜索引擎不要把網(wǎng)頁轉(zhuǎn)碼。
自適應(yīng)網(wǎng)站設(shè)計對百度友好的關(guān)鍵
其實，使用上面兩個meta聲明，百度就能識別自適應(yīng)網(wǎng)頁了。
不過，為了對百度更友好，讓百度更方便識別校驗，我們要再添加一個meta標簽。
方法也很簡單，只要在上面viewport標簽下面再添加一個applicable-device標簽就行：
<meta name="applicable-device" content="pc,mobile">
這個meta標簽，表示頁面同時適合在移動設(shè)備和PC上進行瀏覽。
不是所有網(wǎng)站都適合自適應(yīng)設(shè)計
自適應(yīng)網(wǎng)頁設(shè)計(Responsive Web Design)是指可以自動識別終端設(shè)備屏幕的大小從而做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計方法。這種網(wǎng)頁設(shè)計方法完美解決了如何在不同大小的網(wǎng)絡(luò)設(shè)備上呈現(xiàn)同樣的網(wǎng)頁效果。大家公認自適應(yīng)至少有4個好處：提升用戶體驗；PC端和移動端SEO保持一致；避免重復(fù)內(nèi)容和出錯內(nèi)容；鏈接統(tǒng)一。
而自適應(yīng)比較明顯的缺陷是，開發(fā)成本比較高，尤其是要構(gòu)建包含額外編程的復(fù)雜的自適應(yīng)網(wǎng)站，所需的時間會比較長。如果網(wǎng)站需求較簡單，有許多開源模板可供選擇。
對于已經(jīng)比較成熟PC網(wǎng)站來說，如果要實現(xiàn)全站的自適應(yīng)，有可能需要推掉原來所有的代碼進行重構(gòu)，時間和技術(shù)成本都比較大，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復(fù)雜度，所以現(xiàn)在有很多網(wǎng)站只在移動端實現(xiàn)了響應(yīng)式布局設(shè)計。
您可能對如下文章也感興趣
一天完成把PC網(wǎng)站改為自適應(yīng)！原來這么簡單！
