3

I am not a SEO guy, but desperately finding an answer in web without any clue. How can I make this kind of Social media sharing view enter image description here

instead of this

enter image description here

This is what I tried:

<meta property="og:url"                content="hello.xyz" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="Full Stack Developer" />
<meta property="og:description"        content="A full stack web application develoepr who sometimes dines suger in his tea !" />
<meta property="og:image"              content="https://wqfkv1ient.sharedwithexpose.com/assets/images/profile02-og.jpg" />
<meta property="og:site_name"          content="Full Stack Developer">
<meta property="og:locale"             content="en_US">
<meta property="fb:profile_id"         content="xxxxxx">

But it's making the second(wider one) preview. This is maybe something very basic. But I really in need of this preview.

2
  • Which social site? Is this on Facebook? Aug 30 at 18:03
  • Yeah. I am trying it in Facebook sharing debugger. I also need it in Linkedin
    – Osman Rafi
    Aug 30 at 18:06
4

You need a very small image - the sharing thumbnail has to do with the size of the image/aspect ratio and can be very inconsistent.

For Facebook the rule is to use a minimum of 600x315px to display the large image format, so with that we can deduce what will work to get the small version with image will floating left and the description on the right like you want.

To control for various platforms and consistency, I would make og:image less than or equal to 400x400 with a square aspect ratio. The width is probably the most important part tho, so 400x300 is likely safe too.

You can also specify dimensions too (via Open Graph):

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

This specifies the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

Your description should be less than or equal to 200px.

4
  • That's working for facebook! However it's not working for LinkedIn. I made the image dimension 400 x 400.
    – Osman Rafi
    Aug 31 at 15:02
  • linkedin.com/help/linkedin/answer/46687/… It's suggesting the image dimension should be 1200 (w) x 627 (h) pixels. So to be consistent with both linkedin and facebook ?
    – Osman Rafi
    Aug 31 at 15:11
  • That'll give you the larger thumbnail with text on a strip beneath. Try going smaller than 400px wide for Linkedin, if it doesn't work keep decreasing size. @OsmanRafi Aug 31 at 18:19
  • Also try the 400x300 ratio for LinkedIn Aug 31 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.