Enable Pinterest Rich Pins for Blogger or WordPress

Rich Pins on Pinterest are just like standard Pins but they include some extra information about the source of the pin, quite similar to Twitter Cards. There are five different types of Rich Pins at the moment – products, movies, recipes, articles or blog posts and places.

Decide what type of Rich Pin suits your content the most. I’ll be using Article Rich Pins for this tutorial as they are great for most bloggers. Aside from what normally shows when someone pins a post from your site, the pin will now include the name of your website or blog, your favicon, the name of your post, the date the article was published, author name and the description of the article. This can be seen in the image below. Once you’ve enabled Rich Pins using the steps below, this is shown automatically using data from your template markup.

enable pinterest rich pins on blogger or wordpress

How to Enable Pinterest Rich Pins on Blogger

1. To set up Rich Pins for Blogger you’ll need to add some code to your posts in your template. On Blogger go to Settings > Search Preferences > Meta Tags and enable Description. You can enter a brief description about your blog content here. Now in the post editor (Posts > New Post / Edit Post) you’ll see a field in options on the right for Search Description. Add a relative description about your post to this area – it can be a summary or just the first few lines of your content. If you don’t add a description, it will use the start of your blog post.

2. Go to Template > Edit HTML > Click into the HTML Editor and press CTRL / CMD F to bring up the search bar. Find

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

There might be a black arrow on the left beside the numbering, if there is then click it to open the code. Underneath <b:includable id='post' var='post'> add the following

 
<meta content='article' property='og:type'/>
<meta expr:content='data:post.title' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:description' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:post.author' property='article:author'/>
<meta expr:content='data:post.timestamp' property='article:published_time'/>
<meta content='BLOG TOPIC' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
 <meta expr:content='data:label.name' property='article:tag'/>
</b:loop>
 

Change BLOGTOPIC to be the main topic on your blog. This adds the needed open graph data to each blog post on your site using the information already there. For example the og:title will be your post title data:post.title.

3. Enter the link from your latest blog post into the field on the Validator page here. Click Validate and wait for the page to load. Check that the information is correct, click Apply, select HTML tags and Apply Now.

4. Pinterest will email you once you’ve been applied. They say it takes a couple of days but mine took a few months so unfortuntely you’ll just have to be patient.

How to Enable Pinterest Rich Pins on WordPress

1. The easiest way is to install Yoast SEO plugin. Once installed go to SEO > Social and select the checkbox that says “Add Open Graph meta data”. This will add the necessary code to your blog posts without you having to do so manually.

2. Enter the link from your latest blog post into the field on the Validator page here. Click Validate and wait for the page to load. Check that the information is correct, select HTML tags and click Apply.

3. Pinterest will email you once you’ve been applied. They say it takes a couple of days but mine took a few months so unfortuntely you’ll just have to be patient.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

11 comments

  1. Becky on

    Thanks for this Elaine! I’ve recently overhauled my Pinterest to try and make the most of it as a resource and am starting to see my followers increasing. I’ve just applied for this, I look forward to hearing from them x

    Reply
  2. Jennifer A on

    Elaine, thank you so much for your blog. I’ve been using your tutorials for the past couple of weeks to get my blog to look the way I want, and I could not have done it without you!

    Reply
  3. Amy on

    Thanks for the quick and easy breakdown for WordPress. I have the Yoast plugin so this will work perfectly. I was trying to figure out where to add the code (how to find my section but I didn’t even have to. Thanks for breaking it down!

    Reply
  4. PAul on

    Thanks for the great tutorial, everything works great on blogger. *Note: website/article description needs to be enabled in options and manually added for each post otherwise rich pin won’t be shown on pinterest in some cases. It’s also good idea to keep the description under 160 characters so google can display it correctly.

    Cheers, Paul.

    Reply
  5. Clair Kidd-stanton on

    Hi Elaine,

    I’ve followed your instructions to install rich pins on my blog, however when I click validate on my latest blog link it says ‘ It looks like your URL is missing some required info. Please check the documentation and add anything that’s missing.’

    When I scroll down it says I am missing the author and the description but I can’t work out why. Can you help me? 🙂

    Thanks

    Clair

    Reply
  6. Jess on

    Hi Ellie, thanks for this really helpful post. I’m trying to follow your tutorial for Blogger but can’t find the <b: includable… code you mention in my HTML – any suggestions? I've copied directly from this post to the find bar in Blogger so it shouldn't be a typo issue! Any help would be really appreciated. Thank you 🙂

    Reply
    • Elaine M on

      Hey Jess, search for just a part of the code instead of the whole line. Sometimes the search can’t read the whole line, make sure you’re using the HTML Editor search and not the browsers search bar. If you go to Template > Edit HTML > Jump to Widget > Blog1 and you’ll see it a few lines down.

      Reply