移動端頁面優化seo需要注意哪些要點
如今,移動互聯網已經成為互聯網組成的非常重要的一個分支,如果說以前對移動頁面沒有很規范的seo和高質量內容評判劃分標準,但現在隨著各大搜索引擎發布了移動網站建設指南,圖文并茂的描述了如何提高移動站在百度質量度的等級,移動端的優化seo也受到廣大站長和優化的青睞。
以目前歡歡測試的數據來看,關鍵詞研究、網站架構和URL設計、頁面關鍵詞布局、文案寫作、導航及內部鏈接系統設計等大部分PC版網站seo技術依然適用,沒必要把移動頁面seo當成一個和PC頁面seo完全不一樣的技術,說到底,為搜索用戶提供高質量內容的目標是一樣的,只不過需要考慮手機用戶的特殊用戶體驗需求。
目前的移動搜索排名就是PC搜索排名加上移動因素進行一些調整,下面就跟大家談談移動頁面特殊的地方,這些要點在獨立URL的移動站和自適應設計的移動站都適用。
1、非主體內容、功能大幅精簡
PC版頁面經常看到兩三行頂部導航,這在手機上就沒法看了,通常手機版本要大幅刪減導航系統,包括頂部導航、面包屑和側欄導航,即使保留完整主導航,也得折疊起來,用戶點擊時再打開,如果要顯示頂部導航,** 多5、6個就差不多了。
同樣,廣告、頁腳、相關文章、Tag鏈接等PC頁面上常見的內容,能刪則刪,手機上很難容得下這些內容,同時,刪減這些內容頁可以使頁面HTML代碼大幅減少,提高頁面打開速度。
使用CSS可以隱藏導航等內容,但會產生冗余代碼,如果需要隱藏的比較多,不如直接從HTML代碼中刪除,減小頁面文件。
對此,歡歡建議各位站長可以通過刪除、縮小、壓縮圖片,提高打開速度,盡量刪除沒有十分必要的功能。
2、移動網頁的尺寸定位
初涉移動端的設計師,基本都會在尺寸問題上糾結好一陣子才能摸到頭緒,我也花了很長時間才弄明白,在此,感覺有必要在此跟大家介紹一下不同系統下的要求:
(1)、IOS系統下的尺寸及分辨率
iPhone界面尺寸:320x480、640x960、640x1136
iPad界面尺寸:1024x768、2048x1536
以上單位都是像素哦,至于分辨率一般網頁UI和移動UI基本上都只要72 ppi。
當然,在設計的時候并不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用640x960或者640x1136的尺寸設計。
(2)、Android系統下的尺寸及分辨率
Android界面尺寸:480x800、720x1280、1080x1920...(單位:像素)
Android比iPhone的尺寸多了很多套,歡歡建議取用720x1280這個尺寸,這個尺寸720x1280中顯示完美,在1080x1920中看起來也比較清晰;切圖后的圖片文件大小也適中,應用的內存消耗也不會過高。
3、創建移動網頁
為網站的指定內容創建移動網頁,圖片、文字格式、導航和網頁功能的某些方面(包括尺寸)可能都需要進行調整或轉換,這種方法的缺點是網站的傳統主頁可能也會在移動瀏覽器上運行,或者需要多點擊一次鼠標才能從傳統主頁到達移動網頁。
(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自己對比調節字體大小咯。
總之,方法是自己找的,想辦法解決問題,自己實踐,比別人告訴你印象更深刻,不是么?
4、頁面內容是否能正常訪問?
Flash在很多手機上打不開,比如iPhone早就不支持Flash了,復雜的JS效果也可能導致頁面內容在手機上根本不能顯示,想要被搜索引擎讀取的內容和鏈接不要放在JS或Flash中,就算用戶手機能顯示,搜索引擎也不一定能解析出來。
頁面是否彈窗強制APP下載或用戶登錄后才能看到內容?這是百度冰桶算法主要打擊的對象。
還要注意不要用robots文件禁止搜索引擎蜘蛛抓取CSS、JS和圖片等外部文件,不然搜索引擎蜘蛛可能無法判斷頁面布局,甚至無法正常訪問內容。
5、采取移動網頁和傳統網頁相結合的形式
這種方法只要求一套網站內容,但至少要有兩套CSS樣式:一個用于電腦版本;另一個用于移動版本。
事實上,你可以建立多個版本的CSS樣式,根據不同的移動瀏覽器自動調用不同的CSS,這種方法可以避免重復內容問題,但它并不是百分之百的可靠,不要期望移動設備能一直都選擇正確的樣式表。
6、使用動態移動網頁
這是** 可靠的方法,但也是代價** 高的方法,你需要雇傭一個程序員,幫你實現通過偵測客戶端而對網站內容進行實時轉碼的功能,而且由于移動技術的不斷變化,這也只是一個短期的解決辦法,但是,如果你想為用戶提供** 佳體驗,將優化的** 高水平應用到移動站點中,這將是你** 好的選擇。
7、頁面打開速度
百度現在給出的參考數字是,頁面在手機上需要3秒之內打開,不然用戶就跑了,以前給的數字是4秒,除了主機速度、帶寬等,打開速度也和下面的內容精簡有很大關系。
8、做好自主適配
如果是獨立URL的移動站,首先做好自適配,手機用戶訪問了PC版,自動轉向到移動版URL,PC用戶由于某種原因訪問了移動URL,自動轉向到PC版URL,這個轉向百度建議用301,Google用301、302都可以。
自適應設計也要檢測用戶瀏覽器類型,返回不同版本,百度建議自適應頁面加上這行代碼,告訴百度這個URL適用于PC和移動版本:
不過百度也不一定認可這個標簽,歡歡博客做自適應已經一個半月了,也加了上面的meta標簽,但百度至今也不認,還在給本博客轉碼。
9、頁面是否方便手機用戶瀏覽、點擊?
這是個用戶體驗問題,而用戶體驗是現在優化,尤其是移動優化的重要內容之一,包括很多細節,例如:
(1)、字體是否夠大?如果字體太小,用戶需要放大才能閱讀,顯然談不上移動友好。
(2)、上下滑動頁面一般是必要的,但需要左右滑動頁面才能看全內容,在手機上是很不方便的。
(3)、是否有大面積廣告?在PC頁面上,大量廣告就夠討厭的了,在手機上簡直就沒法忍了。
(4)、導航和內容中的鏈接是否容易點擊?按鈕是否足夠大?字距、行距是否足夠?不要低估了用戶們手指頭的粗度,手機頁面廣告點擊率大大超過PC端,不是因為手機用戶喜歡廣告,而是誤點的太多了。
(5)、Title不要太長,PC搜索結果中頁面標題可以顯示20多個字,在移動搜索結果中,這么長就被顯示成兩行了,雖然占的地方大了,但其實視覺上比較亂,反而不明顯。
(6)、購物或其他功能是否夠簡單?在手機上填寫表格比在電腦上難多了。
(7)、手機橫豎方向變化時,頁面是否自動調整顯示寬度?
10、本地查詢詞
由于使用場景的特性,移動搜索有更強地域性,在手機上搜索吃喝玩樂、旅游、地圖、路線、天氣等的用戶數量很大,做移動優化時,更要關注地名+主查詢詞這種搜索,如“北京飯館”,“中關村酒吧”之類的詞。
- 如何優化:
- 網站url改版不收錄 網站建設哪個 奉賢網站改版哪家好 公司網站改版價格會變嗎 網站改版注意哪些 陽江網站開發 孝義網站定制公司 日本跨境選品軟件網站開發 本溪網站定制報價 鄭州旅游網站開發運營