This post has a nice, landscape image just above that ends up looking great if you share it to Twitter or Facebook. But you won’t see any Pinterest images in this post.
Click your Pinterest bookmarklet or browser extension, though. You should see something like this:
That’s because the tall image on the left—all 734 X 1100 pixels of it—is hidden in this page’s HTML code at the bottom of this post.
It’s a pretty genius trick that I picked up from a food blog called Pinch of Yum. All you have to do to make it work is wrap your image code in a short div tag:
<div style="display:none;">Paste your image code here</div>
Viola! Image hidden.
Hiding a Pinterest image on your WordPress page has several advantages:
- You don’t have to share a big, vertical photo, that’s a duplicate of your main title image, on every post.
- You don’t have to awkwardly stuff a thumbnail of your Pinterest image at the bottom of your post.
- You can share Pinterest-optimized images that are bigger than your blog post container.
There are a lot of other upsides to doing this, and I encourage you to click over to Pinch of Yum to read about them. You’ll also find a tutorial on how to build your own Pinterest-optimized (read: vertically oriented) images with headlines in Photoshop.