Include / Exclude Images for Pinterest

When setting up your site for Pinterest sharing it is important to know which images you want to include and exclude from their sharing engine. By default Pinterest will attempt to include all images that are on the page contained within <img src=""> tags. Any images that fall in this criteria will be included and there will be times when you do no want them to be.

There is a attribute you can add to your images that will exclude them from being sharable.

data-pin-nopin="true"

This tells Pinterest to exclude the image from sharing and will not show up when a user uses the Pinterest sharing option on the webpage.

Another thing to remember is that Pinterest will not detect images that are used as background images. These days as sites become responsive and reactive the use of background images as feature images is increasing. They are usually included as background images so they are able to scale correctly when screens are resized or the site is viewed on alternative media such as phones and tablets. Pinterest does not by default find background images so you have to include them by placing a hidden image on the page that contains the full size image. This can be done by placing a <img src=""> tag below your background image and set its CSS properties so it is not on screen.

<article style="background-image: url('/path/to/my/image.gif');">
   <span style="display:none;"><img src="/path/to/my/image.gif" alt="my image"/></span>
   ...
   ...
</article>

The above snippet will render the article with its background image while Pinterest can pick up the hidden image tag and for sharing. This method can be expanded upon to include a wide variety of images for sharing that may not be required to be shown on the page such as image galleries, related content and promotional items.

When building a site is is always important to remember the social media plugins that can intereact with your content and how they will do so. You want to be sure that content you would like to share can be shared and that which should not is hidden from view. Adding simple configuration tags to images is one small step that moves towards a refined sharing experience.