On Twitter, I can't show an image card when tweeting my website https://startcrowd.club
But it works perfectly on Facebook.
I want to show this card: http://startcrowd.club/images/startcrowdimage.jpg
I tried https://cards-dev.twitter.com/validator and I got:
INFO: Page fetched successfully
INFO: 9 metatags were found
ERROR: No card found (Card error)
The relevant metatags on my page https://startcrowd.club/index.html are:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:image" content="images/startcrowdimage.jpg">
The documentation I followed is:
https://dev.twitter.com/cards/getting-started
Ensure that the og:type tag is set. On Facebook it is not required, Facebook will use website as the og:type if it is not found. That is why it worked fine on Facebook.
By adding <meta property="og:type" content="website"> if the twitter:card property is not set, twitter will use summary.
So just add <meta property="og:type" content="website"> and I think it will work fine.
PS: I also had the same issue but when I added <meta property="og:type" content="website"> it worked for me.
Add:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://startcrowd.club/images/startcrowdimage.jpg">
Doc: https://dev.twitter.com/cards/types/summary-large-image
You should change your
twitter:card tag to 'app', 'player', 'summary' or 'summary_large_image'
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
that is all required meta tags.
You can also check it from twitter validator
Here is a article might be helpful
https://medium.com/#melih193/social-media-cards-for-more-interaction-with-meta-tags-741a6e8d27d1
Just add the following before your closing </head> will do:
<meta content='summary_large_image' name='twitter:card'/>
<meta content='#yourTwitterID' name='twitter:site'/>
<meta content='#yourTwitterID' name='twitter:creator'/>
If your <head></head> tag contains any og:xxx meta tags, the Twitter crawler should be able to grab it. They can't generate a card for you if you don't tell them which Twitter account that this card belongs to. The card needs to generate a link that references back to the account owner.
Related
I have a blog and until some weeks ago I was able to post (getting the link preview) in Telegram and Facebook. I can continue doing in Facebook, but in Telegram, it seems that something changed and now I can't get the preview. I get the message "Getting Link Info..." and in some seconds it disappears, and doesn't get the link as I used to get some weeks ago.
I didn't modify anything in my blog when it stopped working. And now, after upgrading to latest WP version, it continues failing.
As mentioned, Facebook preview continues working, so it means that Open Graph attributes are defined properly (at least as required for Facebook).
I tried to clean Telegram Cache (using WebPage bot), but the result is exactly the same. I'm not getting the preview when trying to connect. It seems that Telegram validation if failing in somewhere.
It seems that it could be the hosting blocking the Open Graph info for Telegram.
<meta property="og:image" content="mydomain.org/wp-content/uploads/2022/06/helados.jpg" />
I just tried to move just one page to a temporal hosting to easy test with it, and I have realized that if I keep the original page (with references to my domain) I can see properly, but when trying to get the preview with Telegram it doesn't work.
Now, I change the above parameter to reference to the new hosting (just the image) and... IT WORKS. I can get the link preview.
So, now I'm wondering if there is some way to avoid this, or it could be just a FW rule in my hosting trying to avoid this Telegram Preview. But as I mentioned before, it works for Facebook (the preview). A bit strange :-(
Do you know where could be the issue?
This is the URL I'm trying to get the preview: mydomain.org/helados/ ... and this are the attributes in the page:
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Helados" />
<meta property="og:description" content="Estos helados son...." />
<meta property="og:url" content="mydomain.org/helados/" />
<meta property="og:site_name" content="Mi Web" />
<meta property="article:published_time" content="2022-06-25T13:55:53+00:00" />
<meta property="og:image" content="www.mydomain.org/wp-content/uploads/2022/06/helados.jpg" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="768" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="author" content="Me" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:label1" content="Escrito por" />
<meta name="twitter:data1" content="Me" />
<meta name="twitter:label2" content="Tiempo de lectura" />
<meta name="twitter:data2" content="2 minutos" />
The Facebook page shows characters as ???? for certain WordPress posts shared.
I did check the preview for Facebook Instant Articles for posts. It shows the same.
This only happens to certain posts.
I have also added following in header.
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
I did also checked https://MYDOMAINAME/feed/instant-articles. There it shown correctly.
try finding the language and maybe if it is thai this would work:
<meta http-equiv="Content-Language" content="th">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
EDIT: maybe if one of the characters isn't in the charset it would be unreadable.
make sure you implement the right charset.
I'm really struggling to get LinkedIn to recognise an og:image. My og tags look like this:
<meta property="og:type" content="website" />
<meta property="og:title" content="My title here" />
<meta property="og:url" content="https://www.example.com/some-page" />
<meta property="og:description" content="Description here" />
<meta property="og:image" content="https://www.example.com/og-image.png" />
So far I've tried:
checking the og:url matches the current page
checking the image exists
adding prefixprefix="og: http://ogp.me/ns#" to my HTML tag
changing that prefix to prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"
checking the site's SSL settings (as per Share on LinkedIn with og)
ensuring my image is at least 1200x672px
ensuring my image is under 5MB
I'm not sure what else there is to try. Any ideas?
Aha – just tried making it a JPG rather than PNG and LinkedIn now sees it. That's kind of shocking but hopefully that'll help someone else!
Anybody knows how Telegram makes the rich preview?? It would be very useful to learn about it for a development I am making. It is a server side features, so I think the code is not available. Isn't it?
It uses Open Graph protocol: http://telegram.wiki/manuals/general/link-previews
In some posts, the preview doesn't need any work from you, for example if you have a photo URL link in your post, that is an entity of the message.
But in other cases you need to add some tag in your material, for example when you add one URL that points to an article in your website, you must tag and your HTML tag must change:
<html prefix="og: http://ogp.me/ns#">
your head tag
<meta property="og:title" content="title text" />
<meta property="og:image" content="an image url that exist in your page" />
<meta property="og:url" content="current page url" />
<meta property="og:description" content="description text" />
Good day -- I'm currently using Facebook's PHP SDK to share a link (see: https://developers.facebook.com/docs/php/howto/postwithgraphapi/), but when I attempt to customize the image, title and description via the Facebook meta tags, they do not take effect (FB always renders the defaults instead).
Here is my html head information:
<head prefix="og: http://ogp.me/ns#">
<title>Share to Facebook Custom Image</title>
<meta property="og:title" content="Share to Facebook Custom Image">
<meta property="og:type" content="website">
<meta property="og:url" content="http:...">
<meta property="og:image" content="http://www.millennialmedia.com/images/home/mmedia-2.png">
<meta property="og:description" content="add a short description of the page or content">
<meta property="fb:app_id" content="751866978175179">
</head>
Can someone please advise as to what I might be doing wrong? Much obliged!
Go to facebook debugger (ex linter) and paste the url. That should help debug. Facebook caches a copy and debugger refreshes it. Try that. Another thing that might help as well is clearing your browser's cache as the last solution.
EDIT SOLVED
You are using XHTML and XHTML is strict on errors. That was causing the facebook url parser to fail getting the information due to an invalid <br /> tag that you are using (</br>). Fix that and it will work. If going on with XHTML look here for common mistakes
I recommend switching to html like so:
<!doctype html>
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb#">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
As for your image not displaying issue upload a bigger image bigger from 200x200 pixels if I remember correctly.