<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 ?
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 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 working a website in Laravel and AngularJS. I wrote below meta tags in my site. I need to get dynamic values in AngularJS. Please help me.
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
Use like
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{metaInformation.title}}">
<meta name="twitter:description" content="{{metaInformation.description}}">
<meta name="twitter:image" content="{{metaInformation.image}}">
<meta name="twitter:site" content="{{metaInformation.site}}">
<meta name="twitter:creator" content="{{metaInformation.creater}}" />
<meta name="twitter:url" content="{{metaInformation.url}}" />
and you can load metaInformation object from your basecontroller and change when ever you want.
But for a single page web application, you need to use some another tool like prerender (https://prerender.io/) to SEO