I want to display multiple images in facebook's preview when sharing a website.
How can I do this? Can I just define multiple og:image tags?
Here is an example, what I want to do:
Thanks
You can simply add a single og:image tag.
<meta property="og:image" itemprop="image primaryImageOfPage" content="src/to/image/file" />
But when you share a link on facebook, they give you the option to add multiple images. Use that option.
See at the bottom you have the option to add multiple images. Use that and then publish.
Another Option
You can add multiple og:image tags and then if only single image shows up update that page link in facebook debugger.
<meta property="og:image" content="src/to/image/1">
<meta property="og:image" content="src/to/image/2">
Any pages that have already been shared (with one image) can be updated by loading the link in the facebook debugger here:
https://developers.facebook.com/tools/debug/
The debugger/linter may not show a preview of all the images – it may just show the last one however it does work.
I have a website that triggers a warning when clicked through a link shared on Facebook. The warning says:
Possible problem with this link
We have detected that this link: http://www.example.online/ may be malicious.
To keep your account and device secure, only follow links you trust."
I ran the Facebook debug tool and I get the following error message:
Inferred Property
The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I Googled this issue and I understand it is caused by some lack of meta information in the site header, but my site's code has the following in the header:
<meta http-equiv="etag" content="2efdc27c8967f14e2c829e601f7a1228"/>
<meta property="og:title" content="South Jersey Aerial Photograpahy"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.online/"/>
<meta property="og:image" content="https://static.example.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>
<meta property="og:site_name" content="South Jersey Aerial Photograpahy"/>
<meta property="og:description" content="South Jersey Aerial Photography is South Jersey's premier aerial photography and aerial videography company. Fully licensed and insured. Contact us today!"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
I have no idea how to fix this error message. The property metatag is clearly there.
In short, you should re-fetch your website information using this tool:
https://developers.facebook.com/tools/debug/
Paste your URL and press Debug. Then either do Fetch, or press Scrape Again.
This will refresh Facebook cache, and your html-page will be reloaded.
Some additional info: https://stackoverflow.com/a/44453472/4899346
Following the already mentioned link to the Facebook object debugger, make sure that your og tags are written RIGHT AFTER the opening <head> tag.
Not sure why this happens but I used to run into the exact same issue until I moved them right after it and then clicked once again on "Fetch new scrape information".
Hope this helps!
Check for og:url tag and see whether the url is correct or not. In my case the url was not correct and so it was causing this type of error.
Ran into the same issue today. It would appear that it's a bug on Facebook's end.
Just by refreshing the Sharing Debugger will show me different error messages after each reload, including "Image Too Big", which clearly was not the case, and "Meta Tags In Body" which also was not correct.
As long as the correct image shows up in the Link Preview, I think you're good to go.
Had same issue today
'og:image' property should be explicitly provided, even if a value can
be inferred from other tags
somehow my linter replaced "(quotation mark) to ”(right double quotation mark), therefore https://developers.facebook.com/tools/debug/sharing/ was showing issue,
cause of that, these meta properties were not visible to fb-bot. After this correction it works fine
Even if you have a proper OG tag on a page, can Facebook still ignored og:image value.
On my Magento 2 website, I use Magento 2 Facebook Open Graph by Magefan and had this issue too even all OG tags look good :-(
After I contacted them (magefan), they fixed the issue and released the module update v2.0.12
It turned out that Facebook only looks for og:image in the first 50Kbs of the page source.
So if you are using inline CSS, or some JS in the the og:image will not be seen by Facebook. That was the reason in my case.
The solution is to put OG tags as high as possible in the node.
Added the
<meta property="og:image:secure_url" content="https://abc/image.jpg" />
in order for the facebook debug to actually show my issue that the image was not 200x200. Corrected that and had to completely refresh the debug to resolve.
OG tags should be property instead of name for those of you who copy/paste from other tags like twitter, who uses name.
Eg
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
If you're using a plugin like W3 Total Cache, Just purge your cache and go back to Facebook object debugger page mentioned by #Alex C and then click on Fetch new scrape information.
This solved the issue for me
`<meta property="og:image" content="https://static.wixstatic.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>`
<meta property="og:image:width" content="2500"/>
<meta property="og:image:height" content="1330"/>
1200 pixels x 627 pixels
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.
Double check your img file size.
Remember you need to add og:image:secure for "https"
2.og:image only works with "http".
Try
<meta property="og:image" content="http://example.com/image">
<meta property="og:image:secure" content="https://example.com/image">
I had og:url content as http://... when my site always redirected to https://.... Updating this fixed the issue for me.
I have had success by using https://developers.facebook.com/tools/debug/sharing/batch/ to invalidate the FB cache, then using https://developers.facebook.com/tools/debug/ to refresh it.
This seems to help if a page/post has been previously shared, say, and then an og image or other og element was added.
I try to add my link to a facebook page. Sometimes facebook loads preview picture, sometimes not (even don't try to load and just add as link, without preview picture). My code has the following lines in head section:
<meta property="og:title" content="[title]" />
<meta property="og:description" content="[text]" />
<meta property="og:image" content="[correct_link_to_image]" />
all pages have format like
[MY_ADDRESS]/jpg/[UNIQUE_CODE].html
links for images have format:
[MY_ADDRESS]/publicThumb/[UNIQUE_CODE].JPG
So, each unique page has unique image
My thoughts - it happened because Facebook caches it. But how to solve?
Thanks
I solved my problem.
First at all, facebook proposes us a special debug tool
https://developers.facebook.com/tools/debug/og/object/
If you enter the url to check and click on "Fetch new scrape information" and receive all detailed information, including page error (this was my case, I asked Request.UserLanguages on page and this is empty for Facebook's request, so, Facebook got an error).
Secondly, need to add og:url meta tag (this tag is mandatory to correct work)
Thirdly, og:image should be at least 200x200, otherwise Facebook try to catch any other picture on page
P.S. Seems, russian social network "VKontakte" uses the same tags as Facebook
I recently designed and built this site: http://velvetbus.co.uk
When one of the administrators go to post a link on Facebook the post appears like this:
How can I change the icon? A 'v' is nice and all but doesn't really represent the company too well.
Thanks
Facebook uses Open Graph protocol. You need to add a meta tag on your web page so facebook will know what image do display
<meta property="og:image" content="http://LINK_TO_YOUR_IMAGE"/>
It's best to use a square image, as Facebook displays them in that matter.
That image should be at least 50x50 in any of the usually supported image forms
(JPG, PNG, etc.)
Here you can learn about other tags http://davidwalsh.name/facebook-meta-tags
Is the facebook link from your website? Make sure to include a <meta property="og:image" content="someimg.jpg" /> in the head of the url you're pointing to in your post, to tell Facebook which image to use for the post.
Jeroen
When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.
I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net
The problem with this is that as it's a background image it's overlooked.
Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.
Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?
Yes, you can set a meta tag so that Facebook knows which image to pick.
See: https://developers.facebook.com/docs/opengraph/
Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.
Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.
You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/ (The use of the URL Linter will also rebuild Facebook's cache)
There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.
<link rel="image_src" href="http://link.to/image.png" />
For Facebook there is also an other Way to achieve this by using Open Graph protocol.
You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
Then you are able to use the og: Meta-Tags like this:
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
For Facebook this six og Meta-Tags are required:
og:title
og:type
og:image
og:url
og:site_name
og:admins OR og:app_id
You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/
Like others have answered but it only works for me when i use (https)
<meta property="og:image" content="https://link.to/image.png" />
Instead of
<meta property="og:image" content="http://link.to/image.png" />
what if you did like a img but in css put
#logo{
display: none; }
<img id="logo" src="yourlogohere.jpg">
the image would not show up on the page but i don't know if facebook would see the image
As already said: Best would be to use the metatag with the og:image opengraph property.
In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...