製做移動端手機網站過程當中的SEO優化方法技巧

據國內三大運營商數據來看，中國的手機用戶數已達10億，超過2/5的移動用戶每月都會從手機終端訪問網頁，現在的移動端手機網站比例確定有提高，可是對於這些存在的移動版本網站來講，馬海祥查看了很大一部分手機網站，不多作SEO優化工做，在這裏，馬海祥認爲移動端的手機網站優化並非PC網站的簡單copy過來的移動版本。

因爲是手機用戶，用戶瀏覽網頁的時間是零碎的，不可能耐心點擊不少的頁面，所以，要想作好一個移動端網站的優化，就須要儘量在製做移動端手機網站的過程當中精簡移動網站設計，並要合理的作好移動端網站的SEO優化。

1、移動端網站的頁面設計

網頁設計要儘量的設計簡單，手機端可視區域小，佈局上不一樣於傳統網頁，須要充分利用有限的空間去展現信息。

一、頁面適配手機屏幕

隨着手機屏幕的不斷的增大，同時也遇到一些用戶手機屏幕仍是處於240*320這種屏幕的大小，固然也存着在一些不規則的屏幕分辨率心寸大小，對於不少的UI來講，不一樣的手機屏幕不少時候得出多套的圖才能保證手機客戶端在不一樣的屏幕上實現匹配。

二、頁面專門針對手機屏幕設計

（1）、頁面隨屏幕寬度變化，無橫向滾動條。

（2）、不放大時，能清晰瀏覽內容，文字大小不低於12像素。

（3）、不放大時，按鈕、連接等點擊方便（具體可查看馬海祥博客《如何經過修改CSS樣式來加強平板電腦的用戶體驗》的相關介紹），按鈕尺寸不能過大或太小。

三、使用最多三級的頁面結構

減小移動站的頁面層級，下降用戶認知難度，一個標準的移動站應該包含首頁、列表頁和詳情頁三種類型，以知足廣告主的推廣需求和用戶的認知須要。

對於頁面類型及層級，馬海祥建議不超過3個，保證簡單、高效的用戶體驗，據馬海祥博客的分析，使用盡可能淺的頁間結構，減小用戶點擊次數，提高瀏覽體驗。

（1）、首頁

整站內容索引，內容預覽(使用「更多」「詳情」等連接)，首頁做爲用戶分流前到達的頁面，要求可以聚集整個網站的大部分模塊和功能，以保證不一樣需求的用戶在着陸後都能尋找到本身想要的信息。

移動站通常首頁又能夠分爲導航式和內容式，導航式因其風格簡潔，通常又可用做品牌宣傳，起到快速傳達品牌形象的做用，內容式因其豐富的內容，經常使用來快速傳達廣告主想傳遞的信息。

（2）、列表頁

頻道內容、分類、列表爲主，列表頁通常用於展示結構簡單，而且重複度較高的內容，最多見於商家的產品/服務，形式也通常相對簡單，用於知足展示多產品/服務的需求，根據商家產品/服務信息不一樣通常分爲純文字和圖文兩種基本形式。

（3）、內容頁

推薦以結構化形式展示內容，詳情頁通常用做展現首頁和列表頁未顯示徹底的信息，以知足用戶瞭解詳情的需求，從而輔助用戶進行決策。

四、使用清晰的導航組件

全站導航：快速到達各個頻道（具體可查看馬海祥博客《如何規劃並架構網站的導航信息結構》的相關介紹）；

局部導航：在單個頻道的首頁、列表、詳情頁面間移動；

相關連接：相關頻道之間的連接。

五、頁面單列布局，重要內容顯示在首屏

頁面內容模塊從上到下，單列布局，重要內容展示在首屏。

六、保證良好的可用性

（1）、頁面內容完好失，交互功能正常使用。

（2）、不使用flash

（3）、使用html5來實現動畫。

七、優秀交互方式，簡化操做流程，提高使用體驗

（1）、優秀的交互方式能頗有效地提高用戶體驗，一方面可以簡化操做流程提高操做效率，另外，馬海祥以爲這對於產品功能易用性的提高也是較大的。

（2）、滑動切換圖片相比於自動切換和點擊切換，滑動切換加強了用戶操做的主動性、同時提高了切換的便捷性。

（3）、滑動切換頁面用戶能夠經過滑動進行頁面之間的切換，節省用戶尋址時間。

（4）、點擊放大圖片點擊縮略圖放大圖片，減小了操做流程，必定程度上減小了因頁面跳轉帶來的用戶流失。

（5）、頁面區域點擊區域點擊能較大提高用戶點擊的效率，減小用戶因定位點擊區域形成的效率損失。

（6）、點擊加載更多一方面減小單張頁面的非必要信息，讓頁面變得簡潔，同時能減小頁面間的跳轉，下降因網速等緣由形成的用戶流失。

八、保證普遍的兼容性

在主流操做系統、瀏覽器中都可正常展示，好比：操做系統：Android，iOS；瀏覽器：UC、QQ、iOS Safari、Android。

2、移動端網站內容設置優化

對於手機網站的首頁或者頻道首頁的網頁代碼中的keywords、description最好加上與PC端有所區別的meta標籤和關鍵詞，在每一個頁面的關鍵字及描述像作傳統PC端網站同樣，作好針對性的填寫工做，對搜索結果的展示(摘要)以及優化工做大有幫助（具體可查看馬海祥博客《如何優化一個移動端手機網站》的相關介紹）。

一、一致性

着陸頁內容與關鍵字、廣告文字的相關性，不只保證廣告與目標頁面呼應和一致，更重要的可以提高潛在客戶在着陸頁上面的點擊次數，減小客戶流失。

二、可信度

經過告知潛在客戶公司名稱、聯繫地址、客服電話等信息，可以有效地提高網站(公司)的可信度。

三、重要信息首屏顯示

具體產品信息儘可能出如今網頁的第1-2屏，避免與用戶玩尋寶遊戲。

四、根據行業特性，放置針對性的內容

重點關注移動頁面的信息構建，以知足用戶需求；

基礎信息：公司介紹、產品/服務介紹。

信任信息：榮譽資質、專家團隊、案例。

轉化信息：電話、地址。

五、精簡文字，處理好圖片

精簡文字量：PC內容一半左右。

使用圖片、幻燈片提高展現效果，並注意壓縮圖片尺寸。

推薦用寬圖片展現LOGO，正方形圖片展現產品。

3、優化移動端頁面性能

隨着移動互聯網的發展，咱們愈加要關注移動頁面的性能優化，咱們能作得是對移動端頁面自己優化，這也是咱們專業價值的體現，因此咱們必須作移動端頁面性能優化（具體可查看馬海祥博客《手機網站製做的經常使用方法及優化技巧》的相關介紹）。

一、控制加載時間與網頁大小

跳出前等待時間的用戶比例；

加載時間：單頁面5S之內；

網頁大小：單頁面50K之內；

優化加載時間和網頁大小：重點在前端優化；

減小HTTP請求：減小重定向，合併圖片，懶加載；

減小傳輸數據大小：壓縮圖像，開啓GZIP……；

考慮到移動設備和移動互聯網的特色，馬海祥建議在進行移動網站的頁面開發設計時，一個總的原則是考慮用戶訪問的效率，下降頁面加載時間（具體可查看馬海祥博客《提升網站在移動端打開速度的方法技巧》的相關介紹）。

二、減小訪問請求數

從設計實現層面簡化頁面，不要放太多的圖片、複雜的表達、動畫、視頻等等。

資源合併及壓縮：好比將背景圖片、導航圖片等等做爲一張圖片，這樣只需一次請求，而不是屢次。

靜態資源(Css、Js、Image)懶加載；

異步執行inline腳本；

避免重複的資源請求；

縮小cooike；

設置鏈接方式爲keep-alive；

減小DNS查詢；

移動端可見區域是有限的，採用延遲加載方式；

開啓服務器壓縮(gzip方式)。

三、優化圖片處理

圖片走CDN；

少用動態gif圖；

圖片不適宜過多及過大；

避免使用bmp圖片；

圖片壓縮；

零碎圖片使用css Sprite技術一次性下載。

四、優化HTML

減小HTML標籤，減小沒必要要的嵌套；

廢棄table標籤；

減小DOM深度；

壓縮HTML，去掉註釋，空格換行等信息。

五、優化JS

使用臨時變量或者數組存儲document.images及document.forms等集合數據；

慎用with語法；

使用AJAX緩存；

避免eval及Function語法；

避免使用inlineScript；

異步、底部加載js；

合併壓縮js；

字符串鏈接使用數組的join方式。