0

When using og:image og:image:width and og:image:height tags, is there a way to force the small square without sending a smaller image? It seems its all depended on the image size but I don't want to create small images for all our customers just for this special case.

Example og tags

<meta property="og:site_name" content="Website" />
<meta property="og:url" content="https://update-meta-og-image-size.website.com/26" />
<meta property="og:title" content="Bryan's Test Podcast" />
<meta property="og:description" content="test" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://update-meta-og-image-size.website.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlOIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7d72c666e0629761997a934a6e85768855d51a78/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2d0eVpYTnBlbVZKSWcwMk1EQjROakF3WGdZN0JsUTZER2R5WVhacGRIbEpJZ3RqWlc1MFpYSUdPd1pVT2d0bGVIUmxiblJKSWd3Mk1EQjROakF3QmpzR1ZEb01jWFZoYkdsMGVXbFZPZzlqYjJ4dmNuTndZV05sU1NJSmMxSkhRZ1k3QmxRPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--25250704e399b7eace9a4c2dfeb0ef445eea7c20/canva-design.jpeg" />
<meta property="og:image:width" content="250" />
<meta property="og:image:height" content="250" />
<meta property="fb:app_id" content="1234567890" />

Incorrect larger sharing

enter image description here

The correct image size that I want to show even if the image is larger than 250x250. I would like to use 600x600. enter image description here

John Pollard
  • 3,729
  • 3
  • 24
  • 50

1 Answers1

1

The og:image:width and og:image:height tags are not used to specify how small or large the image will appear in a preview. The card display is entirely up to the platform you're sharing your link on.

See Facebook's documentation:

Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

It's just to tell the crawler what the dimension are so the preview renders faster. It has no effect on the actual size of the image within the preview.

If you want the preview to display a smaller image, you'll have to provide an image with the respective dimensions.

alexsch
  • 21
  • 2