How often do you wish that you didn’t have to make every image on your site look like it was made for Pinterest? Pinterest can be a great traffic source for a blog, but sometimes you want a little control over which images from your blog are pinned there. This way you can be certain that when someone pins from your site, they pin an acceptable image there. You have a few options to control which images are pinned to Pinterest from your website.
For most of these, you will need to use the text editor in WordPress, not the visual editor.
If you have a particular image on your blog that you do not want pinned, nopin is a piece of code you want added to it. It should look like
<img src="image.png" data-pin-nopin="true" alt="image description" />
There are many reasons why you might want an image to be unpinnable. The big reason is if it isn’t yours. If you have permission to use an image from someone else’s site for a post (linked back to their post, I hope), it’s not ideal to have that image used on Pinterest to link back to your site.
You can use nopin to keep people from using header images or other images that are used across your site on Pinterest. They aren’t the best representation of your site, after all. They may be better than nothing if a page has no images, but that’s something you will have to decide for yourself. I use this on my header images here.
Sometimes there will be an image in a blog post that is perfectly acceptable in most ways for pinning, but for whatever reason, you don’t want it pinned. Maybe you used an image of your kids in a post and don’t want others pinning it, for example. Maybe you posted about organizing your home office, and only want the “after” image pinned, not the “before.”
You can even block individual pages or your entire site from being pinned on Pinterest. There are few cases where this is a good idea, but you can do it. The code goes in the header and is
<meta name="pinterest" content="nopin" />
There are WordPress plugins that will allow you to do this for individual pages, which is more likely to be useful. However, the ones I found have not been updated in two years, so I can’t say if they’re still compatible.
Pin A Different Image Than Shown
Sometimes you want to pin a different image than the one shown. There are good reasons to do this.
One reason is so that you can show one image in your blog post, one that you feel is sized to best suit the look of your blog. Maybe it’s in a horizontal orientation rather than the vertical orientation that is so strongly recommended for use on Pinterest. Those long images can get annoying on blogs sometimes.
I’ve used this trick on the title image of this post. If you try to pin it, a longer image will show up. However, any other pinnable image you try to use will show up as expected if you try to pin it.
The code is put into the HTML used to display the image. It should look like
<img src="image.png" data-pin-media="image-you-want-pinned.png" alt="image description" />
If you’re tired of having huge graphics at the top of your blog posts, this lets you cut them down to size while still taking care of Pinterest.
You may want to consider several other additions to your images as well.
data-pin-description="description you want on your pinned post"
Data-pin-description allows you to choose the description you want to show when someone pins that image. They can change it if they want, but many people will just leave it be.
data-pin-url="url of your blog post"
Data-pin-url allows you to tell Pinterest what URL to use when the image is pinned. This is useful if you find people are pinning a lot from your blog homepage, and therefore not getting your individual posts pinned. It’s also handy if you have a multi-page post and want people coming from Pinterest to start at the beginning. You must use the full URL of the post; a relative URL won’t work.
data-pin-id="ID of your original pin"
Data-pin-id is a bit harder to use. You have to pin the image yourself and then view it to get the ID number of the pin from there. From there, it ensures that future pins of that image are linked to your original pin. These count as repins of that image, and may help with social proof. The ID number is the number you see in the URL of your pin.
You can use any combination of the data-pin options on your images. All together they would look like
<img src="image.png" data-pin-media="image-you-want-pinned.png" data-pin-description="description you want on your pinned post" data-pin-url="url of your blog post" data-pin-id="ID of your original pin" alt="image description" />
Hide An Image
You can also hide an image in your post, but have it show up as an option when someone clicks the Pinterest button on the page. These won’t show up if someone clicks a specific image; they appear only with the Pinterest buttons you should have on your site.
Add the images you want to hide to your post. These are probably larger than your other images, so you will want them at the bottom of your post. Then add the following code to the image HTML:
<div style="display: none;">
After the images, add:
So that the rest of your blog displays as normal. The whole thing should look like:
<div style="display: none;"><img src="image.png" alt="image description" /></div>
You can also add a Featured Image to your blog posts. There are some WordPress themes that will show these, but if yours doesn’t, you can use it to add an image that will only show when someone clicks your Pinterest button. It’s effectively a hidden image, but you don’t have to muck about with your HTML.
If your theme shows the Featured Image in your blog posts, this may be more of a pain than a useful thing. This can be a bigger problem if your theme restricts the size of the image you can feature. But in most cases, it’s a good idea to use the Featured Image.
Always Use Alt Tags
While this won’t determine which image visitors pin to Pinterest from your site, alt tags on each and every image in your post will help ensure that they have accurate descriptions on Pinterest. Without alt tags, the information shown on Pinterest can be too vague to attract repins or traffic to your site.
Taking advantage of the fact that you can control which images are pinned to Pinterest allows you to make the most of what appears there from your site. Your site can look the way you want it to, rather than have every displayed image look Pinterest-perfect. Play around, and you’ll see that I have an example of everything except hiding the whole page from Pinterest on this post. The butterflies are set as the featured image, and the cats are the hidden image. My logo at the top of the blog has the nopin tag.