在當(dāng)今數(shù)字化時(shí)代，確保網(wǎng)站在移動(dòng)設(shè)備上展現(xiàn)出卓越的效果，已然成為影響企業(yè)線上發(fā)展的關(guān)鍵因素。
移動(dòng)端客戶體驗(yàn)的優(yōu)化，更是重中之重，其背后蘊(yùn)含著諸多不容忽視的原因：
- 搜索排名優(yōu)勢(shì)：適配移動(dòng)設(shè)備的網(wǎng)站，在搜索結(jié)果中往往能占據(jù)更靠前的位置，更易被用戶發(fā)現(xiàn)。
- 搜索習(xí)慣轉(zhuǎn)變：超過半數(shù)在google.com上的搜索行為，都是通過移動(dòng)設(shè)備完成的，這反映出移動(dòng)搜索的主導(dǎo)地位。
- 流量來(lái)源構(gòu)成：對(duì)眾多廣告主而言，使用手機(jī)的用戶貢獻(xiàn)了他們大部分的流量，是流量的主要來(lái)源。
- 用戶行為傾向：若網(wǎng)站不適合移動(dòng)設(shè)備，訪問者選擇離開的可能性將提高 5 倍，嚴(yán)重影響用戶留存。
- 谷歌政策導(dǎo)向：谷歌發(fā)布了 Mobilegeddon 和移動(dòng)第一索引，這就要求網(wǎng)站必須對(duì)移動(dòng)設(shè)備友好，只有這樣，網(wǎng)站內(nèi)容才能在移動(dòng)搜索引擎結(jié)果頁(yè)面中被索引并獲得相應(yīng)排名。
當(dāng)下，移動(dòng)端網(wǎng)站主要存在兩種類型：一種是廣受歡迎的響應(yīng)式網(wǎng)站，另一種則是根據(jù)特定用戶需求或因程序版本限制而開發(fā)的獨(dú)立移動(dòng)端網(wǎng)站。從 SEO 的角度來(lái)看，響應(yīng)式網(wǎng)站（Responsive Web）和獨(dú)立 Mobile 站點(diǎn)，其目的都是為了實(shí)現(xiàn)移動(dòng)友好。只要移動(dòng)端和 PC 端的內(nèi)容能夠同步，并且正確使用 rel="canonical" 和 rel="alternate" 標(biāo)記，無(wú)論是響應(yīng)式網(wǎng)站還是獨(dú)立的 Mobile 站點(diǎn)，對(duì)于 SEO 而言都可行，具體的選擇則需依據(jù)公司的資源分配狀況。在條件允許的情況下，建議盡快采用響應(yīng)式網(wǎng)站，為網(wǎng)站的長(zhǎng)遠(yuǎn)發(fā)展筑牢根基。
網(wǎng)站在移動(dòng)設(shè)備上不僅要能正常顯示，還需確保功能完備且用戶體驗(yàn)友好。這樣做的核心目的，是讓適配移動(dòng)設(shè)備的網(wǎng)頁(yè)在搜索中獲取更高的排名。
借助 Google 的移動(dòng)設(shè)備友好測(cè)試工具（ https://search.google.com/test/mobile-friendly），可以對(duì)網(wǎng)站的移動(dòng)設(shè)備友好性進(jìn)行檢查。此外，Gooogle Search Console 中也會(huì)提供關(guān)于移動(dòng)端網(wǎng)頁(yè)友好改善的建議，企業(yè)應(yīng)定期查看，并安排技術(shù)人員及時(shí)進(jìn)行相應(yīng)修改，以保障網(wǎng)頁(yè)在移動(dòng)端的友好性。
響應(yīng)式網(wǎng)站的制作成本，相較于手機(jī)端獨(dú)立站（通常是 M. 子域網(wǎng)站）要低得多。這是因?yàn)轫憫?yīng)式網(wǎng)站采用相同的代碼庫(kù)，桌面站點(diǎn)的 HTML 代碼與移動(dòng)版本一致。本質(zhì)上，只需構(gòu)建一個(gè)網(wǎng)站，而非兩個(gè)，成本自然大幅降低。
響應(yīng)式網(wǎng)站設(shè)計(jì)完全符合谷歌的移動(dòng)友好要求。桌面版和移動(dòng)版共用一個(gè) URL，無(wú)需重定向，有效避免了常見重定向錯(cuò)誤的風(fēng)險(xiǎn)。而移動(dòng)專用網(wǎng)站（M. 子域）需要通過重定向引導(dǎo)用戶至站點(diǎn)的移動(dòng)版本，容易出現(xiàn)重定向錯(cuò)誤。若使用移動(dòng)端專用網(wǎng)站（M. 子域），且網(wǎng)站 PC 端存在舊頁(yè)面重定向到現(xiàn)有頁(yè)面的情況，用戶點(diǎn)擊舊頁(yè)面鏈接后，需經(jīng)歷多次重定向，這會(huì)導(dǎo)致鏈接為目標(biāo)網(wǎng)頁(yè)傳遞的權(quán)重大量丟失。響應(yīng)式 Web 設(shè)計(jì)的網(wǎng)站由于使用相同的 URL，無(wú)需重定向到子域，既避免了多次重定向，也不會(huì)丟失鏈接，從而能夠獲得更好的域名權(quán)重。
網(wǎng)站的兩個(gè)版本內(nèi)容始終保持一致，僅需一套內(nèi)容，既節(jié)省了時(shí)間和資金，又避免了因在移動(dòng)版本網(wǎng)站上不當(dāng)使用 rel="canonical" 和 rel="alternate" 標(biāo)記，而遭受重復(fù)內(nèi)容懲罰的風(fēng)險(xiǎn)。
社交分享和反向鏈接是影響搜索引擎優(yōu)化排名的重要因素。響應(yīng)網(wǎng)頁(yè)的 URL 保持不變，分享起來(lái)更為便捷。但在其他站點(diǎn)或社交媒體上分享移動(dòng)子域的 URL 時(shí)，若用戶在桌面 PC 端或 Mac 上點(diǎn)擊，站點(diǎn)就需重定向到桌面版本，此時(shí)就容易出現(xiàn)常見的重定向錯(cuò)誤。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)站點(diǎn)使用單個(gè) URL，不會(huì)在谷歌搜索結(jié)果中出現(xiàn)同一頁(yè)面的多個(gè)版本排名。而獨(dú)立的 Mobile 站點(diǎn)若建設(shè)不完善，可能導(dǎo)致谷歌同時(shí)收錄該站點(diǎn)的桌面版本和移動(dòng)子域版本，進(jìn)而可能受到谷歌的懲罰，表現(xiàn)為網(wǎng)站在搜索結(jié)果中的排名下降，網(wǎng)站轉(zhuǎn)化率也會(huì)隨之降低。
由于只需構(gòu)建一個(gè)網(wǎng)站，僅需編碼一套 HTML，大大縮短了網(wǎng)站建設(shè)時(shí)間。若時(shí)間緊迫，期望盡快啟動(dòng)項(xiàng)目，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)通常是最佳選擇。不過，為使網(wǎng)站的移動(dòng)版本完美運(yùn)行，調(diào)整 CSS 可能需要花費(fèi)一定時(shí)間。
與m.example.com子域網(wǎng)站相比，響應(yīng)式網(wǎng)站的響應(yīng)速度是一個(gè)突出問題。網(wǎng)站需要時(shí)間識(shí)別設(shè)備類型，然后加載不同的樣式，這就導(dǎo)致頁(yè)面加載時(shí)間變長(zhǎng)，加載速度變慢。而頁(yè)面速度對(duì)于網(wǎng)頁(yè)瀏覽者至關(guān)重要，他們期望頁(yè)面能夠快速加載，以便快速訪問。解決這一問題的方法是，對(duì)站點(diǎn)的桌面版本和移動(dòng)版本采用簡(jiǎn)潔設(shè)計(jì)，減少所需的 CSS，簡(jiǎn)單的設(shè)計(jì)和樣式或許還能帶來(lái)更好的轉(zhuǎn)化效果。
在為網(wǎng)站的移動(dòng)版本設(shè)置樣式時(shí)，由于屏幕大小和方向各異，常常會(huì)引發(fā) Bug。這些 Bug 包括圖像錯(cuò)位、文本顏色或字體顯示與 PC 端不一致、文本在屏幕上適配不佳、視頻無(wú)法正確嵌入、下拉菜單和按鈕滑塊工作異常或無(wú)法正確點(diǎn)擊等。這些問題雖然可以修復(fù)，但需要耗費(fèi)更多時(shí)間去發(fā)現(xiàn)、測(cè)試和修復(fù)。
在測(cè)試站點(diǎn)兼容性時(shí)，用戶會(huì)遭遇各種各樣的問題。由于站點(diǎn)的樣式與桌面版本差異較大，測(cè)試期間容易出現(xiàn)一些 Bug，需要不斷修改 CSS，才能逐步提升用戶體驗(yàn)。
移動(dòng)端獨(dú)立站的速度優(yōu)于自適應(yīng)網(wǎng)站，因?yàn)槠湟苿?dòng)版本是使用專門為m.example.com子域設(shè)計(jì)的 HTML 和 CSS 構(gòu)建而成。網(wǎng)站速度是谷歌 SEO 排名的重要因素之一，在其他條件相同的情況下，網(wǎng)速越快的網(wǎng)頁(yè)排名越靠前。
對(duì)于用戶來(lái)說(shuō)，訪問速度快的網(wǎng)站能夠吸引他們停留更長(zhǎng)時(shí)間，不會(huì)在加載過程中就失去耐心，甚至有可能促使他們?cè)L問更多頁(yè)面。
移動(dòng)端獨(dú)立站針對(duì)不同移動(dòng)設(shè)備制定了專門的設(shè)計(jì)方案，能夠高效提升用戶體驗(yàn)，減少測(cè)試階段的網(wǎng)站不兼容問題，切實(shí)提高用戶的實(shí)際瀏覽體驗(yàn)。
移動(dòng)端獨(dú)立站的域名通常為m.example.com，即移動(dòng)端內(nèi)容位于子域名上，而主域名的權(quán)重往往高于子域名。若移動(dòng)端內(nèi)容與桌面站點(diǎn)內(nèi)容相同或極為相似，且未正確使用 rel="canonical" 和 rel="alternate" 標(biāo)記，網(wǎng)站可能因重復(fù)內(nèi)容受到谷歌的懲罰，這可能導(dǎo)致網(wǎng)站失去許多重要關(guān)鍵詞排名，或者在移動(dòng)搜索結(jié)果和桌面搜索結(jié)果中關(guān)鍵詞排名顯著下降。此外，為加快設(shè)計(jì)進(jìn)程、簡(jiǎn)化設(shè)計(jì)過程，移動(dòng)子域網(wǎng)站內(nèi)容往往會(huì)刪除部分內(nèi)容，這也會(huì)對(duì)搜索引擎優(yōu)化效果產(chǎn)生不利影響。
重定向也是一個(gè)難題，從桌面到移動(dòng)設(shè)備進(jìn)行重定向時(shí)，初始加載速度會(huì)減慢，還可能出現(xiàn)重定向錯(cuò)誤等問題。
開發(fā)移動(dòng)端獨(dú)立站需要構(gòu)建兩個(gè)網(wǎng)站，一個(gè)是移動(dòng)版，另一個(gè)是桌面版，這需要編寫兩個(gè)獨(dú)立的代碼庫(kù)，耗時(shí)較長(zhǎng)。同時(shí)，還需要進(jìn)行兩組測(cè)試和兩組 Bug 修復(fù)，并且要測(cè)試網(wǎng)站，確保搜索引擎不會(huì)同時(shí)索引兩個(gè)版本的網(wǎng)站，進(jìn)一步延長(zhǎng)了網(wǎng)站建設(shè)時(shí)間。
與響應(yīng)式網(wǎng)站相比，構(gòu)建兩個(gè)網(wǎng)站的成本要高得多。響應(yīng)式 Web 設(shè)計(jì)只需修改 CSS 代碼，即可實(shí)現(xiàn)不同樣式在移動(dòng)設(shè)備上的應(yīng)用。
設(shè)計(jì)高質(zhì)量移動(dòng)網(wǎng)站，可參考以下 10 條建議：
- 展示企業(yè) Logo：強(qiáng)化品牌識(shí)別。
- 突出頭部聯(lián)系方式：方便用戶聯(lián)系。
- 精簡(jiǎn)導(dǎo)航結(jié)構(gòu)：提高用戶查找信息的效率。
- 設(shè)置便捷返回首頁(yè)按鈕：方便用戶隨時(shí)回到首頁(yè)。
- 避免彈出窗口：防止干擾用戶瀏覽。
- 設(shè)置明顯的搜索功能：滿足用戶快速查找內(nèi)容的需求。
- 運(yùn)用谷歌地圖：方便用戶獲取地理位置信息。
- 采用面包屑導(dǎo)航：幫助用戶了解當(dāng)前位置和瀏覽路徑。
- 設(shè)計(jì)橫向和縱向展示樣式：鼓勵(lì)用戶切換到最佳方向，提升瀏覽體驗(yàn)。
- 設(shè)計(jì)高效表單：利用自動(dòng)填充功能，讓用戶能輕松使用預(yù)填充數(shù)據(jù)完成表單填寫。
