While the Pinterest image hack below is still a viable option for bloggers who want to have their Pinterest images on their blog hidden (not visible within the post itself) Grow Social Pro has the built-in ability to add in hidden Pinterest images!
The problem with using a hidden image for Pinterest is that it slows down your website. The browser will still load this image even if it’s “hidden.”
And most of the time, these images are huge. Not just in dimensions but in actual download size, because they’re large, long pins with high resolution.
That means that a hidden image can be real drag on your site’s initial load time. Google doesn’t like that.
Site speed is more important than ever, now that users are coming to your site more and more on mobile devices. It’s so important in fact, that site speed is a factor in Google’s algorithm.
At Mediavine, we’ve always taken site speed extremely seriously because it impacts your bottom line as much as it does your ranking in search results, as it can slow down ads from loading too.
Pinterest’s minimum pin size is 100 X 200. But we all know a pin that tiny is defeating the purpose of building a collage pin at all.
We need a way for the Pin button to initially “see” a smaller, but pinnable file. Then when the button is clicked, the larger file – the nice big giant collage pin – gets called for and loaded at that time – instead of when your site initially loads.
Adding hidden Pinterest images to your posts is easy with Mediavine’s Grow Social Pro WordPress plugin.
It just requires the right settings within the plugin and then you can select the images that you want to be pinnable via that post from your Media Library! A couple of clicks and you’re all set!
First, you’ll want to make sure that hidden images are enabled on your site. Otherwise, you won’t see the options within your post editor to add the hidden pins.
To do this, navigate to the Pinterest Settings (Grow > Pinterest) and enable the following two settings:
For custom pins to pull properly the user will need to have Add Post Pinterest Image as Hidden toggled on.
If the user wants to add more than one hidden image they will need to also toggle on Multiple Pinterest Hidden Images.
Once those settings are enabled you will see the option to add hidden Pinterest images from within your post editor on WordPress. Just scroll down to where you see “Grow: Share Options”.
When this is filled out, it will look something like this:
When you use Grow Social Pro’s Pinterest button on the live post these hidden images will be available to be pinned:
The results after clicking on the Grow’s Pinterest button will vary depending on your combination of Pinterest settings and what images you want to be available for pinning.
Well, first question is: Why don’t you?!
But this hack works without the free plugin, using a combination of the “hidden image” technique and a super lightweight placeholder.
It uses the same hidden image trick, but instead of hiding your pinned image, it’s serving a super light-weight fast-loading placeholder image that meets Pinterest’s 100x200px image requirement.
We then set your actual image inside the HTML5 data attribute that Pinterest uses to decide what images are pinnable when someone presses a pin button.
The image you’ll want to insert looks like this:
<div style="display:none;"><img src="//scripts.mediavine.com/assets/100x200.png" alt="" data-pin-media="INSERT IMAGE HERE"></div>
That area you see INSERT IMAGE HERE? You need to insert the link to your image!
If you run WordPress, we recommend uploading your image via the “Add Media” button and then in the media browser grabbing the URL from the info section where it shows URL.
The code should then look like this:
<div style="display:none;"><img src="//scripts.mediavine.com/assets/100x200.png" alt="" data-pin-media="https://www.mediavine.com/wp-content/uploads/2016/09/box3_img.png"></div>
https://www.mediavine.com/wp-content/uploads/2016/09/box3_img.png is the link to our selected image.
HINT: If you want this to be the first image users get to pick? Insert it right at the top of your post’s HTML, before any other images are listed.
The Mediavine Hidden Image Pinterest Hack 2.0 is up to 5000 times faster.
Our hack uses an extremely lightweight 100×200 image that’s less than 200 bytes. The average image we’ve seen hidden on a site for Pinterest is closer to 500,000 bytes. That’s a BIG difference.
With our trick, the average user is only loading 200 bytes on page load, and they only have to load your big, beautiful image when they actually click the Pin button.
It’s almost “lazy loading”, but for a pin image. They won’t try to load this image until they call for it, by pressing the Pin button.
That’s going to save you a lot of bandwidth and make your users and Google love you even more than they hopefully already do.
Stay up to date with the latest from Mediavine
Yes! If that is all it takes to convince you, then our work is done here. If you need more information, let’s dive in… A successful blog is an essential part of …
Eric recently told you about Google Web Stories — a fun and actionable way to get new readers to your site through Google Discover, a feed reader anyone can use. …
Instagram is a wonderful tool for your business. From Reels and IGTV, to Stories and the Feed, there are so many ways to build your brand’s voice through the popular …
