如今,手機(jī)互聯(lián)網(wǎng)已經(jīng)成為互聯(lián)網(wǎng)組成的非常重要的一個(gè)分支,如果說以前對(duì)手機(jī)頁面沒有很規(guī)范的優(yōu)化和高質(zhì)量內(nèi)容評(píng)判劃分標(biāo)準(zhǔn),但現(xiàn)在隨著各大搜索引擎發(fā)布了手機(jī)建站指南,圖文并茂的描述了如何提高手機(jī)站在百度質(zhì)量度的等級(jí),手機(jī)端的SEO優(yōu)化也受到廣大站長和SEO的青睞。
以目前鄭州seo公司老秦測試的數(shù)據(jù)來看,關(guān)鍵詞研究、網(wǎng)站架構(gòu)和URL設(shè)計(jì)、頁面關(guān)鍵詞布局、文案寫作、導(dǎo)航及內(nèi)部鏈接系統(tǒng)設(shè)計(jì)等大部分PC版網(wǎng)站優(yōu)化技術(shù)依然適用,沒必要把手機(jī)頁面優(yōu)化當(dāng)成一個(gè)和PC頁面優(yōu)化完全不一樣的技術(shù),說到底,為搜索用戶提供高質(zhì)量內(nèi)容的目標(biāo)是一樣的,只不過需要考慮手機(jī)用戶的特殊用戶體驗(yàn)需求。
目前的手機(jī)搜索排名就是PC搜索排名加上手機(jī)因素進(jìn)行一些調(diào)整,下面我就在鄭州seo公司老秦博客上跟大家談?wù)勈謾C(jī)頁面特殊的地方,這些要點(diǎn)在獨(dú)立URL的手機(jī)站和自適應(yīng)設(shè)計(jì)的手機(jī)站都適用。
1、非主體內(nèi)容、功能大幅精簡
PC版頁面經(jīng)??吹絻扇许敳繉?dǎo)航,這在手機(jī)上就沒法看了,通常手機(jī)版本要大幅刪減導(dǎo)航系統(tǒng),包括頂部導(dǎo)航、面包屑和側(cè)欄導(dǎo)航,即使保留完整主導(dǎo)航,也得折疊起來,用戶點(diǎn)擊時(shí)再打開,如果要顯示頂部導(dǎo)航,更 多5、6個(gè)就差不多了。
同樣,廣告、頁腳、相關(guān)文章、Tag鏈接等PC頁面上常見的內(nèi)容,能刪則刪,手機(jī)上很難容得下這些內(nèi)容,同時(shí),刪減這些內(nèi)容頁可以使頁面HTML代碼大幅減少,提高頁面打開速度。
使用CSS可以隱藏導(dǎo)航等內(nèi)容,但會(huì)產(chǎn)生冗余代碼,如果需要隱藏的比較多,不如直接從HTML代碼中刪除,減小頁面文件。
對(duì)此,鄭州seo公司老秦建議各位站長可以通過刪除、縮小、壓縮圖片,提高打開速度,盡量刪除沒有十分必要的功能。
2、手機(jī)網(wǎng)頁的尺寸定位
初涉手機(jī)端的設(shè)計(jì)師,基本都會(huì)在尺寸問題上糾結(jié)好一陣子才能摸到頭緒,我也花了很長時(shí)間才弄明白(之前我曾在鄭州seo公司老秦博客《詳解手機(jī)端設(shè)備頁面尺寸設(shè)計(jì)原理》一文中跟大家詳細(xì)的介紹過,有興趣的博友,可以看下),在此,感覺有必要在此跟大家介紹一下不同系統(tǒng)下的要求:
(1)、IOS系統(tǒng)下的尺寸及分辨率
iPhone界面尺寸:320x480、640x960、640x1136
iPad界面尺寸:1024x768、2048x1536
以上單位都是像素哦,至于分辨率一般網(wǎng)頁UI和手機(jī)UI基本上都只要72 ppi。
當(dāng)然,在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套,尺寸按自己的手機(jī)尺寸來設(shè)計(jì),比較方便預(yù)覽效果,一般用640x960或者640x1136的尺寸設(shè)計(jì)。
(2)、Android系統(tǒng)下的尺寸及分辨率
Android界面尺寸:480x800、720x1280、1080x1920...(單位:像素)
Android比iPhone的尺寸多了很多套,鄭州seo公司老秦建議取用720x1280這個(gè)尺寸,這個(gè)尺寸720x1280中顯示 ,在1080x1920中看起來也比較清晰;切圖后的圖片文件大小也適中,應(yīng)用的內(nèi)存消耗也不會(huì)過高。
3、創(chuàng)建手機(jī)網(wǎng)頁
為網(wǎng)站的定向 內(nèi)容創(chuàng)建手機(jī)網(wǎng)頁,圖片、文字格式、導(dǎo)航和網(wǎng)頁功能的某些方面(包括尺寸)可能都需要進(jìn)行調(diào)整或轉(zhuǎn)換,這種方法的缺點(diǎn)是網(wǎng)站的傳統(tǒng)主頁可能也會(huì)在手機(jī)瀏覽器上運(yùn)行,或者需要多點(diǎn)擊一次鼠標(biāo)才能從傳統(tǒng)主頁到達(dá)手機(jī)網(wǎng)頁。
(1)、界面基本組成元素
手機(jī)網(wǎng)站的APP界面一般由四個(gè)元素組成,分別是:狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。
這里取用640x960的尺寸設(shè)計(jì),那我們就說說在這個(gè)尺寸下這些元素的尺寸:
狀態(tài)欄:就是我們經(jīng)常說的信號(hào)、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域,其高度為:40 px
導(dǎo)航欄:顯示當(dāng)前界面的名稱,包含相應(yīng)的功能或者頁面間跳轉(zhuǎn)的按鈕,其高度為:88 px
主菜單欄:類似于頁面的主菜單,提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn),其高度為:98 px
內(nèi)容區(qū)域:展示應(yīng)用提供的相應(yīng)內(nèi)容,整個(gè)應(yīng)用中布局變更更 為頻繁的,其高度為:734 px(為什么是734呢?這是因?yàn)椋?60-40-88-98=734)
至于我們經(jīng)常說的iPhone5/5s的640x11136的尺寸,其實(shí)就是中間的內(nèi)容區(qū)域高度增加到:910 px
鄭州seo公司老秦博客提示:在更 新的iOS7的風(fēng)格中,蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在,將狀態(tài)欄和導(dǎo)航欄合在了一起,但是再怎么變化,尺寸高度也還是沒有變化的,只不過大家再設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意一下。
Android中的大屏手機(jī),我們?nèi)∮?20x1280的尺寸設(shè)計(jì),那我們就說說在這個(gè)尺寸下這些元素的尺寸:
狀態(tài)欄高度為:50 px
導(dǎo)航欄高度為:96 px
主菜單欄高度為:96 px
內(nèi)容區(qū)域高度為:1038 px(1280-50-96-96=1038)
Android更 近出的手機(jī)都幾乎去掉了實(shí)體鍵,把功能鍵移到了屏幕中,當(dāng)然高度也是和菜單欄一樣的:96 px
寫之前我翻了好多關(guān)于Android的界面尺寸教程,都沒找到像iOS一樣具體的規(guī)范,或許因?yàn)樵诎沧恐羞@些控件的高度都能用程序自定義,都沒有提到具體的尺寸數(shù)值,所以就自己找了Android的設(shè)計(jì)規(guī)范,尺寸都是自己在PS中量的。
Android為了在界面上區(qū)別于iOS,Android 4.0開始提出一套HOLO的UI風(fēng)格,這一風(fēng)格更 明顯的變化就是將下方的主菜單手機(jī)到了導(dǎo)航欄下面,這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體按鍵后在屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。
(2)、手機(jī)頁面的字體大小
iPhone上的字體英文為:HelveticaNeue;至于中文,Mac下用的是黑體-簡,Win下則為華文黑體。
下圖是用戶體驗(yàn)做過的一個(gè)小調(diào)查,可以看出用戶可接受的文字大小,像素為單位,也就是大家在PS里的文字像素大小。
Android上的字體為:Droid sans fallback,是谷歌自己的字體,與微軟雅黑很像。
同樣,在用戶體驗(yàn)的調(diào)查中,可以看出用戶可接受的文字相應(yīng)問題。
在此,建議大家多留心下一些大公司的數(shù)據(jù)研究,你會(huì)發(fā)現(xiàn)很多你根本沒考慮到的問題哦(具體可查看鄭州seo公司老秦博客《基于頁面易讀性的文字編排設(shè)計(jì)要點(diǎn)》的相關(guān)介紹)。
其實(shí)鄭州seo公司老秦覺得還有個(gè)更簡單的方法就是找你覺得好的APP應(yīng)用,手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小咯。
總之,方法是自己找的,想辦法解決問題,自己實(shí)踐,比別人告訴你印象更深刻,不是么?
4、頁面內(nèi)容是否能正常訪問?
Flash在很多手機(jī)上打不開,比如iPhone早就不支持Flash了,復(fù)雜的JS效果也可能導(dǎo)致頁面內(nèi)容在手機(jī)上根本不能顯示,想要被搜索引擎讀取的內(nèi)容和鏈接不要放在JS或Flash中,就算用戶手機(jī)能顯示,搜索引擎也不一定能解析出來。
頁面是否彈窗強(qiáng)制APP下載或用戶登錄后才能看到內(nèi)容?這是百度冰桶算法主要打擊的對(duì)象(具體可查看鄭州seo公司老秦博客《百度手機(jī)搜索冰桶算法上線帶給了我們什么信息》的相關(guān)介紹)。
還要注意不要用robots文件禁止搜索引擎蜘蛛抓取CSS、JS和圖片等外部文件,不然搜索引擎蜘蛛可能無法判斷頁面布局,甚至無法正常訪問內(nèi)容。
5、采取手機(jī)網(wǎng)頁和傳統(tǒng)網(wǎng)頁相結(jié)合的形式
這種方法只要求一套網(wǎng)站內(nèi)容,但至少要有兩套CSS樣式:一個(gè)用于電腦版本;另一個(gè)用于手機(jī)版本。
事實(shí)上,你可以建立多個(gè)版本的CSS樣式,根據(jù)不同的手機(jī)瀏覽器自動(dòng)調(diào)用不同的CSS,這種方法可以避免重復(fù)內(nèi)容問題,但它并不是 的可靠,不要期望手機(jī)設(shè)備能一直都選擇正確的樣式表。
6、使用動(dòng)態(tài)手機(jī)網(wǎng)頁
這是更 可靠的方法,但也是代價(jià)更高 的方法,你需要雇傭一個(gè)程序員,幫你實(shí)現(xiàn)通過偵測客戶端而對(duì)網(wǎng)站內(nèi)容進(jìn)行實(shí)時(shí)轉(zhuǎn)碼的功能,而且由于手機(jī)技術(shù)的不斷變化,這也只是一個(gè)短期的解決辦法,但是,如果你想為用戶提供更佳 體驗(yàn),將SEO的更高 水平應(yīng)用到手機(jī)站點(diǎn)中,這將是你更好 的選擇。
7、頁面打開速度
百度現(xiàn)在給出的參考數(shù)字是,頁面在手機(jī)上需要3秒之內(nèi)打開,不然用戶就跑了,以前給的數(shù)字是4秒,除了主機(jī)速度、帶寬等,打開速度也和下面的內(nèi)容精簡有很大關(guān)系(具體可查看鄭州seo公司老秦博客《提高網(wǎng)站在手機(jī)端打開速度的方法技巧》的相關(guān)介紹)。
8、做好自主適配
如果是獨(dú)立URL的手機(jī)站,壹 先做好自適配,手機(jī)用戶訪問了PC版,自動(dòng)轉(zhuǎn)向到手機(jī)版URL,PC用戶由于某種原因訪問了手機(jī)URL,自動(dòng)轉(zhuǎn)向到PC版URL,這個(gè)轉(zhuǎn)向百度建議用301,Google用301、302都可以(具體可查看鄭州seo公司老秦博客《百度手機(jī)搜索開放適配服務(wù)的3種方法》的相關(guān)介紹)。
自適應(yīng)設(shè)計(jì)也要檢測用戶瀏覽器類型,返回不同版本,百度建議自適應(yīng)頁面加上這行代碼,告訴百度這個(gè)URL適用于PC和手機(jī)版本:<meta name=”applicable-device” content=”pc,mobile”>
不過百度也不一定認(rèn)可這個(gè)標(biāo)簽,鄭州seo公司老秦博客做自適應(yīng)已經(jīng)一個(gè)半月了,也加了上面的meta標(biāo)簽,但百度至今也不認(rèn),還在給本博客轉(zhuǎn)碼。
9、頁面是否方便手機(jī)用戶瀏覽、點(diǎn)擊?
這是個(gè)用戶體驗(yàn)問題,而用戶體驗(yàn)是現(xiàn)在SEO,尤其是手機(jī)SEO的重要內(nèi)容之一,包括很多細(xì)節(jié),例如:
(1)、字體是否夠大?如果字體太小,用戶需要放大才能閱讀,顯然談不上手機(jī)友好。
(2)、上下滑動(dòng)頁面一般是必要的,但需要左右滑動(dòng)頁面才能看全內(nèi)容,在手機(jī)上是很不方便的。
(3)、是否有大面積廣告?在PC頁面上,大量廣告就夠討厭的了,在手機(jī)上簡直就沒法忍了。
(4)、導(dǎo)航和內(nèi)容中的鏈接是否容易點(diǎn)擊?按鈕是否足夠大?字距、行距是否足夠?不要低估了用戶們手指頭的粗度,手機(jī)頁面廣告點(diǎn)擊率大大超過PC端,不是因?yàn)槭謾C(jī)用戶喜歡廣告,而是誤點(diǎn)的太多了。
(5)、Title不要太長,PC搜索結(jié)果中頁面標(biāo)題可以顯示20多個(gè)字,在手機(jī)搜索結(jié)果中,這么長就被顯示成兩行了,雖然占的地方大了,但其實(shí)視覺上比較亂,反而不明顯。
(6)、購物或其他功能是否夠簡單?在手機(jī)上填寫表格比在電腦上難多了。
(7)、手機(jī)橫豎方向變化時(shí),頁面是否自動(dòng)調(diào)整顯示寬度?
10、本地查詢?cè)~
由于使用場景的特性,手機(jī)搜索有更強(qiáng)地域性,在手機(jī)上搜索吃喝玩樂、旅游、地圖、路線、天氣等的用戶數(shù)量很大,做手機(jī)SEO時(shí),更要關(guān)注地名+主查詢?cè)~這種搜索,如“北京飯館”,“中關(guān)村酒吧”之類的詞。
頁面針對(duì)特定地理位置時(shí),比如頁面就是關(guān)于“王府井酒店”的,百度建議使用地理擴(kuò)展meta標(biāo)注省市名稱,甚至具體坐標(biāo)。
鄭州seo公司老秦博客點(diǎn)評(píng):
越來越多的屏幕也讓手機(jī)搜索的能量被擴(kuò)大,這就需要各位站長結(jié)合網(wǎng)站特點(diǎn),而且認(rèn)為自身網(wǎng)站特別的有跨平臺(tái)的需要的時(shí)候,可以針對(duì)產(chǎn)品的內(nèi)容提煉出需要手機(jī)化的產(chǎn)品,根據(jù)目前統(tǒng)計(jì)的數(shù)據(jù),大部分的網(wǎng)站通過手機(jī)搜索的流量逐年上漲,為了適應(yīng)不同屏幕,全面的將網(wǎng)頁改造成為Html5網(wǎng)站內(nèi)容也是大勢所趨。
版權(quán)聲明:本站部分文章,由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點(diǎn)),如有冒犯請(qǐng)聯(lián)系我們