現(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)單!