How to Hide Pinnable Images in Blog Posts (& Why!)
When I create a blog post, I always make more than one pinnable image for it! It gives my readers the chance to choose which pins might appeal most to them. As some people try to keep their Pinterest boards themed this gives me the opportunity to appeal to as many people as possible. Today I’m going to describe the simple steps I take to allow my readers to choose from multiple pinnable images, and how I hide pinnable images in blog posts.
There are a few reasons why you might want to provide multiple pinnable images:
- Give variety to potential pinners.
- To A/B test which pins/colours/wording work best.
- The ability to pin the same blog post to Pinterest group boards without seeming spammy.
However, you don’t want to put all of these images into your post – providing lots of pins in a post can easily take away from the look and feel of your blog post and your website. That’s why you need to embed hidden pins within your posts!
Please note, this post may contain affiliate links.
To learn more, check the disclaimer.
Here’s how to hide pinnable images in blog posts:
- Create multiple pin-sized images in whatever image editing tool you use. Personally, I use and recommend Canva.
- In your blog post in WordPress, add the images to your blog post as you usually would, with the “Add Media” button.
- Switch to “text” mode using the tabs at the top of the editor.
- Find the image tags for the images you want to hide. It’s a piece of code that will look something like this:
<img class="size-large wp-image-312" src="http://www.yoursite.com/wp-content/uploads/2017/05/filename.png" alt="" width="683" height="1024" />
- Right before the
<img class="...place this code:
<div style="display: none">
- Right after the
imgtag finishes (after the
.../>) place this code:
- All done! If you switch back to “visual” mode in the editor, you’ll see that the images are no longer there, however if you go back to the code you know they are there. Magic! And, if you hit the Pin It button in your share bar or by using the Pinterest bookmarklet, you’ll see that all of your hidden images are available to be pinned.
Don’t forget to schedule your pins with Tailwind (get $15 Tailwind credit if you sign up with this link!) and make sure you have them all set to pin to group boards using Boardbooster. If you don’t know about group boards yet, you should read about why Pinterest group boards are the ultimate tool for growing your blog traffic!
A few tips for when you are trying to hide pinnable images in blog posts:
- Always make your pins vertical (tall). Tall pins catch the eye and are more appealing to pinners.
- Make sure you fill in the Title and Alt fields for every image for SEO purposes. This ensures that the pin descriptions have some content filled in for pinners.
- When you’re looking for the image in “Text” mode, scan for the filename to find them easier.
- Always leave one pinnable image on display. I suggest at the beginning or the end of a blog post. Even try to include a request for people to pin it! When they click to pin, they’ll be provided with all the options for your alternative images to pin.
As you can see, it’s super easy to hide pinnable images in blog posts! But it’s something I haven’t seen a lot of people do. I would suggest you try to provide at least a colour variation for all of your blog post pins; one which suits your branding and one which stands out nicely against and contrasts with your branding.
Every now and then I suggest you try to create pins which have slight variations in their titles and wording. This will let you see which get the most traction and repins – helping you learn what your target audience is interested in, while still driving traffic to your blog!
I hope this helped you and that you’ve found it useful. If you did find it useful, I’d love for you to pin it or give it a little tweet!