Facebook Preview and Squarespace
I'm sorry to say the solution described in this post no longer works. Facebook has changed their parsing behavior, and later Open Graph tags no longer overwrite earlier ones. That's a huge disappointment, as this has been one of the most-viewed posts in my blog.
Squarespace does however, now provide functionality by which to specify a so-called "social sharing logo" for your website. Read about that in their help article on Adding a Social Sharing Logo. In addition, the technique in this post might be useful if you are adding Open Graph that Squarespace has not already provide on your behalf.
-- Jonathan Gennick, February 1, 2015
Facebook and the exposure it can bring are too important to ignore when creating web content. Whether writing a blog post or just putting up a page on your favorite topic, you should be thinking about how it will look when someone posts the URL into a Facebook status update.
Squarespace gives easy control over how content is presented to your Facebook audience. Most of the time Squarespace's built-in support is adequate, but there are some limits and caveats. Sometimes it is helpful to hack things a bit and go your own way.
The Normal Behavior
Figure 1 illustrates the normal behavior. You are seeing the URL of my post on Effective Listing being pasted into a status update on my Facebook wall. In return, Facebook displays a thumbnail image, a title for my post, and a short description of its content. The callouts in the figure correlate Facebook's preview elements to various data fields that I filled in while creating the post through Squarespace.
Squarespace allows you to specify a thumbnail image, title, and excerpt for any page or blog post that you create. Figure 2 shows the two tabs from which to specify those items. The title displayed in Facebook comes from the title you give on the Squarespace Item tab. The thumbnail and excerpt are taken from the Options tab.
The behavior illustrated in Figures 1 and 2 is normative. Squarespace is designed to work in the way illustrated, and you'll have the most success and least stress if you are not always kicking against how your chosen hosting and web platform is designed to operate.
My strong recommendation is to go with the normal behavior whenever possible. Try to write titles and descriptions that work equally well in Facebook's preview and for your own site when viewed through a browser. Specify thumbnail images with Facebook in mind. Fit in when you can. Nevertheless, it's helpful to know what's happening under the hood and deploy an occasional hack.
The main problem you're likely to encounter is that Squarespace uses metadata for its own purposes too. For example, it's common for Squarespace templates to display the thumbnail image at the top of an HTML page. It is not necessarily the case that you want the same image to be also used by Facebook.
Figure 3 shows an example of what can go wrong when metadata is applied to more than one end. You see the URL to my home page being pasted into a Facebook status update. The word "Welcome" hardly seems a good title to display, and the book-cover image confuses the message: Is the post about SQL Server? Or is it about me and my site? The cover implies one, and the description says the other. Metadata choices driven by how I want the page to appear in a browser window conflict with how I want that page to be presented in Facebook.
My home page purposely has no thumbnail image. You can see my home page in Figure 4. There's no thumbnail, because I don't want an image to display in the background of the page heading when you view the page in a browser. Yet I do display some book-cover images on my home page, and it is the first of those that Facebook picks up on whenever my URL is pasted into a status update (as shown in Figure 3).
The word "Welcome" taken as the page title by Facebook in Figure 3 is indeed the title I've given the page in Figure 4. Formerly the page was part of my Main Navigation in Squarespace. The word "Welcome" is the link I had wanted to be displayed in the site menu.
Multiple Ends: Squarespace's overloading of metadata elements such as page title is a common reason for wanting a good hack by which to specify Facebook's behavior. Squarespace uses the page title as the link name when a page is made part of your site's navigation. Some Squarespace templates display a page's title as part of the header at the top of the page when displayed in a browser. And the page title is fed to Facebook when you post your page's URL. It is not always easy or possible to come up with a single value that works equally well in all three settings.
Fortunately, my home page is what Squarespace terms as a page, and not a blog post. I can exert control over what Facebook displays by adding some tags to my page's HTML <head> element. These will be the same tags that Squarespace injects, but mine will come after and take precedence.
View my home page from Google's Chrome browser on a PC, and you can press CTRL-U to see the page's HTML source code. (From Internet Explorer you can right-click on the page and select View source from the flyout menu). Scan the source and just a short distance from the top you will find the following meta tags:
<meta property="og:site_name" content="Johnny-G Incorporated"/>
<meta property="og:title" content="Welcome"/>
<meta itemprop="name" content="Welcome"/>
<meta property="og:url" content="http://gennick.com"/>
<meta itemprop="url" content="http://gennick.com"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="Personal website of Jonathan Gennick -- Oracle Database expert and author, computer-book editor, and mountain-bike enthusiast from the City of Munising in Michigan's Upper Peninsula."/>
<meta itemprop="description" content="Personal website of Jonathan Gennick -- Oracle Database expert and author, computer-book editor, and mountain-bike enthusiast from the City of Munising in Michigan's Upper Peninsula."/>
The tags having properties beginning og: are Open Graph meta tags. Open Graph is a Facebook API, and it is those tags that specify to Facebook what to display when a page's URL is pasted into a status update. The relevant tags in this example are og:title and og:description. There would also be an og:image tag had I specified a thumbnail image to Squarespace.
Let's begin with the image. I've not specified a thumbnail image for my home page, so Facebook simply picks the first image it finds, which is of a book cover. (You see that behavior earlier in Figure 3). I'd much rather Facebook show the image currently on my About page. That image is more evocative of who I am as a person. Navigating to my About page, I right-click on the image and select Copy image URL as shown in Figure 5.
Following is the image's URL, which you can see for yourself by copying it and pasting it into Notepad. The long string of characters is typical for an image hosted on Squarespace.
Notice in particular how the URL ends with format=1000w. The 1000w refers to the image width, and you may want to reduce that value for Facebook. Squarespace's normal behavior is to serve images to Facebook that are 500 pixels wide.
You can also paste the link into your browser to see the image there. While you're doing that, change format=1000w to be format=500w. Then refresh the browser page and observe the effect. Verify that the height appears to be at least 200 pixels. Facebook requires a minimum of 200 pixels in each dimension -- height and width.
Having verified that I can resize to 500 pixels while maintaining 200 or more pixels in height, I now have enough information to create the following Open Graph tags:
content="Jonathan Gennick's Home on the Web"/>
The og:title tag overrides my "Welcome" title, and provides something more on-message for a Facebook post.
The og:image tag specifies the image for Facebook to display as a thumbnail when I or anyone else posts my home page's URL into a Facebook status update. I've specified format=500w at the end of the URL to give a width of 500 pixels. (Facebook will further resize the image).
I have the option of specifying an og:description tag. However, I'm happy with the description that Squarespace currently supplies. I will let that description stand rather than override it.
Reasoning: My home page is under the Not Linked section in site's Configuration page, so I am free to change the page's title in Squarespace instead of overriding that title through a tag. I choose to override however, because I want the option someday to make the page part of the Main Navigation. By specifying an og:title tag of my own, I can keep the page named "Welcome" in Squarespace while presenting a different title to Facebook.
Now all that's needed is to have Squarespace inject my new tags into my home page's HTML <head> element. I go to my site's Configuration page, select my Welcome page, and click the Index Settings button to open the dialog shown in Figure 6. Then I click the Advanced tab and paste my override tags into the Page Header Code Injection text box. Figure 6 shows the final result before I click the Save button.
Button Titles: My home page happens to be an index page in the Marquee template. If your home page is a regular page, then the button you'll click to open the dialog will be titled Page Settings. You might also encounter Gallery Settings, Events Settings, and similarly named buttons. While the button name may vary, the process is otherwise identical no matter the page type.
You can follow the same process of injecting Open Graph tags into the HTML page header for any Squarespace page. By doing so, you can override the tags provided by Squarespace and customize the metadata provided to Facebook. Be sure to read the next section though. You'll probably need to do some troubleshooting.
Blog Posts: The process I've described is useless for blog posts. Individual blog posts are not considered as pages, and you are unable to specify HTML <head> element on a per-post basis. Your only option for a blog post is to work within the confines of the normal behavior described earlier.
Figure 7 shows the new results from pasting my home page's URL into Facebook after injecting those Open Graph tags to override the ones supplied by Squarespace. The results bear an annoying resemblance to those in Figure 3. In fact, nothing has changed, and that lack of change can be frustrating to the uninitiated.
Facebook caches metadata for the sake of efficiency. Facebook reads a page the first time you paste the URL into a status update, and parses the page to determine the title, summary text, and thumbnail image to display. Whatever Facebook finds the first time is cached for much faster access on subsequent lookups.
Caching makes it a common problem for developers to change their page only to not see their changes reflected immediately in what Facebook displays. The solution is to clear the cache one time after you have finalized your page. Do that using the Facebook Debugger. The debugger can also clue you in to other problems that might be occurring.
Figure 8 shows the debugger page. I've just pasted in the URL http://gennick.com, and I've hit the Debug button. Debugging a page has the immediate result of clearing the cache. Facebook will access the page afresh next time you paste its URL into a status update on your wall, ensuring that your most recent updates take effect. In my case, the results in Figure 8 point out a problem unrelated to caching that I had not expected too see.
The debugger displays two warning messages. The second message is innocuous. It is a Parser Mismatched Metadata message, and merely results from my specifying a second set of Open Graph tags. I did that on purpose, of course. The second set of tags will take precedence. There's nothing to worry about, and you can ignore such messages when using the same technique.
The first message is one I cannot ignore. It is an og:image should be larger message, and the long version reads:
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://static.squarespace.com/static/524b7aaae4b067caf1ceac16/t/529552cee4b08e2d64f3e8be/1385517796659/9781430242000.JPG' will be used instead.
Some investigation turned up a typo. I had mistyped 500w as 50w. My image fed to Facebook didn't meet the minimum 200 x 200 pixel requirement. I've already cleared the Facebook cache, so I will go back and quickly update my injected header code (see Figure 6) to specify 500w as I had intended. Having made that change, I paste my URL once again into Facebook and get the desired result that you see in Figure 9.
Facebook is now showing my desired thumbnail image and page title. The description I was happy with from the beginning. All three elements present a unified message to the viewer: "Here is Jonathan and his home on the web."
Application to Google Plus
Squarespace feeds the same metadata to Google Plus as to Facebook. It does so through a set of itemprop tags that correspond to the Open Graph tags used by Facebook. Open Graph is a Facebook standard. The itemprop tags are HTML Microdata as defined by the World Wide Web Consortium. Following is the correspondence between the two sets of tags:
<meta property="og:title" ...
<meta property="og:description" ...
<meta property="og:image" ...
<meta itemprop="name" ...
<meta itemprop="description" ...
<meta itemprop="image" ...
The primary problem with Google Plus, and it's seemingly an insurmountable one, is that Google Plus takes the first set of itemprop tags and ignores any subsequent occurrences. You can inject a second set of itemprop tags, but they won't override the first set; they'll be ignored. You're left with the normal behavior described early in this article as your only option for affecting what Google Plus displays in response to a link that you post.
Open Graph: An interesting and possibly useful tidbit is that Google Plus will draw from an Open Graph tag in the absence of the corresponding itemprop tag. My addition of an og:image tag to specify the preview image for my home page on Facebook works for Google Plus as well. That's because I specified no thumbnail in Squarespace for the page, and thus Squarespace did not inject an itemprop="image" tag. My title change on the other hand, made by injecting an og:title tag, is ignored by Google Plus. The effect is that posting my home page URL to Google Plus now shows the correct image, but not the desired title.
Google does offer a debugger called the Structured Data Testing Tool. You'll be able to see values from the various itemprop tags. However, the tool does not clear Google's cache. There's no mechanism by which to force Google Plus to immediately reread a page after you've changed that page's metadata.
Google Plus Cache: My testing indicates that a cache does exist, and that Google's Structured Data Testing Tool does not clear it.
Your only viable option for influencing Google Plus preview is to work within the normal behavior supported by Squarespace. There are no hacks by which to override the values Squarespace injects into your pages.
I've said it before, but just want to reiterate: There is nothing you can do to override the preview metadata for blog posts. Squarespace provides no mechanism by which to inject tags into the HTML <head> element of individual blog posts. You are limited to the normal behavior described earlier.
I remain of the strong opinion that it's best to work within the normal behavior supported by Squarespace:
- Create titles for pages and blog posts that can work reasonably well in all settings, including in Facebook previews.
- Craft excerpts for each page and post. Write them to provide enough context for Facebook as well as your own site.
- Specify thumbnail images from Squarespace whenever possible. Avoid the need to override as described in this article.
It's difficult sometimes to find phrasing, or an image, to work in all possible settings. Make the effort whenever you can. With blog posts you have no other choice. With other page types you can exert control over the Facebook preview by injecting Open Graph tags into the HTML <head> element as shown earlier. And no matter what, always consider how your content will appear when links to it are posted in Facebook and other social media.
Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.
View the complete description for more details.