Want to hide Pinterest images on your blog?
Maybe you feel that the tall image sizes Pinterest prefers detract from your blog design.
Or maybe you create multiple Pinterest images for each blog post, and don’t want all of them to appear until someone goes to save a Pin.
Hiding a new image is also a great way to go back and add fresh images to older blog posts.
There are several ways I’ll share to hide images – plus ways to make Pins less distracting on your web pages!
You can choose which works best for your needs and tech level (don’t worry, they’re easy!).
Is it OK to hide Pinterest images on my website?
You may have read that Pinterest requires Pin images to be visible on your linked page.
But in late April 2018, Sarah Hoople Shere, Product Marketing Manager at Pinterest, confirmed that your Pins only need to be clearly related to the page they link to.
It doesn’t have to be the exact image. The Pin doesn’t need to be a mirror image of anything on your landing page.
It’s less about the image itself – it’s about the relevance and content of the image. The most important thing to remember is that the Pin description matches the title or content of the page it links to. The keywords should match.
Be sure to match the style, content, and keywords – and don’t worry about hiding Pins on your web page.
Doesn’t Google hate hidden images?
Well, sometimes. If Google already suspects your site of being spammy, they may take notice (and dock you for) using the display:none code that’s often shared online.
Why? Because spammers often use that code to hide keyword stuffing on their web pages.
But not you, of course. So you should be safe. There are alternate methods I’ll share, as well.
Additionally, if you’re using display:none to hide a large file size, know that the image still has to load with the page, slowing your site speed. Google doesn’t like slow sites either.
But we have workarounds for that, too!
Do hidden images require a lot of coding?
The free methods require a small amount of code. You need to go into the “Text” or HTML side of your Edit Post page, and add the code I’ll give you below.
There are also plugins at a minimal cost that handle everything for you, behind the scenes.
I’ll mention these below, as well.
The hidden image code that Pinterest loves most
Let’s face it, when given a choice, we should go with what Pinterest recommends!
Pinterest says we should use “data-pin-media” to hide images. This only works when you link the hidden image to an image that will appear in the post.
So if you have a horizontal image, or a screenshot, that you don’t want your readers to save, this is the code for you. Link a Pinterest-optimized image to the visible one by using the code below.
You could also show a small image in the post, and link to a 600×900 pixel version. The small image on the website may be less likely to be scraped as a stolen Pin, or be a victim of other visual content theft.
If your reader uses the official Pinterest share button, the linked image will appear as the one to Pin, instead of the visible one.
To use this code:
1 In Edit Page (or Post), start by inserting the image you want seen in the post or page as you normally do.
2 NOW add the image you want to be invisible yet pinnable. Then switch to the “Text” view.
3 Find the image tags for the two images. Combine them into ONE by removing the part I’ve shown and replacing it with data-pin-media.
4 Go back to the “Visual” view and ensure your image doesn’t appear.
If your code worked correctly, you’ll see the image you don’t want saved on the page, but the other will be visible for sharing on Pinterest.
Here’s the big picture:
<img src="VISIBLE IMAGE NAME HERE" alt="ALT TEXT HERE" data-pin-media="PINNABLE IMAGE NAME HERE">
IMPORTANT NOTE: Be sure you have straight quote marks and not curly quotes.
The hidden image code that’s shared online most often
1 In Edit Page (or Post), start by inserting the image into the post or page as you normally do.
2 Now switch to the “Text” view.
3 Find the image tag for the image you want to hide.
4 Add this code before the opening img tag.
<div style ="display:none;">
Add this code after the closing tag.
5 Go back to the “Visual” view and ensure your image doesn’t appear.
If your code worked correctly, you won’t see your image. Your image will be hidden from your post, but visible for Pinterest sharing.
Super fast-loading hidden image code
We can do this one better by combining these two!
Hide a super-small image file and link it to the image you want Saved to Pinterest.
1 To start, you can save the tiny image below. I made it black so you could see it 😉 It’s only 156 bytes! At 200×100 pixels, it’s the smallest size Pinterest will “see” as a pinnable image.
Add this image to your media library and use it as many times as you like.
2 In Edit Page (or Post), insert the mini image into the post or page as you normally do.
3 NOW add the image you want to be Saved, then switch to the “Text” view.
4 Find the image tags for the two images. Combine them into ONE by removing the part I’ve shown and replacing it with data-pin-media.
5 Add this code before the opening img tag.
<div style ="display:none;">
And this code after the closing tag.
6 Go back to the “Visual” view and ensure your image doesn’t appear.
If your code worked correctly, you won’t see any image, but your optimized image will be visible for sharing on Pinterest.
Here’s the big picture:
<div style="display:none;"><img src="MINI IMAGE NAME HERE" alt="ALT TEXT HERE" data-pin-media="PIN IMAGE NAME HERE"></div>
Kudos to Mediavine for this hack.
Is there an easy way to hide Pin images?
Yes, if you’d like to avoid any coding, you can use a plugin.
These offer many easy-to-use features in the paid version for approximately $29 per year, including:
- Hide Pinterest-specific images from your page
- Set Pinterest descriptions
- Utilize alt text for SEO and accessibility
- Disable pinning on certain images
- Add a hover button on all images
All without any coding!
I’m not able to add plugins to my site, so I can’t recommend one over the other, but you can find more details on each at the links. Note: I’ll make a referral fee if you purchase.
Gah! What else? This is confusing…
If you don’t care if the images are available for your readers to Save, you can simply upload a Pin image directly to Pinterest or Tailwind.
Don’t forget to include the URL of the page you wish to link to, and an awesome Pin description.
Wait – there’s more! How to minimize Pin images on the page
This won’t hide the images in your post, but it will minimize them.
You can embed a small Pin image (or several) instead of showing the actual image file.
Below is a screen shot of how I used 3 small embedded images in this post. Interesting to see how the repins stack up on the different images!
I’ve tested it and determined that embedded Pins actually load a bit faster than having the images in the post themselves.
Note that embedded Pins must be repinned and won’t show up to be saved as a “fresh Pin.” These are great for getting repins, but as the content creator, you should not repin your own content, but save a fresh Pin each time. Read why here – point 15.
Hidden Pins conclusion
So many options! Which works best for you?
How will you choose to hide Pinterest images on your blog?