SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度
動態網站對 SEO 的影響
現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax 時仍會有問題，如果要提昇對 Google 爬蟲的友善度，Google 還是建議將內容指向 Html。
從官方文件官方整理出幾個重點
- 避免做 SEO 文字在 canvas 或圖片中 Google bot 爬蟲也是無法辨識。
- 避免使用 iframe，或者是個別連結至其內容 - 透過 iframe 顯示的內容可能無法編入索引。
- 避免使用者和Google Bot看到的內容不同。 幕後重新導向
- 關閉 Javascript 時，應該也要能夠顯示文字。
- 連結帶上參數時，對於爬蟲來說還是不這麼友善，需要給爬蟲爬取的靜態頁面，還是要給靜態連結。
動態網站 SEO 的解決方案
前面提到了，動態網站對於爬蟲來說不是這麼友善，那身為前端工程師，我們可以透過下列幾種渲染技術，來優化動態網站的 SEO
1.伺服器渲染 - SSR ( server side render )
網頁頁面的數據渲染完全由伺服器端渲染完成才回傳給用戶端。
常見的前端 SSR 框架:
React 生態的 Next.js
Vue 生態的 Nuxt.js
Angular 生態的 Universal
優點
- 爬蟲訪問網站時，可立即拿到最新更新的頁面
- 更快將內容傳遞到用戶端，特別是對於緩慢的網路情況或運行緩慢的設備(網路環境沒這麼好的國家)，無需等到 JavaScript 都完成下載並執行，才顯示服務器渲染的標記，用戶將會更快速地看到完整渲染的頁面，可獲得更好的用戶體驗。
缺點
- 渲染交給伺服器端，可能達致伺服器負載可能過重
- 部署伺服器需要更高的要求，與單頁面應用程式 (SPA) 不同，服務器渲染應用程式，需要處於 Node.js server 運行環境。
2.網頁預渲染
2-1.自動撰寫爬蟲預渲染(Prerender 、playwright)
爬蟲訪問網站時，網頁伺服器或程式依據爬蟲的 UserAgent，預先將渲染好的網頁，返回給爬蟲。
優點
- 可以減少伺服器負載，爬蟲可以不用等待渲染就能拿到結果。
缺點
- 爬蟲無法拿到最即時的動態網頁內容
- 技術門檻有點高，使用到技術複雜，你可能需要寫一個 Job 去渲染或是爬蟲去爬取自己的網站，並撰寫程式判斷 Google 爬蟲給予相對應的靜態內容。
2-2.webpack 預渲染(wepack prerender-spa-plugin)
優點:
- 配置簡單，可以透過路由，渲染出html。
缺點:
- 預渲染的即有網頁程式碼混雜在一起，需要調整現有的程式碼
- 不支援捲動式 lazy load 載入及虛擬捲軸.
- 無法操作prerender底層，缺乏彈性.
3.動態渲染 for SEO ( Dynamic Rendering for SEO )
Rendertron 是 Google Chrome 團隊 利用 node js 及 Puppeteer 所開發的專案，可以用來解決任何 搜尋引擎無法爬取的動態網站內容。
運行原理
網頁服務器，依據搜尋引擎的 bot useragent，將請求轉向 自己架設的 rendertron server ，此時rendertron，有cache 就會使用 cache ，沒有 cache 就會去和啟動 Puppeteer 爬蟲去將網站爬回來。
優點
- 效能
- 即時性兼顧
- 伺服器負擔不這麼大
缺點
- 需要額外架設一台 dynamic 渲染的服務站台。
P.S. 進階的情境，虛擬列表及 Lazy load ，及更細部的瀏覽器操作，並不支援，但有開放源原始碼，且蠻好改的，可以自己擴充。
測試
https://render-tron.appspot.com/render/欲動態渲染的網址
待續…下一章打算來動手寫爬蟲做網頁預渲染
參考資料
Related Posts
