How To Hide Pinterest Images In Your Blog Posts

A simple, but highly useful, trick that should be in every blogger’s playbook is how to hide Pinterest images within your post. You might be wondering why hide your images? A few reasons: improved site appearance, improved page load speeds, and the ability to host multiple Pinterest images for people to choose from when pinning your posts – more on this, though, later.

WARNING! HTML & CSS CODE AHEAD!

You’ll want to enter the HTML code from this post in a text style editor instead of a visual editor. If you’re not familiar at all with HTML or CSS – I promise you that you can do this. If you have questions, feel free to ask below in the comments.

How To: The Basics

This is the way I’ve seen a number of other bloggers hide Pinterest images. While this method works, it’s not necessarily the most optimal – or easy to remember – way to do this.

You won’t often see the !important included by other people. I prefer to add it just in case there’s an existing style set for the display attribute of images somewhere else in your site. Even though this method works, not everybody wants to remember the CSS code. There is a better way.

If you aren't already using Tailwind to schedule your Pinterest activity (it works for Instagram too!) what are you waiting for? Save yourself time and headache managing your Pinterest marketing with Tailwind.Try it FOR FREE - up to 100 pins - today!*

How To: The Better Way

UPDATE: I’ve modified my solution after helping a few people recently and realizing that Pinterest inserts <p> tags around the images causing there to be extra white space where the hidden images are. This is something I modified my WordPress installs to NOT do when I first set them up so I often forget it does this at all.

The better way is creating a a div with its own CSS class – I like to call mine PinImages. Use this class in your HTML instead of including the CSS itself. For most people, remembering class=”PinImages” is easier than remembering CSS code.

A majority of you reading this likely use WordPress for your blogs. Your theme should have a place to easily add custom CSS code – look under Appearance → Customize. If your theme does not, there are a number of plugins available to add this functionality.

Heads Up

Here’s a heads up in case you run into this problem. Some sharing plugins may experience a problem when you go to pin a post to Pinterest and your hidden pin images don’t show up. If this happens to you, here’s how you to adjust your CSS to work.

If you use Divi

If you use a Divi theme, you may have issues with hiding pin images using a CSS class. Instead what you can do is make use of the field that Divi gives you for each element to add custom CSS code. If you bring up each pin image, and go to the Advanced tab then scroll down to where it say “Main Element” and add this in the box underneath:

CSS Code

display: none !important;

Save and update your post. Repeat this for each pin image you need to hide.

Why Hide Pinterest Images?

As I mentioned at the beginning of the post – some of you may be wondering, Why would you hide your Pinterest images on your post? This is a valid question. I’ve seen a number of bloggers who use a Pinterest optimized image as the featured image on their posts. Allow me to address this scenario and in doing so, address this question.

If you’re using a Pinterest image as your featured image, it’s likely because you want to have a Pinterest optimized image on your post but don’t want to have images at the bottom of your post just hanging out there. There’s some problems with doing things this way.

Mobile vs Desktop

First, even though a majority of your site traffic is likely from mobile devices, anyone visiting from a larger tablet or a desktop PC is going to have a very large image to contend with on the screen before they ever get to your content. While your featured image on mobile doesn’t take too long to load (thanks to WordPress and other systems providing a scaled down – more mobile friendly image to display), on a larger screen you’ll get the full-fat version. This could possibly slow down your page load speed if your site isn’t otherwise well optimized. If this is the case, it could cause an increase in people abandoning your post before it finishes loading.

The Single Pinterest Image Problem

Another problem this causes is that you’re left with only having the option to put a single Pinterest graphic on your post. If you’ve done any research into best practices for promoting your blog on Pinterest, you’ll know that more images leads to better traffic.

This is exactly where hiding your Pinterest images comes in. If you use a featured image that’s optimized for blog design – either wide or square – your page load speed could improve from the smaller image size. Importantly, you also have the ability to host multiple graphics to pin to Pinterest. Worth noting – having hidden images, even multiple images, does not affect your page load speeds. Modern browsers won’t force the user to wait for a graphic to download that isn’t displayed at load time. You can have 10 hidden images in your post and your page will load as quickly as it would if you had none.

Graphic Ownership

Lastly, and this is mostly a matter of personal opinion, I prefer having branded Pinterest images linked in my posts for purposes of proving ownership of the image. There’s a very real problem on Pinterest where people steal your graphics and create custom posts with them to point to their own – usually poor quality – sites. They do this in hopes of stealing traffic away from people with established brands / presence on Pinterest. If you come across someone stealing your graphics and report it to Pinterest, it could be helpful for them if they investigate to see where that image actually belongs.

*POOF!* Your Pinterest Images Have Vanished!

Now, with all that said, you now have hidden Pinterest Images on your blog. If you found this post helpful, be sure to pin it to Pinterest and subscribe to my email newsletter to stay updated on future blogging tech tips like this one. Also, be sure to let me know what you think in the comments below. Thanks for reading!

2 Comments

[…] You might say, “well, I upload my Pinnable images to Pinterest directly and share from there.” That’s great, but they should also be in your blog post! Even if you need to hide your Pinterest images. […]

Robert Partridge

Your email address will not be published. Required fields are marked *

Featured Posts

``

Email Newsletter

Thank you! You have successfully completed step one of subscribing to the Blogging Tech Tips newsletter. You'll receive a message asking you to confirm your subscription. If you do not see it shortly, please check your spam emails and whitelist [email protected]

Subscribe to my free email newsletter so you're sure not to miss out on my blogging tech tips, tricks, and techniques plus subscriber only specials. It only takes a few seconds, and I never sell your information to third parties.

I acknowledge that I have read the Blogging Tech Tips privacy policy. I understand that I can unsubscribe from this list at any time.