You may have heard of the Pinterest hidden image trick. It’s actually a totally clever way to provide a huge image in a blog post that can be saved to Pinterest — without having the huge image actually shown in your blog post. This Pinterest hidden image CSS code gets it done.
Read on for how to add a “Pinterest hidden image” to your site… There’s also a great guide to Pinterest that has a ton of tips and tricks to increase traffic and engagement. Click here for the full Pinterest guide.
The Pinterest hidden image trick is done just with a tiny little bit of HTML code added around an image in a post. You basically upload a 735×1102 image (can be another size but using that Pinterest-optimized size makes sense) and then reference it where Pinterest will see it but your blog itself won’t display it.
So first upload the image per usual. Then insert it into the post per usual. Be sure it’s set to full sizes and you include the alt text that you want.
Then switch over to the WordPress text editor (not visual editor).
Find the code you inserted for the image (you could also insert from the text mode editor which may make it easier to find).
It will look something like this:
<img class="aligncenter size-full" src="http://yourwebsite.com/wp-content/uploads/big-pinterest-image.jpg" alt="Awesome Pinterest Image" width="735" height="1102" />
You just add these two lines, the first before the image and the second after:
<div style="display: none;"> </div>
The image code goes in between. So the whole thing will look like this:
<div style="display: none;"> <img class="aligncenter size-full" src="http://yourwebsite.com/wp-content/uploads/big-pinterest-image.jpg" alt="Awesome Pinterest Image" width="735" height="1102" /> </div>
It’s actually a really cool trick. That style line adds a little CSS right into the HTML directly and that particular CSS makes something on your page disappear from the reader’s browser without actually removing it from the underlying page source. That’s why Pinterest still sees it there.
Here’s a video that shows the steps above.
Give this a try and let me know what you think in the FB Group. If it doesn’t come up right away let me know and we can check the code and tweak it a little. Once you have it working the first time you can use that as a template for future ones.
If you’d prefer not to mess with this kind of code, the Social Warfare plugin will do this for you.
There’s also an excellent guide to Pinterest that has a ton of tips and tricks to increase your traffic and engagement. Click here for the full Pinterest guide.