My question is related to this one, this one, and this one, but completely different. The URL http://ogp.me/ lists the following example, where multiple images are defined within a single page:
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
However, the site does not say how these multiple images are used. I was thinking that perhaps Facebook scrapes all of the images specified with the og:image property and displays the one which best matches the resolution of the browsing device. But I'm not sure of this, and need confirmation.
If I include a 315x315 PNG image and a larger 1200x630 image, so that one can be used as a small image with the text corresponding to the image displayed by Facebook on its right-hand-side, and the other one is a full-size image occupying a rectangular rather than square area with the text described on the site below it, then how does Facebook decide whether to use one image or the other? (Personally, I have a square logo to display, so the smaller image might be best, with the text corresponding to the logo on the right, but I'm not sure whether to include just one of these two images or both?)
Thank you for your answers!!!
Typically multiple OG:image tags allows the user to choose which image they want to use for their post depending on the platform that is reading the OG tag. IE facebook or linkedin.
Related
Open Graph tag for Whatsapp link sharing showed that I can have two or more Open Graph images, e.g. a rectangular one for Facebook and a square one for Whatsapp:
<meta property="og:image" content="https://emotionathletes.org/images/logo_1200x630_facebook_shared_image_EN.png">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://emotionathletes.org/images/logo_400x400_facebook_shared_image_EN.png">
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
Facebook and Whatsapp both use the image intended for them. iMessage also works on Desktop.
iMessage on iPhone XR, though, both images are side by side with an ugly result:
For now, I have implemented a server-side check on whether the user agent is Whatsapp, in which case the meta tag uses the 400x400 image on all pages, and the facebook 1200x630 image for all others. I can revert to the previous commit in case someone wants to debug.
How can I have Open Graph image sharing tags compatible with Facebook, Whatsapp, iMessage, and other major sharing platforms, as well as different devices?
As a partial answer, the issue with iMessage seems to have disappeared. Now the same server code shows the first OpenGraph image even if two are present and have different sizes. I tested this by rearranging the images in the view.
For robustness in case of future changes, I implemented a check on the user agent. If it's Whatsapp, I share one square image, otherwise I share one landscape image.
To check for the user agent in the NodeJS controller or middleware:
whatsapp = (req.headers) && (req.headers["user-agent"]) && (req.headers["user-agent"].includes("WhatsApp/"))
To serve the OpenGraph image in the view with PUG/Jade:
if whatsapp
meta(property="og:image", content="https://emotionathletes.org/images/logo_400x400_shared_image_EN.png")
meta(property="og:image:width", content="400")
meta(property="og:image:height", content="400")
else
meta(property='og:image', content='https://emotionathletes.org/images/logo_1200x630_shared_image_EN.png')
meta(property="og:image:width", content="1200")
meta(property="og:image:height", content="630")
I set up my og:image like this:
<meta property="og:image" content="https://example.com/my-og-image.jpg" />
Its dimensions are 1200x630, just like the Open Graph documentation recommends. However, when I preview it in Facebook's URL Debugger, it doesn't show the image. It takes up expected space, but it's just a white surface.
Sometimes you also need to specify the dimensions for the image to show:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
It's a good practice anyway, because now Facebook won't have to calculate it dynamically.
Sharing certain links on Skype triggers the program to show preview with image from the page. On a website I work on - there are big images on certain pages but Skype picks up the logo of the website instead. I was unable to find what meta tags would make Skype pick up the intended image and preview it.
I have a <link rel="image_src" href="http://www.example.com/path/to/img.png" /> that works for Facebook-sharing preview (img.png is used instead of the logo of the website) but doesn't work for Skype.
So how would you hint Skype which image should be used for preview?
I will need to find some source to support this, but I think that if you have defined some open graph meta data, it will pick the image specified in there. For example, I have these in one of my sites:
<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).
We are in 2021 and this Skype issue continues! :/
I communicated through Microsoft forum and several users have the same problem.
My open graph metadata is well defined, in fact the link previews fine on Facebook and Twitter, but not on Skype.
I already reported the bug to Skype, hopefully they will answer something ...
I am attempting to get my website logo to show up properly on Facebook news feeds. When I paste my site link on my news feed (share it) in Facebook and the image shows up, but the thumbnail image is just a portion of my logo. Specifically, the center portion of my logo shows up only.
My image/logo is exported via GIMP 2.8 and it is 1200 by 349 px. I made it this size because that is the closest I could come to the Facebook recommended 1200 x 650 px (or something like that).
EDIT:
I am not sure if this is the best way to publicly share images, but this is exactly like my logo except for text and color:
http://2imgs.com/2i/i/53d2dd5f/22d0e1223be1e43544446b27ab6b4b3c/377394be6d.f.jpg
Then when I scale the image down (in GIMP 2.8) to something that seems like it will fit, the image doesn't seem to change anything.
I am using the Open Graph Debugger here:
https://developers.facebook.com/tools/
I am doing stuff like this (and many other) posts:
Default website image for social sharing
Here is the head of my Index.php:
<head>
<link href="html5reset-1.6.1.css" rel="stylesheet">
<meta charset="utf-8" />
<meta name="description" content="my business description here" />
<!-- For facebook -->
<meta property="og:image" content="http://www.example.com/imagename_w1200h349.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="349">
<link rel="icon" type="image/png" href="myiconpic.png" />
<title>my business title here</title>
</head>
What am I missing? This is the first website I have built.
Make sure the Open Graph image is always public, that image does not seem to be available for Facebook.
About the correct sizes: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
I sorted it out. I had two issues:
1) Facebook's Open Graph debugger Share Preview section doesn't refresh right when you upload a new Index.php and picture file to my host. I had to let it sit for a few minutes then refresh the page to get the preview to update.
2) I'm not sure if this is 100% true, but it worked for me: I made my image 1200 x 1200 with white canvas space above and below the logo (black). Since Facebook's recommendation is to go with 1200 x 630 pixels pictures, my solution here seems off, but it works so I am posting it.
Here is my image example that works:
EDIT: (Previous link didn't work. Hopefully this one does.)
http://2imgs.com/2i/i/53d3c78d/6719aed50ed239e3331cdeeadc572cf1/577394be6d.f.jpg
you can test why is not fetching you site image to facebook.
Facebook crawler will 'scrape' your site search for an image to use when it is being shared. If you want to specifiy which image to use, put this in the the section of your site:
Facebook may have cached a copy of the previous random image. to change or refetch for newer image. and you can test it for your ans.
https://developers.facebook.com/tools/debug/
I'm getting an off error I've never seen from the Facebook OG debugger.
Debugger: https://developers.facebook.com/tools/debug
URL I'm debugging: http://www.dallianceaccessories.com/
My Meta tags for FB/OG:
<meta property="og:title" content="Dalliance Accessories" />
<meta property="og:description" content="Dalliance Accessories is proud to release our new collection with the launch of Dalliance 2.0! Drawing inspiration from all over the world, we are excited to present our new pieces featuring bold stones, neon chord, collars, bracelets and natural stone charged pieces. Striving for a eclectic take on accessories and accessorizing for an instant love affair!" />
<meta property="og:url" content="http://www.dallianceaccessories.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Dalliance Accessories" />
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-logo.png">
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-screenshot.jpg">
Error I'm getting:
Parser Mismatched Metadata: The parser's result for this metadata did not match the input
metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple
values being given for a property only expecting a single value, or property values for a
given property being mismatched. Here are the input properties that were not seen in the
parsed result: 'og:image:url'
I dont get it. I've looked all over for answers, but no solutions have worked. There's no extra spaces at the end (one suggested solution) and I've hand type everything so theres no invisible characters either.
The problem seems to only come up with i put images in. So random. I had images just fine on the last version of the site. Anybody got any ideas?
Update: So this is only a problem on the home page, and i still cant figure out why. I do not see this error anywhere else. (eg. When I debug http://www.dallianceaccessories.com/necklaces.html)
I figured out a way around this. It's dirty, but it works.
Background Info: When i tried to change the website title for the home page, it told me 'you cannot change the title for this frozen page' etc. The 'frozen' part put up a mental red flag, but changing the title on the home page wasnt a big deal so I kept going.
Now, while trying to figure this out, I thought maybe it's looking for some of my old OG data because of whatever this 'frozen' data is. I assume for some reason I Cant change too much of my OG data on a page?
The fix: fter adding the 4 images that were previously specified in the last website version's OG data, it d allowed me to update the OG data via the debugger. It now reads completely fine. Adding the old image urls allowed me to update the title, description, etc. when people share.
My guess is there's some kind of check to see if too much data has changed and i somehow triggered it??? I'm not too sure why they would do that, but it seems to be the case.
Just to be clear, here is what all my image tags are now (the bottom 4 arent even valid urls, but they are what i used to have).
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-logo.png" />
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-screenshot.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-miko.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-pagan.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-sugarchain-black.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/og-logo.jpg" />
I will try to ween out these old image urls somehow or maybe populate the old urls with new images, until i can somehow find a proper way around this bug.