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