So you’ve built a gorgeous Squarespace website and you want to share it with the world. But wait! The moment you click “Share,” the thumbnail image gets cropped in all the wrong ways. Frustration!!!
Here’s the fix for how to optimize your Social Share Image and ensure that it looks polished and professional across all your platforms.
Watch the Video
Watch the YouTube video for step-by-step wizardry 🪄👩🏻💻
What’s a social share image and why does it matter?
If you have a website, it’s likely you’ll be sharing the link. You might notice that different platforms create cute little thumbnail images when you share your url, but depending on where you’re sharing (Facebook, LinkedIn, text messages, desktop, mobile … I could go on) they all have varying default dimensions and cropping for the image that displays. If your image is not optimized to account for these variations, it can look pretty rough. Let's dive into the solution.
Optimizing your social share image to prevent cropping
Like an unflattering photo that chops off half your head, nobody needs this hassle. Instead of just tossing in any old logo file, it’s crucial to make sure your image is correctly formatted to avoid any unceremonious cropping issues.
First: Optimize the format
use the template below (feel free to screenshot it!)
create your image in this format (and then delete the template)
then follow the steps below to add the image to your site
Social Sharing Template
download me
(Depending on your setup you may have to right click / two-finger click on the image and choose the option to save it.)
Setting up your content
Content Placement: Put your content in the middle and leave the top and bottom blank.
Background Extension: If you have a colorful background or a background image, extend it to the top and bottom to fill the whole square, just don’t put any important text or logo images there, this is the potential crop zone.
Content Design Inspo: Add your title, logo, make it like a mini business card or a simplified home page, as long as you emphasis on simplicity and clarity, you’re good to go.
Don’t forget to hide or delete the template once you’re finished! Save your new image and let’s get back to your site to add it in.
Where to upload your social share image
log into the your Squarespace site as an admin
go to Settings
go to Social Sharing
click the plus (+) sign above “Add a social logo”
choose your image
click Save
Awesome! You nailed it! But … there’s one more step. Sometimes Facebook takes a minute to “notice” the update. You may have done everything right and get super frustrated when you go to share your link with your brand new, perfectly optimized social share image and it still shows your old messy thumbnail. Don’t worry, we’ve got a fix for that, too.
Last Step: Meta’s sharing debugger
Ensure Facebook registers the update
go to developers.facebook.com/tools/debug
enter your url
if it still shows your old image, click Scrape
This step ensures that when you share your link, Facebook displays the updated image immediately.
Boom! Nailed it. Great job!
Now your social share image is optimized and updated for a professional look on every platform. Say goodbye to messy displays and have a blast designing and sharing your Squarespace website.
Get insider access to my exclusive updates
(no spam, I promise)
Your Squarespace Designer
Hey, I’m Kessiah, a Squarespace web designer for happy visionaries of all industries. As an official Squarespace-vetted Expert and Squarespace Circle Member, I work with businesses and brands of all shapes and sizes, including startups, corporations, agencies, nonprofits, and solopreneurs to build Squarespace websites that work for you. If you’d like to talk shop, you can email me at hello@kessiah.com, leave me a note here, or let’s hop on a call here to tell me all about what you have in mind. Let’s build the website of your dreams!
