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!
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" />
I'm getting the following error:
Image Unavailable
Provided og:image, https://sustainablewestonma.org/.swag/uploads/logoCapture.png could not be
downloaded. This can happen due to several different reasons such as your server using unsupported
content-encoding. The crawler accepts deflate and gzip content encodings.
the file is 252X226 png bit depth 32. As far as I can tell it is not base64. I tried to refresh on facebook several times but that didn't work either/
here are the meta tags I'm using:
<meta property="og:title" content="SWAG" />
<meta property="og:type" content="website" />
<meta property="og:description" content="logo" />
<meta property="fb:app_id" content="419989405770732" />
<meta property="og:url" content="https://sustainablewestonma.org/.swag/public/php/homeCtrl.php?place=first" />
<meta property="og:image" content="https://sustainablewestonma.org/.swag/uploads/logoCapture.png" />
converted the image to an *.ico file and it worked
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.
I'm developing a website, I want to show my site info in social application like telegram when my site link is set. like the image below.
I set these tag on head site:
<meta property="og:type" content="website" />
<meta property="og:title" content="title" />
<meta property="og:description" content="desc" />
but nothing happen!
What should I do?
I found that my site can not be seen from outside of my country!
and that is the problem!
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" />