September 13, 2013
We’ve made it easier for pinners to get their pins looking how they want. For bloggers and businesses, this means you can now choose which images on your site make the most sense to pin (even if they’re at a different URL) and suggest a description.
How it works
This may be the kind of image tag you use in your HTML now:
<img src="brownies_thumb.jpg" height="200" width="150" alt="Brownies" />
If someone tries to pin your page with this image on it, they’re only going to get a tiny 150 pixel-wide image, with just a single word—“Brownies”—for the description. And the pin is going to link to the only URL we can find, which may be the main page of your blog or site. That means that once you add more blog posts or change your homepage, the link in the pin won’t make sense because that brownie entry isn’t on the main page anymore.
What you really want is to for pinners to pin from the individual page or blog post. And if the image in your post is on the small side, you probably want to point to a bigger, pin-friendlier version of the image (at least 750 pixels wide). Finally, you want to include a helpful description, something with a handful of words that explains what’s in the picture. This description is especially handy when pinners search for related things.
So here’s what you can add to your image tag to make your brownie post nice and pinnable:
<img src="brownies_thumb.jpg" height="200" width="150" alt="Brownies" data-pin-url="http://myrecipes.com/brownies.html" data-pin-media="http://myrecipes.com/brownies_large.jpg" data-pin-description="Yummy gluten-free double-fudge brownies!" />
And that’s it!
What this does
Now, when pinners come a-pinning, the pin they end up with is easy on the eyes, and it links to the right page. Best of all, it comes preloaded with a smart, helpful description, which pinners love almost as much as search engines do. This means beautiful pins from your pages are going to do much better in search results!
— Kent Brewster, currently pinning to Defying Gravity