Want to hide Pinterest images on your blog?
As a blogger, Pinterest has the potential to drive huge amounts of traffic to your blog. For driving that traffic, you need to use vertical images which are designed specifically for Pinterest, but sometimes it doesn’t suit to have such a long image in your post pages.
The solution for this is to hide the images so that they aren’t visible to readers but can still be pinned.
Doesn’t Google hate hidden images?
Well, yes. The reason for this is that spammers often use that code to hide keyword stuffing on their web pages.
Another problem that might occur with hiding a large size image is that the image has to load with that page, and when you have many images hidden like that on your site it is slowing your site speed. Well, Google doesn’t like slow sites either.
What can you do?
There is a Google friendly technique for hiding Pinterest images. The technique is to hide a pinnable image within another image using Pinterest’s HTML code. This technique is only good if you have an image that you want it to appear on the post page, while linking the hidden image to it. This is how it works:
There are 3 different Pinterest codes you can use:
- Data-pin-url – lets you set the click-through link for your vertical image, set this as your blog post URL.
- Data-pin-media – lets you specify an alternate version of an image for Pinterest, your vertical image that you don’t want visible in your blog post.
- Data-pin-description – lets you set a default Pinterest description for your vertical.
Follow these steps:
- Upload an image that you want to be visible to your readers and place it in your post page.
- Upload the vertical Pinterest image, but don’t place it in the post page (just store it on your site).
- Add the Pinterest code to the image tag (the one that is visible).
Your final code should look something like this:
What if you want to hide a few Pinterest images?
This technique of hiding a pinnable image is only good if you hide it within another image. But in case you want to hide a few images you will have to use one of these two techniques:
1.Hide a Pinnable image with CSS code:
This is the most well-known technique to hide Pinterest images in your blog by using style=display:none;
2.Super fast loading trick that combines the CSS coding and the Pinterest codes:
By using this code, you will still have to hide images but smaller ones (therefor the loading is faster), and linking the Pinterest hidden image to the small image.
Follow these steps:
- Create a small image – size 200*100 pixel (this is the smallest size that Pinterest will “see”, which is only 1.23KB!)
2. Upload this small photo to your site storage, but don’t place it in the post.
3. Use this code to hide the image and link the Pinterest hidden image.
At the end of each technique you must check that everything is working, the Pinterest image is hidden and visible to Pinterest.