如何在反应js中动态地包含元标记？ [英] How to include meta tags dynamically in react js?

问题描述

我正在使用reactjs，我想在Facebook上分享我的内容，它正在发生，但分享后，它没有显示图像，标题，内容的描述。
所以我使用反应头盔在index.html中动态添加元标记。

 &头盔> 
< meta property =og：typecontent =video.other/> 
< meta property =og：imagecontent =https://www.w3schools.com/css/trolltunga.jpg/> 
< meta property =og：titlecontent =我的标题/> 
< meta property =og：urlcontent =https://www.afnity.com/video/155/> 
< meta property =og：descriptioncontent =共享内容的一些说明/> 
 
< / Helmet> 
  

这里是分享按钮

 < button> < a title =dummy
 href =http://www.facebook.com/sharer.php？u = https：//dummy.com/videos/id=25target =_ blank > 
 share< / a> 
< / button> 
  

但它不工作。

解决方案

使用以下代码替换头盔组件。

  <头盔
 meta = {
 {property：og：type，content：video.other} 
 {property：og：image，content：https： /www.w3schools.com/css/trolltunga.jpg} 
 {property：og：title，content：我的标题} 
 {property：og： url，content：https://www.afnity.com/video/155} 
 {property：og：description，content：某些分享内容的说明 } 
]} 
 /> 
  

这将根据您的要求添加元标记。

I am using reactjs , i want to share my content in facebook,it is happening but after sharing it is not showing images,title,description of the content. so I used react-helmet to dynamically add meta tags in 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>

and here is the share button

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

but it is not working.

解决方案

Replace Helmet Component with below code.

<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"}
  ]}
/>

This will add meta tags as per your requirement.

这篇关于如何在反应js中动态地包含元标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！