by Kim Herrington | Featured Contributor
We can run into serious trouble when making our websites best fit what works on Pinterest. To name a few problems:
- Pinterest loving big, high quality images can seriously screw up our website load times and formatting
- Future click-throughs can get lost when they don’t get to the post page they want.
- We’re doing nothing to boost our own pins to conquer Pinterest search and Related Pins
Guess what? Pinterest has a secret solution for these problems. And when you use it, you can actually get more pins than you did before!
Using a Pinterest Call-to-Action
The image on the right appears on my blog post that went viral on Pinterest. It blew up of pins created from my website visitors and has brought an enormous amount of traffic to my website since it was published.
The problem with call-to-action images like these is they can look a little strange. When you’re scrolling through your feed, you don’t really want to see “PIN ME!” everywhere.
Pinterest developed a tool that allows you display one image but have your readers pin a different image. Not only does this allow us to create great call-to-action images like this one but it can also save our bacon when it comes to appeasing Pinterest without screwing our sites. Using this technique, you can:
- Reduce page load times by posting lower quality and smaller but allow visitors to pin larger, high quality images
- Use calls-to-action in your images that don’t show up on Pinterest so you get more pins
- Ensure that all pins link back to the article page, not your blog page
- Bump up repins your own pins to help you rank higher in Pinterest search and Related Pins
Let’s take a peek at what goes on behind the scenes when someone pins an image from your website so we can understand how this works.
Advanced Pinterest HTML Settings
Wwhen someone clicks the button to share an image on Pinterest, they request a javascript command to run. If you take a peek at the code behind the Pin It button, you’ll notice that it eventually points to this:
assets.pinterest.com/js/pinit_main.jsThis is where the javascript that runs to create a pin. If you go to that URL, you’ll see the code that creates the popup Pinning box, links to your Pinterest account, and pulls all the info about your boards and the pin’s information.
You know how you’ve been told before to use the alt tag to write a description for Pinterest? There’s another place where Pinterest’s javascript can pull information. Let’s take a look at the HTML for a website’s images. It can look a bit different, depending on how your website and URLs are set up, but this is the basic format for WordPress:
<img src="http://yourblog.com/wp-content/uploads/year/month/imagefile.jpg" alt="Description goes here">
By default, Pinterest pulls this information for your pin, along with the URL you’re on. But Pinterest allows you to designate where to pull the image from, how to describe the image, and what URL to link back to by adding this information:
<img src="http://yourblog.com/wp-content/uploads/year/month/imagefile.jpg" alt="Description goes here"
data-pin-description="Pinterest Specific Description here"
data-pin-url="http://yourblog.com/posturl"
data-pin-media="http://yourblog.com/wp-content/uploads/year/month/imageyouwantthemtopin.jpg"
data-pin-id="PinterestIDNumber"/>Each of these three extra snippets of information are pulled by Pinterest to create the pin rather than the default information.
- data-pin-description allows you to define a Pinterest specific description (hint: Great for not interfering with SEO!)
- data-pin-url allows you to define the article URL to link to
- data-pin-media allows you to set a different image to be pinned instead of the image the visitor sees on the page
- data-pin-id allows you to have all pins created be a repin of another pin
Remember, as with all HTML, you’ll still need to include equal signs and quotations for each of these HTML elements and do this in the text or code editor when writing your post.
I hope this helps you make the most of Pinterest with your blog! Just remember, some plugins do inhibit Pinterest HTML Data so be sure to check and ensure this works on your blog.
————————————————————————-
Kim Herrington empowers bloggers to become successful business owners and is the founder of Bear & Beagle Creative LLC. At the heart of her business, Kim focuses on building community with others online while using technological savvy, SEO, and other blogging tricks to capture more visitors and leads. Be sure to visit the Bear & Beagle Blog for top blogging tips and tricks to turn your blog into a money making success or take the 6-week audience building challenge to start growing your blog now. Kim lives in Conway, Arkansas but you can follow her no matter where you are in the world on Twitter, Instagram, Facebook, or Pinterest.
