[React] 動態修改 meta-tag 解決 SEO，透過 env(environment variable)

概述

update meta-tag in react

正確的動態解決 meta-tag 方式，透過 env。

沒有裝 next.js 的專案可以用這招。

嘗試過 react-helmet 無效者也請用這招。

流程

1. get data in node.js ->
2. set env to index.html ->
3. build and test ->
4. success!

1. get data in node.js

純前端者，不要看到後端就跑，這邊只是寫一點點，沒很多

建立 script.js

// const fs = require('fs');
// const pathConfig = './config.json';
// const config = JSON.parse(fs.readFileSync(pathConfig));
// const title = config.title;
// const description = config.description;

const execSync = require('child_process').execSync;
const title = 'EJ的網站標題';
const description = 'EJ的網站描述';
const favicon = 'https://firebasestorage.googleapis.com/v0/b/deploy-for-chien313jay-test.appspot.com/o/images%2Ffavicon.ico?alt=media&token=d019d820-16a3-45fd-b5e5-15b8aa355ea8';

execSync(`VITE_APP_TITLE="${title}" VITE_APP_DESCRIPTION="${description}" VITE_APP_FAVICON="${favicon}" CI=false npm run dev`);

這樣就把 env 寫至你的 project

2. set env to index.html

這邊的話，打包工具看你是用啥，我這邊是用 vite

vite -> <( VITE_APP_TITLE )>
要裝 vite-plugin-html-env

webpack -> %REACT_APP_TITLE%
CRA 的開發者就不用另外裝，但手動搭建起來的我不確定要不要裝套件

index.html，程式碼其他部分省略

<link rel="icon" type="image/svg+xml" href="<{ VITE_APP_FAVICON }>" />
<meta property="og:title" content="<{ VITE_APP_TITLE }>" />
<meta name="description" content="<{ VITE_APP_DESCRIPTION }>" />
<title><{ VITE_APP_TITLE }></title>

3. build and test

接著就是去 run script.js 即可

node script.js

4. success!

可以看看網站是不是有被更改了，有的話就是成功了！

修改前

修改後

結論

這是動態修改 tag 的方式，且有利於 SEO！

如需透過 網域(domain)、子網域(subdomain) 來判斷 title、description、og:image、favicon 等等，這些一個有效的方式！

但如有架 next.js 的開發者，應該就能用他們的框架的方式來修改，理論上會更好改。

本人已經被雷過很多次，有問題歡迎留言詢問。