我正在使用reactjs建立博客。我想为这些文章实现Facebook分享。但是,当我尝试在Facebook帖子中分享文章时,没有文章的描述或图片。我了解问题出在meta标签中。我使用MetaTags npm设置元标记,当我的标题在选项卡标题中更改时,它们似乎可以工作。
<div>
<head>
<MetaTags>
<title>{this.state.article.title}</title>
<meta property="og:type" content="website" />
<meta property="og:title" content={this.state.article.title} />
<meta property="og:description" content="Футболни статии" />
<meta property="og:image" content={this.state.article.mainPhoto} />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
</MetaTags>
</head>
{body}
<Footer />
</div>
有人可以给我替代方法吗?或告诉我他们是怎么做的?非常感谢!
<div
className="fb-share-button"
data-href={'https://thexcoach.com/article/' + this.state.article.slug}
data-layout="button"
data-size="small"
>
<a
style={{ textDecoration: 'none', color: '#3b5998' }}
target="_blank"
href={
'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fthexcoach.com%2Farticle%2F&'
}
className=""
>
<FaFacebookSquare style={{ fontSize: '22px', color: '#3b5998' }} /> Сподели
</a>
</div>
这是我在组件中的代码。这是index.html
中的代码<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=myAppId&autoLogAppEvents=1"></script>
我将向您推荐给我们react-helmet库,而不是您在此处使用的react-meta-tags
。
[react-helmet
似乎是这里使用的动态内容的最佳选择。
这里是如何使用它的示例:
<Helmet>
<title>Your title here</title>
<meta name="description" content="Dynamic meta description with your {this.state.variable}" />
</Helmet>