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