Я использую react-helmet
для отображения мета-тегов и react-snap
для предварительного отображения HTML-страниц.Я смог отобразить правильное отображение с описанием и заголовком изображения, когда я поделился им в slack, но если я поделюсь им на Facebook, страница не будет отображаться ни с чем, кроме заголовка и URL.
import React, {Component} from 'react'
import {Helmet} from "react-helmet";
class Footer extends Component {
render(){
let { description, parameter,id ,imageURL, badgeImageURL} = this.props
if(id ===3||id==9||id==10||id==6){
description='description 1'
}else if(id ===5||id==11||id==7||id==2){
description='description 2'
}else if(id ===4||id==1||id==8||id==12){
description='description 3'
}else{
description='description 4'
}
return(
<div className="row social-media-logos">
<Helmet>
<title>Page Title</title>
<meta property="og:url" content={`http://www.sample.com${parameter?parameter:''}`} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageURL!==''?`${imageURL}`:badgeImageURL} />
<meta property="fb:app_id" content="sample_id" />
</Helmet>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=www.sample.com"><div className="facebook" ></div></a>
<a target="_blank" href={`http://pinterest.com/pin/create/button/?url=http://www.sample.com${parameter?parameter:''}&media=${imageURL}&description=${description}`}><div className="pinterest"></div></a>
<a target="_blank" href={`https://twitter.com/intent/tweet?text=${description}&url=http://www.sample.com${parameter?parameter:''}`}><div className="twitter"></div></a>
</div>
)
}
}
export default Footer
Наличие той же проблемы с твиттером.Есть идеи?Этот сайт размещен на aws как ведро s3.