Find out why you need to hide Pinterest Pins in your blog post
Why would you want to hide Pinterest pins? Don’t the images have to show on your website, for someone to share on Pinterest?
Yes… and no.
Compared to the ideal featured image size for your blog post (560px x 315px), the ideal size for a Pinterest pin is huge (735px x 1102px)!
What if you don’t want lots of long Pinterest images
showing in your blog post?
The answer – hide Pinterest pins in your blog post.
This means that no one can see those particular images until they click on the Pinterest social share icon. Then they’ll see all images including those previously hidden.
Clever, eh?
In this tutorial, you’ll learn how to easily hide Pinterest pin images
in your blog post by using a short html code
An example of a Pinterest pin that’s not been hidden
Many websites now include large images, but others still prefer to hide them. Here’s an example of a full-size (735px x 1102px) Pinterest pin, that’s NOT been hidden – feel free to pin it!
How to hide Pinterest pins in your blog post
- create your image to the suggested Pinterest size 735px x 1102px (Canva is good for this purpose)
- download your image and upload it to your website’s media collection
- type in the image title, alt text and description – remember, the alt text is the wording that will automatically populate when someone pins the image to Pinterest
- open the blog post for the hidden image
-
TIP: it’s a good idea to always hide the image at the top of your post so that it’s easier for you to find if you later decide to remove the coding and show the Pinterest image.
Note: there’s a huge Pinterest image (about launching my website journey) hidden above the first sentence in this tutorial – you’ll be able to see it if you click the Pinterest social share icon.click the “visual” tab on the post edit screen so that you can see your post images and text
- press “return” at the top of the blog post to make an extra line to create some space to insert the image
- click “add media” and insert your chosen Pinterest pin image in that space (at this stage you’ll be able to see the image in your post)
Here’s the clever part…..
- switch to the “Text” tab so that you see the html codes for your post
- at the top of your screen (where you placed the image) you’ll see the image html for your Pinterest pin. If you’re unsure of what the image code looks like, check out the screenshot below with the yellow and red outlines:Red outline – the html snippet used for hiding the Pinterest Pin, is shown outlined in red.
Notice how the html snippet is placed immediately before and after the image html, in the Text tab.Yellow outline – I’ve circled the image html in yellow so you can identify where the image html begins and ends.Here’s the code snippet to hide the image…
- type this html code (shown outlined red in the above screenshot) immediately before the image code (ie, before: <img src= shown circled yellow in the above screenshot):
<div style=”display:none;”> - type this html code immediately after the image (ie, after: /> ):
</div> - switch back to the “Visual” tab and the image will have disappeared – you’ll no longer see it at the top of your post, but it’ll be available when people click on your Pinterest social share icon
- if there are extra spaces at the top of your post, switch back to “Text” tab (so that you don’t accidentally delete the hidden html code) and delete those additional spaces from the top of your post
An example of a hidden Pinterest Pin – what does it look like ?
When you initially insert your image, you’ll be able to see the image at the top of your blog post. It only disappears from view once you’ve added the html code (aka snippet).
For example, I’ve inserted a hidden Pinterest pin above the first sentence in this tutorial (here’s a thumbnail so you’ll know what image to look for when spotting the hidden Pinterest pin – it relates to the launch of my website journey).
You won’t see the full size of that hidden Pinterest image (735px x 1102px) until you click the Pinterest social share icon to the left of this tutorial.
What if it doesn’t work and I can still see my Pinterest Pin on the blog post?
The html codes definitely work to hide your Pinterest pins, if done correctly.
If you can still see the Pinterest pins in your blog post, go back to the “Text” tab in your blog post editor and double-check that you’ve added the html code exactly as shown in the example above, immediately before and after the image – delete any additional spaces, switch back to the “Visual” tab, and the image will have disappeared.
It’s such a clever little hack. Have fun using it.
- Monzo Bank review – 100% smartphone banking exceeds expectations - 16th October 2016
- Atom Bank review – the new player on the banking field - 4th September 2016
- How to use SendinBlue email automation – step-by-step guide - 19th August 2016