I am using react-helmet
to display the meta og tags and react-snap
to prerender the html pages. I was able to render the proper display with the image description and title when i shared it on slack, but if I share it on facebook, the page does not render with anything but the title and the 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
Having the same problem with twitter. Any ideas? This site is being hosted on aws as an s3 bucket.