How to Add Pinterest Rich Pins for Articles to Your Blog {WordPress & Blogger}

Home/How to Add Pinterest Rich Pins for Articles to Your Blog {WordPress & Blogger}

How to Add Rich Pins for Articles to Your Blog

I recently came across the ability to add rich pins onto our Pinterest board. I realized what a valuable tool it is, and decided to write this tutorial to enable you to do the same.

Let me tell you, it is really very simple! For my website, it took less than 5 minutes!!

Update: It took about a week for Pinterest to approve our Rich Pins, but we now have them activated at both Clothed In Scarlet and Love God Greatly!

What are Rich Pins?

Rich Pins are basically extra details that can be added to your pins to make them more useful. There are currently 5 types of Rich Pins: movie, recipe, article, product, and place.

In this tutorial we will only be dealing with Article Pins.  This type of Rich Pins will include your blog post title and post description, along with a link back to the original post.

Here’s an example of a Rich Article Pin from Living Well Spending Less Pinterest profile:

Rich Article Pin from Living Well Spending Less Pinterest profile

Why are Rich Pins Important?

As Rich Pins are a relatively new feature, not many people have started using it. This means that if you add the ability to add rich pins from your blog, it gives you more leverage over other blogs in your niche. This means your pins get more visibility and also more traffic.

Here are a few other advantages of Rich Pins:

  • Branding – Your brand name and logo are embedded in each pin.
  • Call to action – Each pin directs the reader to your website.
  • Enhanced pin description – Rich pins pick up the meta description of your article as the pin description.

Below is the dissection of a rich pin – a screenshot of all the elements that comprise a rich article pin as visible inside the pin. As you can see, rich pins do help build your brand, and your traffic!

Rich Article Pin on Pinterest

This step by step tutorial will teach you How to Add Pinterest Rich Pins for Articles to Your Blog! First, I will be explaining how to do it for WordPress self-hosted blogs and then for blogger sites.

How to Add Rich Pins for WordPress  {Self-Hosted}

I’m part of the leadership team at Love God Greatly – an online Bible study for women. I volunteer my time there to help Angela in the technical aspects. For this tutorial, I am using LoveGodGreatly.com and their Pinterest profile as example.

 Step 1:

Download the free Yoast SEO Plugin. Upload and then activate it from your WordPress dashboard ‘Install Plugin’ page .

[For GoodMorningGirls.org, it was already installed.]

Step 2: 

Select “SEO” on your WordPress dashboard and click on the “Social“tab that pops up.

seo-social

Step 3:

Select the checkbox that says, “Add Open Graph meta data” and save changes.

Open Graph Checkbox

Step 4:

Go to the Rich Pin Validator. Enter the URL of one of your blog posts in the field provided and click “Validate“.

Validate your blogpost using Pinterest Rich Pin Validator

Step 5:

A message stating that your pin has been validated will be displayed (In case you get a blank page as I did, you only need to refresh the page). Then click “Apply Now“.

Click Apply Now

Step 6:

Select “HTML Tags” option in the pop up and again click “Apply Now“.

Choose HTML and click Apply now!

Step 7:

You’re done! You now need to wait for approval from Pinterest in the form of an email, which could take any time between a couple of days to a couple of weeks!

Thanks for Application

This is a one-time process, and once your site has been approved, images from the respective blog posts will have rich snippet added to the pin. Older pins from your site will also be progressively updated as rich pins, but it could take a while for the changes to show on Pinterest.

Please Note: By experimenting a bit, I found that only images associated with a particular article/blog post will be shown as rich pins. Images on the sidebar and other graphic elements might not be displayed as rich pins.

How to Add Rich Pins for Blogger {BlogSpot}

The procedure for Blogger requires a bit of coding, but I hope this step by step procedure will demystify it for you. My friend Rosilind Jukic of A Little R & R allowed me to use her blogger account for this tutorial.

Step 1:

On Blogger, click on “Settings” and under that, “Search Preferences“. Click ‘Edit‘ and ‘Enable’ the Description for Meta Tags. This will enable you to add a meta description (Search Description) when you create a new blog post or edit an old one.

Enable Meta Description for Blogger

Step 2:

Backup your Blogger template using the steps outlined here.

Step 3:

Select Template on Blogger and click “Edit HTML“.

Click "Edit HTML"

Step 4:

Search for the following piece of code: (Using Ctrl+F or Cmd+F)

<b:includable id=’post’ var=’post’>

Search and Find the code

Step 5:

Add the following code after the piece of code you found in the previous step:

<meta expr:content=’data:post.title’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta expr:content=’data:post.timestampISO8601′ property=’article:published_time’/>
<meta content=’Technology‘ property=’article:section’/>
<b:loop values=’data:post.labels’ var=’label’>
<meta expr:content=’data:label.name’ property=’article:tag’/>
</b:loop>

Change “Technology” (marked in red above) to your blog’s core topic and save the changes. After making changes, please check your blog in two browsers of your choice. Verify that your site is looking fine, just the way it was before!

Paste the above code there

Step 6:

Follow Steps 4, 5, 6 and 7 from the WordPress tutorial above to get your Rich Pins validated and approved.

Note: It is important that you enter a meta description for each blog post you write, only then will it be visible in the Rich Pins on Pinterest. For WordPress, you can enter the meta description in the Yoast Plugin module under each blog post, and for Blogger, you can enter it in the Search Description box.

Have you enabled Rich Pins on your blog? What’s holding you back?

About the Author:

School teacher turned internet marketing consultant, Sunu Philip is a Certified SEO Specialist. She founded “Clothed in Scarlet” to help women discover their unique God-given strengths and turn their talents into profits online. She offers subscribers a Free Online Business Startup Kit to help them start their online business from scratch.

34 Comments

  1. Angie December 5, 2013 at 4:22 pm - Reply

    Very Useful information Sunu, thanks for sharing, be blessed 🙂

  2. Isaiah Joe March 21, 2014 at 6:49 am - Reply

    Thanks Sunu Philip for this, i have always wondered if people doing this are just coding it. Thanks for the share.

    • Sunu Philip March 26, 2014 at 10:46 pm - Reply

      Its pretty simple.. right Isaiah? I hope Pinterest team approved your article rich pin request by now..:)

  3. Mohammed Anzil March 21, 2014 at 10:25 am - Reply

    Hello Sunu…………….

    Interesting and perfect screenshot tutorial. Thanks for the detail sharing about Rich pins.

    Regards,

    • Sunu Philip March 26, 2014 at 10:44 pm - Reply

      Thank you Mohammed. Glad this tutorial helped you!

  4. Chelsea May 9, 2014 at 9:02 pm - Reply

    I am getting notification saying “Error parsing XML, line 1512, column 20: Open quote is expected for attribute “expr:content” associated with an element type “meta”.” When I paste that code into my html. It won’t let me save it.

    • Sunu Philip May 14, 2014 at 5:19 pm - Reply

      oh Chelsea, I am a little lost with the code that you posted above. Which blogging platform are you using… WordPress or blogger?

      • Jen July 26, 2014 at 8:04 am - Reply

        I’m getting that same error message, too. I use Blogger. Suggestions? Thanks!

      • Brandi October 25, 2014 at 8:31 am - Reply

        I’m getting an open quote error also. I’m using blogger. Need help please!

    • Naomi Nakashima September 7, 2016 at 5:53 am - Reply

      I don’t know if anyone else is still having this issue or not; But I received the same error. What I saw was that the quotes I copied from here do not match the quotes in Blogger. Check through the code and everywhere you see a quote, erase it and type in a new one.

  5. Sam May 15, 2014 at 10:28 am - Reply

    Fantastic tutorial!! Thank you! Do you have a tutuorial for how to add Pinterest Rich Pins for Recipes? Thank you again!

  6. Grace Keogh May 28, 2014 at 4:10 am - Reply

    Thank you Sunu for your easy to follow directions. I know this is probably going to sound like a silly question but I am a bit confused with the actual pinning of a blog post that I have written ?? Do I just Pin it from my own blog and the rest just happens as you have explained above?

  7. Prasad June 5, 2014 at 7:44 pm - Reply

    THank You

  8. Shelly July 15, 2014 at 1:37 pm - Reply

    Thank you so much for this!! I’ve been wondering how to do this for a while now. Your tutorial is the best I’ve found. It worked perfectly. 🙂 The only issue I’m having is that the “Read this on…” isn’t showing up at the bottom of my pins. Am I missing something??

    • Sunu Philip July 15, 2014 at 5:01 pm - Reply

      Thank you Shelly. Let me check your pins. Have you got your ‘rich pins approved’ email from Pinterest team? Only after the approval, rich pins will start showing for your blog articles.

  9. Simmy August 7, 2014 at 7:15 pm - Reply

    Thanks Sunu for the detailed tutorial. I was searching for this from a long time and with your help I was able to accomplish this in minutes. God Bless!

  10. Muhammad August 26, 2014 at 9:53 pm - Reply

    Thanks Sunu for great article. A perfect step by step guide.

  11. Megan Spires September 2, 2014 at 10:21 pm - Reply

    Sunu, THANK YOU for sharing this tutorial! I’ve tried following other tutorials to get rich pins that led me down the wrong path. So grateful for your wisdom and for making this so easy to set up. Sending you a BIG hug!

    • Sunu Philip September 8, 2014 at 10:03 pm - Reply

      Megan…so very glad this tutorial helped you. Thank you for taking time to comment here and letting me know. I really appreciate that. Much love, Sunu

  12. Jenn October 8, 2014 at 7:14 pm - Reply

    Sunu, right at the beginning, I’m having problems. 🙁
    I followed the first steps fine, but when I tried to enter a post, I got this response:
    We were unable to retrieve any data from your URL.

    What does this mean??

    The page I am trying to validate is this:
    http://www.busybeingblessed.net/95-ways-show-child-love/

    Any help would be great! Thanks!

  13. Kaly October 11, 2014 at 1:55 am - Reply

    Hi! Im so very grateful for all your posts, I would like to know if this works for my tumblr blog? I also have a website but the very content I posted on my pinterest account is provided mostly from my blog… So I wish you can help me.

    My website is http://www.bonnefete.com.mx and my tumblr is http://www.labonnefete.tumblr.com

    • Sunu Philip October 13, 2014 at 11:06 am - Reply

      Kaly, I searched but didn’t find any references on activating rich pins for Tumblr posts. I am sorry. If I find something later, I will sure let you know through email. Thank you.

      Love, Sunu

  14. Cyndi - My Kitchen Craze October 15, 2014 at 4:40 am - Reply

    Thank you!! This worked perfectly!! 🙂

  15. Rebecca October 23, 2014 at 3:38 am - Reply

    Do you have any idea how to do this for a blog run on Squarespace? Thank you!

  16. Deanna Wiseburn May 11, 2015 at 7:38 am - Reply

    I just submitted mine so it may take awhile to be approved. But I was wondering how you set the call to action for your pins, because I did not see that step in the tutorial above. Thanks for any help you can provide. The example they gave showed everything except for your “Read this on site”.

    • Sunu Philip May 22, 2015 at 10:26 pm - Reply

      oh Deanna, that I have set using a WordPress plugin – Pinterest Pin It Button For Images! That is not included in the tutorial!

  17. mark August 17, 2015 at 1:52 am - Reply

    hi
    what should you do if Pinterest says “we are unable to recieve data from your URL”. I have Pinterest validation on my WP blog but it won’t enrich pins for me by allowing validation of any URL from my WP blog
    please help

  18. Marissa August 19, 2015 at 5:04 pm - Reply

    Thanks Sunu! I have been trying to figure out the coding for mine for a while, and you have saved me the extra work!

    Marissa

  19. Elizabeth January 3, 2017 at 3:39 pm - Reply

    I’ve done the Yoast plugin and can see the meta data on my site source code, but I keep getting the “We were unable to retrieve any data from your domain” error message.

    Any help would be so appreciated!

  20. Manoj March 13, 2017 at 3:02 pm - Reply

    Excellent post. I did it for my blog. Waiting for the confirmation.

    Thank you so much for this informative post.

    • Sunu Philip March 14, 2017 at 10:47 am - Reply

      Thank you, Manoj. Glad to hear you found the article helpful.

  21. sanjay valsan September 4, 2017 at 6:35 pm - Reply

    Awesome article. Very helpful post, Thank you very much.

Leave A Comment