1 of 14

搜尋引擎最佳化遇上 JavaScript

2 of 14

JS-Based 網站可能遇到問題

Yahoo 檢索機器人難以解讀 JS 技術的網站，導致 Yahoo 搜尋引擎收錄頁面的效果不好。

舉例：AJAX 類型網站

香港電商「士多 ztore.com」

Google 收錄數量

Yahoo 收錄數量

3 of 14

JS-Based 網站可能遇到問題

舉例：使用 JS 產生超連結連結 (台灣經貿網眼鏡雲 http://optical.taiwantrade.com/ )

使用 JS 產生超連結，網站頁面被收錄數少，自然搜尋流量低。

移除掉JS，使用固定超連結。

4 of 14

Google 官方對 JS-Based 網站的建議 (2016/03/04)

5 of 14

Google 官方對 JS-Based 網站的建議 (2016/03/04)

  • 不要產生有「#」符號的網址。
  • 善用 Google Search Console 中的 Google 模擬器工具：

6 of 14

Google 官方對 JS-Based 網站的建議 (2016/03/04)

  • 控制外嵌 JS 檔案的數量及整體 request 數，避免載入時間過久。
  • Google支援使用 JS 產生 title、description 等等的網頁資料 ( titles, description & robots meta tags, structured data, and other meta-data )。
  • 雖然 Google BOT 可以檢索 JS-Based 的網站，但是其他搜尋引擎 BOT 可能還無法做到，導致使用JS相關技術的網站在 Google 以外的搜尋引擎排名表現很差。

7 of 14

JS 遇上 SEO 蹦出新火花

  • 讓 URL 可以被索引 ( Indexable URLs ) → 不同頁面主題(不同頁)都必須要有專一對應的網址。
  • AJAX載入新內容或變換內容應正確使用 pushState() 變換網址
  • 每一頁仍然需要「title」、「meta descriptions」、「open graph」等等網頁基本資料。
  • 仍須使用「a href」或「img src」創立連結 → 避免搜尋引擎爬蟲追不到連結。
  • 盡量避免 rendering 產生的不同版本內容互相矛盾 → 譬如canonical 指向不同。

8 of 14

JS 遇上 SEO 蹦出新火花

範例：關島之家 http://www.guam.com.tw/info/18

  • 無限向下滾動，可產生新網址。

​

雖不換頁，但能因應內容變化轉換網址。

​

好處：

  • 聚焦！主題內容集中！
  • 搜尋引擎友好度提升！

9 of 14

JS 遇上 SEO 蹦出新火花

範例：Quartz http://qz.com/275725/elon-musk-is-the-true-successor-to-steve-jobs/

​

這個範例的網址有帶入文章標題，對提升使用者經驗及 SEO 都有幫助。

10 of 14

JS 遇上 SEO 蹦出新火花

魚與熊掌兼得

互動好又保留文字

感覺不錯

11 of 14

JS 遇上 SEO 蹦出新火花

結論

  • 盡量避免使用 JS 產生超連結。
  • 設計時須思考 non-JS 時的情境。
  • 大原則 ─ JS render 出來的 HTML 仍需遵循傳統 HTML 頁面的法則。
  • 目前搜尋引擎 BOT 對 JS-based 的網站理解仍然有限，Google BOT 能檢索(crawl)成功不代表其他搜尋引擎的 BOT 可以檢索成功。

12 of 14

最簡單的開始!

awoo SEO Tool 有關 JS 的檢測

13 of 14

最簡單的開始!

awoo SEO Tool 有關 JS 的檢測

你只要...

​

​

​

就能...

​

馬上檢測網頁 JavaScript 是否 SEO-friendly!!!

14 of 14

awoo 遇上 JSDC 蹦出火花 ?