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