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.

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up youโ€™ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

11 responses to “Enable Pinterest Rich Pins for Blogger or WordPress”

  1. Charlotte B. avatar

    Thanks so much! This is really enlightening, and I am excited to implement this in my and my sisters’ blog.

    -Charlotte
    boyerfamilysingers.blogspot.com

  2. Becky avatar

    I just found your blog through another blogger! So glad I did – can’t wait to follow you through this year!

  3. Becky avatar

    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

  4. Jennifer A avatar

    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!

  5. Amy avatar

    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!

  6. PAul avatar
    PAul

    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.

  7. Clair Kidd-stanton avatar

    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

    1. Elaine Malone avatar

      Hey Clair, they have recently changed what is needed. I’ve updated the tutorial above so it should be working now ๐Ÿ™‚

  8. Jess avatar

    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 ๐Ÿ™‚

    1. Elaine M avatar

      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.

      1. Jess avatar

        Brilliant, I think I’ve got it now. Thanks so much! xo