In case you didn't realize it, I do 100% of my own blog formatting and HTML programming. That is the big reason I am still using Blogger (instead of Wordpress) and why my blog layout/template never changes. If it ain't broke.. (since I'm the one who will have to fix it!)
The truth is that I have ZERO computer programming experience, I just spend a lot of my time pounding my head into my keyboard and using google to try to figure out how to make my blog do what I want. I am sure there are some really weird things going on in my code but, eh, it just has to look okay to the average reader.
Sooo.. when I saw these cool new "Rich Pins" on Pinterest I just *HAD* to figure out how to get my little logo, direct link and post description under my content.
What am I talking about?
Well, here is an example from Hometalk. See how they have a logo, description and the direct URL to their site?:
Well, I want my little grouchy sun favicon to show up under MY content!!
Officially these pins are called "Rich Pins for Articles" (Who knew I was writing articles.. right?!) They also have rich pins for recipes, movies and products (lots of Etsy sellers use them) but I am only concerned about blog posts (aka articles).
Thank goodness for google and a lot of trial and error, since I finally have it working! Here was a pin of my kitchen before:
And now:
Isn't that awesome?!
So how did I do it?
Well, let me summarize the method that worked for me. I am NOT going to say this is the best way, or the only way.. but it worked for me!
First thing you need to do is open your template HTML (you probably want to back up your blog first whenever you mess with your HTML). This is what my HTML looks like:
Immediately after that line you need to paste 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='DIY' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
</b:loop>
See where it says "DIY" in red? You need to change that code to be whatever the topic of YOUR blog is. Mine is DIY, duh.
Okay.. once you save that template the HTML part is over! (Yippee!)
Now you need to make sure that you have all your ducks in a row for Pinterest. They want to make sure they know HOW to label your content, and they are going to use your search description. Therefore, you have to be sure when you are publishing your posts, you have SOMETHING written in the "Search Description" box for each post. Here is an example of what I write in mine:
It also doesn't hurt to have a meta tag description for your entire blog (Under Settings>Search Preferences)
Once you have those descriptions filled out, you need to verify that you did everything right and Pinterest can find all the info it needs. So you go to the Pinterest URL Validator and paste an URL from a page that you know is updated.
If something ISN'T working, it will give you an error message, like this:
Luckily, you can trouble shoot the problem by looking at the lower left column. (In my case, my Halloween Post didn't have anything in the Search Description box and so I got a red light next to description):
If it is working it will tell you "Your Pin's been validated!" and look something like this:
Now you need Pinterest to approve you to use Rich Pins, so click on Apply Now and select "HTML tags"
It can take up to two weeks to be approved (it all depends on how many requests Pinterest gets) but hopefully it will be faster. It took my application less than 3 days. Once you are approved, your pins (even your OLD pins) will be updated into rich pins. And isn't that worth the wait?
Sharing at these parties.
Finally got around to doing this and you made it easy for me! Thank you so much!
ReplyDeleteAm getting this error: " Something went wrong on our end. Sorry about that" when I try to validate. I've added the exact meta code, right after b:includable, on my Blogger template, but since yesterday, I've been getting this same error message upon trying to validate :(
ReplyDeletePinterest occasionally goes down and you need to just wait a few hours and try it again later. That is an error on their end.
Delete