Tired of scrolling for days past all the long Pinterest Images to read a blog post? Ugh, me too friend. As a creative entrepreneur, you know that blogging and Pinterest go hand-in-hand. And it’s been said that pinning images directly from the blog post is best for SEO purposes. Hiding Pinterest images on your blog is possible and absolutely easy. Only a little bit of code is needed, and it’s as simple as copying and pasting the code in the correct location.

[Note: This post has been updated for WordPress’ Gutenberg Editor. Scroll to the bottom for additional notes.]

Why you should hide images in your blog posts:

First, having multiple Pinterest images on a single blog post is one of the best ways to improve your Pinterest traffic. However, having so many images on a post can be distracting (and a little annoying) for viewers. Having multiple images on your blog post with the functionality of hiding them allows you to have the best of both worlds. Secondly, when you have different images on Pinterest, you are able to do some A/B testing to better understand which images or pins are responding best.

Is hiding Pinterest images allowed?

The quick answer is yes, it’s okay!

In April of 2018, Pinterest confirmed that Pins and their description only need to be related to the content and the page they link to. AKA make sure your pinnable images have the same style, content, and keywords associated with the post.

As for Google, we know that this search engine doesn’t love the code (display:none) we will be using. And that’s because a lot of spammy sites use that code to cram their post with hidden keywords to cheat the system. But Google knows, y’all. However, since we won’t be using this code excessively, it won’t be a problem. I’ve been doing this for myself and clients over the years and never felt that Google docked me because of it. However, keep in mind that these images still load with the post. So for SEO purposes, it’s important to compress them and keep them as small as possible to increase page load times.

How to hide Pinterest images with the Classic Editor.

1. Upload your photo to your post.

Use the Media Library to upload your images. My organized (and slightly OCD) self likes to add my Pinterest images to my blog post at the very bottom of the post so they are easy to find. When you are uploading your pinnable image, make sure you change the title, alt text, sizing, and any other specifics you would like to change.

2. Hide your image in your post.

After your pinnable image(s) have been uploaded, head over to the HTML editor, and scroll to where your images are. Look for the code that begins with: <img class=”. Don’t be afraid to hit enter to better see the different image blocks of codes we will be placing.

Once you have found your image, paste this code before your image’s code: <div style=”display: none;”>

And then paste this code after your image’s code: </div>

So once everything has been pasted, the new code should be: <div style=”display:none;”>IMAGE CODE HERE</div>

3. Test your new hidden pins.

Once you have pasted the short codes, switch back over to the visual editor to confirm that the images have “disappeared.” Take it a step further by previewing the post to confirm everything is working correctly.

4. Create a social share button.

Now that you have your images hidden, your readers have to get to these images to pin them, right? There is absolutely no point in hiding your images if we can’t find them. If you’d like to see a physical example of how hidden pins work, select the Pinterest share button on this post!

If you happen to not have social share buttons for your blog, you can go to Pinterest and manually add a new Pin. Simply paste in the URL and your pinnable images should pop up.

How to hide Pinterest images with the Gutenberg Editor.

Ahh, the Guetenburg Editor has made its way to me. I haven’t decided if I should be happy or sad yet. But I have already realized that when using this Editor, the above tutorial needs a few more tweaks in order to hide your Pinterest images. But thankfully it’s as simple as deleting a few lines of code and pasting a couple more (Hooray!).

1. Upload your Pinterest Image(s).

First, upload your Pinterest Image(s) into the Media Library like you usually would. Make sure you change the title, alt text, sizing, and any other specifics you would like to image.

2. Edit the image as HTML.

To edit your image as HTML, you will need to select the 3-dots tab (AKA the ‘More Options’ tab), and then select ‘Edit As HTML’.

3. Edit the image’s code.

This is where things look a little different than they used to with the Classic Editor. As you can see, it’s got some code before the image and after it. This code relates to the Gutenberg block system, but it can be edited since we are trying to hide the image.

To begin, delete the code: <figure class=”wp-block-image”> that’s found before the image, in addition to the code following it: </figure>

Now you should be left with just your image’s code, and it should look similar to this: <img src=”http://abigaildyerdesign.com/wp-content/uploads/2019/04/How-To-Hide-Pinterest-Images-On-Your-Blog-Post-Abigail-Dyer-Design.jpg” alt=”” class=”wp-image-280″/>

Now you can hide your image just like you used to with the Classic Editor. So before the image’s code, you will add: <div style=”display: none;”>

And then paste this code after your image’s code: </div>

Once everything has been pasted, the new code should be: <div style=”display:none;”>IMAGE CODE HERE</div>

4. Test your hidden image.

And of course, you can select the ‘Preview’ tab to make sure the Block is empty or your image has “disappeared”. You can Preview the Post as well just to double-check that it really is hidden!

5. Create your Social Share buttons.

Before you hit publish, don’t forget to create social share buttons so people can actually share those hidden images (for additional details refer to Step 4 of the Classic Editor tutorial).

And that’s it, folks. After you’ve done the testing, you can confidently publish your post. Sit back and see how doing this increases your post views and Pinterest game!

If you happen to be allergic to coding, then no worries, friend! I’ve got your back with an alternate solution! There are plugins out there that can be used. The only plugin that I have used and would recommend is Tasty Pins, and it does all of the above (and more!) for you with just a few clicks. The only negative is that this plugin isn’t free and charges you a yearly fee (currently $29 as of April 2019) to use the plugin and get any updates.

Lastly, if you aren’t following me on Pinterest, I’d like to think you’re missing out! I’m always pinning educational resources – great for creatives – and design inspiration – that inspire me and make me happy!

If you’ve implemented this tutorial, I would love to know if it helped your blog and Pinterest strategies in any way!