Setting an Image for Pinterest
The other day while pinning a link to our “One Page” service I noticed that Pinterest’s utility was failing to come up with a good image to display.
Unlike Facebook and Google+—where you can set a default image using open graph tags—Pinterest simply scrapes your site looking for url’s defined with the “<img src=” tag. Very handy because most webpages these days have at least one or two images included in the page content. Buy what if the images within your content are small (less than 81px)? Or your images are defined in a CSS file? Or you simply want a specific image to display first?
This is where setting the image becomes necessary. Since the image that Pinterest chooses as the default will be the first image on your page that is defined, insert the following immediately after your pages “<body>” tag.
<img style=”opacity: 0; position: absolute; top: 0; left: 0;” src=”http://example.com/images/pinterest-image.jpg” alt=”” />
Now when someone “Pins” your page, Pinterest will pick up this image. And since the opacity is set to “0” it will not display on the page or affect page layout.
Images must be wider than 81px, however, it seems that no image is too big to be pinned. I would recommend something in the 500px (w) x 300px (h) range. This should be large enough for a nice graphical representation of your page/message, yet not too big that it slows processing down on your page.
For more on Pinterest images, check out this cool “Quick Guide to Pinterest Images” infographic.