react jsで動的値を持つメタタグの使い方についてお手伝いできますか？react jsで動的な値を持つメタタグを使用するにはどうすればよいですか？
（反応し、それがエラーを発生させる他に、単一のタグ内にラップ完全なHTMLを必要とするため）、私はここに余分なメタタグhtmlタグを使用しています
、私の要件のための画像を参照してください。私はまたdiv/p任意のhtmlタグを使用することができますが、この正しい方法は、反応コンポーネントをレンダリングですか？そのメタタグの内部よりも余分なhtmlタグを持っています。これはSEOのために機能しますか？
メタタグを手動で使用する他の方法をお勧めします。
あなたが共有したコードに関する問題はほとんどありません。
Linkを使用して、SPAの場合と同じ他のコンポーネントにナビゲートすると、クローラがページに直接アクセスしようとするため、動作しません。さて、多分phatom-jsのか事前を使用して、事前レンダリングのために行くあなたは、単一のコンポーネントを持つ単一のページのアプリを持っている場合は、react-helmetを試すことができますが、それは、複数のコンポーネントやナビゲーションを必要とする場合、私はあなたをお勧めします-render.io（間接的にファントムを使用します）。
あなたの唯一の関心事がメタタグの場合は、HTMLタグに直接メタタグを埋め込み、のには埋め込むことができます。これは本当にクローラがメタタグを見るのを助けるでしょう。
しかし、クローラにもコンテンツを表示させたい場合は、プレレンダリングが今私が考えることができる最良の解決策です。
あなたに有効なサーバ側のレンダリングは、アプリケーション
を反応させる際に、この詳細については、このブログを読んで反応し、ドキュメント・メタNPMモジュールを使用して達成することができます - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components
をあなたからあなたのリアクトバンドルを提供している場合サーバー上にメタタグを動的に生成することができます。
基本的に、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/
ここでノードとExpressでの例のルートがあります