How to specify Facebook link image using OG Image?

The OG image can be used to specify the image’s URL that shows when someone shares the content on Facebook. In this article, we’re explaining how to specify image & the title displayed for a URL of your website. You will need the admin access to modify the website.

What is an OG URL?

The Open Graph Meta OG URL tag

facebook-link-image

Facebook share image

For the best display on high-resolution images, one should use images which are 1200 by 630 pixel. Image between 600 by 315 px is used to display link page posts with larger images. This can be up to 8MB in size & must not exceed this.

What size should be an OG image?

An ideal image should be of 1200 by 1200 px but Facebook recommends that the dimensions would be between 1200 by 630 pixels. This is an appropriate aspect ratio of 1.91:1.

Meta OG URL Property

This is how to describe the type of object that you’re sharing video, picture, bags or whatever.

Facebook link thumbnail size in News feed

A big link preview appears at 470 by 246 pixels on the desktop but on the other hand, it appears at 560 by 292 pixels only. But whereas if your blog image isn’t big enough then it will appear as 154 by 154 or 90 by 90 pixels. It is the largest size available on Facebook.

How to specify a link title & image for a shared link

The very first image is automatically selected to display along with the link when sharing links on Facebook.

If the image selected is not suitable, the standard method of controlling which image is displayed is by adding the OG: image Meta property to the HTML head but without having a complicated setup this would mean all pages would have the same image.

It is also not suitable for publishers who have access to the page content only but not to the website HTML template. Yet there’s another option that appears to be quite effective. You place a special link element to the content HTML.

Step by Step Instructions:
1. Collect the link details: link URL, link title & image URL.

2. Change the HTML response header for your link URL to include the following Meta tags. Replace the content attributes with the information you have.
meta-property

3. Check that your server is returning the correct metadata to Facebook for sharing by opening the sharing debugger.

4. Type your URL for your page & click debug here. This will give you a page that shows what information the Facebook scraper took from there.

facebook-sharing-debugger