制作移動端手機(jī)網(wǎng)站過程中的SEO優(yōu)化方法技巧

時間：2022-05-28 09:36:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-28 09:36:02 來源：網(wǎng)絡(luò)營銷

據(jù)國內(nèi)三大運(yùn)營商數(shù)據(jù)來看，中國的手機(jī)用戶數(shù)已達(dá)10億，超過2/5的移動用戶每個月都會從手機(jī)終端訪問網(wǎng)頁，如今的移動端手機(jī)網(wǎng)站比例肯定有提升，但是對于這些存在的移動版本網(wǎng)站來說，億企邦查看了很大一部分手機(jī)網(wǎng)站，很少做SEO優(yōu)化工作，在這里，億企邦認(rèn)為移動端的手機(jī)網(wǎng)站優(yōu)化并不是PC網(wǎng)站的簡單copy過來的移動版本。

由于是手機(jī)用戶，用戶瀏覽網(wǎng)頁的時間是零碎的，不可能耐心點(diǎn)擊很多的頁面，因此，要想做好一個移動端網(wǎng)站的優(yōu)化，就需要盡可能在制作移動端手機(jī)網(wǎng)站的過程中精簡移動網(wǎng)站設(shè)計，并要合理的做好移動端網(wǎng)站的SEO優(yōu)化。

一、移動端網(wǎng)站的頁面設(shè)計

網(wǎng)頁設(shè)計要盡可能的設(shè)計簡單，手機(jī)端可視區(qū)域小，布局上不同于傳統(tǒng)網(wǎng)頁，需要充分利用有限的空間去展示信息。

1、頁面適配手機(jī)屏幕

隨著手機(jī)屏幕的不斷的增大，同時也遇到一些用戶手機(jī)屏幕還是處于240*320這種屏幕的大小，當(dāng)然也存著在一些不規(guī)則的屏幕分辨率心寸大小，對于很多的UI來說，不同的手機(jī)屏幕很多時候得出多套的圖才能保證手機(jī)客戶端在不同的屏幕上實(shí)現(xiàn)匹配。

2、頁面專門針對手機(jī)屏幕設(shè)計

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

（2）、不放大時，能清晰瀏覽內(nèi)容，文字大小不低于12像素。

（3）、不放大時，按鈕、鏈接等點(diǎn)擊方便（具體可查看億企邦《如何通過修改CSS樣式來增強(qiáng)平板電腦的用戶體驗(yàn)》的相關(guān)介紹），按鈕尺寸不能過大或過小。

3、使用最多三級的頁面結(jié)構(gòu)

減少移動站的頁面層級，降低用戶認(rèn)知難度，一個標(biāo)準(zhǔn)的移動站應(yīng)該包含首頁、列表頁和詳情頁三種類型，以滿足廣告主的推廣需求和用戶的認(rèn)知需要。

對于頁面類型及層級，億企邦建議不超過3個，保證簡單、高效的用戶體驗(yàn)，據(jù)億企邦的分析，使用盡量淺的頁間結(jié)構(gòu)，減少用戶點(diǎn)擊次數(shù)，提升瀏覽體驗(yàn)。

（1）、首頁

整站內(nèi)容索引，內(nèi)容預(yù)覽(使用“更多”“詳情”等鏈接)，首頁作為用戶分流前到達(dá)的頁面，要求能夠匯集整個網(wǎng)站的大部分模塊和功能，以保證不同需求的用戶在著陸后都能尋找到自己想要的信息。

移動站一般首頁又可以分為導(dǎo)航式和內(nèi)容式，導(dǎo)航式因其風(fēng)格簡潔，一般又可用作品牌宣傳，起到快速傳達(dá)品牌形象的作用，內(nèi)容式因其豐富的內(nèi)容，常用來快速傳達(dá)廣告主想傳遞的信息。

（2）、列表頁

頻道內(nèi)容、分類、列表為主，列表頁一般用于展現(xiàn)結(jié)構(gòu)簡單，并且重復(fù)度較高的內(nèi)容，最常見于商家的產(chǎn)品/服務(wù)，形式也一般相對簡單，用于滿足展現(xiàn)多產(chǎn)品/服務(wù)的需求，根據(jù)商家產(chǎn)品/服務(wù)信息不同一般分為純文字和圖文兩種基本形式。

（3）、內(nèi)容頁

推薦以結(jié)構(gòu)化形式展現(xiàn)內(nèi)容，詳情頁一般用作展示首頁和列表頁未顯示完全的信息，以滿足用戶了解詳情的需求，從而輔助用戶進(jìn)行決策。

4、使用清晰的導(dǎo)航組件

全站導(dǎo)航：快速到達(dá)各個頻道（具體可查看億企邦《如何規(guī)劃并架構(gòu)網(wǎng)站的導(dǎo)航信息結(jié)構(gòu)》的相關(guān)介紹）；

局部導(dǎo)航：在單個頻道的首頁、列表、詳情頁面間移動；

相關(guān)鏈接：相關(guān)頻道之間的鏈接。

5、頁面單列布局，重要內(nèi)容顯示在首屏

頁面內(nèi)容模塊從上到下，單列布局，重要內(nèi)容展現(xiàn)在首屏。

6、保證良好的可用性

（1）、頁面內(nèi)容無缺失，交互功能正常使用。

（2）、不使用flash

（3）、使用html5來實(shí)現(xiàn)動畫。

7、優(yōu)秀交互方式，簡化操作流程，提升使用體驗(yàn)

（1）、優(yōu)秀的交互方式能很有效地提升用戶體驗(yàn)，一方面能夠簡化操作流程提升操作效率，另外，億企邦覺得這對于產(chǎn)品功能易用性的提升也是較大的。

（2）、滑動切換圖片相比于自動切換和點(diǎn)擊切換，滑動切換增強(qiáng)了用戶操作的主動性、同時提升了切換的便捷性。

（3）、滑動切換頁面用戶可以通過滑動進(jìn)行頁面之間的切換，節(jié)省用戶尋址時間。

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

（5）、頁面區(qū)域點(diǎn)擊區(qū)域點(diǎn)擊能較大提升用戶點(diǎn)擊的效率，減少用戶因定位點(diǎn)擊區(qū)域造成的效率損失。

（6）、點(diǎn)擊加載更多一方面減少單張頁面的非必要信息，讓頁面變得簡潔，同時能減少頁面間的跳轉(zhuǎn)，降低因網(wǎng)速等原因造成的用戶流失。

8、保證廣泛的兼容性

在主流操作系統(tǒng)、瀏覽器中均可正常展現(xiàn)，比如：操作系統(tǒng)：Android，iOS；瀏覽器：UC、QQ、iOS Safari、Android。

二、移動端網(wǎng)站內(nèi)容設(shè)置優(yōu)化

對于手機(jī)網(wǎng)站的首頁或者頻道首頁的網(wǎng)頁代碼中的keywords、description最好加上與PC端有所區(qū)別的meta標(biāo)簽和關(guān)鍵詞，在每個頁面的關(guān)鍵字及描述像做傳統(tǒng)PC端網(wǎng)站一樣，做好針對性的填寫工作，對搜索結(jié)果的展現(xiàn)(摘要)以及優(yōu)化工作大有幫助（具體可查看億企邦《如何優(yōu)化一個移動端手機(jī)網(wǎng)站》的相關(guān)介紹）。

1、一致性

著陸頁內(nèi)容與關(guān)鍵字、廣告文字的相關(guān)性，不僅保證廣告與目標(biāo)頁面呼應(yīng)和一致，更重要的能夠提升潛在客戶在著陸頁上面的點(diǎn)擊次數(shù)，減少客戶流失。

2、可信度

通過告知潛在客戶公司名稱、聯(lián)系地址、客服電話等信息，能夠有效地提升網(wǎng)站(公司)的可信度。

3、重要信息首屏顯示

具體產(chǎn)品信息盡量出現(xiàn)在網(wǎng)頁的第1-2屏，避免與用戶玩尋寶游戲。

4、根據(jù)行業(yè)特性，放置針對性的內(nèi)容

重點(diǎn)關(guān)注移動頁面的信息構(gòu)建，以滿足用戶需求；

基礎(chǔ)信息：公司介紹、產(chǎn)品/服務(wù)介紹。

信任信息：榮譽(yù)資質(zhì)、專家團(tuán)隊(duì)、案例。

轉(zhuǎn)化信息：電話、地址。

5、精簡文字，處理好圖片

精簡文字量：PC內(nèi)容一半左右。

使用圖片、幻燈片提升展示效果，并注意壓縮圖片尺寸。

推薦用寬圖片展示LOGO，正方形圖片展示產(chǎn)品。

三、優(yōu)化移動端頁面性能

隨著移動互聯(lián)網(wǎng)的發(fā)展，我們越發(fā)要關(guān)注移動頁面的性能優(yōu)化，我們能做得是對移動端頁面本身優(yōu)化，這也是我們專業(yè)價值的體現(xiàn)，所以我們必須做移動端頁面性能優(yōu)化（具體可查看億企邦《手機(jī)網(wǎng)站制作的常用方法及優(yōu)化技巧》的相關(guān)介紹）。

1、控制加載時間與網(wǎng)頁大小

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

加載時間：單頁面5S以內(nèi)；

網(wǎng)頁大?。簡雾撁?0K以內(nèi)；

優(yōu)化加載時間和網(wǎng)頁大?。褐攸c(diǎn)在前端優(yōu)化；

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

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

考慮到移動設(shè)備和移動互聯(lián)網(wǎng)的特點(diǎn)，億企邦建議在進(jìn)行移動網(wǎng)站的頁面開發(fā)設(shè)計時，一個總的原則是考慮用戶訪問的效率，降低頁面加載時間（具體可查看億企邦《提高網(wǎng)站在移動端打開速度的方法技巧》的相關(guān)介紹）。

2、減少訪問請求數(shù)

從設(shè)計實(shí)現(xiàn)層面簡化頁面，不要放太多的圖片、復(fù)雜的表達(dá)、動畫、視頻等等。

資源合并及壓縮：比如將背景圖片、導(dǎo)航圖片等等作為一張圖片，這樣只需一次請求，而不是多次。

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

異步執(zhí)行inline腳本；

避免重復(fù)的資源請求；

縮小cooike；

設(shè)置連接方式為keep-alive；

減少DNS查詢；

移動端可見區(qū)域是有限的，采用延遲加載方式；

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

3、優(yōu)化圖片處理

圖片走CDN；

少用動態(tài)gif圖；

圖片不適宜過多及過大；

避免使用bmp圖片；

圖片壓縮；

零碎圖片使用css Sprite技術(shù)一次性下載。

4、優(yōu)化HTML

減少HTML標(biāo)簽，減少不必要的嵌套；

廢棄table標(biāo)簽；

減少DOM深度；

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

5、優(yōu)化JS

使用臨時變量或者數(shù)組存儲document.images及document.forms等集合數(shù)據(jù)；

慎用with語法；

使用AJAX緩存；

避免eval及Function語法；

避免使用inlineScript；

異步、底部加載js；

合并壓縮js；

字符串連接使用數(shù)組的join方式。

億企邦點(diǎn)評：

無論是PC端還是移動端，網(wǎng)站都要考慮清楚消費(fèi)群體的定位問題，雖然智能手機(jī)用戶數(shù)量非常普及，但是要明白中國的大部分手機(jī)用戶使用的網(wǎng)絡(luò)速度還是遠(yuǎn)不及PC端的，所以，在頁面設(shè)計時，要考慮到用戶打開網(wǎng)頁的時長，這不僅僅是用戶體驗(yàn)的問題，也是盡量減少百度索引抓取的工作，讓百度蜘蛛盡可能多的爬行和收錄頁面。