Change OG Logo image for link previews - Dawn

Store Design
, , ,
1

Hi Shopify Design Community,

We’re facing an issue with how our brand logo appears in mobile link previews (e.g., Facebook, WhatsApp) for our Shopify store. URL: https://factian.co.uk/

The Issue:

When we share our store’s link, the logo appears with white borders on either side, even though we’ve ensured that the Open Graph (OG) image follows the correct aspect ratio of 1200x630 pixels (1.91:1), which should ideally fit the preview box perfectly. We need the image to fill the full width and eliminate the white borders.

Steps We’ve Taken:1. Image Resizing:

  • We created and uploaded a new logo image with the correct dimensions of 1200x630 pixels, centered on a black background to ensure proper alignment in link previews.
  • Verified the image file is indeed 1200x630 pixels.

  1. Updated Open Graph Meta Tags:

    • Modified our theme.liquid file to include the correct Open Graph tags:

      html

  2. Cleared Cache:

    • We used Facebook’s Sharing Debugger to scrape the URL multiple times, ensuring the new image and metadata are fetched.

See image below for what I mean:

factianuk_0-1729855590624.png
factianuk_0-1729855590624.png1118×746 55.4 KB

How can I ensure that the logo takes up the whole space via these shared links?

Thanks

2

Hello, thanks for your help. However I have already tried using ChatGPT and other tools to debug and that didn’t work - the furthest I got was to edit the OG Meta tags which has helped add some text/description to the link however the image is still not rendering as expected.

The response you provided didn’t seem to help/ do anything for the link image.

3

yes please, is there any further info you need?