移動(dòng)端頁(yè)面SEO優(yōu)化需要注意的10個(gè)要點(diǎn)

時(shí)間：2022-05-28 10:36:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-28 10:36:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

如今，移動(dòng)互聯(lián)網(wǎng)已經(jīng)成為互聯(lián)網(wǎng)組成的非常重要的一個(gè)分支，如果說(shuō)以前對(duì)移動(dòng)頁(yè)面沒(méi)有很規(guī)范的優(yōu)化和高質(zhì)量?jī)?nèi)容評(píng)判劃分標(biāo)準(zhǔn)，但現(xiàn)在隨著各大搜索引擎發(fā)布了移動(dòng)建站指南，圖文并茂的描述了如何提高移動(dòng)站在百度質(zhì)量度的等級(jí)，移動(dòng)端的SEO優(yōu)化也受到廣大站長(zhǎng)和SEO的青睞。

以目前億企邦測(cè)試的數(shù)據(jù)來(lái)看，關(guān)鍵詞研究、網(wǎng)站架構(gòu)和URL設(shè)計(jì)、頁(yè)面關(guān)鍵詞布局、文案寫(xiě)作、導(dǎo)航及內(nèi)部鏈接系統(tǒng)設(shè)計(jì)等大部分PC版網(wǎng)站優(yōu)化技術(shù)依然適用，沒(méi)必要把移動(dòng)頁(yè)面優(yōu)化當(dāng)成一個(gè)和PC頁(yè)面優(yōu)化完全不一樣的技術(shù)，說(shuō)到底，為搜索用戶提供高質(zhì)量?jī)?nèi)容的目標(biāo)是一樣的，只不過(guò)需要考慮手機(jī)用戶的特殊用戶體驗(yàn)需求。

目前的移動(dòng)搜索排名就是PC搜索排名加上移動(dòng)因素進(jìn)行一些調(diào)整，下面我就在億企邦上跟大家談?wù)勔苿?dòng)頁(yè)面特殊的地方，這些要點(diǎn)在獨(dú)立URL的移動(dòng)站和自適應(yīng)設(shè)計(jì)的移動(dòng)站都適用。

1、非主體內(nèi)容、功能大幅精簡(jiǎn)

PC版頁(yè)面經(jīng)?？吹絻扇许敳繉?dǎo)航，這在手機(jī)上就沒(méi)法看了，通常手機(jī)版本要大幅刪減導(dǎo)航系統(tǒng)，包括頂部導(dǎo)航、面包屑和側(cè)欄導(dǎo)航，即使保留完整主導(dǎo)航，也得折疊起來(lái)，用戶點(diǎn)擊時(shí)再打開(kāi)，如果要顯示頂部導(dǎo)航，最多5、6個(gè)就差不多了。

同樣，廣告、頁(yè)腳、相關(guān)文章、Tag鏈接等PC頁(yè)面上常見(jiàn)的內(nèi)容，能刪則刪，手機(jī)上很難容得下這些內(nèi)容，同時(shí)，刪減這些內(nèi)容頁(yè)可以使頁(yè)面HTML代碼大幅減少，提高頁(yè)面打開(kāi)速度。

使用CSS可以隱藏導(dǎo)航等內(nèi)容，但會(huì)產(chǎn)生冗余代碼，如果需要隱藏的比較多，不如直接從HTML代碼中刪除，減小頁(yè)面文件。

對(duì)此，億企邦建議各位站長(zhǎng)可以通過(guò)刪除、縮小、壓縮圖片，提高打開(kāi)速度，盡量刪除沒(méi)有十分必要的功能。

2、移動(dòng)網(wǎng)頁(yè)的尺寸定位

初涉移動(dòng)端的設(shè)計(jì)師，基本都會(huì)在尺寸問(wèn)題上糾結(jié)好一陣子才能摸到頭緒，我也花了很長(zhǎng)時(shí)間才弄明白（之前我曾在億企邦《詳解移動(dòng)端設(shè)備頁(yè)面尺寸設(shè)計(jì)原理》一文中跟大家詳細(xì)的介紹過(guò)，有興趣的博友，可以看下），在此，感覺(jué)有必要在此跟大家介紹一下不同系統(tǒng)下的要求：

（1）、IOS系統(tǒng)下的尺寸及分辨率

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

iPad界面尺寸：1024x768、2048x1536

以上單位都是像素哦，至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要72 ppi。

當(dāng)然，在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)尺寸來(lái)設(shè)計(jì)，比較方便預(yù)覽效果，一般用640x960或者640x1136的尺寸設(shè)計(jì)。

（2）、Android系統(tǒng)下的尺寸及分辨率

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

Android比iPhone的尺寸多了很多套，億企邦建議取用720x1280這個(gè)尺寸，這個(gè)尺寸720x1280中顯示完美，在1080x1920中看起來(lái)也比較清晰；切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過(guò)高。

3、創(chuàng)建移動(dòng)網(wǎng)頁(yè)

為網(wǎng)站的指定內(nèi)容創(chuàng)建移動(dòng)網(wǎng)頁(yè)，圖片、文字格式、導(dǎo)航和網(wǎng)頁(yè)功能的某些方面(包括尺寸)可能都需要進(jìn)行調(diào)整或轉(zhuǎn)換，這種方法的缺點(diǎn)是網(wǎng)站的傳統(tǒng)主頁(yè)可能也會(huì)在移動(dòng)瀏覽器上運(yùn)行，或者需要多點(diǎn)擊一次鼠標(biāo)才能從傳統(tǒng)主頁(yè)到達(dá)移動(dòng)網(wǎng)頁(yè)。

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

移動(dòng)網(wǎng)站的APP界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。

這里取用640x960的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸：

狀態(tài)欄：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40 px

導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕，其高度為：88 px

主菜單欄：類似于頁(yè)面的主菜單，提供整個(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)常說(shuō)的iPhone5/5s的640x11136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910 px

億企邦提示：在最新的iOS7的風(fēng)格中，蘋(píng)果已經(jīng)開(kāi)始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起，但是再怎么變化，尺寸高度也還是沒(méi)有變化的，只不過(guò)大家再設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意一下。

Android中的大屏手機(jī)，我們?nèi)∮?20x1280的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(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

寫(xiě)之前我翻了好多關(guān)于Android的界面尺寸教程，都沒(méi)找到像iOS一樣具體的規(guī)范，或許因?yàn)樵诎沧恐羞@些控件的高度都能用程序自定義，都沒(méi)有提到具體的尺寸數(shù)值，所以就自己找了Android的設(shè)計(jì)規(guī)范，尺寸都是自己在PS中量的。

Android為了在界面上區(qū)別于iOS，Android 4.0開(kāi)始提出一套HOLO的UI風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移動(dòng)到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體按鍵后在屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。

（2）、移動(dòng)頁(yè)面的字體大小

iPhone上的字體英文為：HelveticaNeue；至于中文，Mac下用的是黑體-簡(jiǎn)，Win下則為華文黑體。

下圖是用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小，像素為單位，也就是大家在PS里的文字像素大小。

Android上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像。

同樣，在用戶體驗(yàn)的調(diào)查中，可以看出用戶可接受的文字相應(yīng)問(wèn)題。

在此，建議大家多留心下一些大公司的數(shù)據(jù)研究，你會(huì)發(fā)現(xiàn)很多你根本沒(méi)考慮到的問(wèn)題哦（具體可查看億企邦《基于頁(yè)面易讀性的文字編排設(shè)計(jì)要點(diǎn)》的相關(guān)介紹）。

其實(shí)億企邦覺(jué)得還有個(gè)更簡(jiǎn)單的方法就是找你覺(jué)得好的APP應(yīng)用，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小咯。

總之，方法是自己找的，想辦法解決問(wèn)題，自己實(shí)踐，比別人告訴你印象更深刻，不是么？

4、頁(yè)面內(nèi)容是否能正常訪問(wèn)？

Flash在很多手機(jī)上打不開(kāi)，比如iPhone早就不支持Flash了，復(fù)雜的JS效果也可能導(dǎo)致頁(yè)面內(nèi)容在手機(jī)上根本不能顯示，想要被搜索引擎讀取的內(nèi)容和鏈接不要放在JS或Flash中，就算用戶手機(jī)能顯示，搜索引擎也不一定能解析出來(lái)。

頁(yè)面是否彈窗強(qiáng)制APP下載或用戶登錄后才能看到內(nèi)容？這是百度冰桶算法主要打擊的對(duì)象（具體可查看億企邦《百度移動(dòng)搜索冰桶算法上線帶給了我們什么信息》的相關(guān)介紹）。

還要注意不要用robots文件禁止搜索引擎蜘蛛抓取CSS、JS和圖片等外部文件，不然搜索引擎蜘蛛可能無(wú)法判斷頁(yè)面布局，甚至無(wú)法正常訪問(wèn)內(nèi)容。

5、采取移動(dòng)網(wǎng)頁(yè)和傳統(tǒng)網(wǎng)頁(yè)相結(jié)合的形式

這種方法只要求一套網(wǎng)站內(nèi)容，但至少要有兩套CSS樣式：一個(gè)用于電腦版本；另一個(gè)用于移動(dòng)版本。

事實(shí)上，你可以建立多個(gè)版本的CSS樣式，根據(jù)不同的移動(dòng)瀏覽器自動(dòng)調(diào)用不同的CSS，這種方法可以避免重復(fù)內(nèi)容問(wèn)題，但它并不是百分之百的可靠，不要期望移動(dòng)設(shè)備能一直都選擇正確的樣式表。

6、使用動(dòng)態(tài)移動(dòng)網(wǎng)頁(yè)

這是最可靠的方法，但也是代價(jià)最高的方法，你需要雇傭一個(gè)程序員，幫你實(shí)現(xiàn)通過(guò)偵測(cè)客戶端而對(duì)網(wǎng)站內(nèi)容進(jìn)行實(shí)時(shí)轉(zhuǎn)碼的功能，而且由于移動(dòng)技術(shù)的不斷變化，這也只是一個(gè)短期的解決辦法，但是，如果你想為用戶提供最佳體驗(yàn)，將SEO的最高水平應(yīng)用到移動(dòng)站點(diǎn)中，這將是你最好的選擇。

7、頁(yè)面打開(kāi)速度

百度現(xiàn)在給出的參考數(shù)字是，頁(yè)面在手機(jī)上需要3秒之內(nèi)打開(kāi)，不然用戶就跑了，以前給的數(shù)字是4秒，除了主機(jī)速度、帶寬等，打開(kāi)速度也和下面的內(nèi)容精簡(jiǎn)有很大關(guān)系（具體可查看億企邦《提高網(wǎng)站在移動(dòng)端打開(kāi)速度的方法技巧》的相關(guān)介紹）。

8、做好自主適配

如果是獨(dú)立URL的移動(dòng)站，首先做好自適配，手機(jī)用戶訪問(wèn)了PC版，自動(dòng)轉(zhuǎn)向到移動(dòng)版URL，PC用戶由于某種原因訪問(wèn)了移動(dòng)URL，自動(dòng)轉(zhuǎn)向到PC版URL，這個(gè)轉(zhuǎn)向百度建議用301，Google用301、302都可以（具體可查看億企邦《百度移動(dòng)搜索開(kāi)放適配服務(wù)的3種方法》的相關(guān)介紹）。

自適應(yīng)設(shè)計(jì)也要檢測(cè)用戶瀏覽器類型，返回不同版本，百度建議自適應(yīng)頁(yè)面加上這行代碼，告訴百度這個(gè)URL適用于PC和移動(dòng)版本：<meta name=”applicable-device” content=”pc,mobile”>

不過(guò)百度也不一定認(rèn)可這個(gè)標(biāo)簽，億企邦做自適應(yīng)已經(jīng)一個(gè)半月了，也加了上面的meta標(biāo)簽，但百度至今也不認(rèn)，還在給本博客轉(zhuǎn)碼。

9、頁(yè)面是否方便手機(jī)用戶瀏覽、點(diǎn)擊？

這是個(gè)用戶體驗(yàn)問(wèn)題，而用戶體驗(yàn)是現(xiàn)在SEO，尤其是移動(dòng)SEO的重要內(nèi)容之一，包括很多細(xì)節(jié)，例如：

（1）、字體是否夠大？如果字體太小，用戶需要放大才能閱讀，顯然談不上移動(dòng)友好。

（2）、上下滑動(dòng)頁(yè)面一般是必要的，但需要左右滑動(dòng)頁(yè)面才能看全內(nèi)容，在手機(jī)上是很不方便的。

（3）、是否有大面積廣告？在PC頁(yè)面上，大量廣告就夠討厭的了，在手機(jī)上簡(jiǎn)直就沒(méi)法忍了。

（4）、導(dǎo)航和內(nèi)容中的鏈接是否容易點(diǎn)擊？按鈕是否足夠大？字距、行距是否足夠？不要低估了用戶們手指頭的粗度，手機(jī)頁(yè)面廣告點(diǎn)擊率大大超過(guò)PC端，不是因?yàn)槭謾C(jī)用戶喜歡廣告，而是誤點(diǎn)的太多了。

（5）、Title不要太長(zhǎng)，PC搜索結(jié)果中頁(yè)面標(biāo)題可以顯示20多個(gè)字，在移動(dòng)搜索結(jié)果中，這么長(zhǎng)就被顯示成兩行了，雖然占的地方大了，但其實(shí)視覺(jué)上比較亂，反而不明顯。

（6）、購(gòu)物或其他功能是否夠簡(jiǎn)單？在手機(jī)上填寫(xiě)表格比在電腦上難多了。

（7）、手機(jī)橫豎方向變化時(shí)，頁(yè)面是否自動(dòng)調(diào)整顯示寬度？

10、本地查詢?cè)~

由于使用場(chǎng)景的特性，移動(dòng)搜索有更強(qiáng)地域性，在手機(jī)上搜索吃喝玩樂(lè)、旅游、地圖、路線、天氣等的用戶數(shù)量很大，做移動(dòng)SEO時(shí)，更要關(guān)注地名＋主查詢?cè)~這種搜索，如“北京飯館”，“中關(guān)村酒吧”之類的詞。

頁(yè)面針對(duì)特定地理位置時(shí)，比如頁(yè)面就是關(guān)于“王府井酒店”的，百度建議使用地理擴(kuò)展meta標(biāo)注省市名稱，甚至具體坐標(biāo)。

億企邦點(diǎn)評(píng)：

越來(lái)越多的屏幕也讓移動(dòng)搜索的能量被擴(kuò)大，這就需要各位站長(zhǎng)結(jié)合網(wǎng)站特點(diǎn)，而且認(rèn)為自身網(wǎng)站特別的有跨平臺(tái)的需要的時(shí)候，可以針對(duì)產(chǎn)品的內(nèi)容提煉出需要移動(dòng)化的產(chǎn)品，根據(jù)目前統(tǒng)計(jì)的數(shù)據(jù)，大部分的網(wǎng)站通過(guò)移動(dòng)搜索的流量逐年上漲，為了適應(yīng)不同屏幕，全面的將網(wǎng)頁(yè)改造成為Html5網(wǎng)站內(nèi)容也是大勢(shì)所趨。