An in-depth guide on optimizing your Rich Pins in Squarespace

Setting up rich pins in Squarespace can be a little bit confusing since there's not much information about how it works.

And I'm not talking about how to enable them in Squarespace, although that info is a little vague as well, but on WHERE the info pulled from Pinterest is coming from...

So, if you're curious about this and want to know which information to optimize in your pinnable blog content, keep reading!

 

Before Rich Pins

If you don't have rich pins enabled on your site, your pinned content probably looks similar to this when pinned from the main blog page:

 What a Pinterest pin without rich pins looks like when pinned from the main page

And like this when pinned from inside a blog post:

 What a Pinterest pin looks like without rich pins when pinned from Squarespace

It's good, but it could certainly offer more information (btw, don't get caught up on where that alt tag came from. We'll be looking into it later in this post!)

 

Before jumping into how to enable your rich pins in Squarespace there's two things you need to know:

  1. You can't apply for Pinterest Rich Pins with a trial site since that's technically locking your site with a password. So if you're getting this message, that might be the issue:

    "We were unable to retrieve any data from your URL because the server responded with a 403 Forbidden error"

  2. Squarespace has most of the meta tags you require all set up to enable article rich pins, and it has some designated fields where you can change the info pulled from Pinterest. We'll be covering those in a bit.

 

I'm telling you this because Pinterest instructions to setup Rich Pins are meant for other platforms (or sites from scratch) that require you manually copy/pasting all meta tags; that's not necessary here.

However, I will be showing you the benefits of using one additional meta tag that isn't natively provided by Squarespace.

 

With that information out of the way, let's take a look at which meta tags are required to setup your rich pins!

 

Understanding Rich Pins meta tags

Go ahead and jump into the Getting Started section of the Pinterest Developers page, and under Setup choose the kind of Rich Pins you want to go for.

I'll be showing you how to set them up for the Article type, so you can click on that one to follow along.

 

You'll see you have two different format options to add the meta tags to your site.

If we end up adding any, we'll be using the Open Graph format since that way we can easily insert the tags inside our blog page header injection section, here:

 Adding code inside the blog page header in Squarespace

 

Even when Pinterest requires only three of its meta tags: og:type, og:title and og:description; they have a larger example on their page that displays other useful tags we can add to our content:

<meta property="og:type" content="article" />
<meta property="og:title" content="Exploring Kyoto's Sagano Bamboo Forest - CNN.com" />
<meta property="og:description" content="A constant inclusion on lists of "forests to see before you die," here's how to see the real thing." />
<meta property="og:url" content="http://www.cnn.com/2014/08/11/travel/sagano-bamboo-forest/" /> 
<meta property="og:site_name" content="CNN.com" />
<meta property="article:published_time" content="2014-08-12T00:01:56+00:00" />
<meta property="article:author" content="CNN Karla Cripps" />

 

"Ok, but what do they do?"

Meta tags are snippets of text meant to offer additional information about your website pages to search engines; info that will also be displayed on your rich pins later on.

If you were using a platform other than Squarespace, you would probably need to copy the code, paste it on your site and then change the content value inside each one (as explained in Pinterest's page).

However, as I mentioned, Squarespace has the meta tag area mostly covered, so we're pretty much ready to go.

 

If you want to, you can check out which tags are already there and what info they're providing by opening your blog page (or blog post page) – while logged out from Squarespace – making a right-click anywhere on the screen and selecting "View Page Source".

 View page source option in Chrome

 

By doing that you'll be able to see the backbone of the page you're in, and near the top of the code you'll find something like this:

<meta property="og:site_name" content="Full Bloom"/>
<meta property="og:title" content="Blog"/>
<meta property="og:url" content="https://www.fullbloomflorists.com/blog/"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="This is the blog's main page description under page settings"/> 

 

Does it look familiar? It should, because you just saw the same meta tags in Pinterest's example! Only in a different order.

What's important to notice here is that we have og:type, og:title and og:description present, which are the key meta tags required by Pinterest to enable Rich Pins.

So how about we do that?

 

Enabling Rich Pins in Squarespace

With those three tags in place we can go ahead and use the Pinterest validator or debugger.

This process is pretty straight forward. All you need to do is copy the URL of ONE of your published blog posts, paste it there, and click Validate.

 Validating a url for rich pins

 

You should then see this message and some meta tag information pulled from your page:

 Using the Rich Pins Validator

Leave the HTML Tags selected and click on "Apply Now".

In a few minutes you'll be getting an email with your approval and we'll be ready to pin!

 

Changing the info inside Squarespace tags for Rich Pins

In this section I want to go one by one showing you WHERE to change the info that each of Squarespace's meta tags is sending Pinterest, this way you'll know what to edit and how to inject your keywords in the right places.

 

og:site_name

<meta property="og:site_name" content="Full Bloom"/>

This first meta tag refers to the name of your website.

To alter the content value in Squarespace, you can go into Design > Logo & Title and edit your Site's Title there.

Easy peasy!

 

og:title

<meta property="og:title" content="Blog"/>

This is your page title. The name that appears atop of your browser window, so it changes from page to page and post to post.

To change your blog page name, you can go into its page settings and alter the Page Title field:

 Changing the page title of a blog page in Squarespace

 

And of course for your blog posts you can simply change their title.

 

og:url

<meta property="og:url" content="https://www.fullbloomflorists.com/blog/"/>

As for the URL, this meta tag helps set what's called a canonical URL, which simply put by Kissmetrics means "...that you define one page that all your shares will go to. It’s useful if you happen to have more than one URL for the same content (for example, using parameters)" such as AMP. 

I won't get into this since Google can give you a better explanation on it here, plus according to this answer from Squarespace's CEO "Squarespace generates proper rel="canonical" tags that ensure search engines are picking up the proper versions of your pages when content exists at more than one URL.".

So, we don't have to worry about this tag, just make sure that your post URLs have the right keywords for SEO purposes.

 Editing blog posts URLs in Squarespace for SEO and Rich Pins

 

og:description

<meta property="og:description" content="This is the blog's main page description under page settings"/>

Next, we have the description we give to our page or blog post.

To change the description of our blog page we can go into its page settings again, and edit the description field.

 Editing the page description of a blog page in Squarespace

 

And to change the description for our blog posts, we only need to fill in the excerpt field under the post settings.

 Edit a blog post excerpt text in Squarespace

 

og:type

This one refers to the type of content you're sharing.

If we look into the Page Source of one of the individual blog posts pages we'll see:

<meta property="og:type" content="article" />

 

But in the case of the main blog Page Source info I showed you before, you'll notice that the 7th line says:

<meta property="og:type" content="website" />

 

The thing is that Pinterest has 4 types of Rich Pins (by Jan 2018): article, recipe, app and product pins.

Meaning that we need our pin type to match one of those in order for Pinterest to turn it into a Rich Pin, otherwise it will continue to pin the content from the page as a regular pin.

 

We can quickly fix that by going into the page settings of our blog page, into the Advanced tab and pasting in the new meta tag with the correct og:type content value:

<meta property="og:type" content="article" /> 
 Adding rich pin meta tags to Squarespace blog

 

That's it!

Now if we go into the Validator again, we'll be able to rescrape the data so Pinterest knows we changed something and updates it quickly.

 

To do this, simply paste in the url of your main blog page and click Validate.

 Rescraping info in Pinterest validator

 

Then, click on the black button that says "Fetch New Scrape Information"

 Rescraping Squarespace blog rich pins information

 

And now, we have rich pins for our main blog page as well!

 

Changing your Rich Pins description

Whenever you pin a Rich Pin you'll notice you have more than one description, so let's take a look at where Pinterest its taking that additional information from your Squarespace blog post.

If we pin from our Rich Pin-enabled blog posts, we get a pin that looks like this:

 Preview of a Rich Pin

Where the blog post title is well... the blog post title.

The excerpt from the blog post is what appears as the first description.

And then the alt text of your image shows up as a secondary description.

 

This alt text can be edited by writing the caption right below the image you're uploading, here:

 Adding alt text to an image block in Squarespace for SEO and Rich Pins purposes

 

However, if you DON'T have that alt text set for the image you're pinning, this is what you get:

 Pinning a rich pin without alt text

 

The same blog post title, the same blog excerpt, BUT Pinterest displays your image's optional filename instead of your image alt text.

To edit it, you can go into your image block and add the corresponding text inside the field below it:

 Adding an optional image filename in Squarespace

 

Adding an author to your Rich Pins

I mentioned at the beginning of this post that I was going to show you one additional meta tag you can use to add more information to your Rich Pins.

That meta tag is the one that refers to the author of your posts.

It looks like this in Pinterest's example:

<meta property="article:author" content="CNN Karla Cripps" />

 

I thought that Squarespace would pick up the information from the Author field in blog posts but as it turns out, it doesn't.

We don't have that meta tag in the source code of our main blog page, and we don't have it on our individual blog pages either as you can see here:

<meta property="og:site_name" content="Full Bloom"/>
<meta property="og:title" content="This is the blog post title"/> <meta property="og:latitude" content="40.7207559"/>
<meta property="og:longitude" content="-74.00076130000002"/>
<meta property="og:url" content="https://www.fullbloomflorists.com/blog/2017/6/13/nam-vel-nisl-cursus-commodo-leo-eu-nak6c"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="This is the excerpt text found inside the options tab of the blog post!"/>
<meta property="og:image" content="http://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/5940595d1e5b6cb30777ca14/594060a63a041171e0448798/1515601740003/anton-mislawsky-160213.jpg?format=1000w"/>
<meta property="og:image:width" content="1000"/>
<meta property="og:image:height" content="665"/> 

 

But, we can do the same thing as with the og:type Article meta tag we set for our entire blog page and add it to our page's head section (Page Settings > Advanced)

The code for that author meta tag is in Pinterest's example, so let's grab it from there:

<meta property="article:author" content="CNN Karla Cripps" /> 

 

And as for the author name, I'm going to go with this:

<meta property="article:author" content="Beatriz Caraballo | Full Bloom" />
 Adding an author to your Squarespace Rich Pins

 

Now let's save that, rescrape the data in Pinterest's validator so it updates quicker and test it out! (and yep I got tired of pinning the same image!)

 Adding an author to your Squarespace Rich Pins

 

There we go! We now have an awesome Rich Pin!

 

How to avoid displaying the "colored pin"

If you're using Chrome's Pinterest extension button or a third-party service like AddThis (which I highly recommend by the way!), when you click it to see all the pins available on your blog's main page you could have one that is simply a background color with your blog's name on it.

 Using a third party app or extension for Pinterest in your website

 

In Squarespace, that happens when you don't have a thumbnail set for your blog page, and even when pinning the plain-colored version is harmless, if you want to make sure only your images get pinned you can simply upload an image as your blog's thumbnail:

 Adding a thumbnail image to a blog page in Squarespace

 

If you choose to see all the pins available again, you'll now get the new image as an option instead of the colored background pin!

 Pinning with AddThis from a Squarespace blog page

 

I want to point out here that the description Pinterest gets for that thumbnail pin comes from the original image's filename, and there's no Fieldname option to edit it as with image blocks.

So, whenever you upload a thumbnail image to Squarespace (or any image for that matter), you should always give it a non-keyword-stuffed brief description that relates to the content of your page.


Summary

Ok, that was a lot of info so let's recap what you need to do/know. Also, you can do all the corresponding changes to your descriptions and titles first, and then enable your Rich Pins.

I'm just following the order of the post here:

1. Check that your site isn't a trial site before enabling Rich Pins.

2. Copy the URL of one published blog post, go to Pinterest's Validator > Validate > HTML Tags > Apply Now.

3. Check your Site's Name in Design > Logo & Title.

4. Check the name of your blog page – under its page settings – and the name of your post.

5. Fill in your blog page's description – under page settings – and make sure to fill out your post excerpts.

6. Change the type meta tag of your blog's page by going into the page's settings, clicking on the Advanced tab and pasting this: 

<meta property="og:type" content="article" />

7. Go back to the Validator, add your blog's URL, click on Validate and then on "Fetch New Scrape Information"

8. Make sure to add alt text under all your images – and the filename just in case.

9. (Optional) Add the author meta tag under your blog page settings:

<meta property="article:author" content="YOUR NAME HERE" />

10. (Optional) Upload a thumbnail image for your blog with a brief description of your page.

 

That's it for this Rich Pin guide, I hope you found it useful!

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way