How To Hide Pinterest Images In Your Blog Posts

  • 6
  •  
  • 56
  •  
  •  
  •  
  •  
    62
    Shares

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.

HTML + CSS Code

<img src="/path/to/your/image.jpg" style="display: none !important;" alt="ALT text here" data-pin-description="Pin description here">

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.

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.

HTML Code

<div class="PinImages">
    <img src="/path/to/your/image.jpg" alt="ALT text here" data-pin-description="Pin description here">
</div>

CSS Code

div.PinImages { display: none; }

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.

CSS Code

div.PinImages { display: width: 0 !important; height: 0 !important; }

Some people prefer this method of hiding your Pinterest images because of concerns that Google will penalize their ranking.

Honestly, this is not something to worry about unless you’re hiding content in an effort to artificially boost your ranking. If your actual page content is visible to the reader, Google won’t mind you using display: none; to hide your images.

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!


Pinterest Images - How to Hide Pin Images
Pinterest Images - How to Hide Pin Images

  • 6
  •  
  • 56
  •  
  •  
  •  
  •  
    62
    Shares

Robert Partridge

After spending 20+ years working in the tech industry and teaching tech courses to college students, Robert now provides professional IT & WordPress support services to bloggers and blogs about the technical side of blogging. Contact him on Twitter, Google+, or via this blog's contact form.

3 Responses

  1. Hi Robert,

    Thanks so much for this great article! I first saw you on the fb group ‘Blogging like You Mean It’ and it was you who recommended the Brigsby theme, which I bought a few days ago. Thanks so much! All going well so far, if VERY slowly! I’m very new to blogging and understand roughly what CSS is but not at all sure about implementing it. I can see where to input it (under custom code) but don’t understand what to do from there. How does it know where to link the code to? And which images to link to? And where does the HTML go?

    On a side note, I’m trying not to get hung up on the appearance of my blog as there are so many other things I know I should rather spend time on, but is there an easy way to add a space between my header text and tag line? They’re very close and although it looks ok on desktop, on mobile it really doesn’t look good to the extent I feel it would be better to remove the tag line altogether….

    Appreciate any help and will keep reading all your great stuff in the meantime!

    Cheers, Sarah

    • Hi Sarah! I’m glad you like the post and the theme recommendation. I’m very fond of the Brigsby theme. I feel like to properly answer your questions I’d have to write a post about HTML and CSS in itself (though I do have a book on this planned). If you’d like, find me in the group and then send me a private message and I’ll do my best to address whatever questions you have. Also, if you find you need professional help with something, I do offer professional WordPress maintenance & support services. You can check out my services site from the Services link here on this site. Look forward to hearing from you again soon.

  1. 2018-06-12

    […] 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. […]

Leave a Reply

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