同時(shí)由于Javascript在網(wǎng)站交互上的重要作用，當(dāng)前網(wǎng)絡(luò)上98%以上的網(wǎng)站都有應(yīng)用 Javescript，這使得網(wǎng)站在“SEO友好”和“用戶體驗(yàn)”之間存在一些沖突點(diǎn)。

但這并不意味著我們無(wú)法在這兩者之間達(dá)到一個(gè)平衡，既能充分考慮到網(wǎng)站的SEO易用性，同時(shí)兼顧用戶體驗(yàn)。因此，在電商網(wǎng)站上使用Javascript并不可怕，可怕的是應(yīng)用的方式不對(duì)。

錯(cuò)誤的Javascript應(yīng)用導(dǎo)致的根本問(wèn)題是：搜索引擎抓取頁(yè)面困難，從而導(dǎo)致頁(yè)面很難被收錄，更別提有良好的排名。

因此，優(yōu)化電商網(wǎng)站中的 Javascript 應(yīng)用方式，其本質(zhì)在于優(yōu)化頁(yè)面被抓取和被收錄的能力。

本文主要分享在電商網(wǎng)站中錯(cuò)誤使用 Javascript 的五個(gè)誤區(qū)，避免由此而導(dǎo)致某些重要頁(yè)面（如產(chǎn)品分類頁(yè)，產(chǎn)品詳情頁(yè)，Blog文章頁(yè)等）很難被抓取&收錄的情況。沒(méi)有時(shí)間看長(zhǎng)文的小伙伴，可直接查看如下總結(jié)：

 避免使用 Javascript來(lái)生成導(dǎo)航下拉菜單

搜索引擎爬蟲(chóng)無(wú)法像人一樣在瀏覽器中與頁(yè)面進(jìn)行交互，當(dāng)電商網(wǎng)站中的導(dǎo)航下拉菜單是基于 Javascript 來(lái)生成的話，爬蟲(chóng)也就無(wú)法抓取到下拉菜單中的其它頁(yè)面。

錯(cuò)誤示例：eufy.com

當(dāng)禁用 Javascript 后，搜索引擎無(wú)法抓取到主導(dǎo)航下的任意下拉菜單鏈接，這意味著搜索引擎無(wú)法從首頁(yè)順著鏈接快速抓取到重要頁(yè)面，例如產(chǎn)品聚合頁(yè)和產(chǎn)品詳情頁(yè)，同時(shí)也會(huì)影響首頁(yè)（通常是站內(nèi)權(quán)重最高的頁(yè)面）給這些重要頁(yè)面的權(quán)重傳遞。

解決方案：保證每個(gè)一級(jí)菜單都有對(duì)應(yīng)的著陸頁(yè)面，使得爬蟲(chóng)能夠進(jìn)入到這些著陸頁(yè)面后，再抓取下級(jí)菜單中的其它頁(yè)面。

誤區(qū)二：使用Javascript來(lái)動(dòng)態(tài)加載產(chǎn)品列表

對(duì)于某些產(chǎn)品SKU非常多的品牌電商網(wǎng)站（尤其是電商平臺(tái)類網(wǎng)站），為了在產(chǎn)品分類頁(yè)中展示所有該品類的產(chǎn)品，很多網(wǎng)站的解決辦法是通過(guò) Javascript 腳本，以瀑布流的方式動(dòng)態(tài)加載產(chǎn)品列表，即隨著鼠標(biāo)的下滑，一直動(dòng)態(tài)加載剩余產(chǎn)品，直至全部加載完成。

錯(cuò)誤示例：nike.com

Nike 所有產(chǎn)品聚合頁(yè)都是通過(guò)這種無(wú)限動(dòng)態(tài)加載的方式來(lái)展示產(chǎn)品，這將導(dǎo)致搜索引擎僅能抓取首屏的前24個(gè)產(chǎn)品，其它產(chǎn)品詳情頁(yè)則無(wú)法從聚合頁(yè)被抓取到，最終導(dǎo)致這些頁(yè)面很難被收錄，例如產(chǎn)品詳情頁(yè)：https://www.nike.com/t/air-jordan-legacy-312-low-mens-shoes-B931hr/CD7069-071 就未被收錄，如下圖：

解決方案：在保留 Javascript 動(dòng)態(tài)加載產(chǎn)品的同時(shí)，在頁(yè)面中（通常是底部）增加翻頁(yè)按鈕，使得爬蟲(chóng)能夠順著翻頁(yè)鏈接抓取到其它產(chǎn)品。

在產(chǎn)品詳情頁(yè)，或Blog文章頁(yè)中推薦與當(dāng)前頁(yè)面主題相關(guān)的其它產(chǎn)品，是電商網(wǎng)站常規(guī)的一種產(chǎn)品推薦方式。無(wú)論是在用戶體驗(yàn)，還是銷售轉(zhuǎn)化上都有非常好的作用。但如果這些產(chǎn)品輪播展示部份是基于Javascript 來(lái)生成的話，同樣會(huì)導(dǎo)致爬蟲(chóng)對(duì)這些頁(yè)面的抓取和收錄問(wèn)題。

錯(cuò)誤示例：otto.de

Otto 是德國(guó)的一個(gè)電商平臺(tái)網(wǎng)站，他們會(huì)在產(chǎn)品頁(yè)面中推薦其它品牌的產(chǎn)品，方便用戶可以挑選其它客戶也感興趣的產(chǎn)品，如下圖所示：

在該頁(yè)面禁用Javascript后，這些推薦產(chǎn)品“消失了”，再次說(shuō)明搜索引擎是看不到這些相關(guān)產(chǎn)品推薦的，如下對(duì)比圖所示：

解決方案：使用動(dòng)態(tài)渲染(預(yù)渲染)來(lái)展示這類型內(nèi)容。所謂的動(dòng)態(tài)渲染是指網(wǎng)站根據(jù) User Agent 來(lái)判斷是正常用戶還是爬蟲(chóng)訪問(wèn)頁(yè)面，因此動(dòng)態(tài)渲染包含兩部份的內(nèi)容：

1.用來(lái)服務(wù)正常用戶的 Javascript 腳本（展示內(nèi)容在用戶端渲染）

2.用來(lái)服務(wù)搜索引擎爬蟲(chóng)的靜態(tài)內(nèi)容（展示內(nèi)容在服務(wù)器端渲染）

但切記動(dòng)態(tài)渲染只能算是一種臨時(shí)的解決方案，最佳的解決方案還是通過(guò)服務(wù)端渲染好內(nèi)容，這樣不管是用戶還是爬蟲(chóng)都能夠讀取到內(nèi)容。

在robots.txt 中錯(cuò)誤禁止了重要的Javascript 文件，將使得搜索引擎無(wú)法渲染網(wǎng)頁(yè)，最終依然會(huì)導(dǎo)致網(wǎng)站收錄問(wèn)題。

錯(cuò)誤示例：jdl-brakes.com

如下圖所示的robots.txt文件，其禁止爬蟲(chóng)抓取整個(gè) /js/ 文件夾，這勢(shì)必會(huì)導(dǎo)致爬蟲(chóng)無(wú)法訪問(wèn)該文件夾下的所有 JavaScript 文件，從而無(wú)法正常渲染網(wǎng)站中調(diào)用了該文件夾中 Javascript 文件的頁(yè)面。

Note：可以通過(guò) Google Mobile-Friendly Test 工具(https://search.google.com/test/mobile-friendly/)來(lái)測(cè)試頁(yè)面是否能被正常渲染。

解決方案：仔細(xì)檢查網(wǎng)站 robots.txt 文件，確保沒(méi)有 Disallow 指令屏蔽掉重要的 Javascript 文件.

另外，也要注意是否有其它類型的資源文件（例如CSS樣式文件，圖片所在文件夾等）被屏蔽抓取。

這是所有誤區(qū)中最嚴(yán)重的情況，搜索引擎將無(wú)法讀取到對(duì)頁(yè)面排名有重要影響的正文內(nèi)容（例如產(chǎn)品描述內(nèi)容等）。

錯(cuò)誤示例：walmart.com

當(dāng)在如下圖頁(yè)面中禁用 Javascript 后，紅框處所有產(chǎn)品描述內(nèi)容對(duì)搜索引擎都不可見(jiàn)！

解決方案：通過(guò)服務(wù)端渲染的方式來(lái)呈現(xiàn)這些重要內(nèi)容給搜索引擎。

要避免網(wǎng)站中的 Javascript 應(yīng)用影響頁(yè)面收錄和排名，確保做到如下四點(diǎn)：