自適應網站設計對百度友好的關鍵：添加applicable-device標籤(轉)

時間 2019-11-13

標籤自適應網站設計百度友好關鍵添加 applicable device 標籤欄目 CSS 简体版

原文原文鏈接

如今不少網站都使用了自適應網頁設計（Response-Web-Design），以知足龐大的移動端用戶羣的須要。可是在技術上設計了自適應的網頁以後，出於SEO的考慮，你還要照顧到如何對百度更友好，即告訴百度「我是自適應頁面」，方便百度進行識別校驗。css

自適應網頁設計html

瀏覽器對自適應識別校驗代碼編程

在自適應網頁設計中，咱們使用meta標籤來告訴瀏覽器網頁的自適應規則。如：瀏覽器

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

這個meta，user-scalable=yes 是聲明網頁能夠縮小放大。網絡

通用搜索引擎對自適應識別校驗代碼架構

<meta http-equiv="Cache-Control" content="no-transform" /> 
<meta http-equiv="Cache-Control" content="no-siteapp" />

這兩個meta，no-siteapp和no-transform，是告訴搜索引擎不要把網頁轉碼。app

自適應網站設計對百度友好的關鍵ide

其實，使用上面兩個meta聲明，百度就能識別自適應網頁了。佈局

不過，爲了對百度更友好，讓百度更方便識別校驗，咱們要再添加一個meta標籤。post

方法也很簡單，只要在上面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=yes" />

前面兩個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>