Open graph / og image not working when using Facebook share

This article was written by in April 9, 2015, & may not be posted on other sites!
Original source url for this article: Open graph / og image not working when using Facebook share

Open graph / og image not working when using Facebook share.
Having problems with the open graph properties? Is your og:image not even showing up when user clicks to share your website on Facebook? Is any random image showing up instead? Get your og properties straight to show the right image when sharing on Facebook.

Open graph og image not working when using Facebook share. og:image information

 

Solution – Open graph / og image not working when using Facebook share?

Here is a list of avalable open graph / og properties working for Facebook.

og:title – The title of your article, excluding any branding.
og:site_name – The name of your website. Not the URL, but the name.
og:url – This URL serves as the unique identifier for your post, an url without any session variables, user identifying parameters, or counters.
og:description – A detailed description of the piece of content, usually between 2 and 4 sentences.
og:image – The image associated with your webpage. Size should be at least 1200×630 pixels.
og:image:width – The image width
og:image:height – The image height
fb:app_id – The unique ID that lets Facebook know the identity of your site.
og:type – Different types of media will change how your content shows up in Facebook’s newsfeed. Default is “website”.
og:locale – The language of the webpage. The default is en_US.
og:locale:alternate – If you have other available language translation available
article:author – This property links to the authors Facebook profile or a Facebook page
article:publisher – This property links to the publisher of the article, must be a Facebook Page.

 

 

How to add open graph / og image code to website?

So, you have a list of open graph or og properties avalable, but how do you add them to your website? Well, the og properties are added inside the <head> of your webpage. Something like this:
<head>
<meta property="og:title" content="My website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://my-website.com/img.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:description" content="My website is displaying all kinds of cool stuff">
</head>
Tip: Put your og:image code right after the opening <head> tag. If any other og image is added after that, for example by a plugin, your image will still count since it’s read first. To specify image dimentions further you can also add the following meta tags:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

 

Test your og: properties for Facebook

You can submit your url to test exactly how Facebook will read your page and what will be displayed if anyone clicks “Share on Facebook”. Test if your og image is working properly or if any other og properties are missing or not working as expected.

https://developers.facebook.com/tools/debug/og/object/

 

 

Still getting errors / og image not working??

If you read and tried everything above and your og:image is still not working or showing up, try one or more of these solutions:

  1. Put your og:image code right after the opening <head> tag. If any other og image is read efter that, your image will count since it’s read first.
  2. Empty all cashes in the browser and on your WordPress website and then test your website again. Some old code might have been cashed.
  3. Check your source code for duplicated og properties or other errors. Right click on your webpage > view source code.
  4. Check your image dimensions. If your image is too small or have a bad resolution Facebook might not accept it as an og: image. Image size should be at least 1200×630 pixels.
  5. The og:image property must be a http:// url and not a https:// url. Using https:// the og:image:secure_url property is better practice, something like this:
    <meta property="og:image" content="http://example.com/img.jpg" />
    <meta property="og:image:secure_url" content="https://secure.example.com/img.jpg" />
  6. If you are using a WordPress plugin for social media, dubble check if this plugin is rendering out any og properties conflicting with your code?
  7. Try another WordPress social media plugin and see if it works better.

 

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

2 thoughts on “Open graph / og image not working when using Facebook share

  1. mohsen

    Hi
    Thanks for sharing.
    I have tried the steps mentioned by you, but still getting no describtion and photo whenever I want to share a url or topic from my website.
    Please help me out, I have been searching and writing for forums for a week.

Leave a Reply

Your email address will not be published. Required fields are marked *