This post includes affiliate links. This means I recommend products that I have used and I get a commission if you buy through one link on my website (at no additional cost to you). I only recommend products I've used and I've found useful.

How add hidden images for pinterest

I use Pinterest to promote my blog post. The type of images that work well in Pinterest are long vertical images with text. However, the photos I like to post on my blog are usually quite different; I choose wider images that work well on my webpage, and I don’t include the title within the image. If you are not using Pinterest yet: what are you waiting for? Check out my post on how to create a business account.

So while I always include a “featured” image in my posts, this generally is not the image that I want anyone to use when pinning my posts on Pinterest. This is why it’s convenient to know how to hide photos within a blog post, so when a reader goes to pin the post, they get a few images to choose from, including one (or several) images created for Pinterest.

So, to hide an image in your blog post, you need to follow these steps:

1 – Insert the image you want to hide within your blog post.

I usually insert any photos I want to hide at the beginning of the post. When you create these images, you need to bear in mind that although they are going to be hidden, they will still be loaded with the page. This means that if you add a few big hidden images, this will slow down your page. To avoid this, you need to optimise the images for Pinterest (recommended size for Pinterest is 600×900 pixels) and use image optimisation software. I use ImageOptim (free) to optimise my images before I upload them to my site, or you can also install plugins like “EWWW Image Optimizer”.

2 – Go to the text tab.

You need to add a couple of html lines, which you can only do from the text tab.

3 – Find the image you want to hide.

In the text tab,  images are included in the html code within the <img …/> tag.

4 – Add a new div tag.

To hide the image, you need to add a new div tag around all the components that you want to hide. The new div tab needs to include the style attribute display:none to ensure that everything within the div tag is going to be hidden.

<div style=”display: none”;>

All code that we want to hide goes here.

</div>

See a working example below:

Any code included within the <div…>  </div> tags will not be displayed so you can include here as many images as you want.

5 – Check the results.

Save the blog post as a draft and preview the result. Make sure that the post does not show the hidden images but that you can see the hidden image when you try to Pin the blog post.

The hidden image/s should appear with the featured image when you Pin the post.

This way readers wanting to pin your post can use the Pinterest optimised image instead of the featured image meant for the web page.