無限滾動是一種在網(wǎng)站上顯示和加載內(nèi)容的流行方式。多虧了它，用戶可以直接導(dǎo)航到下一個產(chǎn)品、類別和文章，例如在公司博客上。但是，值得注意的是，這種解決方案也有缺點，并不總是建議使用它。繼續(xù)閱讀以了解有關(guān)此解決方案的更多信息，并了解如何使無限滾動對 SEO 友好！

無限滾動是一種基于隨著用戶向下滾動頁面而不斷加載內(nèi)容這一理念的技術(shù)。這消除了分頁的需要，并允許無縫體驗。

為什么？

因為用戶可以繼續(xù)向下滾動以查看更多內(nèi)容，而無需點擊進入另一個頁面。

無限滾動是技術(shù) SEO 策略的一部分，主要用于提高用戶瀏覽網(wǎng)站時的舒適度。然而，雖然它對用戶有好處，但它并不總是對 SEO 和谷歌爬蟲友好的解決方案。

無限滾動示例

無限滾動最常出現(xiàn)在想要吸引用戶并讓他們?yōu)g覽盡可能多的內(nèi)容的社交媒體平臺上。

它在 Facebook、Twitter 或 Pinterest 等門戶網(wǎng)站上運行良好。

Pinterest

此外，越來越多的電子商務(wù)網(wǎng)站也決定實現(xiàn)無限滾動，尤其是在移動頁面版本上。多虧了它，用戶可以方便地瀏覽產(chǎn)品，而無需點擊并等待后續(xù)頁面加載。

無限滾動的優(yōu)點

值得使用無限滾動有幾個原因：

• 速度和便利——無限滾動比每次想要獲取其余內(nèi)容時都單擊更方便用戶。每次點擊都是頁面加載和用戶必須執(zhí)行的操作的額外等待時間。如果內(nèi)容、文章或教程的長格式位于一個長文本塊中，而不是被分割或切割成幾個單獨的屏幕或頁面，那么它的用戶體驗會好得多。
• 移動友好性——與點擊頁碼相比，使用手勢更加直觀和用戶友好，頁碼在智能手機上通常可能太小。這證明了無限滾動是一種不需要用戶付出太多努力并顯著簡化操作的技術(shù)。
• 延遲加載——借助此技術(shù)，您可以僅加載用戶可見的內(nèi)容并節(jié)省帶寬。當(dāng)用戶向下滾動時，將加載內(nèi)容的下一部分。這對于具有大量圖像或視頻的網(wǎng)站特別有用。
• 更好的用戶體驗——正如我們已經(jīng)提到的，這種技術(shù)為用戶提供了更好、更無縫的體驗。當(dāng)用戶不必點擊“顯示更多”或“下一頁”按鈕時，他們可以專注于內(nèi)容本身并在網(wǎng)站上花費更多時間。

無限滾動的缺點

無限滾動也有一些缺點。這些是什么？

• 不能保證 Google 機器人會正確抓取自動加載的內(nèi)容——結(jié)果可能只有加載的第一個頁面會在搜索結(jié)果中可見，而稍后加載的每個頁面都將由用戶的交互和 JavaScript 代碼觸發(fā)。請記住，Google 機器人不會交互，在這種情況下，這意味著如果它們具有相同的 URL 地址，它們將不會顯示任何其他頁面。
• 對內(nèi)容的性能和加載速度產(chǎn)生負面影響——使用此解決方案的網(wǎng)站必須在同一頁面上加載更多內(nèi)容。如今，頁面加載緩慢是用戶更快離開網(wǎng)站的關(guān)鍵因素之一，從而提高了跳出率。單個頁面上的大量內(nèi)容可能會對您網(wǎng)站的加載產(chǎn)生負面影響。
• 查找項目的困難——滾動時，用戶最終會到達給定的圖像/產(chǎn)品并可能離開站點。為了再次找到該項目，他們必須再次滾動 – 無法指示瀏覽完成的位置。這可能會引起刺激并降低用戶滿意度或參與度。
• 無頁腳——網(wǎng)站頁腳通常包含用戶正在尋找的信息，例如聯(lián)系方式、銀行帳號或社交媒體鏈接。因此，如果您實現(xiàn)無限滾動，則值得將用戶必需的元素移動到其他地方，例如頂部或側(cè)邊欄。您還可以使用粘性頁腳或“加載更多”按鈕。這樣，頁面訪問者仍然可以訪問重要信息。

H&M

分頁或無限滾動 – 選擇哪一個？

在開發(fā)您的網(wǎng)站時，您應(yīng)該選擇其中一個選項。什么是更好的分頁或無限滾動？

在第一種情況下，用戶使用導(dǎo)航或頁碼在各個頁面之間移動。可能最著名的分頁示例是 Google 搜索引擎：

在下定決心之前，您應(yīng)該考慮這兩種解決方案的所有優(yōu)缺點。這完全取決于網(wǎng)站的類型以及與用戶交流的方式。

什么時候最好使用無限滾動？

無限滾動是內(nèi)容豐富的網(wǎng)站的完美解決方案。在不強迫他們采取任何行動的情況下向用戶展示越來越多的作品會增加他們的參與度。

想想社交媒體以及無限滾動在那里的工作原理。對于包含大量圖像和視頻的頁面，此解決方案也是一個不錯的選擇。

因此，如果您有一個網(wǎng)站，可以在其中展示您自己的圖像、圖形或視覺效果，那么無限滾動將非常適合展示您的作品集。

什么時候最好使用分頁？

有沒有什么情況下最好依靠傳統(tǒng)的分頁？此解決方案對于信息服務(wù)（例如，訪問者尋找特定內(nèi)容的博客）要好得多。

通過使用它，您可以輕松地指示特定內(nèi)容片段的開始和結(jié)束位置。由于可以訪問特定數(shù)量的單個頁面，用戶可以輕松訪問他們感興趣的內(nèi)容。

例如，如果他們在第五頁發(fā)現(xiàn)一篇值得注意的文章，他們以后再次訪問它會容易得多，因為他們知道它在網(wǎng)站上的位置。換句話說，通過分頁，他們可以跳轉(zhuǎn)到所需的部分或單個頁面，而無需滾動數(shù)小時。

Infinite Scroll 對 SEO 友好嗎？

無限滾動在 SEO 方面具有挑戰(zhàn)性。

為什么？

因為網(wǎng)站索引。

Google 允許 JavaScript 僅加載給定頁面的一部分內(nèi)容——其余內(nèi)容在用戶向下滾動頁面時加載。因此，值得幫助爬蟲正確分析您網(wǎng)站的全部內(nèi)容，以便他們可以有效地對其進行索引。

谷歌索引無限滾動嗎？

Google 確實索引了無限滾動，但在使用它時需要記住一些事項。首先，您需要確保 Googlebot 可以訪問您的內(nèi)容，這是 Google 用來索引網(wǎng)站的爬蟲。您可以通過檢查 robots.txt 文件來做到這一點。

要記住的第二件事是，如果您使用無限滾動，Google 可能不會抓取您頁面上的所有內(nèi)容。這是因為爬蟲有一個限制，稱為爬蟲預(yù)算。站點擁有的頁面越多，將它們?nèi)烤幦胨饕璧臅r間就越多。

無限滾動網(wǎng)站的 SEO

幸運的是，對于具有無限滾動的網(wǎng)站，有一種對SEO 友好的解決方案。當(dāng)并行生成分頁時，Google 機器人將通過無限滾動到達從頁面鏈接的所有元素。

按照以下6 個步驟，讓您的無限滾動對 SEO 更友好：

1.為確保一切正常，您應(yīng)該將無限滾動頁面劃分為組件頁面，在禁用JavaScript時也可以訪問和顯示。

在每個頁面上選擇正確數(shù)量的組件以快速加載并在頁面之間切換時檢查它們是否不重復(fù)也是很好的。

2. 下一步是創(chuàng)建支持無限滾動的結(jié)構(gòu)的 URL，例如：

• example.com/category?name=fun-items&page=1
• example.com/fun-items?lastid=567

避免使用相對時間和參數(shù)的 URL，例如

• example.com/category/page.php?name=fun-items&days-ago=3
• example.com/fun-places?radius=5&lat=40.71&long=-73.40

3. 確保每個創(chuàng)建的 URL 都能正常工作并指向相應(yīng)的內(nèi)容，并且每個組件頁面在 Web 瀏覽器中單獨可見。

4. 下一步是配置rel=”next” 和 rel=”prev” 屬性的分頁。通過添加這些屬性，谷歌機器人將抓取每個頁面的內(nèi)容。

5. 完成后，就可以在無限滾動頁面上使用pushState函數(shù)了。這允許在用戶向下滾動頁面時自動更新 URL。

PushState 反映了用戶使用分頁時會發(fā)生的 URL 變化。

6.最后，剩下的就是測試引入的解決方案是否正常工作。建議檢查每個頁面以查看其加載是否正確且足夠快。

讓無限滾動變得更好的 4 個技巧

如何讓你的無限滾動更好用，需要注意什么？為此，值得關(guān)注以下要素。

1.無限滾動下方無內(nèi)容

為了使無限滾動有效且直觀，您應(yīng)該確保其下方?jīng)]有內(nèi)容。多虧了它，用戶將能夠?qū)Ｗ⒂诩虞d的元素。

此外，如果您將內(nèi)容置于無限滾動下方，用戶可能難以訪問它。畢竟，每次他們向下滾動時，都會加載更多的網(wǎng)站元素。這會讓他們感到沮喪。因此，他們可以離開您的網(wǎng)站并提高您的跳出率。

因此，如果您想在您的網(wǎng)站上放置更多元素，請使用側(cè)邊欄。

2.跳過按鈕

允許用戶防止無限滾動。他們應(yīng)該能夠阻止更多內(nèi)容的加載。多虧了它，您的網(wǎng)站將更加直觀和用戶體驗友好。

跳過按鈕將幫助他們留在首選位置。

3.返回按鈕到同一個地方

返回相同位置的問題是實現(xiàn)無限滾動時的另一個挑戰(zhàn)。如果用戶點擊列表中的鏈接，然后單擊“返回”按鈕，他們希望返回到原始頁面上的同一點。

但是當(dāng)不跟蹤用戶的位置時，瀏覽器的后退按鈕實際上會將滾動位置重置到頁面頂部。

不出所料，這會使用戶感到沮喪并使他們離開頁面。因此，實施后退按鈕將允許用戶返回到他們感興趣的網(wǎng)站位置。

4.首先測試它是如何工作的

在實現(xiàn)無限滾動之前，您應(yīng)該測試它是如何工作的，看看它是否適用于您的網(wǎng)站類型。

也許在此過程中，事實證明傳統(tǒng)分頁在您的情況下效果更好。

無限滾動——外賣

無限滾動是可以實施以改善用戶體驗和用戶參與度的設(shè)計替代方案之一。

但是，值得記住的是，它并不是所有類型網(wǎng)站的完美解決方案。雖然它在包含大量內(nèi)容、圖像或視頻的網(wǎng)站上會更好地工作，但它對于信息豐富的頁面來說并不是最好的。

引入無限滾動應(yīng)該取決于您的策略和您想要實現(xiàn)的目標(biāo)。如果實施得當(dāng)，此解決方案對于 SEO 與分頁同樣有益。

需要幫忙？聯(lián)系我們！我們將使您的無限滾動更加用戶體驗友好。

這是2020年發(fā)表的一篇文章的更新。?