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.
Related
So i tried use react helmet like this in my component :
<Helmet>
<title>EXAMPLE</title>
<meta name="description" content="EXAMPLE" />
<meta itemprop="name" content="EXAMPLE" />
<meta itemprop="description" content="EXAMPLE" />
<meta itemprop="image" content="EXAMPLE" />
etc ...
</Helmet>
everything work perfect on localhost but when extract the build and upload it to cpanel , shared the link on facebook and test meta on metatags.io I always get null for the meta
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'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 have used below React Helmet code in App.js for rending Twitter card meta.
<Helmet>
<meta charSet="utf-8" />
<title>
{`xxxxx`}
</title>
<meta
name="description"
content={`xxxxx.`}
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="xxxxx"
/>
<meta
name="twitter:description"
content="xxxx."
/>
<meta name="twitter:site" content="#xxxx" />
<meta
name="twitter:image"
content="https:xxxx"
/>
<meta name="twitter:creator" content="#xxxx" />
</Helmet>
The meta tags do show up while I do a browser inspect. But in twitter card validator(https://cards-dev.twitter.com/validator), I am getting ERROR: No card found (Card error).
If I add the same meta tags in index.html, it works. But, I would like the twitter card to work in Helmet so that I can change it dynamically. Is it possible without Server-Side Rendering?
Facebook/Twitter/etc. crawlers do not render JavaScript, so unless you are rendering Helmet content on the server OR including the card meta tags in the index.html file, they will never pick up your client-side updates.
Twitter now appears to be rendering JavaScript when crawling webpages for meta tags! At least as far as React Helmet is concerned.
We're using Twitter's summary_large_image along with twitter:image via Helmet on our React website and it's confirmed working in the Twitter Card Validator and in live Twitter posts!
Please note that a URL protocol (https://) was required for Twitter to use the image specified in our twitter:image meta tags. We originally had those meta tags built without the URL protocol, and images were not being pulled in by Twitter to display with the tweet.
<meta property="og:url" content="mysite.com/" />
<meta property="og:type" content= "article"/>
<meta property="og:title" content="content title" />
<meta property="og:description" content="content description" />
<meta property="og:image" content="/image.jpg" />
React helmet is unable to update the meta tag of index.html file. I have deployed my application in nginx server which renders index.html file for all routes. There is no any server side routing done for this project. How to fix this issue ?