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://...">
Related
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.
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.
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>
Based on superluminary response here I've set up an Angular 1 app without Hashbangs and html5Mode(true) and rely on Google to execute javascript. The page is being indexed by Google but dynamic titles and description tags are not.
My index.html head is the following:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="author" content="me">
<meta name="robots" content="index,follow">
<title ng-bind="meta.title">Temp Title</title>
<meta name="description" content="{{meta.description}}">
<!-- Scripts & CSS -->
</head>
The title and description are correctly loaded but they don't display on Google.
How can I do that?
Also does this technique works with Facebook and other social networks? Thank you.
Why you don't use something like that?
https://github.com/steeve/angular-seo
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.