電子商務網站使用 JavaScript 常犯的 4 個錯誤
作者的觀點完全是他或她自己的觀點(不包括不太可能發生的催眠事件)，可能並不總是反映作者的觀點Moz.
儘管他們可以投入資源在 Web 開發中，大型電子商務網站仍在努力尋找使用 JavaScript 的 SEO 友好方式。
而且，即使 98% 的人網站使用 JavaScript，Google 在使用 JavaScript 索引頁面時遇到問題仍然很常見。 雖然通常可以在您的網站上使用它，但請記住 JavaScript 需要額外的計算資源才能處理成機器人可以理解的 HTML 代碼。
同時，新的JavaScript框架和技術也在不斷湧現。 為了給你的 JavaScript 頁面最好的索引機會，你需要學習如何優化它以提高你的網站在 SERP 中的可見性。
為什麼未優化的 JavaScript 對您的電子產品有危險？ commerce?
如果不優化 JavaScript，您可能會冒著內容不被 Google 抓取和編入索引的風險。 並且 在電子商務行業，這意味著損失大量收入，因為無法通過搜索引擎找到產品。
您的電子商務網站很可能使用了令用戶愉悅的動態元素，例如產品輪播或選項卡式產品說明。 機器人通常無法訪問這種由 JavaScript 生成的內容。 Googlebot 無法點擊或滾動，因此它可能無法訪問所有這些動態元素。
考慮有多少電子商務網站用戶通過移動設備訪問該網站。 JavaScript 加載速度較慢，因此加載時間越長，您網站的性能和用戶體驗就越差。 如果 Google 發現加載 JavaScript 資源的時間過長，它可能會在以後呈現您的網站時跳過它們。
電子商務網站上的 4 個 JavaScript SEO 錯誤
現在，讓我們看看使用時的一些錯誤用於電子商務的 JavaScript，以及避免使用它們的網站示例。
1. 頁面導航依賴於 JavaScript
爬蟲的行為與用戶在網站上的行為不同 ‒他們無法滾動或單擊以查看您的產品。 機器人必須跟隨整個網站結構中的鏈接才能完全理解和訪問所有重要頁面。 否則，僅使用 JavaScript -based navigation may make bot see products just on the first page of pagination.
有罪：耐克。 com
Nike.com 使用無限滾動在其類別頁面上加載更多產品。 正因為如此，耐克冒著其加載的內容未被編入索引的風險。
為了測試，我進入了他們的一個類別頁面並向下滾動以選擇滾動觸發的產品。 然後，我使用“site:”命令檢查該 URL 是否已在 Google 中編入索引。 正如您在下面的屏幕截圖中所見，無法在 Google 上找到此網址：
當然，Google 仍然可以通過站點地圖找到您的產品。 但是，通過鏈接以外的任何其他方式查找您的內容會使 Googlebot 更難理解您的網站結構和頁面之間的依賴關係。
為了讓您更加清楚，請想一想只有當您在 Nike.com 上滾動查看它們時才能看到的所有產品。 如果機器人沒有鏈接可以訪問，他們將在給定的類別頁面上只看到 24 種產品。 當然，為了用戶著想，Nike 無法在一個視口上提供其所有產品。 但是，仍然有更好的方法來優化無限滾動，既讓用戶感到舒適，又讓機器人可以訪問。
獲勝者：Douglas.de
與 Nike 不同，Douglas.de 使用對 SEO 更友好的方式在類別頁面上提供其內容。
他們為機器人提供基於 
鏈接的頁面導航，以啟用對下一個分頁的抓取和索引頁。 如您在下面的源代碼中所見，包含指向分頁第二頁的鏈接：
此外，分頁導航可能比無限滾動更加用戶友好。 類別頁面的編號列表可能更易於跟踪和導航，尤其是在大型電子商務網站上。 試想一下，如果他們在下面的頁面上使用無限滾動，Douglas.de 上的視口會持續多長時間：
2。 使用 JavaScript 生成產品輪播鏈接
具有相關項目的產品輪播是必不可少的電子產品之一商務網站的功能，從用戶和企業的角度來看，它們同樣重要。 使用它們可以幫助企業增加收入，因為它們提供用戶可能感興趣的相關產品。但如果這些部分過度依賴 JavaScript，它們可能會導致爬行和索引問題。
有罪：Otto.de
我分析了 Otto.de 的一個產品頁面，以確定它是否包含 JavaScript 生成的元素。 我使用了 What Would JavaScript Do (WWJD) 工具，該工具顯示了啟用和禁用 JavaScript 時頁面的屏幕截圖。
測試結果清楚地表明，Otto.de 依靠 JavaScript 在其網站上提供相關和推薦的產品輪播。 從下面的屏幕截圖可以清楚地看到，這些部分在禁用 JavaScript 的情況下是不可見的：
如何影響網站的索引? 當 Googlebot 缺少資源來呈現 JavaScript 注入的鏈接時，無法找到產品輪播並對其進行索引。
讓我們檢查一下這裡是否是這種情況。 我再次使用“site:”命令並輸入 Otto.de 產品輪播之一的標題：
如您所見，Google 在其索引中找不到該產品輪播。 Google 看不到該元素的事實意味著訪問其他產品將更加複雜。 此外， 如果您阻止爬蟲到達您的產品輪播，您將使他們更難 了解頁面之間的關係.
獲勝者：Target.com
在 Target.com 的產品頁面中，我使用了 Quick JavaScript Switcher 擴展來禁用所有 JavaScript-生成的元素。 我特別注意“更多考慮”和“類似項目”輪播以及它們在啟用和禁用 JavaScript 時的外觀。
As如下所示，禁用 JavaScript 改變了產品輪播尋找用戶的方式。 但是從機器人的角度來看有什麼改變嗎？
要找出答案，請通過分析緩存版本來檢查機器人頁面的 HTML 版本。
為了查看上面Target.com頁面的緩存版本，我輸入了“cache:https://www.target.com/p/9-39-…”，這是分析出來的URL地址頁。 另外，我查看了頁面的純文本版本。
滾動時，您會看到相關產品的鏈接也可以在其緩存中找到。 如果您在這裡看到它們，則意味著機器人也不會費力地找到它們。
但是，請記住鏈接到您在緩存中看到的確切產品可能與頁面實時版本中的產品不同。 輪播中的產品輪播是正常的，所以你不必擔心具體鏈接的差異。
但究竟是什麼Target.com 的做法有何不同？ 他們利用動態渲染。 它們提供初始 HTML，以及輪播中產品的鏈接，因為靜態 HTML 機器人可以處理。
但是，您必須記住 動態呈現增加了一層額外的複雜性，這可能會很快失去對大型網站的控制。 我最近寫道如果您正在考慮此解決方案，則必須閱讀有關動態渲染的文章。
此外，爬蟲可以訪問產品輪播的事實並不能保證這些產品將被編入索引。 但是，這將極大地幫助他們瀏覽站點結構並了解頁面之間的依賴關係。
3。 在robots.txt中屏蔽重要JavaScript文件
在robots.txt中誤屏蔽爬蟲JavaScript可能導致嚴重的索引問題。 我f Google 無法訪問和處理您的重要資源，它應該如何索引您的內容？
有罪：Jdl-brakes.com
如果沒有適當的網站抓取，就不可能全面評估網站。 但是查看其 robots.txt 文件已經可以讓您識別任何被阻止的關鍵內容。
機器人就是這種情況。 Jdl-brakes.com 的 txt 文件。 正如您在下面看到的，它們使用 Disallow 指令阻止了 /js/ 路徑。 它使所有內部託管的 JavaScript 文件(或至少是重要的文件)對所有搜索引擎機器人都不可見。
This disallow directive misuse可能會導致整個網站出現渲染問題。
為了檢查它是否適用於這種情況，我使用了 Google 的移動設備友好測試。 該工具可以讓您深入了解呈現的源代碼和移動設備上呈現的頁面的屏幕截圖，從而幫助您解決呈現問題。
我前往“更多信息”部分檢查是否有任何頁面資源無法加載。 使用 Jdl-brakes.com 上的產品頁面之一的示例，您可能會看到它需要一個特定的 JavaScript 文件才能完全呈現。 不幸的是，這不可能發生，因為整個 /js/ 文件夾在其 robots.txt 中被阻止。
但是讓我們看看這些渲染問題是否影響了網站的索引編制。 我使用“site:”命令來檢查分析頁面的主要內容(產品描述)是否在谷歌上被索引。 可以看到，沒有找到結果：
這是一個有趣的案例，谷歌可以訪問網站的主要內容但沒有將其編入索引。 為什麼？ 因為 Jdl-brakes.com 阻止了它的 JavaScript，谷歌無法正確地看到頁面的佈局。 並且儘管爬蟲可以訪問主要內容，但他們不可能了解該內容在頁面佈局中的位置。
讓我們來看看在移動設備友好測試的屏幕截圖選項卡上。 當 Jdl-brakes.com 阻止爬蟲訪問 CSS 和 JavaScript 資源時，爬蟲就是這樣看到頁面佈局的。 它看起來與您在瀏覽器中看到的完全不同，對吧？
佈局對於 Google 理解 您頁面的上下文。 如果您想了解更多關於網絡技術和佈局的交叉路口，我強烈建議您研究一個名為渲染 SEO 的新 SEO 技術領域。
獲勝者：Lidl.de
Lidl.de 證明組織良好的 robots.txt 文件可以幫助您控製網站的抓取。 關鍵是要有意識地使用 disallow 指令。
儘管 Lidl.de 使用 Disallow 指令/cc.js 阻止了單個 JavaScript 文件*，似乎不影響網站的渲染過程。 此處需要注意的重要一點是，它們僅阻止不影響網站上其他 URL 路徑的單個 JavaScript 文件。 因此，它們使用的所有其他 JavaScript 和 CSS 資源都應該可供爬蟲訪問。
擁有大型電子商務網站，您可能很容易忘記所有添加的指令。 始終包含盡可能多的要阻止抓取的 URL 路徑片段。 它將幫助您避免錯誤地阻止一些關鍵頁面。
4。 JavaScript 從網站中刪除主要內容
如果您使用未優化的 JavaScript 在您的網站上提供主要內容網站，例如產品描述，您阻止爬蟲看到您頁面上最重要的信息。 因此，您的潛在客戶可能無法在 Google 上找到有關您產品的特定詳細信息。
有罪：Walmart.com
使用 Quick JavaScript Switcher 擴展，您可以輕鬆禁用頁面上所有由 JavaScript 生成的元素。 這就是我在 Walmart.com 的一個產品頁面中所做的：
正如您在上面看到的，產品描述部分在禁用 JavaScript 的情況下消失了。 我決定使用“site:”命令來檢查谷歌是否可以索引這些內容。 我複制了我在啟用 JavaScript 的頁面上看到的產品描述片段。 然而，谷歌並沒有顯示我正在尋找的確切產品頁面。
用戶是否會沉迷於通過 Walmart.com 查找該特定產品？ 他們可以，但他們也可以前往任何其他銷售該商品的商店。
Walmart.com的例子證明依賴JavaScript加載的主要內容使得爬蟲更難找到並展示你有價值的信息. 然而，這並不一定意味著他們應該消除網站上所有由 JavaScript 生成的元素。
為了解決這個問題，沃爾瑪有兩個解決方案：
實現動態渲染(預渲染)，在大多數情況下，從實現的角度來看，這是最簡單的。
實現服務器端渲染。 這是解決我們在 Walmart.com 上觀察到的問題的解決方案，無需向 Google 和用戶提供不同的內容(如動態呈現的情況)。 在大多數情況下， 服務器端渲染也有助於解決低端設備上的網絡性能問題, 因為您的所有 JavaScript 在到達客戶端設備之前都由您的服務器呈現。
讓我們看看正確完成的 JavaScript 實現。
獲勝者：IKEA.com
宜家證明您可以以機器人可訪問和交互的方式展示您的主要內容對於用戶。
當瀏覽 IKEA.com 的產品頁面時，他們的產品描述會在可點擊的面板後面顯示。 當你點擊它們時，它們會動態地出現在視口的右側。
雖然用戶需要點擊才能看到產品詳情，即使關閉了 JavaScript，宜家也為其頁面的關鍵部分提供服務：
這種呈現重要內容的方式應該讓用戶和機器人都滿意。 從爬蟲的角度來看，提供不依賴 JavaScript 的產品描述使它們易於訪問。 因此，內容可以在 Google 上找到。
總結
JavaScript 沒有導致問題，如果你知道如何正確使用它。 作為絕對必須做的，你需要遵循索引的最佳實踐。 它可以讓您避免基本的 JavaScript SEO 錯誤，這些錯誤會嚴重影響您的網站在 Google 上的可見度。
注意您的索引管道並檢查如果：
您允許 Google 訪問您的 JavaScript 資源，
- Google 可以訪問和呈現您的 JavaScript 生成的內容。 關注電子商務網站的關鍵元素，例如產品輪播或產品描述，
您的內容實際上已在 Google 上編入索引。
如果我的文章讓你對 JS 感興趣SEO，在 Tomek Rudzki 的文章中找到更多關於診斷和解決 JavaScript SEO 問題的 6 個步驟的詳細信息。
關於 Justyna Jarosz —
Justyna 是 Onely 的營銷專家。
Facebook Comments Box
為了測試，我進入了他們的一個類別頁面並向下滾動以選擇滾動觸發的產品。 然後，我使用“site:”命令檢查該 URL 是否已在 Google 中編入索引。 正如您在下面的屏幕截圖中所見，無法在 Google 上找到此網址：
當然，Google 仍然可以通過站點地圖找到您的產品。 但是，通過鏈接以外的任何其他方式查找您的內容會使 Googlebot 更難理解您的網站結構和頁面之間的依賴關係。
為了讓您更加清楚，請想一想只有當您在 Nike.com 上滾動查看它們時才能看到的所有產品。 如果機器人沒有鏈接可以訪問，他們將在給定的類別頁面上只看到 24 種產品。 當然，為了用戶著想，Nike 無法在一個視口上提供其所有產品。 但是，仍然有更好的方法來優化無限滾動，既讓用戶感到舒適，又讓機器人可以訪問。
獲勝者：Douglas.de
與 Nike 不同，Douglas.de 使用對 SEO 更友好的方式在類別頁面上提供其內容。
他們為機器人提供基於
此外，分頁導航可能比無限滾動更加用戶友好。 類別頁面的編號列表可能更易於跟踪和導航，尤其是在大型電子商務網站上。 試想一下，如果他們在下面的頁面上使用無限滾動，Douglas.de 上的視口會持續多長時間：
2。 使用 JavaScript 生成產品輪播鏈接
具有相關項目的產品輪播是必不可少的電子產品之一商務網站的功能，從用戶和企業的角度來看，它們同樣重要。 使用它們可以幫助企業增加收入，因為它們提供用戶可能感興趣的相關產品。但如果這些部分過度依賴 JavaScript，它們可能會導致爬行和索引問題。
有罪：Otto.de
我分析了 Otto.de 的一個產品頁面，以確定它是否包含 JavaScript 生成的元素。 我使用了 What Would JavaScript Do (WWJD) 工具，該工具顯示了啟用和禁用 JavaScript 時頁面的屏幕截圖。
測試結果清楚地表明，Otto.de 依靠 JavaScript 在其網站上提供相關和推薦的產品輪播。 從下面的屏幕截圖可以清楚地看到，這些部分在禁用 JavaScript 的情況下是不可見的：
如何影響網站的索引? 當 Googlebot 缺少資源來呈現 JavaScript 注入的鏈接時，無法找到產品輪播並對其進行索引。
讓我們檢查一下這裡是否是這種情況。 我再次使用“site:”命令並輸入 Otto.de 產品輪播之一的標題：
如您所見，Google 在其索引中找不到該產品輪播。 Google 看不到該元素的事實意味著訪問其他產品將更加複雜。 此外， 如果您阻止爬蟲到達您的產品輪播，您將使他們更難 了解頁面之間的關係.
獲勝者：Target.com
在 Target.com 的產品頁面中，我使用了 Quick JavaScript Switcher 擴展來禁用所有 JavaScript-生成的元素。 我特別注意“更多考慮”和“類似項目”輪播以及它們在啟用和禁用 JavaScript 時的外觀。
要找出答案，請通過分析緩存版本來檢查機器人頁面的 HTML 版本。
為了查看上面Target.com頁面的緩存版本，我輸入了“cache:https://www.target.com/p/9-39-…”，這是分析出來的URL地址頁。 另外，我查看了頁面的純文本版本。
滾動時，您會看到相關產品的鏈接也可以在其緩存中找到。 如果您在這裡看到它們，則意味著機器人也不會費力地找到它們。
但是，請記住鏈接到您在緩存中看到的確切產品可能與頁面實時版本中的產品不同。 輪播中的產品輪播是正常的，所以你不必擔心具體鏈接的差異。
但究竟是什麼Target.com 的做法有何不同？ 他們利用動態渲染。 它們提供初始 HTML，以及輪播中產品的鏈接，因為靜態 HTML 機器人可以處理。
但是，您必須記住 動態呈現增加了一層額外的複雜性，這可能會很快失去對大型網站的控制。 我最近寫道如果您正在考慮此解決方案，則必須閱讀有關動態渲染的文章。
此外，爬蟲可以訪問產品輪播的事實並不能保證這些產品將被編入索引。 但是，這將極大地幫助他們瀏覽站點結構並了解頁面之間的依賴關係。
3。 在robots.txt中屏蔽重要JavaScript文件
在robots.txt中誤屏蔽爬蟲JavaScript可能導致嚴重的索引問題。 我f Google 無法訪問和處理您的重要資源，它應該如何索引您的內容？
有罪：Jdl-brakes.com
如果沒有適當的網站抓取，就不可能全面評估網站。 但是查看其 robots.txt 文件已經可以讓您識別任何被阻止的關鍵內容。
機器人就是這種情況。 Jdl-brakes.com 的 txt 文件。 正如您在下面看到的，它們使用 Disallow 指令阻止了 /js/ 路徑。 它使所有內部託管的 JavaScript 文件(或至少是重要的文件)對所有搜索引擎機器人都不可見。
This disallow directive misuse可能會導致整個網站出現渲染問題。
為了檢查它是否適用於這種情況，我使用了 Google 的移動設備友好測試。 該工具可以讓您深入了解呈現的源代碼和移動設備上呈現的頁面的屏幕截圖，從而幫助您解決呈現問題。
但是讓我們看看這些渲染問題是否影響了網站的索引編制。 我使用“site:”命令來檢查分析頁面的主要內容(產品描述)是否在谷歌上被索引。 可以看到，沒有找到結果：
這是一個有趣的案例，谷歌可以訪問網站的主要內容但沒有將其編入索引。 為什麼？ 因為 Jdl-brakes.com 阻止了它的 JavaScript，谷歌無法正確地看到頁面的佈局。 並且儘管爬蟲可以訪問主要內容，但他們不可能了解該內容在頁面佈局中的位置。
讓我們來看看在移動設備友好測試的屏幕截圖選項卡上。 當 Jdl-brakes.com 阻止爬蟲訪問 CSS 和 JavaScript 資源時，爬蟲就是這樣看到頁面佈局的。 它看起來與您在瀏覽器中看到的完全不同，對吧？
佈局對於 Google 理解 您頁面的上下文。 如果您想了解更多關於網絡技術和佈局的交叉路口，我強烈建議您研究一個名為渲染 SEO 的新 SEO 技術領域。
獲勝者：Lidl.de
Lidl.de 證明組織良好的 robots.txt 文件可以幫助您控製網站的抓取。 關鍵是要有意識地使用 disallow 指令。
儘管 Lidl.de 使用 Disallow 指令/cc.js 阻止了單個 JavaScript 文件*，似乎不影響網站的渲染過程。 此處需要注意的重要一點是，它們僅阻止不影響網站上其他 URL 路徑的單個 JavaScript 文件。 因此，它們使用的所有其他 JavaScript 和 CSS 資源都應該可供爬蟲訪問。
4。 JavaScript 從網站中刪除主要內容
如果您使用未優化的 JavaScript 在您的網站上提供主要內容網站，例如產品描述，您阻止爬蟲看到您頁面上最重要的信息。 因此，您的潛在客戶可能無法在 Google 上找到有關您產品的特定詳細信息。
有罪：Walmart.com
使用 Quick JavaScript Switcher 擴展，您可以輕鬆禁用頁面上所有由 JavaScript 生成的元素。 這就是我在 Walmart.com 的一個產品頁面中所做的：
正如您在上面看到的，產品描述部分在禁用 JavaScript 的情況下消失了。 我決定使用“site:”命令來檢查谷歌是否可以索引這些內容。 我複制了我在啟用 JavaScript 的頁面上看到的產品描述片段。 然而，谷歌並沒有顯示我正在尋找的確切產品頁面。
用戶是否會沉迷於通過 Walmart.com 查找該特定產品？ 他們可以，但他們也可以前往任何其他銷售該商品的商店。
Walmart.com的例子證明依賴JavaScript加載的主要內容使得爬蟲更難找到並展示你有價值的信息. 然而，這並不一定意味著他們應該消除網站上所有由 JavaScript 生成的元素。
為了解決這個問題，沃爾瑪有兩個解決方案：
實現動態渲染(預渲染)，在大多數情況下，從實現的角度來看，這是最簡單的。
實現服務器端渲染。 這是解決我們在 Walmart.com 上觀察到的問題的解決方案，無需向 Google 和用戶提供不同的內容(如動態呈現的情況)。 在大多數情況下， 服務器端渲染也有助於解決低端設備上的網絡性能問題, 因為您的所有 JavaScript 在到達客戶端設備之前都由您的服務器呈現。
獲勝者：IKEA.com
宜家證明您可以以機器人可訪問和交互的方式展示您的主要內容對於用戶。
當瀏覽 IKEA.com 的產品頁面時，他們的產品描述會在可點擊的面板後面顯示。 當你點擊它們時，它們會動態地出現在視口的右側。
雖然用戶需要點擊才能看到產品詳情，即使關閉了 JavaScript，宜家也為其頁面的關鍵部分提供服務：
這種呈現重要內容的方式應該讓用戶和機器人都滿意。 從爬蟲的角度來看，提供不依賴 JavaScript 的產品描述使它們易於訪問。 因此，內容可以在 Google 上找到。
總結
JavaScript 沒有導致問題，如果你知道如何正確使用它。 作為絕對必須做的，你需要遵循索引的最佳實踐。 它可以讓您避免基本的 JavaScript SEO 錯誤，這些錯誤會嚴重影響您的網站在 Google 上的可見度。
注意您的索引管道並檢查如果：
- Google 可以訪問和呈現您的 JavaScript 生成的內容。 關注電子商務網站的關鍵元素，例如產品輪播或產品描述，
您的內容實際上已在 Google 上編入索引。
如果我的文章讓你對 JS 感興趣SEO，在 Tomek Rudzki 的文章中找到更多關於診斷和解決 JavaScript SEO 問題的 6 個步驟的詳細信息。
關於 Justyna Jarosz —
Justyna 是 Onely 的營銷專家。
您允許 Google 訪問您的 JavaScript 資源，