2024年6月谷歌宣布從7月5日之后，將僅使用移動(dòng)版Googlebot抓取所有網(wǎng)站，如果你的網(wǎng)站內(nèi)容根本無法通過移動(dòng)設(shè)備訪問，則它將不再可編入索引。
Pew Research Center 于2024年進(jìn)行的一項(xiàng)調(diào)查中顯示，91%的18至49歲成年人使用智能手機(jī)進(jìn)行網(wǎng)上購(gòu)物，而69%的60至64歲的成年人以及48%的65歲及以上的成年人表示他們使用智能手機(jī)進(jìn)行網(wǎng)上購(gòu)物，這表明了移動(dòng)購(gòu)物越來越普遍。用戶網(wǎng)上互動(dòng)方式的轉(zhuǎn)變也使得Google 日益重視網(wǎng)站移動(dòng)端的適配效果。如何創(chuàng)建適配移動(dòng)設(shè)備的網(wǎng)站？
Google的“移動(dòng)優(yōu)先索引”文檔中提供了創(chuàng)建移動(dòng)適配網(wǎng)站的最佳實(shí)踐方法，包括：1、響應(yīng)式網(wǎng)站設(shè)計(jì)：Google 推薦使用響應(yīng)式Web設(shè)計(jì)，因?yàn)樗钊菀讓?shí)現(xiàn)和維護(hù);2、動(dòng)態(tài)服務(wù)：使用user-agent和vary http標(biāo)頭為不同的設(shè)備設(shè)置不同的HTML;3、獨(dú)立的urls：為每個(gè)設(shè)備提供不同的 HTML，并在單獨(dú)的 URL 上提供不同的 HTML。對(duì)于后兩種方法，Google提供了配置方法，可以參考文末鏈接。對(duì)于響應(yīng)式網(wǎng)站，不同CMS和主題的響應(yīng)式設(shè)置方法大同小異，可以參考相關(guān)教程。本文我們主要探討如何對(duì)響應(yīng)式網(wǎng)站進(jìn)行優(yōu)化。很多支持響應(yīng)式的網(wǎng)站一旦基于PC端完成以后，會(huì)自動(dòng)生成相應(yīng)的不同視口的響應(yīng)式效果，但這些效果在很多方面并不能達(dá)到我們的需求，此時(shí)，我們需要進(jìn)一步針對(duì)不同視口進(jìn)行各個(gè)方面的優(yōu)化，以求達(dá)到最佳效果。? ?
適配移動(dòng)端網(wǎng)站的關(guān)鍵要素 ?
移動(dòng)端適配需要我們遵循以下幾個(gè)關(guān)鍵要素，包括：移動(dòng)端網(wǎng)站不止要適配平板電腦，還要適配不同尺寸型號(hào)的智能手機(jī)?？梢愿鶕?jù)網(wǎng)站當(dāng)前的用戶數(shù)據(jù)，優(yōu)先優(yōu)化高比例視口。由于移動(dòng)端視口較小，導(dǎo)航不會(huì)直接完整顯示在窗口中，而是折疊到導(dǎo)航按鈕中，為了方便使用，可以將導(dǎo)航按鈕黏在窗口固定位置。限制菜單項(xiàng)的數(shù)量以防止過度擁擠，為導(dǎo)航項(xiàng)使用清晰簡(jiǎn)潔的標(biāo)簽，以確保它們?cè)谝苿?dòng)設(shè)備上易于理解。當(dāng)縮小到較小的屏幕尺寸時(shí)，圖片很容易看起來不好或不清晰。隨著移動(dòng)用戶的注意力持續(xù)時(shí)間較短，移動(dòng)網(wǎng)站對(duì)文本的依賴程度較低，因此，只有清晰的圖片才能更吸引人。與圖片一樣，一定要確保文字在較小的屏幕上清晰易讀。文字可能會(huì)在移動(dòng)設(shè)備上縮小到太小且難以閱讀的程度。此外，文字不應(yīng)太大，不然會(huì)被強(qiáng)制水平滾動(dòng)或被截?cái)啵ㄟ@在標(biāo)題中尤其常見）。也不要在移動(dòng)設(shè)備上使用大塊文本?？梢酝ㄟ^增加間距、拆分文本或完全避免使用大塊文本來更好地為移動(dòng)用戶服務(wù)。小尺寸的屏幕要有足夠的留白，但不要太多。文本板塊可以縮一些。和PC端類似，移動(dòng)用戶首頁訪問的第一屏內(nèi)容也要進(jìn)來優(yōu)化，包括圖片、文字信息以及CTA一定要多測(cè)試。FCP（First Contentful Paint）也是很重要的，需要我們著重優(yōu)化。 ? ?當(dāng)然，頁面整體的加載速度也很重要，移動(dòng)端速度的便利性對(duì)移動(dòng)用戶更為重要。加載時(shí)間每增加一秒，網(wǎng)站轉(zhuǎn)化率平均下降 4.42%。如果網(wǎng)站加載速度低于預(yù)期，近 70% 的客戶會(huì)不太可能購(gòu)買。由于移動(dòng)設(shè)備和移動(dòng)瀏覽器的處理能力較低，加載速度慢是移動(dòng)網(wǎng)站的常見問題。你需要通過壓縮圖片和視頻、緩存內(nèi)容等方式優(yōu)化你的網(wǎng)站，能在移動(dòng)設(shè)備上快速加載。如果你是B2C網(wǎng)站，就需要考慮如何讓用戶輕松結(jié)賬，如何在移動(dòng)網(wǎng)站上設(shè)計(jì)銷售漏斗，才能更好地讓用戶完成購(gòu)買。讓用戶盡可能容易地付款，明確說明人們?nèi)绾问褂么蠖逦?CTA 進(jìn)行購(gòu)買，盡可能減少結(jié)賬流程中的摩擦。對(duì)于其他類型網(wǎng)站也是，盡量讓用戶容易聯(lián)系到你?？梢允褂肑avaScript將聯(lián)系按鈕或者“Add to Cart”按鈕粘在屏幕固定位置，使用JavaScript動(dòng)畫使按鈕活動(dòng)更平滑。9、適當(dāng)設(shè)置滑動(dòng)板塊，而不是點(diǎn)擊考慮到移動(dòng)端多為觸屏，用戶多使用滑動(dòng)功能，可以將你的移動(dòng)網(wǎng)站上的板塊更改為便于移動(dòng)用戶操作的板塊。例如，可以將圖片設(shè)置成滑動(dòng)瀏覽，將PC端懸停效果刪除等。觸屏上點(diǎn)擊元素（比如按鈕，鏈接等）比使用光標(biāo)更難，你需要適當(dāng)增大點(diǎn)擊元素。和PC端不同，觸屏并沒有懸停功能，有些可點(diǎn)擊元素并不明顯，此時(shí)，你也需要調(diào)整這些文本，讓移動(dòng)用戶能夠清楚的知道他們可以點(diǎn)擊什么，應(yīng)該點(diǎn)擊什么，減少死點(diǎn)擊。最小觸摸目標(biāo)大小為 44x44px另外，需要考慮很多用戶使用手機(jī)時(shí)習(xí)慣單手操作，所以盡量將一些重要鏈接和按鈕放置在大拇指可以操作的范圍內(nèi)。 ? ?大家都知道，文本輸入和表單在移動(dòng)設(shè)備上很煩人。要求用戶執(zhí)行過多表格輸入會(huì)不友好，盡量簡(jiǎn)化表單操作。手機(jī)上的彈窗也很煩人，雖然侵入性彈出窗口在任何設(shè)備上都不是很好，但在移動(dòng)設(shè)備上，它們會(huì)遮蓋更多內(nèi)容，并且通常更難關(guān)閉。盡量減少你在移動(dòng)設(shè)備上使用彈出窗口的數(shù)量，如果必須加，可以嘗試不同的樣式看看。使用可以折疊的Section，或者選項(xiàng)卡來組織你的內(nèi)容，并在需要時(shí)可以選擇展開查看更多詳細(xì)信息。在搜索欄上添加語音搜索功能，并確保能夠識(shí)別當(dāng)前網(wǎng)站語言命令。在移動(dòng)設(shè)備上支持文本到語音轉(zhuǎn)換（TTS）功能和語音命令，方便依賴屏幕閱讀器或語音輸入的用戶使用。確保所有內(nèi)容（包括文本、按鈕和控件）都可以通過語音交互進(jìn)行訪問和操作。如何確保你的網(wǎng)站在移動(dòng)端優(yōu)化良好？
?
① 如果你的網(wǎng)站已經(jīng)做了初步的移動(dòng)端適配，可以先根據(jù)前文的關(guān)鍵因素列表一一比對(duì)，進(jìn)一步優(yōu)化。② 一旦你做好移動(dòng)端的優(yōu)化以后，可以使用Google PageSpeed Insights進(jìn)行初步的測(cè)試，判斷網(wǎng)站在移動(dòng)端的性能情況，然后根據(jù)結(jié)果指導(dǎo)進(jìn)行下一步優(yōu)化。 ? ?③ 對(duì)于不同視口的移動(dòng)端調(diào)試，可以使用對(duì)應(yīng)的移動(dòng)設(shè)備進(jìn)行測(cè)試，或者使用F12，點(diǎn)擊Toggle Device Toolbar,如圖，選擇不同的移動(dòng)端尺寸進(jìn)行調(diào)試。最后
?
移動(dòng)優(yōu)化不是“可有可無 ”的事情。對(duì)于幾乎任何企業(yè) - 特別是對(duì)于我們出海企業(yè) - 擁有一個(gè)運(yùn)行良好且在移動(dòng)設(shè)備上看起來很棒的網(wǎng)站是必不可少的。Mobile site and mobile-first indexing best practiceshttps://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexingMobile-indexing-vLast-final-final.dochttps://developers.google.com/search/blog/2024/06/mobile-indexing-vlast-final-final.doc?hl=enhttps://www.pewresearch.org/https://pagespeed.web.dev/
封面圖片來自mobile1st.com
文章為作者獨(dú)立觀點(diǎn)，不代表DLZ123立場(chǎng)。如有侵權(quán),請(qǐng)聯(lián)系我們。( 版權(quán)為作者所有，如需轉(zhuǎn)載，請(qǐng)聯(lián)系作者 )
網(wǎng)站運(yùn)營(yíng)至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個(gè)互相交流的平臺(tái)和資源的對(duì)接，特地開通了獨(dú)立站交流群。
群里有不少運(yùn)營(yíng)大神，不時(shí)會(huì)分享一些運(yùn)營(yíng)技巧，更有一些資源收藏愛好者不時(shí)分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。
現(xiàn)在可以掃碼進(jìn)群，備注【加群】。 ( 群完全免費(fèi)，不廣告不賣課！)
