網站移動化的主要方法
為了避免概念上的偏差，我們重新介紹一下什麼是自適應網頁設計。當前網站移動化的主要方案有三種：
獨立的移動站
後台代碼適配
自適應設計
我們看到這三種方法的優劣很清晰。 m.站需要一一對應跳轉目標，花時間進行一次跳轉，同時需要維護兩套代碼。後台代碼適配無跳轉的煩惱，但同樣要維護兩套代碼。自適應設計只需要維護一套代碼，符合現代網頁內容和展現分離的趨勢，但是會造成大量數據冗餘讓客戶端下載大量不必要的數據。
慶幸的是隨著互聯網基礎設施的發展，我們都會變成“不差流量”的網民；手機的CPU和GPU也會越來越強大。另一方面對搜索引擎來說，由於只要收錄一個版本的網頁，其資源得到了節省。因此谷歌表揚這些為它省電省時省空間的網站也不無道理。
自適應設計的網站收錄——Google的建議
Google對網站移動化自2014年以來就相當重視，移動化早已佔據了半壁江山的環境下這是順理成章的。挖掘一下Google站長平台我們可以發現Google官方對自適應設計站點的建議如下：
添加viewpoint並使用<picture>
在<head></head>添加以下代碼並且使用<picture>元素處理自適應圖片。凡是自適應網站一般都有此段代碼。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
那什麼叫使用<picture>元素呢？ <picture>標籤是HTML 5中新加入的標籤用於標示不同分辨率下使用不同分辨率的圖片資源。過去我們的做法可能是這樣:
max-width: 100%;
height: auto;
}
現在我們用<picture>標籤的話會是這樣：
<source media=”(min-width: 64em)” src=”high-res.jpg”>
<source media=”(min-width: 37.5em)” src=”med-res.jpg”>
<source src=”low-res.jpg”>
<img src=”fallback.jpg” alt=”This picture loads on non-supporting browsers.”>
<p>Accessible text.</p>
</picture>
添加applicable-device
自適應頁面還應該在<head></head>中標識：
<meta name=”applicable-device”content=”pc,mobile”>
表示頁面同時適合在PC和移動設備上進行瀏覽。
添加站點類型
在Google站長中你可以為自己的網站添加站點類型。方法是到Google站長>工具>我的網站– 站點管理>管理站點-站點屬性設置>站點類型。你可以把你的站點類型改為“自適應站”並保存。
以上就是Google推薦的自適應網站的處理方法，那麼如果還是收錄不理想怎麼辦呢？
自適應設計的網站收錄——HubSpot One的建議
請注意，對於較低風險偏好或者有較大失業風險的站長請忽略下面所有內容。
- 如果嘗試了以上所有方法都不理想，HubSpot One建議大家建立一個m.的子域名並和自己的網站綁定。 請注意這是一個有較大風險的措施，因為這樣對一同一頁面會有多個訪問URL。為此你要建立canonical標籤和alternate標籤。
- 接下來在站長平台後台新建一個m.網站，站點類型選為“有對應PC站的移動站”。將原來的網站由“自適應”改為“ PC站”。
- 然後我們進行移動適配。到Google站長>工具>移動專區>移動適配中添加適配關係。在規則適配中我們填上m.yoursite.com。由於我們是自適應站，因此域名後的路徑都一致。在提交單條規則中如下圖格式填寫並提交：
提交後我們可以密切關注規則生效，大概需要10天。
以上就是HubSpot One建議的一種折衷的方法，鑑於Google目前的自適應網站的抓取尚不成熟。希望能夠開拓你的思路提供更好的方法交流。