- 02 Nov
- Eric Hochberger
Hidden Pinterest Images Hack 2.0: Faster Hidden Pins!
Do you provide collage or long pins for your readers? Are you hiding them from your blog post, so that they only show when someone attempts to pin?
At Mediavine, we recently found out a lot of our bloggers out there are using hidden images to accomplish this goal.
The problem with using a hidden image for Pinterest is that it still 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 now, that site speed is even a factor in Google’s algorithm.
At Mediavine, we take 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, and 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.
So what’s the new trick?
Our trick uses 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.
Okay, geekiness aside. Get me to the code!
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.
Copy and paste that URL where it says data-pin-media=”” and you should be good to go! Test using the Pinterest Chrome Extension or the Pin It button your site.
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.
So why is this better than running the other hidden pin snippets found on the Internet?
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.