I'm trying to get preview of the page from different links within my react project but it's only showing the index.html "home" preview. I understand React is a SPA, but is there a module or a method to display previews/ thumbnails when I'm sharing/ posting these links? I'm using a headless CMS with Wordpress as the backend with API calls. I would like to post preview/ thumbnails of the articles/ etc.. I create.
example:
www.foxnews.com
there is a file called index.html in the public folder of react app
in there you should add meta property tags like this
<meta property="og:URL" content="%PUBLIC_URL%/localImage.jpg" />
<meta property="og:type" content="article" />
<meta property="og:title" content="lorem ipsum lorem ipsum" />
<meta property="og:description" content="lorem ipsum" />
<meta property="og:image" content="%PUBLIC_URL%/localImage.jpg" />
i had the same issue , and here is how i solved it
i've added the thumnail in page website
which can be access from the route (you want to give him a thumbnail)
make as the first element of your page (or at least your first picture )
because : the thumbnail link take the first picture of your website
and then with Css make sure that the picture doesn't appear
but ! WARNING ! don't do that :
display : none
because it will be as a removed pic and will not be considered
Here is an example of how i did that bellow !
in .jsx file of your page
<div className="thumbnail">
<img src="/thumbnails/landing.png" alt=""/>
</div>
here is the style in sass same as in css
.thumbnail
position : absolute
top : 0
z-index : -5000
width : 0px
height : 0px
img
object-fit : cover
width : 0px
height : 0px
to get the feature you need to paste the following markup to your html page in the head tag.
<meta property="og:title" content="title" />
<meta property="og:type" content="website">
<meta property="og:description" content="Content description />
<meta property="og:image" content="image you want to show here" />
<meta property="og:url" content="url ">
Related
This is my current configuration that adds the meta tags:
{data? <Helmet>
<title>Site- {data.name ? data.name : ""}</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
<meta name="twitter:site" content="#user" data-react-helmet="true" />
<meta name="twitter:creator" content="#user" data-react-helmet="true" />
<meta property="og:type" content="website" data-react-helmet="true"/>
<meta property="og:url" content={document.location.href} data-react-helmet="true" />
<meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
<meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
<meta property="og:image" content={data.image?.large} data-react-helmet="true" />
</Helmet>
: null}
data is a hook that is populated when the request from the database is done.
Trying on https://cards-dev.twitter.com/validator returns Unable to render Card preview. Any idea how it can be fixed?
I think its issue of CSR (Client Side Rendering). Twitter card fetch meta of link with JavaScript disabled so you need to fill meta on server response in that case you need SSR (Server Side Rendering).I recommend to try to use nextjs.org instead
I think you need to use different meta tags for twitter and maybe other sites, as link preview can be customized by the sites.
For example, this is saying that you need to use twitter:title, twitter:description and twitter:image.
I personally suggest to use react-seo-meta-tags with helmet as they seem to handle those kind of difficulties. You can check their official site.
I am using react, and using react-helmet for generating dynamic meta tags, its meta tags showing in developers elements sections and not showing in a page source
When I deploy my app to the server and try to share my image, the open graph preview is not showing.
And when tested in Facebook Debugger it is showing warning :
Warning: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
I am trying to update meta tags when I get a response from api. I want
Code :
import { Helmet } from 'react-helmet';
<Helmet>
<meta name="title" content={title}/>
<meta name="description" content={description}/>
{/* Non-Essential, But Recommended */}
<meta property="og:site_name" content="Temp Title!"/>
{/* Non-Essential, But Required for Analytics */}
<meta property="fb:app_id" content="4537338XXXXX" />
{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="og:url" content={window.location.href} />
<meta property="og:title" content={title}/>
<meta property="og:description" content={description} />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:secure_url" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />
<meta property="og:image" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />
</Helmet>
It is because your app is rendered on the client side, so when Facebook crawler visits your website, it will get all the original metatags before your javascript had a chance to put new metatags in the headers. The solution is to either manually put metatags in the index.html file or you could create a React Static App or use React-Helmet with Prerender.io.
Here is the meta tags i have in my react app but still in twitter share i cant see any image. i use react-share library.
<meta property="og:url" content="https://test.com" />
<meta property="og:type" content="article" />
<meta property="og:description"content="Coding tales" />
<meta property="og:image" content="%PUBLIC_URL%/Test.png" />
<meta name="twitter:title" content="Test Blog">
<meta name="twitter:description" content="Coding tales">
<meta name="twitter:image" content="%PUBLIC_URL%/Test.png">
<meta name="twitter:card" content="summary">
<title>Test Blog</title>
In the validator of twitter i get :
INFO: Page fetched successfully
INFO: 12 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully
You need an absolute path for og:image or twitter:image - like https://....
Relative paths aren't supported by Twitter... I don't think is documented but this is how it works in fact.
i'm using
<div ><a href={`https://facebook.com/sharer/sharer.php?u=${this.state.linkShare}`} target="_blank" ><FaFacebook /></a></div>
to share my post in react app to facebook, but it just display my ip like that:
I try to add meta tag but it doesn't word too :(
<MetaTags>
<title>My Page 1</title>
<meta property="og:url" content={window.location.pathname} />
<meta property="og:type" content="website" />
<meta name="description" content="description sd here.." />
<meta property="og:title" content="My App" />
</MetaTags>
How can i share my post with description to facebook with react js?
OG Tags have to be in the original page source, you cannot set them dynamically with React. Facebook ignores JavaScript. One option is to use "Server Side Rendering", another one https://prerender.io/.
I'm trying to share some content of my AngularJS website in twitter using next link:
<a href="https://twitter.com/intent/tweet?text=http%3A%2F%2Fwww.test.yanpy.com%2Fes%2Fblog%2Frutas-para-navegar-por-ibiza-y-formentera">
When I click on it, the Twitter share page is opened. However, I would like to use Twitter Cards. I added this twitter cards tags in my page:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#Yanpy_com">
<meta name="twitter:title" content="Sailing routes around Ibiza and Formentera">
<meta name="twitter:description" content="Post description">
<meta name="twitter:image" content="http://yanpy.test.s3.amazonaws.com/img/blog/sailing-routes-around-ibiza-formentera/cala-salada-ibiza-1.jpg">
But for some reason it is not working. I used the Twitter card validator with my url: http://www.test.yanpy.com/es/blog/rutas-para-navegar-por-ibiza-y-formentera
It looks like it's ok. However, when called from my anchor in my website I just see the text field.
#AnidMonsur is right don't show a card preview into the twitter web page, but you can see the preview into the validator, https://cards-dev.twitter.com/validator
Try with:
<meta name="twitter:image:src" content="http://..." />
instead of:
<meta name="twitter:image" content="http://...">