I get asked a lot how to add Pinterest Rich Pins to websites & blogs, so I thought I share with you how to do it for both WordPress.org and Blogger/Blogspot blogs if you’re the DIY kind… if not, I can do it for you – contact me here.
Rich Pins on Pinterest are like regular Pins you see in your Pinterest feed, but they include some extra information about the source of the pin – the website’s name, post title, image alt name, description of post, and your favicon <– that’s some sweet marketing potential right there. Once you’ve enabled Rich Pins using the steps outlined below, this information will be shown automatically on pins from your site. The image below gives you a pretty good idea of what all is included, and what you’re missing out on if you don’t have Pinterest rich pins enabled.
Onward with the how to…
How to Enable Pinterest Rich Pins on WordPress.org
1. Install Yoast SEO plugin, if you don’t already have this one installed – hello! SEO for dummies. Once installed go to SEO > Social > Facebook and select the check box that says “Add Open Graph meta data”. This will add the necessary code to your blog posts without you having to do so manually – which is only one of the many great advantages of having a Worpdress site, I get asked that all the time, too!
2. Go to Pinterest’s Rich Pin Validator, and enter in a link to any post on your site. It doesn’t matter which post and you only need to do one. Click “validate.” After validating, you should see a message that says “your pin’s been validated!” Then, click “apply now.” A pop up will come up with your website’s domain and “HTML tags” selected. Click “apply now” once again and you’re done.
3. Pinterest will email you once you have applied. They say it takes a couple of days, I just applied for mine this past Saturday… hopefully I’ll hear something by the end of the week – I’ll keep you posted.[Update: 12/23/2014 – it took about 10 days to get approved. You can see my rich pins here.]
How to Enable Pinterest Rich Pins on Blogger/Blogspot
1. To set up Rich Pins for Blogger you’ll need to add some code to your posts in your template, a little more work than WP but still definitely doable. On Blogger go to Settings > Search Preferences > Meta Tags and enable Description. You can enter a brief description about your blog content here.
2. Then, when you’re in the post editor (Posts > New Post/Edit Post) you’ll see a field in options section 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 first few lines from your post content.
3. Then, go to Template > Edit HTML > Click into the HTML Editor box and press CTRL/CMD F to bring up the search bar. Find:
<b:includable id='post' var='post'>
Underneath this line of code add the following:
<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='BLOG TOPIC' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
Change BLOG TOPIC to be the main topic (Rich Pin type) on your blog. By doing this the code adds the needed open graph data to each blog post on your site using the information already there. Currently there are six different types of Rich Pins – app, movie, recipe, article (i.e. blog posts), product and place. Decide what type of Rich Pin suits your content the most, for most blogs this will be “article”. That meta tag should look something like this after you edit it:
<meta content='article' property='article:section'/>
4. Lastly, go to Pinterest’s Rich Pin Validator, and enter in a link to any post on your site. It doesn’t matter which post and you only need to do one. Click “validate.” After validating, you should see a message that says “your pin’s been validated!” Then, click “apply now.” A pop up will come up with your website’s domain and “HTML tags” selected. Click “apply now” once again and you’re done.
5. Pinterest will email you once you have applied.