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/.
Related
I build a website with react native.
In my index.html I have this in my <head>
<title>Sitetitle | Site USP</title>
<meta name="description" content="My site description" data-react-helmet="true" />
<meta name="keywords" content="keyword for my website" data-react-helmet="true" />
In another page (aboutUs.js) I added helmet like this:
<Helmet>
<title>About us | Site USP</title>
<meta name="description" content="This is the description for about us page"/>
<meta name="keywords" content="about us" />
</Helmet>
But the meta tags are not overwritten for some reason. Can anyone maybe explain if I am doing something wrong? In first place I didn't have data-react-helmet="true" added to my meta tags and read on stackoverflow to add them but it didn't make any difference.
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.
Having setup metatags for sharable pages via a heroku-hosted react web app. I've noticed that Twitter cards are not being properly presented, despite page source correctly presenting twitter and og meta data.
Given the below - Is there anything I haven't considered yet?
Javascript:
I have tested with javascript disabled, and the site still renders correctly, with correct meta tags
Image Size:
Is within defined limits - 434px X 650px, 94KB
Hosting:
Hosted on Herokuapp, the URL is still using the herokuapp domain (hasn't been switched to a production url)
expressFullURL : https://project.herokuapp.com/share/[ID]
Image Hosting:
Images are referencing AWS S3 buckets in the url https://media.project.aws/[etc]
Robots:
The site does not have a robots.txt file
Below, is the head meta content:
twitter.image URL is dynamically loaded in
twitter.url, which is also dynamic using express to generate the full URL (http://project.com/share/page/1234)
<!-- basic meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta content="text/html; charset=UTF-8" name="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- content meta -->
<meta name="description" content="description content" />
<meta name="copyright" content="Copyright 2019" />
<!-- Twitter meta -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="#handle">
<meta property="twitter:image" content="${image.url}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="${expressFullURL}">
<meta property="twitter:title" content="Title">
<meta property="twitter:description" content="description content">
<!-- opengraph data -->
<meta property="og:title" content="Title" />
<meta property="og:description" content="description content" />
<meta property="og:url" content="${expressFullURL}" />
<meta property="og:image" content="${image.url}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
Using https://cards-dev.twitter.com/validator
the response is:
INFO: Page fetched successfully
WARN: No metatags found
Meta is correct on page, so can't understand why no metatags can be found
I had a similar situation, but seem to have it working. I kept an eye on the Heroku logs heroku logs --tail while clicking the validator preview button. Turns out I was getting a 500 error from my app, because of the format of the request from the validator. Might be worth a check.
I made a couple of observations that I'd like to document as an answer here:
A <meta charset="utf-8"> tag is required.
The twitter:image tag needs a full HTTPS URL, like https://host.com/some/image.jpg.
The twitter card validator needs to be refreshed for each change. It is not enough to just click on the "Preview Card" button again, you need to reload the webpage (CMD-R on the Mac) and enter the card URL in the text field. Otherwise the validator doesn't seem to load the latest changes.
The error message"INFO: Page fetched successfullyWARN: No metatags found"is
completely misleading. It is shown even if the URL doesn't exist.
A minimum working example is:
<html>
<head>
<meta charset="utf-8">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="#username"/>
<meta name="twitter:title" content="A title"/>
<meta name="twitter:description" content="A description."/>
<meta name="twitter:image" content="https://host.com/some/image.jpg"/>
</head>
<body>
</body>
</html>
I want to extract title and meta tags from a webpage:
<title>A common title</title>
<meta name="keywords" content="sample keyword" />
<meta name="description" content="This is the description" />
I found this question and it's for PHP.
How do it using AngularJS?
I've no idea at all since I'm new to AngularJS.