概述

How to update meta-tag in react?

這問題想必前端工程師都有碰過，但這邊先告訴大家，想透過「純前端」修改... 「不可能」...!!

為什麼？

Google 搜尋引擎在爬文的時候，透過 javascript 產出來的標籤是無法爬到。

像現在有使用 react、vue、angular 等等這類的框架，這種 SPA、前後端分離的程式架構，都是透過 javascript render 出來的網頁，因此 SEO 肯定受限十足。

又有人可能會說，Google 搜尋引擎已經可以爬 javascript 產生的 tag，確實現在框架的盛行，Google 勢必還是得對這做處理，畢竟他們的網站也是有使用框架來進行。

問題

那 Google 都能爬 javascript 產生的 tag 現在還會有什麼問題呢？

「動態產生 meta tag」

這部分並非透過前端就能「完美」達到。

怎麼說？

透過動態產生出來的，那網址剪下貼至 FB、Line 等等之類的，都會無法顯示那些 tag，那 SEO 上勢必還是打折了。

相信很多人一定都有找了很多解法，以下就列出幾個解法供參考

(X) 1. react-helmet
(X) 2. react-helmet-async
(X) 3. react-super-seo
(O) 4. next.js
(O) 5. remix
(O) 6. environment variable (env)

從以上可以看出 javascript 前端方式處理得仍無法解決，必定要透過 SSR 的方式，或是環境變數來處理。