I have a problem with the og:image tag. I followed the instructions on SO about implementing the tag, which was very straight forward. It works great when someone like's the page. There is now a problem though, that when I post the link into a message I am composing on facebook, it does not show any thumbnail.
Here's my site: http://www.sunlitehardware.com.au/
So check this.
Okay jump onto facebook, and create a private message to one of your friends.
Paste in this link: http://www.sunlitehardware.com.au/blog/Power-Tools-Save-Your-Energy
Watch the thumbnail box below the post generate, and pull in some data. You'll notice it has a title, a link but no image.
The head of that particular link looks like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.sunlitehardware.com.au/site/assets/template/images/favicon.ico" />
<meta property="og:title" content="Power Tools - Save Your Energy" />
<meta property="og:image" content="http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Sunlite Hardware stock a massive range of tools for all your hardware needs in Sydney City & Bondi Junction." />
<meta name="keywords" content=",hardware, store, city, power tools, llight bulbs, paint, sydney, bondi junction" />
<meta name="verify-v1" content="Ow6TX6iHLufi9DAwV6mWquC9SEW4Les+o/wz29uUdeY=" />
If you take a look, the link to the og:image link, you can see the link points here:
http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg
If you were to click that, you should be able to see the image, i know I can, so the link is working.
Seems like for some reason facebook is ignoring it ..
Take a look at the facebook lint page here: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.sunlitehardware.com.au%2Fblog%2FPower-Tools-Save-Your-Energy
It has the thumbnail there. It just won't work when making posts. Any ideas?
The Facebook Debugger is a handy way of checking your links and usually warns you of the problems with your OG tags.
For the og:image, try using an image that's closer to 50x50 (yours is roughly 1200x1200).
Related
Does anyone else have this problem or can you see what may be wrong on my end?
Problem: If I go to LinkedIn (business or personal) and post a link to one of my websites:
https://inventivewebdesign.com/
https://www.revealio.com/
I get the image, but I don't get the title or description. Both sites are using WordPress with the latest version of Yoast SEO. I asked LinkedIn and they just said that my meta og tags need to be added to my site, but when I look at the source code for each page on either site I can see them there. Is there something that I am missing?
This is what LinkedIn Customer support said:
You'll need to make sure the source code complies with Open Graph
Protocol (OGP) and certain image requirements specific to LinkedIn.
Our developer website contains more details on setting display tags
for shares (available in English only). Below are the og: tags that
must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Here are the image requirements specific to the LinkedIn sharing
module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
These are the OG tags on my site:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.revealio.com/features/" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:site_name" content="REVEALiO" />
<meta property="og:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta name="twitter:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta property="og:image" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta name="twitter:image:src" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta property="og:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:creator" content="#Revealiocards" />
<meta name="twitter:site" content="#Revealiocards" />
Am I missing something?
I'm not having any trouble with your title tag, but your description tag is definitely missing. LinkedIn provides two levels, which each are triggered in their own way, but they are mutually exclusive...
Level 1
If you supply: og:image tags.
The preview shows: title, url, image.
Level 2
If you supply: no og:image tags, but an og:description tag.
The preview shows: title, url, description.
Your site is using level 1...
The Official Microsoft LinkedIn Share Documentation makes no mention of these levels. But I have been informed by LinkedIn support staff that they exist, and experimentation seems to confirm it.
Example: Wikipedia has og:description and is missing og:image, so, sharing Wikipedia shows the description. But GitHub has both og:description and og:image, so, sharing GitHub shows the image.
I am trying to update some old iOS/Android Facebook sharing code to work with the new sharing API. The old API used to let you specify a URL and an image, so users see the image in the FB feed and if they click on it, it takes them to the URL. I'm trying to figure out how to do the same thing under the new API.
This is for a game program. The way it worked is if a user got a high score - say, 1000 points - I would bring up a share dialog, specify a URL for a stylized "1,000 points!" JPG as the image, and specify the game's home page as the destination URL. Under the new approach, I'm not allowed to specify the image, instead they want me to specify it in the Open Graph metadata for the target URL. This is the solution I came up with under the new approach:
<!DOCTYPE html>
<html>
<head>
<title>NAME OF GAME</title>
<meta http-equiv="refresh" content="0; URL='GAME WEBSITE'" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NAME OF GAME" />
<meta property="og:image" content="URL OF JPG" />
<meta property="og:url" content="URL OF JPG" />
<meta property="og:description" content="NAME OF GAME" />
</head>
</html>
This mostly works. When a user shares a link to the above web page, they get the JPG image showing their score, and if you click on the JPG it redirects you to my game's website - however, in the news feed Facebook is now overlaying the URL of the redirected page and a little arrow to show that a redirect will take place. If I can eliminate the ugly overlays and just show the image, my work is done. If you have any insights they would be greatly appreciated.
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 need to create custom share buttons for Facebook, Twitter and Google +.
At the moment I have the following:
Facebook
facebook
Google
google
Twitter
twitter</li>
This seems to be working. But I still have a few problems:
How to specify the title of the page being sent in each service?
In Google + I there is the following on the url: "confirm?hl=en" ...
If the site is not in English should I change "en" to the site's language?
Thank You,
Miguel
Social networking services look for Open Graph metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page. The following should be your bare minium tags to include. For the rest, google them and you will find them easily enough:
For the page title:
<meta property="og:title" content="Title Here" />
For the URL
<meta property="og:url" content="http://www.example.com/" />
For the image that is typically displayed when someone shares a page to their wall:
<meta property="og:image" content="http://example.com/image.jpg" />
Description text that is generally included when someone shares a page:
<meta property="og:description" content="Description Here" />
However, I'm not exactly sure what "confirm?hl=en" does, but if you want to tell a search engine to crawl a site in a different language, then you can do so with the locale property.
That's a bit more complicated, though. Check out this article for more info on internationalization.
https://developers.facebook.com/docs/opengraph/guides/internationalization/
We have a site that has already been shared and liked on facebook before. This site has changed and we want to display a new logo, a new title and a new description when it is shared or liked on facebook, but it still displays the old information, even if the old title, description and image are no longer on the site.
We have tried adding the flowing code in the head but it doesn't work:
<link rel="image_src" href="image of the page" />
<meta property="og:title" content="title of the page" />
<meta property="og:site_name" content="name of the page" />
<meta property="og:image" content="image of the page" />
Even with this code facebook keeps on showing the old information, is as if facebook has a cache that needs to be updated.
Any ideas on how to update this information?
Thanks!
Try linting the website url in the debugger. It should re-scrape with the new parameters.