Squarespace Special Banners and SEO Meta Description

Grab a coffee and let’s have a chat.

I may not always have all the technical answers but you can rest assured that I will do my best to always find a solution! Grab a cup of coffee and let me share with you how I resolved this issue after first being snubbed off by Squarespace Support.

Today I want to share a challenge I came across on my most recent project. I used the Hayden template and its banner images, and as is customary with most templates that support large banner images I simply uploaded a thumbnail to the page media section and formatted the text overlay as per the instructions on this Squarespace help page. You will see that the help page refers to Bedford but this applies to any template in this family, i.e. Hayden, Anya and Bryant. 

In my client’s case we only wanted to show a tagline on the homepage banner so I added the following in the page description box, using empty line breaks before and after the text to make the banner image larger:

Banner description box

So far so good. 

However. When the time came to run my client’s site through the Facebook debugger - something I always do at the end of a project to ensure a website looks good when shared on Facebook - I noticed that Facebook picked up the tagline “hearth. earth. herbs. words.” as the main description under the title. Which is not what I wanted. 

Facebook Share - Incorrect

This is where things can get a bit confusing. 

Facebook uses the so-called og:description meta tag to populate the description under the title and Squarespace converts your text from the page description box into this meta tag and this text is also used for SEO purposes. Which is great, unless ... you are using page banners and utilizing the page description box for your banner text overlays which are typically a tagline or the page title, rather than a full page description. 

So how do I get it to show the proper description?

I tried injecting the following code into the page header, this is the ‘old-fashioned’ way of adding meta tags:

<meta name="description" content="Motherhood, magic and the
pursuit of all things herbal. Wisdom from an herbsteading, 
unschooling, heretical, poetical, mystical life.">

Alas, it made no difference and was not picked up by Facebook which still showed the tagline from the page description box.

So I contacted Squarespace Support. 

Who, as is well known, I love. Alas, every now and then I get someone who brushes me off by deflecting the issue back to the peripheral service (in this case Facebook) and advising me that Squarespace does not give specific 3rd party, coding or SEO advice. Which is fair enough and in some cases appropriate. However, in this case I felt that there was an issue with how Squarespace handled the text in the page description box, in my view the programmers hadn’t thought this one all the way through with regards to the peripheral environment and also how users would apply it. After all, if you are using the description box to add a title or tagline then this is NOT the same as a description. 

So I pushed back and asked for more help. I am nothing if I am not tenacious! It took two attempts and then - thankfully - my support ticket was picked up by someone who was able to point me in the direction of a solution! Thank you! I implemented it, tweaked a bit of CSS code and voila, the Facebook share now looks like this:

Facebook Share - Correct

How did I do this?

I inserted a slideshow gallery block with one photo at the top of the page. This is a special feature in the Bedford family templates where you can show a slideshow in the banner. I have not used this feature before which is why this did not occur to me and why I am so grateful to the customer support agent who used creative thinking to find a solution for my issue. 

Here are my exact steps:

  • I added a slideshow gallery block at the very top of my page and imported my banner photo into it. This is also explained on this help page.
  • Then I went into the photo description and added my tagline in the description box. The same formatting rules apply here as they do for the page description box.
  • Save and refresh and voila - your gallery is now your banner!
Homepage before applying CSS

Hold your horses though. One more minor snag. Which I only noticed because the tagline “hearth. earth. herbs. words.” is on the longer side and the last word wrapped into the next line. Which of course I did not want. I realized that the description container for the gallery was slightly smaller than the original banner container and the only way around that was by adding a bit of custom CSS:

/* Fix width of gallery banner description */
.has-promoted-gallery #promotedGalleryWrapper 
.sqs-gallery-block-slideshow .meta 
.meta-description p { width: 100% !important; }

This did the trick and now everything is perfect!

Homepage after applying CSS

Many people don’t really care how something looks when it is shared on Facebook but for me this is one of those little details that matters. This is your digital calling card and I think it should not only look great but also be informative. Plus, the description is also displayed in search engine results and I want those to show the full description under the page title rather than a tagline or short title.

Questions? Let me know in the comment and I will try and answer. But please note that I cannot give detailed design or coding advice. If you require more in-depth help you can always hire me. Thank you for understanding!


Empower yourself & your business!

Squarespace 101

My easy step-by-step tutorials and expert support in our private Facebook group will empower you to launch your own professional website without the cost of hiring a web designer!

→ Learn More

Squarespace Classroom Classic

Save 3rd party fees and design a beautiful e-course by hosting it on your own Squarespace website! With this class you will have the structure up and running in 2-3 hours.

→ Learn More