How to hide 'pinnable' images in your blog posts

sq hide pinnable images.png

This post sets out the steps you need to take so that you can hide pinnable images in your blog posts.  Obviously any image can be pinned on Pinterest but what I mean are images that are ideal for Pinterest, ie vertical.  

Like me you probably use square (or landscape) images in your blog posts.  I have one square image at the top of each post, which also doubles up as the post thumbnail.  I’d rather not clutter my posts by adding in a vertical image somewhere so that it can be repinned by my readers.

The answer is to use a bit of code to hide the image in your post.  You literally won’t know it’s there when you read the post but when you click Pin It, a vertical, pinnable image will show up as one of the image options to pin.

I use this successfully in Squarespace and I've tested it in Shopify too.  It should work on whichever website platform you use.

So here are the steps to follow:

They’re based on Squarespace but as I said above, the code should work on any platform.

  1. Write your blog post (and feel pleased with yourself for ticking that off the list)

  2. Insert your usual square/landscape blog image or graphic into your post

  3. Make a vertical image or graphic that is suitable for Pinterest (size 800 x 1200 or 600 x 900). I use Adobe Illustrator or Canva

  4. Host the vertical image somewhere - for example, saved in OneDrive or on a hidden Squarespace page (find out how to host files on Squarespace in my post here). Hosting within my Squarespace site is my preferred method

  5. Right click the image and > copy image address

  6. Go to the blog post

  7. Insert a code block (if you are using Squarespace) at the end of your post (or anywhere in the post)

  8. Insert this code into the code block: <div style="display: none;"><img src="yourimage.jpg"></div>

  9. Replace ‘yourimage.jpg’ with the address/URL of your image that you copied in step 5 above. Keep the “ “

  10. Save and publish the post

  11. Go to your website in Chrome and find the blog post. Click the Pin it extension and your hidden pinnable image will show up as one of the images available to pin to Pinterest.

  12. Pin your image and that's it!