メタタグをreact jsに動的に含めるにはどうすればよいですか？

Question

私はreactjsを使用しています。私はFacebookのコンテンツを共有したいと思っていますが、それは起こっていますが、共有した後、画像、タイトル、コンテンツの説明は表示されません。 だから私はreact-helmetを使ってindex.htmlにメタタグを動的に追加しました。

<Helmet> 
<meta property="og:type" content="video.other" /> 
<meta property="og:image"  content="https://www.w3schools.com/css/trolltunga.jpg" /> 
<meta property="og:title" content="My Title" /> 
<meta property="og:url" content="https://www.afnity.com/video/155" /> 
<meta property="og:description" content="some discription of the shared content" /> 

</Helmet> 

、ここで共有ボタン

<button> <a title="dummy" 
href="http://www.facebook.com/sharer.php? u=https://dummy.com/videos/id=25"  target="_blank"> 
share</a> 
</button> 

それが動作していないです。

Answer 1

ヘルメットコンポーネントを以下のコードに置き換えてください。

<Helmet 
    meta={[ 
    {"property": "og:type", "content": "video.other"} 
    {"property": "og:image", "content": "https://www.w3schools.com/css/trolltunga.jpg"} 
    {"property": "og:title", "content": "My Title"} 
    {"property": "og:url", "content": "https://www.afnity.com/video/155"} 
    {"property": "og:description", "content": "some discription of the shared content"} 
    ]} 
/> 

これは、要件に応じてメタタグを追加します。

Answer 2

サーバ側のレンダリング詳細については、このブログを読んで、あなたの反応アプリケーション

const meta = { 
     title: 'Samvikshana - New Perspective of Exploration', 
     meta: { 
     property: { 
      'og:title': 'Samvikshana', 
      'og:url': 'https://samvikshana.weebly.com/', 
      'og:image': imageUri, 
      'og:description': 'New Perspective of Exploration', 

      'twitter:card': 'summary_large_image', 
      'twitter:title': 'Samvikshana', 
      'twitter:description': 'New Perspective of Exploration', 
      'twitter:image': imageUri 
     } 
     } 
    }; 

    return (
     <div className='container-fluid'> 
     <DocumentMeta {...meta} /> 
     </div>); 
    } 

で有効になったときにこれが反応し、ドキュメント・メタNPMモジュールを使用して達成することができます - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-componentsが