JS腳本與SEO優化

讀者lin在問答板塊問了一個純技術問題，關于網站JavaScript的使用和SEO注意事項。JS的SEO是近年越來越重要的問題，以前還沒寫過這方面的話題。無論是異步調用內容，還是增加頁面互動，現在的網站幾乎無法避免使用JS腳本。但JavaScript使用不當的話可能會對SEO造成非常大的影響。

lin的問題是：

一個網站，源碼都封裝在js里面，直接調用js來展示，這可咋搞

這是比較極端的情況，最后再回答。先說一下一般情況下，頁面使用JS時要考慮的SEO問題。

搜索引擎怎樣處理JS

首先，簡單一句話，JS造成SEO問題的癥結在于，搜索引擎不一定執行JS腳本。

做SEO的都知道，要有搜索流量，搜索引擎蜘蛛需要順利爬行鏈接，抓取頁面，解析并索引頁面html代碼中的內容，然后才談得上排名和流量。在爬行、抓取、索引的過程中，如果JS造成障礙，就會導致問題。

瀏覽器執行JS、渲染頁面是肯定的，使用用戶訪問一切正常。但問題就在于，搜索引擎蜘蛛抓取頁面html代碼時，如果遇到JS，不一定會去執行JS腳本，那么需要執行JS才能看到的內容，搜索引擎就不一定看得到。

Google遇到頁面JS時，會在有計算資源、且頁面有比較高價值時，嘗試執行腳本、渲染頁面。百度則基本上不執行JS腳本。所以做中文網站，使用JS上就更要謹慎。

重要鏈接不要用JS

搜索引擎爬行、抓取頁面是靠跟蹤鏈接的。如果重要鏈接需要運行JS腳本才能調用或解析出來，那搜索引擎就可能無法跟蹤。

不是說鏈接就不能用JS調用，但重要的、想被收錄的頁面至少還要有最普通的<a>格式鏈接提供抓取入口。比如，調用一些相關文章、相關產品鏈接，可以用JS，但這些鏈接在網站主導航中都已經有列表頁面提供了入口才行。

主導航、菜單系統、欄目/產品列表，不要用JS，除非你確認有其它方法提供了入口。

想被收錄的內容不要用JS調用

頁面上的文字內容，凡是想被收錄的，不要用JS調用，包括文章正文，產品說明，產品圖片，評論等。

JS倒是可以用來調用那些不想被收錄的文字，比如廣告、某些側欄內容等。

我見過用JS調用內容的各種千奇百怪的用法，比如還有用JS調用頁面標題標簽的。

慎用懶加載、瀑布流

圖片懶加載，甚至文字內容懶加載，是現在網站經常使用的方法，在一定程度上有利于提高頁面速度。但要注意，用JS實現懶加載時，是否需要用戶互動才能加載，比如點擊“更多”鏈接，或者向下拉頁面，搜索引擎蜘蛛是不會做這些動作的，不會點擊按鈕，也不會下拉頁面，所以就可能看不到懶加載后的內容。無論懶加載的是更多本頁內容，還是更多其它頁面列表，都可能造成爬行、索引問題。

列表頁面使用瀑布流是社交媒體網站的主流方式，用戶已經習慣，有的普通網站也學這種方式。同樣，要考慮到社交媒體網站經常是主動屏蔽搜索引擎的，不想讓搜索引擎索引，普通網站大概率是想被索引的，使用瀑布流時要想一想有沒有提供搜索引擎可以跟蹤鏈接的其它入口。

注意速度

一般來說，使用JS會拖慢頁面打開和響應速度。

通常下載JS文件倒還不算大問題，除非用了幾MB的JS文件。但瀏覽器執行JS有可能會很耗費設備資源，設計不周的JS可能會執行好幾秒鐘，瀏覽器在執行JS時不能處理其它事情，造成腳本阻塞，對用戶來說就是個頁面空白或卡死數秒鐘的狀態，這是非常急人的。

所以，盡量刪除執行時間過長的JS，執行超過1-2秒的腳本需要慎重考慮。盡量合并JS腳本，減少<script>數量。

盡量減少JS數量，包括第三方JS。我看過很多網站頁面需要執行幾十個JS腳本，包括很多第三方腳本。問一下自己，這些JS都是必須的嗎？真的必須嗎？寧可拖慢頁面幾秒鐘、跳出率大幅提高也要用？對信息類頁面，除了顯示文章內容，其它都不是必須的。對電商網站，除了購物車，其它都不是必須的。

除了用戶體驗，頁面速度也是搜索排名的重要因素。

服務器端渲染

如果可能的話，可以考慮JS在服務器端渲染，而不是客戶端（瀏覽器）渲染。雖然這會增加技術難度，服務器響應也會變慢一點，但服務器性能一定是超過用戶設備的，再加上緩存等方法，總體上是會比瀏覽器執行JS、渲染頁面快很多的。

怎樣檢查JS是否造成SEO問題

幾個小方法供讀者參考。

一是瀏覽器禁用JS，看一下訪問頁面時是什么情況。如果禁用JS后重要內容看不到了，那么搜索引擎也可能看不到。不要寄希望于搜索引擎會青睞你的網站而去執行JS。

第二個是檢查頁面的快照，尤其是純文字版的快照。搜索引擎快照在很多情況下就是搜索引擎索引的頁面內容。

如果某些內容必須用JS調用，但又希望搜索引擎索引，還可以搜索一下被調用的內容，如果能搜索到，說明搜索引擎執行了JS，索引到了內容。我想不到為什么必須用JS調用，但很多技術人員對使用JS是比較執著的。

最后回到lin的問題，如果頁面源碼都封裝在js里面，直接調用js來展示，這樣的網站沒辦法做SEO，說服老板和技術改程序吧。

關鍵詞： 搜索引擎 seo js 懶加載 搜索引擎收錄 js代碼 索引 seo排名

上一篇：SEO 分析：簡單的分步指南

下一篇：Google“有用內容更新”觀察及應對