Optimizing your image tags for Pinterest Social Sharing

Specifying a Better Quality Image for Sharing

<img src="http://cdn.mysite.com/myimage.jpg" 
     data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg" />

You can optionally set the data-pin-media attribute to provide a better quality version of an image. Use this if you display small image thumbnails on your page, but want the higher resolution version shared. Also, because vertically-oriented images work better on Pinterest, you could set a vertical image in places where you display a landscape image.

Specifying the Source URL / Link

<img src="http://cdn.mysite.com/myimage.jpg"
     data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"
     data-pin-url="http://mysite.com/mypage.html" />

Use the data-pin-url attribute to associate an image to a particular URL. This will guarantee that the image share is linked to the source URL that you want. This is particularly useful for pages with multiple images that link to various places on your website.

If data-pin-url is not specified and the image is wrapped in an anchor tag, for example:

<a href="some_other_page.html">
   <img src="other_page_thumbnail_image.jpg" />
</a>

...we assume that the image source URL is the other page (i.e. some_other_page.html), not the page we're on right now. This works really well for most catalog pages, blog indexes, and search results pages. If the anchor link is a link to an image, we use the link for the current page as the image source URL instead, as we would do if there was no anchor tag.

Customizing the Pinterest Title

<img src="http://cdn.mysite.com/myimage.jpg"
     data-pin-url="http://mysite.com/mypage.html"
     data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"
     data-pin-description="Baked Mozzarrella Cheese Sticks" />

Use the data-pin-description attribute to specify the title. If you don't specify data-pin-description, Shareaholic pulls descriptions from the image's title or alt tags.

• 1st priority = data-pin-description attribute text
• 2nd priority = image title attribute text
• 3rd priority = image alt attribute text

For best results, use a representative 4 to 7-word description of what is actually shown in the image.

<img src="http://cdn.mysite.com/myimage.jpg" title="Baked Mozzarrella Cheese Sticks" />

If all three, image data-pin-description, alt and title attributes are missing, we default to the page's best title for the share. Also of note that Pinterest's official Share Dialogue ignores alt text.

Automatically Set data-pin-description attribute from Image's Alt text

Are you in a situation where you've been setting the alt text for your images and now Pinterest is not picking up that text for shares?

To fix this, with a couple of lines of code, you can automatically set Pinterest's data-pin-description attribute to match the image alt attribute so that Pinterest picks up the alt text. Include the following code in the </head> section of your template -

jQuery:

<script>
// Code by Shareaholic.com
jQuery(document).ready(function($) {
 $("img:not([data-pin-description])").each(function() {
  if (!$(this).attr("title") && $(this).attr("alt") && $(this).attr("alt") != '' && $(this).attr("alt").indexOf(' ') !== -1) { 
   $(this).attr("data-pin-description", $(this).attr("alt"));
  }
 });
});
</script>

In summary, if an image tag only has a multi-word alt attribute text defined (i.e. it is missing title and data-pin-description), this code takes the alt text and assigns it to data-pin-description automatically, and you're done!

Automatically Set data-pin-url attribute to the Page's Canonical Tag Value

Include the following code in the </head> section of your template -

VanillaJS:

<script>
// Code by Shareaholic.com
document.addEventListener('DOMContentLoaded', function() {
  var $canonical = document.querySelector("link[rel='canonical']").getAttribute("href");
  if ($canonical) {
      var images = document.getElementsByTagName('img');
      for (var i=0; images.length > i; i++) {
         if (!images[i].hasAttribute('data-pin-url')) {
	   images[i].setAttribute('data-pin-url', $canonical);
         }
      }
  }
})
</script>