Add a Social Sharing Image to Your Website
Whether a square social sharing image renders correctly depends on the link type.
If you're using social media platforms like Facebook to promote your business, you've probably noticed that Facebook and other social media platforms usually display a website link not as an underlined hyperlink but as a clickable picture.
Unfortunately, sometimes, these pictures have sections missing when pasting the URL into a post. If the cut-off areas are part of a logo, the situation becomes very frustrating. However, there is a simple solution for Squarespace website owners.
Site-Wide Social Sharing Image
The site-wide social sharing image you upload to Squarespace must always be square.
Whether a square picture renders correctly depends on the link type. For example, linking to your website from a regular Facebook post displays a rectangle picture and not a square, cutting off the top 25% and bottom 25% of the square image.
The solution is surprisingly simple.
When designing the site-wide social sharing image, avoid placing anything significant in the square's top 25% and bottom 25%.
You can still use a background image that fills the entire square, but if you want to include your logo, place it in the center 50% and leave some space on the left and right of the content. This approach will give you maximum flexibility across all major social media platforms.
Alternate Social Sharing Image
In Squarespace, you can specify an alternate social sharing image for a specific page, blog, blog post, and collection.
Unlike the site-wide social sharing image, which has to be square, the dimensions of an alternate social sharing image are 1200 x 630 pixels.
Upload to Squarespace
To upload your site-wide social sharing image in Squarespace, go to Settings > Website and click on Social Sharing. Then, upload your picture.
If you want to display a different social media image for a specific page, blog, or collection, click the gear icon on the right (edit for blog posts) and then click Social Image. Upload your alternate social sharing image.
Which Image Displays?
Which image Facebook displays depends on whether you have uploaded a URL-specific social sharing image.
Facebook first looks for the alternate social sharing image associated with the URL you specified in your Facebook post. If none is found, Facebook looks for the site-wide social sharing image. If you haven't uploaded one, it defaults to your site logo or uses a random picture.
This hierarchy can be confusing and even unpredictable at times. That's why it is crucial that you validate your uploaded picture with Facebook's Sharing Debugger.
Validate on Facebook
As Facebook cashes the social sharing image once it has been retrieved from your website, don't repeatedly paste your link into a post or comment because Facebook will always take the cached image.
Instead, you must trigger Facebook to crawl or scrape your site again and refresh your picture.
Go to developers.facebook.com/tools and click Sharing Debugger to initiate an immediate update. You have to log in to your Facebook account from your browser.
The Sharing Debugger is a tool that allows you to preview how your shared website link will appear on Facebook.
Enter the exact URL you want to preview and select Scrape Again.
The Facebook Debugger will pull the updated image from your Squarespace website and show it in a small link-preview window. If it renders correctly, you are all set.
