How to Hide Pinterest Pin Images on Your Blog Posts

How to Hide Pinterest Pins On your Blog But Still Make Them Pinnable

One of the keys to having any success with Pinterest is to create tall, attention grabbing graphics called pins and embedding them on each blog post you create. This way when a viewer decides to share your blog post on Pinterest from the page, the graphic shows up as an option.

The two dimensions I’ve had most success with are 600 x 1350 and 350 x 1060:

Find Your First Winning Product to Sell on Shopify- 5 killer Product Research Methods to Uncover Trending and Hot Products on the Web!

So large and tall graphics are essential for your pinnable images to go viral on Pinterest. This is why you will often see these large images embedded inside a blog post– they are ugly and stick out like a sore thumb while cluttering the page. But bloggers still do it, not for the viewer, but for Pinterest so when a user decides to share the content, they can select that graphic to pin onto their boards.

The intrusive nature of pinnable graphics begs the question:

“Is there a way to hide them on my blog post while still allowing them to be pinnable by the user?”

That’s what I’ll show you in this quick social media tip- How to hide Pinterest pin images on your blog posts.

How to Hide Pinnable Images on Your Page

To hide unsightly Pinterest pins in your blog post, simply follow the below two steps. My instructions are for WordPress users, though the general idea is the same no matter what CMS you use.

Step 1:

Inside WordPress Admin Dashboard, insert the large pin into your blog post (I like to do add it to the very end of the post), then click on the image inside the Visual Editor:

How to Hide Pinterest Pinnable Image In Your Blog Post
Step 1: Insert Pinnable Image, then select it by clicking on it inside Rich Editor in WordPress

Step 2:

Click on the “Text View” tab to switch over to source code mode. The code for the image should be highlighted automatically. If not, find it manually, and highlight the code:

How to Hide Pinterest Pinnable Image Step 2
Step 2: Switch to “Text” View, and Highlight Entire Pinnable Image Source Code

Step 3:

Here comes the magic! Now wrap the existing <img> code with a <div display="none"> tag, so the final result looks like this:

<div style="display:none"><img class="alignleft wp-image-967 size-full" src="https://www.bestofbudgets.com/wp-content/uploads/2017/12/shopify-best-product-research-methods.png" alt="Find Your First Winning Product to Sell on Shopify- 5 killer Product Research Methods to Uncover Trending and Hot Products on the Web!" width="350" height="1060" /></div>

Here’s a screenshot of the result:

How to Hide Pinnable Images on your Blog Post
Step 3- Surround Your Image Code with the shown DIV element

And that’s it! When you switch back to the “Visual” tab, the pinnable image should no longer appear.

Testing Out Your Invisible Pinnable Image

Once you’ve updated your blog post to hide the Pinterest graphic, it’s a good idea to test it once to make sure the process is working for you and that the graphic is still pinnable.

Load and refresh your blog post in the browser, then simulate sharing the post on Pinterest. There are many ways to do this depending on how things are set up on your blog for sharing.

I have Sumo sharing icons on the right hand side of each blog post. Using this blog post as an example,  I’ll just click on the “Pinterest” icon to share that post on Pinterest:

Hiding Your Pinterest Pinnable Graphic on your blog Post
Confirm the pinnable image appears when you try to share post on Pinterest

Success! The highlighted tall graphic in invisible on the blog post, but still shows up when I try to share the post on Pinterest.

Pro Tip: Regardless of whether you’re hiding your pinnable images or not, always enter a descriptive, catchy alt text inside the <img> tag. Pinterest uses the text you specify here as the description for your pin, so make it a good one!

A Caution about this Technique and Lazy Image Loading Plugins

A word of caution if you are lazy loading your images to speed things up on your blog- an additional tweak to the above instructions may be needed.

With some WordPress lazy image loading plugins such as a3 lazy load, once you’ve hidden an image using the technique I’ve outlined above, the actual image will never appear, even when you try to share it.

The way around this is to tell the plugin to not lazy load the pinnable images. How to do this depends on the plugin, but for A3 Lazy Load, there is an option in the settings to skip trying to lazy load images that contain a certain CSS class:

How to Skip Lazy Loading Images in a3 WordPress plugin

Once you’ve configured the setting, all that’s left is to modify your <img> source code and inject that CSS class so the plugin won’t attempt to lazy load the graphic:

<div style="display:none"><img class="alignleft wp-image-967 size-full nolazyload" src="https://www.bestofbudgets.com/wp-content/uploads/2017/12/shopify-best-product-research-methods.png" alt="Find Your First Winning Product to Sell on Shopify- 5 killer Product Research Methods to Uncover Trending and Hot Products on the Web!" width="350" height="1060" /></div>

Notice how I just tact on the designated CSS class value to the end of the list of existing values for the “class” property inside the <img> tag. As long as each value is separated by a space, you’re fine.

Now that our pinnable image isn’t being lazy loaded, when the user tries to share it on Pinterest, it will appear as intended. Yay!

Conclusion

If you run a blog, you probably already know the power of Pinterest for getting consistent, quality traffic to your site. 60% of all the traffic we receive on BestofBudgets.com comes with Pinterest, dwarfing even Google. That’s how powerful Pinterest can be to your site’s success.

Creating large and tall pinnable graphics and adding them to each blog post is so important, but can also become so intrusive. With the technique I’ve shown you, you can have your cake and eat it too!

See How to Hide Intrusive Pinterest Pins on Your Blog Posts While Still Making Them Pinnable. Easy to Follow Instructions!

1 thought on “How to Hide Pinterest Pin Images on Your Blog Posts”

  1. Thank you so much! I use Shopify and this worked the first time I tried and it was easy. Your instructions were great. I’ve searched for ages trying to solve this problem. None of the “fixes” worked. Now I can have beautiful Pinterest-ready images hidden in my website!

    Reply

Leave a Comment

Read previous post:
7 Best Shopify Training Courses- Master Shopify and Facebook Advertising with video courses!
7 Best Shopify Training Courses and Videos to Master Shopify (and Facebook Advertising)

So your goal this year is to finally start your own Shopify Store and make money.You've heard enough about all...

Close