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, per Pinterest’s latest best practices.
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 Pin images on my website?
You may have read that Pinterest requires Pin images to be visible on your linked page.
But Pinterest has 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.
However, 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 better methods to hide Pins!
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 to add it.
Note: I’ll share 3 options for coding. I recommend #1 and 3, not display:none.
There are also plugins at a minimal cost that handle everything for you, behind the scenes.
I’ll mention these below, as well.
1 | 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.
2 | The hidden image code that’s shared online most often
Note: I don’t recommend this one! The image still has to load with your page, slowing your site down.
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.
</div>
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.
3 | 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.
</div>
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.
Two I am aware of for WordPress are Grow by Mediavine and Tasty Pins.
Tasty Pins offers 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!
Grow includes other social platforms as well. I’m not aware of their Pinterest-specific features. You may have to dig a bit as I don’t see them listed on the linked page, but I’ve heard they support hidden Pins.
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. Disclosure: I’ll make a referral fee if you purchase Tasty Pins.
Check out Grow by Mediavine and Tasty Pins.
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 screenshot 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.
Hidden Pins conclusion
So many options! Which works best for you?
How will you choose to hide Pinterest images on your blog?
Deborah von Donop says
Great Post. Just when you think you know all you need to know about Pinterest, along comes this golden nugget of great information. thx.
Louise Myers says
Glad it helped!
Talita says
Hi Louise, I was wondering if you could help me. The image will hide, but won’t show up as pinnable. It only shows the feature image. I’ve tried to clean the cache, but no luck. I’ve searched everywhere on the internet for an answer – would you be able to provide guidance? Thanks
Louise Myers says
I’ll try! Which method did you use to hide the image? Which ways have you tried to pin (which social sharing buttons, plugins, browser extension etc)?
Lisa says
Hi Louise,
Very helpful article, thanks.
I have however two problems…
1. When I hover on my image, the “pin it” button hovers above the image and when I try to click on it, it disappears. Clicking on the image itself also doesn’t result in the Pinterest box to pop up. I discovered I can “right-click” to save the pin but am worried that my site visitors don’t know about this and won’t pin my pin out of frustration. Do you know a way to be able to just click on the image to pin it?
2. My other problem is that I have hidden a pin with the display:none technique but when I click on my other visible pin, only that pin shows up in the pinterest save box, the hidden pin doesn’t show up so how will it ever get pinned?
Sorry for these long questions, I hope you’ll be able to help me somehow.
Thank you,
Lisa
Louise Myers says
I can’t answer Q1 because this would depend on your social sharing plugin and possibly the browser or device you’re using.
Q2, hidden pins won’t show by clicking on another pin. Only the pin clicked will populate the Save box.
Do you have a social sharing plugin on your site? It sounds like maybe you don’t.
Lisa says
Hi Louise,
Thanks for the reply 🙂
I fixed my first problem with the plugin “jQuery Pin it button for images”.
About Q2: When I visit other blogs and I click on an image to pin it, all images of that blog post pop up to choose from, do you know how I can achieve this?
Thanks
Tasha says
You’re right, it’s definitely pretty confusing, but you’ve helped clear the muddy water for me a bit. Still don’t know which option I’m going to go with, but at least I understand the options a little better. Thanks for a great post and for sharing your knowledge!!
Louise Myers says
You are welcome, Tasha!
Milan Tesic says
Adding inline styling is bad practice for SEO. Google wants HTML, CSS and JavaScript all separated.
The right way would be something like this:
And when you go to Appearance -> Customize -> And find where it says additional CSS
You will write this code in additional CSS:
.hidden {
display: none;
}
Learning basic HTML and CSS is very simple. If you have a website it is something you must know.
Louise Myers says
Thanks for offering yet another option. Not really sure where you’re putting this to apply to individual images though. Maybe you left a step out.
Chelsy says
You would have to connect the CSS code to the Pin by putting:
.pinterest-hidden {display:none;}
Then, when you add an image to your post, click to edit it and put “pinterest-hidden” where it says Image CSS Class.
This works like a charm but sometimes I notice the Pinterest share button and Tailwind Scheduler will not recognize the hidden pins, even if I clear the cache – any tips?
Louise Myers says
Thanks, but it’s still not recommended to use display:none for the reasons detailed in the article.
luis says
Hi Louise, I used your code in my blog and it has been working until some weeks ago. I have not change nothing in my blog, but now my hidden images do not appear when you click in the pin button. Do you know if something has changes in Pinterest, the behavior of its button, or in Chrome? Thanks in advance!
Louise Myers says
Not sure which method you used to hide it, or to pin it. I tried one of my posts and the hidden image did appear with the Chrome browser extension.
Rob says
I suspect this may have to do with Gutenberg. Since the roll-out, I’ve noticed that images I’ve hidden, either with “display:none;” in the img tag or in a tag are invisible to Pinterest. If anyone finds a workaround, that would be fantastic. 🙂
Louise Myers says
“data-pin-media” is still working for me. I’ll ask around though. I’ve heard most people hate or barely tolerate Gutenberg, so it that’s you too, disabling it is another option.
Louise Myers says
Here are 2 suggestions:
1. Make sure quote marks are straight and not curly.
2. From another Pinterest user: I have noticed that it works easiest when I make each hidden image its own block, allow the “figure” tag to stay there (whatever that does), and wrap each image in its own div tag as well.
I don’t use Gutenberg so that’s Greek to me.
Christina says
I’m glad it’s not just me… stil struggling to figure it out!
Amy says
I found this extremely helpful. I like to hide numerous pinnable images on my page, but my page loading speed is suffering. I plan to go back and do this to all my images. I do have one request. Is it possible to update this tutorial for the Gutenberg editor? There are some differences I had to experiment with to get it figured out. Here’s an example:
Original code in Gutenberg blocks:
Code using your image and method:
Louise Myers says
I can’t see your example, and unfortunately don’t know anything about Gutenberg editor. If you posted HTML, you might be able to send it to the comment reply you get by email.
Elle says
Wow – this is exactly what I needed to learn! You are brilliant, thank you!
~Elle
Kay says
When I try to do the combined method (hidden box + pin media) for 3 different images, only the 1st image shows up. Do you know if I need to use 3 different hidden image files or should I be able to use your black box file 3 times?
Louise Myers says
You must do the whole thing for each hidden image. You can’t link 3 files to 1.
Kat says
Great post. Really helpful and what I’ve been needing to do on my new site. I’m in the process of implementing- hiding pin images and want to fix what shows up when uses press the Pinterest share button at the bottom of the post. It’s set to the featured image so I’m trying to figure out how to view and edit the featured image code (it’s not shown in the post code view) so I can add the pin image and make that show up when the pin/share button is pressed. I’m new at all this. Any tips before I go get lost in Google? Thank you 🙂
Louise Myers says
Various share systems pull different info. If yours pulls in the featured image and you can’t change that, you should be able to set which is the featured image on your post dashboard, if you’re on WordPress.
Otherwise you’ll have to Google your blogging platform and/or share system.
Trang says
When I try to pin your blog using the share button, I only see a plain black rectangular image in the popup box.
Meanwhile, using a Chrome extension Save shows me 3 different types of images to pin.
I wonder if there’s something one can do to set the image that will be pulled in when a visitor clicks the Share button. As content creators, we need to cover all grounds.
Louise Myers says
Unfortunately my share system is built into my platform and it’s seriously messed up.
To set only ONE image that can be pinned, you need a plugin like Social Pug or Tasty Pins.