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:

copy image 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:

add html block

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!

8
Leave a Reply

avatar
5 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
ElizaAmandaSimmyAriana DaganKale @ steakandkale.com Recent comment authors
  Subscribe  
newest oldest
Notify of
Diana | Wanderinghoofranch
Guest

Thank you!! Very helpful tip

Kale @ steakandkale.com
Guest

Okay, itโ€™s too late for me to process this information now. I am coming back to learn later!!! Thanks so much! ๐Ÿ™‚

Ariana Dagan
Guest

I’ve always wondered how to do this, thank you! Pinned for later so I can try!

Simmy
Guest
Simmy

Such helpful tips, thanks a bunch!!

Amanda
Guest

Just the info I was looking for. Thanks!! I pinned this as well so I can go back to it.