How to fix wrong image in facebook share

It's a known fact that many of the users and bloggers are finding it difficult to share their website content on Facebook. The image isn't shown until the Facebook crawler sees it and updates it. So the chances of sharing the post without image or with wrong image are very often high for the first share.

How Facebook chooses your post images

When you publish a link or share a post on Facebook, it scans the sites header for Open Graph tags with information for the posts image. All posts should have the following basic Open Graph tags for proper sharing otherwise Facebook will select random images for your website:

	
        <meta property="og:url"           content="yourPostURL" />
        <meta property="og:type"          content="article" />
        <meta property="og:title"         content="titleOfYourPost" />
        <meta property="og:description"   content="descriptionOfYourPost" />
        <meta property="og:image"         content="fullPathOfyourPostWithHTTP://" />
        <meta property="og:image:width"   content="450"/>
        <meta property="og:image:height"  content="298"/>
  	

Facebook's official advice is to use the Open Graph Debugger to pre-cache the images. Follow the steps given below to pre-cache your images with Open Graph Debugger.

  • Open Facebook debugger tool
  • Enter the URL of your post
  • Click debug and scroll down
  • There are two places where it should show your new image if you did it right
  • The first says: "Based on the raw tags, we constructed the following Open Graph properties"
  • The second says: "When shared, this is what will be included"
  • Repeat step three until you get the correct image

We have to check each post one by one, to ensure the correct images and text are shown.

Recommended Image size for sharing :

  • The minimum-size is 200 x 200px, everything smaller is ignored and the next big image is used instead
  • For big image effect: use picture of 1200 x 630px or bigger for high resolution devices or at least 600 x 315px
  • To avoid unwanted cropping of the image, try a ratio close to 1.91:1

Make your Facebook page visible to public :

Facebook will place your apps into development mode to test your apps and when your app is in development mode, you can't call any API calls on behalf of users who cannot see your app. So you have to make your page visible to the public for the sharing of your website contents. So do the following steps to make your page visible to public.

  • Login to Facebook Developer
  • Select your app from right top corner
  • Go to settings
  • In basic settings fill Contact Email with your email id
  • Click on save changes

Disable apache mod-security in . htaccess

Sometimes when we use Facebook debugger toolto debug a URL, we get the error message :" Error Parsing URL: Error parsing input URL, no data was scraped ". This is because the Apache's default mod-security rule blocks all Facebook connection. This security rule watches a certain connection header that many spammers use and prevents connection. It turns out that Facebook also uses this header. However, the solution is to disable mod-security rule to allow Facebook connection. Add the following code to .htaccess file to disable mod-security rule.

	
        <IfModule mod_security.c>
            SecFilterEngine Off
            SecFilterScanPOST Off
        <IfModule>
  	

Facebook Open Graph tag reference :-

These are the most basic meta tags that you should use for all content types:

TagDescription
The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters. Likes and Shares for this URL will aggregate at this URL. For example, mobile domain URLs should point to the desktop version of the URL as the canonical URL to aggregate Likes and Shares across different versions of the page.
The title of your article without any branding such as your site name.
A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.
The name of your website (such as waytosmart, not waytosmart.com).
The URL of the image that appears when someone shares the content to Facebook.
In order to use Facebook Domain Insights you must add the app ID to your page. Domain Insights lets you view analytics for traffic to your site from Facebook. Find the app ID in your App Dashboard.

You may also want to add two additional tags to improve distribution of your content and more engagement:

TagDescription
The type of media of your content. This tag impacts how your content shows up in News Feed. If you don't specify a type,the default is website. Each URL should be a single object, so multiple og:type values are not possible. Find the full list of object types in facebook Object Types Reference
The locale of the resource. Defaults to en_US. You can also use og:locale:alternateif you have other available language translations available.

You can add additional markup if your content includes audio, video, or location information.

TagDescription
The URL for the video. If you want the video to play in-line in News Feed, you should use the https:// URL if possible.
Equivalent to og:video
Secure URL for the video. Include this even if you set the secure URL inog:video.
MIME type of the video. Either application/x-shockwave-flash orvideo/mp4.
Width of video in pixels. This property is required for videos.
Height of video in pixels. This property is required for videos.
Specify an image for a high quality preview in News Feed

Use this set of properties for content that contains more than one image. See Sharing Best Practices for guidance on how best to use og:image.

TagDescription
URL for the image. To update an image after it's been published, use a new URL for the new image. Images are cached based on the URL and won't be updated unless the URL changes.
Equivalent to og:image
https:// URL for the image
MIME type of the image. One of image/jpeg, image/gif or image/png
Width of image in pixels. Specify height and width for your image to ensure that the image loads properly the first time it's shared.
Height of image in pixels. Specify height and width for your image to ensure that the image loads properly the first time it's shared.