我有一個服務器端呈現的React應用程序。我現在必須實施Facebook/Google +共享對話框,其中和和和被動態設置爲從API返回的值。服務器端呈現的動態元標記React應用程序
我正在使用react-helmet來設置我的默認元標記,但我有麻煩,使其動態工作。
我嘗試使用redux-async-connect來預取結果,導致元標記被渲染(當我查看源代碼時,我可以看到它們),但Facebook和Google+都忽略它們。
你們有沒有這方面的經驗?
我有一個服務器端呈現的React應用程序。我現在必須實施Facebook/Google +共享對話框,其中和和和被動態設置爲從API返回的值。服務器端呈現的動態元標記React應用程序
我正在使用react-helmet來設置我的默認元標記,但我有麻煩,使其動態工作。
我嘗試使用redux-async-connect來預取結果,導致元標記被渲染(當我查看源代碼時,我可以看到它們),但Facebook和Google+都忽略它們。
你們有沒有這方面的經驗?
你可以像這樣渲染應用程序裏面的文檔: render(<App/>, document)
而應用程序包含所有你需要的html。
從本質上講,你public/index.html
文件要與一個可識別的字符串替換元數據:
<!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description" content="$OG_DESCRIPTION" />
<meta property="og:title" content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image" content="$OG_IMAGE" />
然後在服務器上,要替換這些字符串與動態生成的信息。下面是與節點和快遞爲例路線:
app.get('/about', function(request, response) {
console.log('About page visited!');
const filePath = path.resolve(__dirname, './build', 'index.html')
fs.readFile(filePath, 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
data = data.replace(/\$OG_TITLE/g, 'About Page');
data = data.replace(/\$OG_DESCRIPTION/g, "About page description");
result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
response.send(result);
});
});
從本教程在這裏拍攝:https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/
我已經回答了以下問題,請檢查一下。 [React Js中的動態元標籤](http://stackoverflow.com/questions/43072222/how-to-include-meta-tags-dynamically-in-react-js?answertab=votes#tab-top) –