移動端頁面SEO優化須要注意的10個要點

現在，移動互聯網已經成爲互聯網組成的很是重要的一個分支，若是說之前對移動頁面沒有很規範的優化和高質量內容評判劃分標準，但如今隨着各大搜索引擎發佈了移動建站指南，圖文並茂的描述瞭如何提升移動站在百度質量度的等級，移動端的SEO優化也受到廣大站長和SEO的青睞。

以目前歡歡測試的數據來看，關鍵詞研究、網站架構和URL設計、頁面關鍵詞佈局、文案寫做、導航及內部連接系統設計等大部分PC版網站優化技術依然適用，不必把移動頁面優化當成一個和PC頁面優化徹底不同的技術，說到底，爲搜索用戶提供高質量內容的目標是同樣的，只不過須要考慮手機用戶的特殊用戶體驗需求。

目前的移動搜索排名就是PC搜索排名加上移動因素進行一些調整，下面我就在歡歡博客上跟你們談談移動頁面特殊的地方，這些要點在獨立URL的移動站和自適應設計的移動站都適用。

一、非主體內容、功能大幅精簡

PC版頁面常常看到兩三行頂部導航，這在手機上就無法看了，一般手機版本要大幅刪減導航系統，包括頂部導航、麪包屑和側欄導航，即便保留完整主導航，也得摺疊起來，用戶點擊時再打開，若是要顯示頂部導航，最多五、6個就差很少了。

一樣，廣告、頁腳、相關文章、Tag連接等PC頁面上常見的內容，能刪則刪，手機上很難容得下這些內容，同時，刪減這些內容頁可使頁面HTML代碼大幅減小，提升頁面打開速度。

使用CSS能夠隱藏導航等內容，但會產生冗餘代碼，若是須要隱藏的比較多，不如直接從HTML代碼中刪除，減少頁面文件。

對此，歡歡建議各位站長能夠經過刪除、縮小、壓縮圖片，提升打開速度，儘可能刪除沒有十分必要的功能。

二、移動網頁的尺寸定位

初涉移動端的設計師，基本都會在尺寸問題上糾結好一陣子才能摸到頭緒，我也花了很長時間才弄明白，在此，感受有必要在此跟你們介紹一下不一樣系統下的要求：

（1）、IOS系統下的尺寸及分辨率

iPhone界面尺寸：320x480、640x960、640x1136

iPad界面尺寸：1024x76八、2048x1536

以上單位都是像素哦，至於分辨率通常網頁UI和移動UI基本上都只要72 ppi。

固然，在設計的時候並非每一個尺寸都要作一套，尺寸按本身的手機尺寸來設計，比較方便預覽效果，通常用640x960或者640x1136的尺寸設計。

（2）、Android系統下的尺寸及分辨率

Android界面尺寸：480x800、720x1280、1080x1920...（單位：像素）

Android比iPhone的尺寸多了不少套，歡歡建議取用720x1280這個尺寸，這個尺寸720x1280中顯示完美，在1080x1920中看起來也比較清晰；切圖後的圖片文件大小也適中，應用的內存消耗也不會太高。

三、建立移動網頁

爲網站的指定內容建立移動網頁，圖片、文字格式、導航和網頁功能的某些方面(包括尺寸)可能都須要進行調整或轉換，這種方法的缺點是網站的傳統主頁可能也會在移動瀏覽器上運行，或者須要多點擊一次鼠標才能從傳統主頁到達移動網頁。

（1）、界面基本組成元素

移動網站的APP界面通常由四個元素組成，分別是：狀態欄、導航欄、主菜單欄以及中間的內容區域。

 

這裏取用640x960的尺寸設計，那咱們就說說在這個尺寸下這些元素的尺寸：

狀態欄：就是咱們常常說的信號、運營商、電量等顯示手機狀態的區域，其高度爲：40 px

導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間跳轉的按鈕，其高度爲：88 px

主菜單欄：相似於頁面的主菜單，提供整個應用的分類內容的快速跳轉，其高度爲：98 px

內容區域：展現應用提供的相應內容，整個應用中佈局變動最爲頻繁的，其高度爲：734 px（爲何是734呢？這是由於：960-40-88-98=734）

至於咱們常常說的iPhone5/5s的640x11136的尺寸，其實就是中間的內容區域高度增長到：910 px

歡歡博客提示：在最新的iOS7的風格中，蘋果已經開始慢慢弱化狀態欄的存在，將狀態欄和導航欄合在了一塊兒，可是再怎麼變化，尺寸高度也仍是沒有變化的，只不過你們再設計iOS7風格的界面的時候多多注意一下。

Android中的大屏手機，咱們取用720x1280的尺寸設計，那咱們就說說在這個尺寸下這些元素的尺寸：

狀態欄高度爲：50 px

導航欄高度爲：96 px

主菜單欄高度爲：96 px

內容區域高度爲：1038 px（1280-50-96-96=1038）

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，固然高度也是和菜單欄同樣的：96 px

寫以前我翻了好多關於Android的界面尺寸教程，都沒找到像iOS同樣具體的規範，或許由於在安卓中這些控件的高度都能用程序自定義，都沒有提到具體的尺寸數值，因此就本身找了Android的設計規範，尺寸都是本身在PS中量的。

Android爲了在界面上區別於iOS，Android 4.0開始提出一套HOLO的UI風格，這一風格最明顯的變化就是將下方的主菜單移動到了導航欄下面，這樣的方式解決了如今不少手機去除實體按鍵後在屏幕中顯示而出現的雙底欄的尷尬情景。

（2）、移動頁面的字體大小

iPhone上的字體英文爲：HelveticaNeue；至於中文，Mac下用的是黑體-簡，Win下則爲華文黑體。

下圖是用戶體驗作過的一個小調查，能夠看出用戶可接受的文字大小，像素爲單位，也就是你們在PS裏的文字像素大小。

Android上的字體爲：Droid sans fallback，是谷歌本身的字體，與微軟雅黑很像。

一樣，在用戶體驗的調查中，能夠看出用戶可接受的文字相應問題。

在此，建議你們多留心下一些大公司的數據研究，你會發現不少你根本沒考慮到的問題哦。

其實歡歡以爲還有個更簡單的方法就是找你以爲好的APP應用，手機截圖後放進PS本身對比調節字體大小咯。

總之，方法是本身找的，想辦法解決問題，本身實踐，比別人告訴你印象更深入，不是麼？

四、頁面內容是否能正常訪問？

Flash在不少手機上打不開，好比iPhone早就不支持Flash了，複雜的JS效果也可能致使頁面內容在手機上根本不能顯示，想要被搜索引擎讀取的內容和連接不要放在JS或Flash中，就算用戶手機能顯示，搜索引擎也不必定能解析出來。

頁面是否彈窗強制APP下載或用戶登陸後才能看到內容？這是百度冰桶算法主要打擊的對象。

還要注意不要用robots文件禁止搜索引擎蜘蛛抓取CSS、JS和圖片等外部文件，否則搜索引擎蜘蛛可能沒法判斷頁面佈局，甚至沒法正常訪問內容。

五、採起移動網頁和傳統網頁相結合的形式

這種方法只要求一套網站內容，但至少要有兩套CSS樣式：一個用於電腦版本；另外一個用於移動版本。

事實上，你能夠創建多個版本的CSS樣式，根據不一樣的移動瀏覽器自動調用不一樣的CSS，這種方法能夠避免重複內容問題，但它並非百分之百的可靠，不要指望移動設備能一直都選擇正確的樣式表。

六、使用動態移動網頁

這是最可靠的方法，但也是代價最高的方法，你須要僱傭一個程序員，幫你實現經過偵測客戶端而對網站內容進行實時轉碼的功能，並且因爲移動技術的不斷變化，這也只是一個短時間的解決辦法，可是，若是你想爲用戶提供最佳體驗，將SEO的最高水平應用到移動站點中，這將是你最好的選擇。

七、頁面打開速度

百度如今給出的參考數字是，頁面在手機上須要3秒以內打開，否則用戶就跑了，之前給的數字是4秒，除了主機速度、帶寬等，打開速度也和下面的內容精簡有很大關係。

八、作好自主適配

若是是獨立URL的移動站，首先作好自適配，手機用戶訪問了PC版，自動轉向到移動版URL，PC用戶因爲某種緣由訪問了移動URL，自動轉向到PC版URL，這個轉向百度建議用301，Google用30一、302均可以。

自適應設計也要檢測用戶瀏覽器類型，返回不一樣版本，百度建議自適應頁面加上這行代碼，告訴百度這個URL適用於PC和移動版本：

不過百度也不必定承認這個標籤，歡歡博客作自適應已經一個半月了，也加了上面的meta標籤，但百度至今也不認，還在給本博客轉碼。

九、頁面是否方便手機用戶瀏覽、點擊？

這是個用戶體驗問題，而用戶體驗是如今SEO，尤爲是移動SEO的重要內容之一，包括不少細節，例如：

（1）、字體是否夠大？若是字體過小，用戶須要放大才能閱讀，顯然談不上移動友好。

（2）、上下滑動頁面通常是必要的，但須要左右滑動頁面才能看全內容，在手機上是很不方便的。

（3）、是否有大面積廣告？在PC頁面上，大量廣告就夠討厭的了，在手機上簡直就無法忍了。

（4）、導航和內容中的連接是否容易點擊？按鈕是否足夠大？字距、行距是否足夠？不要低估了用戶們手指頭的粗度，手機頁面廣告點擊率大大超過PC端，不是由於手機用戶喜歡廣告，而是誤點的太多了。

（5）、Title不要太長，PC搜索結果中頁面標題能夠顯示20多個字，在移動搜索結果中，這麼長就被顯示成兩行了，雖然佔的地方大了，但其實視覺上比較亂，反而不明顯。

（6）、購物或其餘功能是否夠簡單？在手機上填寫表格比在電腦上難多了。

（7）、手機橫豎方向變化時，頁面是否自動調整顯示寬度？

十、本地查詢詞

因爲使用場景的特性，移動搜索有更強地域性，在手機上搜索吃喝玩樂、旅遊、地圖、路線、天氣等的用戶數量很大，作移動SEO時，更要關注地名＋主查詢詞這種搜索，如「北京飯館」，「中關村酒吧」之類的詞。

頁面針對特定地理位置時，好比頁面就是關於「王府井酒店」的，百度建議使用地理擴展meta標註省市名稱，甚至具體座標。
 

江西SEO歡歡點評：愈來愈多的屏幕也讓移動搜索的能量被擴大，這就須要各位站長結合網站特色，並且認爲自身網站特別的有跨平臺的須要的時候，能夠針對產品的內容提煉出須要移動化的產品，根據目前統計的數據，大部分的網站經過移動搜索的流量逐年上漲，爲了適應不一樣屏幕，全面的將網頁改形成爲Html5網站內容也是大勢所趨。

原文連接：http://www.iluohuan.com/ydss/513.html