How to Add Pinterest Rich Pins to your Blogger Blog

A couple weeks ago, I wrote a blog article about How to Add Rich Pins to your WordPress Blog. But I neglected to help out my readers who are on Blogger! (So sorry for that!) This blog article will walk you through step-by-step how to add rich pins to your Blogger blog. (You can thank my blog readers and newsletter subscribers for calling me out on that!)

But first – what are rich pins and why do you want them? Pinterest Rich pins display additional information that Pinterest gets from your website. Rich pins give you (and your website!) credibility. Rich pins also help your pins stand out in the Pinterest newsfeed. To show you the difference between a rich pin versus a pin from a website that does not have rich pins enabled, take a look at the pins below.

Here’s an example of a “regular” (non-rich) pin:

How to add Rich Pins to your Blogger Blog
   (Pin Source)

 

And here’s an example of a rich pin:

Pinterest Rich Pins display extra info from your blog

Notice how it displays extra information from my website: my website’s favicon (very helpful for branding!), my website title and the blog post title.
Note: Since publishing this blog post, Pinterest has stopped displaying the favicon underneath the pin image.

So I bet you want in on the rich pin fun now, right? If you go to Pinterest’s website to get instructions for how to enable rich pins on your blog posts, you will find a bunch of techy instructions and code. Unfortunately they don’t give you the exact code to use for your Blogger template. But don’t freak out! I have simplified the instructions for you, including the exact code you need to cut-and-paste into your blog’s template. It’s easy as pie cupcakes. (Cupcakes are way easier to make than pie!) Read on, my friend…

 

Step 1: Get Your Blogger Blog Ready

1. Setup your Blog’s Meta Description:

  1. Login to your Blogger account and go to Settings > Search Preferences in your admin menu. 
  2. Make sure you have a description entered in the Meta Tags Description.
    How to Add Pinterest Rich Pins to your Blogger Blog
     
  3. If you don’t have this setup already, click on the “Edit” link. Select Yes to enable this and then enter in a short description for your blog (150 characters or less). Click the Save Changes button to save your description.
    How to Add Pinterest Rich Pins to your Blogger Blog
     

2. Add Descriptions to your Blog Posts:

NOTE: This is optional; but I do recommend it. Also – you don’t have to do this step before you get rich pins setup. It can be done now – or in the future.

When you add a new post (or edit an older post), you will see a box in the Post Settings sidebar that allows you to enter a Search Description for the post.
How to Add Pinterest Rich Pins to your Blogger Blog

This is a great place to write a brief description of your post – and it will show up on your rich pins in Pinterest. However you can leave it blank – and Pinterest will just show your post title instead. (But I find this redundant and recommend that you enter in a description that will make people interested in reading your post. Also include relevant keywords that you want to be found by in searches.)

How to Add Pinterest Rich Pins to your Blogger Blog

3. Edit Your Blog’s Template:

NOTE #1: This requires editing your Blogger template. Before proceeding with the instructions below, I recommend that you backup your Blogger template first!

NOTE #2: When you’re editing your template, if you see black triangles on the left side of the code – that means that there are section(s) of code collapsed/hidden in those sections of your template. Make sure you click on ALL those triangles to expand (display) all the code. Do not paste the code into your template until you have clicked on ALL those black triangles around the line of code that you’re searching for in #2 below.

  1. In your Blogger Dashboard click on Template and then click the “Edit HTML” button.
  2. Put your mouse cursor in the template’s code box and search for this line of code:
    <b:includable id='post' var='post'>
    (To open the search box, press the Ctrl+F buttons on a PC or the Cmd+F buttons on a Mac.)
  3. Underneath that line of code, paste this code into your template:

<meta property="og:type" content="article" />
<meta property="og:title" expr:content='data:post.title' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:site_name" expr:content='data:blog.title' />
<meta property="article:published_time" expr:content='data:post.timestampISO8601' />
<meta property="article:author" content="YOUR NAME HERE" />
 

  1. In the last line of code, replace “YOUR NAME HERE” with your name. (Or if you don’t want to list your name, you can just delete that last line of code.)
  2. Click the “Save Template” button.
  3. Click the “Close” button.

Now you’re done with all the techy code that Pinterest wants to see on your website. Woohoo!

 

Step 2: Let Pinterest Test it Out

Now go to Pinterest’s Rich Pins Validator. Enter the URL (aka “website address”) of a blog post from your website. (It doesn’t matter which one you choose. And you only need to validate this one blog post to enable Rich Pins across your entire website.) Then click the “Validate” button.

Validate Pinterest Rich Pins on your Blogger blog

You should now see a confirmation message saying that your pins have been validated by Pinterest. It should also show your website name and favicon. (If it doesn’t show a favicon, you can set that up on your website by following the instructions in this blog post.)

 

Step 3: Apply for Rich Pins

Make sure “HTML tags” is selected and then click the “Apply now” button. 

Apply for Pinterest Rich Pins on your Blogger blog

And…. You’re done!

Now you just need to wait for Pinterest to approve the rich pins for your website. This used to take a week or longer; but lately it’s only been taking a few minutes when I set this up for my clients. You’ll get an email from Pinterest confirming that you’re approved.

After you’re approved, your pins from your blog will start appearing as Rich Pins when added to Pinterest. Existing pins that link back to your blog posts will also start appearing as Rich Pins (no need to repin them). But note: it might take up to 2 weeks for all of your Pins to appear as rich pins.

And that’s it! Super easy, right? Let me know how it goes for you in the comments below. 

Don’t forget it… Pin it! Pin it to Pinterest

How to Add Rich Pins to your Blogger Blog (with cut-and-paste code!). This is easy as pie (or cupcakes)!