How to Hide Pinterest Images in Your WordPress Gutenberg Posts

If you’re a blogger or an online business owner, you’ll know how important it is to get drive traffic to your site. I covered some proven ways to get traffic in this post, and in today’s post I’m going to teach you a nice Pinterest hack that will help you to maximize its traffic boosting possibilities.

Why Pinterest?

Pinterest is a fantastic way to drive traffic to your blog, business page or Etsy store, especially if you use smart scheduling tools like Tailwind and Planoly. Without going into details, I can tell you that Pinterest is one of the best ways to not only discover useful and creative content, but also make sure your content gets found, noticed, bookmarked, and clicked on.

Contrary to what some of you might think, Pinterest is not at all like Instagram – it’s an image search engine designed to help people find and bookmark ideas and creative content. It has a powerful algorithm, its own SEO techniques, and its own science for boosting traffic and click-throughs. One of these techniques is very simple: you should have as many pinnable images in your blog post as you can, ideally around five.

But how can you have five huge pinnable images in your post without it looking bloated and, well, fake? Easy! You hide some Pinterest images with a tiny bit of code.

How to Hide Pinterest Images in Gutenberg Editor

If you google instructions for hiding Pinterest images in WordPress, you’ll get quite a few results with detailed info and screenshots. You’ll go ahead and try those tips and… they won’t work if you’re using Gutenberg, the new WordPress block editor.

But never fear! I’ve done some testing and tweaking, and here is the working way to hide pinnable (or any other images) in Gutenberg.

Before I begin, I’ll give you some background info. When you click on the “Pin it” button, Pinterest checks the page for images and offers you to choose the ones you want to pin. When Pinterest’s algorithm does that, it doesn’t look at actual images – it looks at the code on the page. So, as long as the code for the image is there, Pinterest can grab it. Even when the image is not visible for us, humans. Anyway, let’s get started!

Step 1: Upload Pinterest Images to Your Media Library

That’s very straightforward and I’m sure you know how to do it. Just in case, let’s recap:

1. Log in to your WordPress Dashboard
2. Click on Media – Add New
3. Upload the image

Step 2: Copy the Url of the Image

Now click on the image in your media library to get the large view and copy its URL:

Step 3: Add an HTML Block at the End of Your Post

Yes, that’s right. Not an image block but an HTML block. Like this:

It has to be at the end of the post because otherwise there might be an empty space in the middle of your post.

Now start editing the block and post this code:

I had to post this as an image because otherwise WordPress tries to convert the code.

So, it’s <div style=”display:none;”, then <img src=”IMAGE URL”, then the alt tag (leave it empty so that Pinterest doesn’t grab it) alt=””, then class=”wp-image-301″>, and then the closing </div> tag.

That’s it! Now save the post and check – Pinterest sharing buttons will see the uploaded image. Check the hidden image in this post and, if I helped you, pin it!