Getting the right image to show up for your website in the Facebook preview
One of the biggest questions that gets asked over and over again in Squarespace forums is "How do I get my Facebook preview to look right??"
Perhaps you've just created your new Squarespace website. Maybe you've redesigned your brand and want a new logo to show up when you post links to your site on Facebook. Or maybe you just want your latest blog post to show up with a photo, any photo at all, when you link it.
This article will walk you through all you need to know in order to have total control over your Facebook preview! (And while the first part, making sure your website settings are correct, is specific to Squarespace, the second part, force-refreshing your FB preview, is universally applicable!)
STEP 1: Fill in the appropriate sections on your site
Make sure you've got an image and description text all set up on your website. On Squarespace sites, Facebook and other social media sites will pull the image and description text from a set list of fields: usually the Social Sharing Logo, but for specific pages (like blog posts, products, or events) from that page's thumbnail image. (See the list in this Squarespace support article for more details on what gets pulled when.)
So it's very important that you upload a Social Sharing Logo! Head over to Design > Logo & Title on your site's backend, and scroll down to the Social Sharing Logo section. Upload the image that you would like to have as the default image shared when you post your link on FB (note: the current recommendation is for this image to be sized at 200x200px).
While you're in this section, go ahead and fill out the Site Title / Tagline section at the top, if you haven't already. The site title is a key place to add keywords for SEO purposes, and the tagline is shown in Google search snippets as well. Then scroll up and click SAVE.
For blog posts, be sure to upload a thumbnail image for the post. While in the edit screen for the blog post, click on the Options tab (the second one over), and upload a thumbnail image. This thumbnail will be pulled for social sharing, and will also be used in your blog excerpts and summary blocks (if you're using either in your blog setup).
Once you're sure that you've got your images and text ready on your website, it's time to get everything set up properly on Facebook's end!
STEP 2: Force-refresh your Facebook preview
Facebook has provided a very nifty debugger tool, which can do all kinds of in-depth things. You do not need to be a developer or have any coding knowledge whatsoever to make it work for you for these limited purposes!
Head over to https://developers.facebook.com/tools/debug/ and enter your URL in the box provided. You'll have to do this for every new page or post you create, so remember to enter the specific URL for the page in question, not just your top-level website address. Then click Debug.
The next screen will have a whole host of information on what FB sees when you post that URL. It's all relevant to this question, but none of it needs to be understood at this point. Simply click "Scrape Again" (in some older versions of this debugger, it's "Fetch New Scrape Information") to make Facebook refresh the preview it has on deck for your URL.
And you should be set! Your updated image and text should now be seen in the Link Preview section of the screen.
Sometimes there are errors that result from any number of possible issues. The debugger tool will list those errors for you, and often doing a quick Google search of the errors listed will help you figure out how to fix them. But in my experience, 99.999% of the time, this simple trick is enough to get everything linked and showing perfectly on social media!
As always, feel free to contact me with any further questions!