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:
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.
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:
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:
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:
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:
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:
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!
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!