Setting Up Pinterest Rich Pins for WordPress and Blogger

Home » Blogging » Setting Up Pinterest Rich Pins for WordPress and Blogger
This Fairy Tale Life is reader supported. When you buy through links on our site, we may earn a monetary commission. Learn more.

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

If you’re a Pinterest fanatic, you may have noticed some pins are looking a little different lately.  Perhaps you noticed some pins in your feed now show the website source right under the image and description.

 

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

And if you’re like me, you may have asked yourself, “How the heck did they do that, and how can *I* do it, too?!?”   I did a little bit of research and figured it out – and discovered it’s really easy!  What you’re seeing is Rich Pins for Articles (aka blog posts), and setting it up for your blog will take you about 15 minutes and make your blog’s pins really stand out!

 

Blogger

 

To set up Rich Pins for Blogger, you need to add a little bit of coding to your template.  Don’t worry if you’re clueless about coding – I am, too!  So if I can do it, you can do it.  Here are step-by-step instructions on how to get it set up.  During my research I used this article from Blog Xpertise as a guide and it was very helpful.

 

BEFORE YOU START you have to make sure your Meta Tags are active.  To do this, go to your Blogger Settings, then Search Preferences, then add in a description for your Meta Tag.  Once this in enabled, when you go to a new post (or edit an old post) you’ll see a field on the right for “Search Description.”  Be sure you’re putting something here – I usually copy and paste the first one or two sentences of my post.  This is necessary for Rich Pins to work, AND it’s good for SEO (win-win)!

 

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

Step One: BACK UP YOUR TEMPLATE using these instructions: http://www.digitalkonline.com/blog/how-to-backup-your-blogger-template/

 

Step Two: Go to your Blogger’s Template and select “Edit HTML.”

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

Step Three: Search for the following code.  Once you’ve searched, that code will be highlighted in yellow.

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

[To search, put your cursor anywhere in the coding field and press “CTRL+F” if you’re on a PC and CMD+F for Mac.  A little search box will come up.] 

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

Step Four: Press the little black arrow on the same line of code as the highlighted section (on my image it’s line 1539. This will expand the code section.  Put your cursor at the end of the highlighted code and press “Enter” to start a new line.  Then paste in the following code:

<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>

 

Step Five: Change the word “Technology” to your main blog topic.  For example, for this blog I would change it to “Blogging.”  The example I’m using for my images is a wedding blog, so I changed it to “Wedding.”

 

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

Step Six: Click on “Preview” to make sure your blog looks okay.  Your blog shouldn’t look any different – all the coding you’re adding runs in the “background” of your blog.  Once you verify your blog still looks like its pretty self, click on “Save Template.”

 

Step Seven:  Open your blog and click on a post.  Copy the post link into the Pinterest URL Validator and click “Validate.”  You should get a message from Pinterest that your pin has been validated.  Then click the “Apply Now” link.  In the pop-up, select “HTML.”  And you’re done!

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

You’ll get an email once Pinterest approves your Rich Pins, which can take anywhere from a few hours to a couple days.  Once your pins are approved, it will take about a day for the data to actually show up on your pins.

 

Self-Hosted WordPress

 

For self hosted WordPress, all you need is the Yoast plug-in!  If you’re on WordPress, you likely already have this fantastic SEO plug-in.  But if not, you’ll need to install it, at least just for your Rich Pins.  Yoast has a ton of awesome SEO functionality, but for the purposes of Rich Pins, all you need is the “Meta Description” field for each post.  Then follow “Step Seven” in the Blogger instructions above and you should be good to go!

 

Blogging It Forward: Setting Up Pinterest Rich Pins for WordPress and Blogger

 

See?  Didn’t I tell you it would be easy?  Let me know if this post helped you or if you run into any problems getting your Rich Pins set up.

 

EDIT – Just a couple things I’ve noticed in the week following my writing of this post …

– After writing this post I submitted a couple other blogs to be validated through Pinterest. The response time was NINE DAYS.  So it seems they are very busy with requests.  If you don’t get approved right away, don’t be discouraged.

– The Rich Pin information showed up on my past pins a lot quicker for my WordPress blog verses my Blogger blogs.  All of my Blogger blogs have been validated and approved, and the data is slowly showing up on old pins.  For my WordPress blog (this one), the data populated on all my old pins within a day.  Yet another reason to switch everything over to WordPress, I suppose.