How to change the image that appears when you share on social?

Design help General
1

Hi there!

I create a site and when I shared on facebook the icon is wicked zoomed in, very ugly. How can I adjust this in settings?

Screen Shot 2020-05-15 at 1.00.37 PM
Screen Shot 2020-05-15 at 1.00.37 PM1032×766 103 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Upload your social graphic to your assets, copy its link and paste it as the meta graphic for each page under page settings.

1 Like
3

Where is the “meta graphic”?

If I am on the social icon, the link block has an option for custom attributes but not to upload an image.

I have the image uploaded to my assets

4

Go to your Pages menu, Hover over the page you want to edit and click the Gear icon. Look for “Open Graphic Image URL” under Open Graph Settings

2 Likes
5

Thanks so much! Sorry I have one more question, how can I add the image in?

I’ve tried

  • copy and pasting the image in
  • dragging it in

There is no import image. Appreciate your help with this!

6

After you upload the image into your Webflow project assets, click the open in new tab icon and grab the URL (or just right-click and choose copy link address) and paste it in the settings for that pages open graph image.

image

1 Like
7

That works! Except, now it’s blurry! I made my logo with the dimensions 1200 x 650 and get a blurry version (attached)

l.

Screen Shot 2020-05-18 at 6.18.29 PM
Screen Shot 2020-05-18 at 6.18.29 PM1854×1724 420 KB

I doubled the size in photoshop and when I uploaded it the image does not show up at all (pasted below) Any help with this would be great, thank you!

Screen Shot 2020-05-18 at 6.19.03 PM
Screen Shot 2020-05-18 at 6.19.03 PM2262×1720 327 KB

This is my project link: Webflow - Snake-It-Away

8

Hmm, did you happen to grab the smaller preview version of the image by chance? If you right click on one of the assets directly within the assets panel you’re only getting access to the small version. Make sure you click on the little gear icon in the upper right (when hovering over an asset) and on that popup you’ll see the icon I included in my last response. Clicking that (or right clicking and copying the link address) will get you the full sized version

1 Like
9

I followed this advice but as per mikeyevin last comment. When I right click on the opened asset, I don’t get icon mentioned. Some how I did get it to work though and carried out a test share and it was fine. But when I tried to share again, it had reverted to the old original image that I was trying to get rid of and now I can’t get it working at all. I changed the titles, description and image, then saved and published, but it’s not working. When I google search my website, it still has the old title and description. Please help!

Screenshot 2020-12-10 at 00.45.09
Screenshot 2020-12-10 at 00.45.091580×1532 163 KB

10

Hey there, I hope you found a solution to this issue.

Having an optimized social share link is crucial to growing your reach. With Webflow, you can change these settings on each individual page, even if it’s a blog template.

To do this, click on the page, navigate to settings and scroll down to ‘Open Graph Image URL’. Since the image needs to be a URL, you can copy this from the assets panel. You mentioned you’re not happy with the size of the image. Webflow requires images to be at least 1200px by 630px and have an aspect ratio of 1.91:1 (at the time of writing this answer). A tool such as Figma can help you quickly change the size.

After doing this, you can test it out using https://socialsharepreview.com/

I hope this helps you

11

Same issue. The original image is still appearing when I share the link after inputting the updated image URL. How can I ensure the new image replaces the old image?

12

I also have the same issue. Any fix?