CODEWITHSUNDEEP
htmlfacebookfacebook-opengraph
dhanushka
dhanushka

Reputation: 392

Define open graph image sizes for facebook

I search through the internet to find proper solution for this problem. But I didn't found one.

To share a web page in facebook I used open graph as follows same as mention in facebook developer site.

    <meta name="description" content="Description is here" />
        <meta property="og:image" content="http://www.example.com/images/11.png" />
        <meta name="keywords" content="Business Intelligence, Big Data, Data driven" />
        <meta name="developer" content="companyName">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Image size of this the png file is 796x417 px

This code properly show in correct ratio of 1.91:1 in facebook post sharing in facebook wall and messenger applications.

But in facebook inbox it show in 1:1 ratio as follows(last message). This only show cropped image, therefore some characters are missing

enter image description here

Is there any way(open graph) to view that image in specific ratio for facebook inbox and facebook wall share.

As an example can I use two different images for share link in wall post with 1.91:1 ratio and another image with 1:1 ratio for inbox.

Upvotes: 0

Views: 3773

Answers (1)

Dinca Adrian
Dinca Adrian

Reputation: 1230

You should follow closely the OpenGraph specs in defining image/s and their properties : http://ogp.me/#array . So defined a preferred image and then define the height and with, then define another as a fallback and so on. Give it a try and let us know what you achieved. Maybe you can control the aspect ratio by giving the images some base heights/widths.

<meta property="og:image" content="http://www.example.com/images/11.png" />
<meta property="og:image:width" content="796" />
<meta property="og:image:height" content="417" />
<meta property="og:image" content="http://www.example.com/images/12.png" />

Upvotes: 4

Related Questions