制作移動端手機網站過程中的SEO優化方法技巧

1前言

據國內三大運營商數據來看，中國的手機用戶數已達15.7億，超過3/5的移動用戶每個月都會從手機終端訪問網頁，如今的移動端手機網站比例肯定有提升，但是對于這些存在的移動版本網站來說，小星查看了很大一部分手機網站，很少做SEO優化工作，在這里，小星認為移動端的手機網站優化并不是PC網站的簡單copy過來的移動版本。

作為一個手機用戶，瀏覽網頁的時間是零碎的，用戶不可能耐心的點擊很多頁面。因此，為了優化一個移動網站，需要在制作移動網站的過程中盡可能精簡移動網站的設計，合理優化移動網站的SEO。

2移動端網站的頁面設計

網頁的設計要盡可能簡單，手機可視區域小，布局不同于傳統網頁，要充分利用有限的空間來顯示信息。

1、頁面適配手機屏幕

隨著手機屏幕的不斷增加，一些用戶的手機屏幕仍然是240*320的大小，當然也有一些屏幕分辨率不規則的情況。對于許多UIS人來說，不同的手機屏幕往往會繪制多組圖紙，以確保手機客戶端可以在不同的屏幕上實現匹配。

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

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

(2)、不放大時，內容瀏覽清楚，文字大小不小于12像素。

(3)、不放大時，方便點擊按鈕和鏈接，按鈕大小不宜過大或過小。

3、最多使用三級頁面結構。

為了降低移動臺的頁面級別，降低用戶的認知難度，一個標準的移動臺應該包括主頁、列表頁和詳細頁三種類型，以滿足廣告主的推廣需求和用戶的認知需求。

對于頁面類型和級別，小星建議不要超過3頁，保證簡單高效的用戶體驗。根據小星的分析，頁面之間的結構應該盡量淺，以減少用戶點擊量，提高瀏覽體驗。

(1)、首頁

整個網站內容索引、內容預覽(使用“更多”、“細節”等鏈接)、首頁作為用戶分流前到達的頁面，需要收集整個網站的大部分模塊和功能，以保證不同需求的用戶登陸后能夠找到自己想要的信息。

一般來說，移動站的主頁可以分為導航型和內容型。導航型，由于其簡潔的風格，一般可以作為品牌推廣，快速傳達品牌形象。內容類型，由于其內容豐富，經常被用來快速傳達廣告主想要傳達的信息。

(2)、列表頁

頻道內容、分類、列表是主要內容。列表頁面一般用于顯示簡單、重復性高的內容，在商家的產品/服務中最為常見，一般形式比較簡單，用于滿足展示多個產品/服務的需求。根據商家的產品/服務信息不同，一般分為純文本和圖形兩種基本形式。

(3)、內容頁

建議以結構化的形式呈現內容，詳細頁面一般用于展示主頁和列表頁面上不完整的信息，以滿足用戶了解細節、輔助用戶決策的需求。

4.使用清晰的導航組件。

全站導航:快速到達各通道；

局部導航:在單個頻道的主頁、列表、詳細頁面之間移動

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

5、頁面單列布局，重要內容顯示在第一個屏幕上。

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

6、保證良好的可用性

(1)、頁面內容沒有丟失，交互功能也正常使用。

(2)、不使用flash

(3)、使用html5實現動畫。

7、優秀的交互方式，簡化操作流程，提高使用體驗。

(1)、優秀的交互模式可以有效提升用戶體驗，一方面可以簡化操作流程，提高操作效率；另一方面，小星覺得可以大大提高產品功能的可用性。

(2)、與自動切換和點擊切換相比，滑動切換增強了用戶操作的主動性，提高了切換的便利性。

(3)、滑動切換頁面。用戶可以滑動切換頁面，節省用戶尋址時間。

(4)、點擊放大圖片點擊縮略圖放大圖片，減少了操作流程，一定程度上減少了因頁面跳轉帶來的用戶流失。

(5)、點擊頁面區域可以大大提高用戶點擊的效率，減少定位點擊區域帶來的效率損失。

(6)、點擊加載更多。一方面減少了單個頁面不必要的信息，使頁面簡潔，同時可以減少頁面之間的跳轉，減少因網速等原因造成的用戶流失。

8、確保廣泛的兼容性。

可以在主流操作系統和瀏覽器中正常顯示，比如:操作系統:Android、iOS；瀏覽器:UC、QQ、iOSSafari、Android。

3移動端網站內容設置優化

最好是將keywords、description和meta標簽與PC端區分開來，在手機網站的首頁或頻道首頁的網頁代碼中使用它們，如傳統PC端網站那樣，在每一頁的關鍵字和描述中使用它們，對搜索結果的顯示(摘要)和優化很有幫助。

1、一致性

登陸頁面內容與關鍵詞、廣告文本的關聯性，不僅保證了廣告與目標頁面的呼應和一致，更重要的是可以增加潛在客戶在登陸頁面的點擊量，減少客戶流失。

2、可信度

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

3、重要信息首屏顯示

具體產品信息盡量出現在網頁的1-2屏，避免和用戶玩尋寶游戲。

4、根據行業特點，放有針對性的內容。

注重移動頁面的信息化建設，滿足用戶需求；

基本信息:公司介紹，產品/服務介紹。

信任信息:榮譽資格、專家團隊、案例。

轉化信息：電話號碼和地址。

5、簡化文字，處理好圖片。

精簡文字:PC內容的一半左右。

使用圖片和幻燈片增強顯示效果，注意壓縮圖片大小。

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

4優化移動端頁面性能

隨著移動互聯網的發展，我們應該更加重視移動頁面的性能優化。我們能做的就是優化移動頁面本身，這也是我們專業價值的體現，所以一定要做好移動頁面的性能優化。

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

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

加載時間:單頁5S以內；

頁面大小:每頁50K以內；

優化加載時間和頁面大小:側重前端優化；

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

減少傳輸數據大?。簤嚎s圖像，開啟GZIP……；

考慮到移動設備和移動互聯網的特點，小星建議在開發和設計移動網站的頁面時，一個普遍的原則是考慮用戶訪問的效率，減少頁面的加載時間。

2、減少訪問請求數

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

資源整合壓縮:比如拍背景圖，導航圖等。作為一張圖片，因此只需要一個請求，而不是多個請求。

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

異步執行inline腳本；

避免重復的資源請求；

縮小cooike；

設置連接方式為keep-alive；

減少DNS查詢；

移動終端可視區域有限，采用延遲加載方式；

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

3、優化圖片處理

圖片走CDN；

少用動態gif圖；

圖片不適宜過多及過大；

避免使用bmp圖片；

圖片壓縮；

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

4、優化HTML

減少HTML標簽，減少不必要的嵌套；

廢棄table標簽；

減少DOM深度；

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

5、優化JS

使用臨時變量或數組存儲集合數據，如document.images和document.forms

慎用with語法；

使用AJAX緩存；

避免eval及Function語法；

避免使用inlineScript；

異步、底部加載js；

合并壓縮js；

字符串連接使用數組的連接模式。

總結：

無論是PC還是手機，網站都要考慮清楚消費群體的定位。雖然智能手機用戶數量很普及，但要明白，中國大部分手機用戶使用的網絡速度遠不如PC。所以在設計頁面的時候，需要考慮用戶打開網頁的時間長度，這不僅是用戶體驗的問題，更是盡量減少百度索引抓取，讓百度蜘蛛抓取并盡可能包含頁面的問題。