如何在動態js中使用具有動態值的元標記？

Question

任何人都可以幫助我有關如何使用meta標籤動態值在反應JS？

請參閱圖像我的要求，

我在這裏使用額外的元標記HTML標籤（因爲反應需要換其他的單個標籤它引發錯誤內完整的HTML）。我也可以使用div/p任何html標籤，但這是正確的方式來呈現反應組件？有額外的HTML標籤，而不是在meta標籤中。這將工作的搜索引擎優化？

請建議我任何其他手動使用元標記的好方法。

Answer 1

我可以看到有關您分享的代碼的幾個問題。

1. 元標籤在頭部，但您的反應組件將呈現在您的身體標記。
2. 考慮到SEO部分，谷歌現在可以解析JS，所以你的標籤會被閱讀，但如果你認爲雅虎仍然不能仍然這樣做（谷歌也真的不是那麼高效，面對太多關於處理SEO與單頁面應用程序）
3. 如果您的反應組件使用Link導航到其他組件，我假設它會出現SPA的情況，因爲抓取工具嘗試直接聯繫您的頁面，所以無法正常工作。現在

，如果你有一個單一組分的單頁的應用程序，你可以嘗試react-helmet，但如果涉及多個組件和導航，我建議你去預渲染，也許使用phatom-JS或預-render.io（它間接使用phantomjs）。

如果您唯一關心的是元標記，那麼您可以將meta標記直接嵌入到您的html代碼中，而不是中的組件。這確實有助於抓取工具查看元標記。但是，如果您還希望抓取工具查看您的內容，則預渲染是我現在可以考慮的最佳解決方案。

Answer 2

這可以使用反應文檔的元NPM模塊時，在啓動服務器端渲染來實現你的反應程序

閱讀這篇博客的更多信息 - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

Answer 3

如果您服務您從一個陣營捆綁服務器，您可以在服務器上動態生成元標記。

從本質上講，你的公共/ 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/