Hiding a Pinterest pin image on your blog post sounds counterintuitive, but we’ll tell you why it’s one of the smartest tricks in the trade.

We always say that Pinterest images should be vertical simply because it takes up more real estate on the page. The longer your image is, the easier it is for people to see the entire photo of that rhubarb pie with immaculate pleats instead of squinting to see them in a horizontal image.

Your rhubarb pie has a better chance of being seen if people can easily see the immaculate pleats in the vertical image you posted instead of squinting to see a tiny horizontal picture.

While on Pinterest these images work wonders, having a super long vertical image in the middle of your blog post can be a bit of an eyesore. To battle this issue, all you need is a tiny piece of code to hide your image visually, but have it pop up when people go to pin your blog post.

Here’s what you need to do:

Step 1: Create Your Pin Image

Find a vertical image that fits your blog post. Because you want people to know your blog post title right off the bat, add text onto your image. Our pin images have dimensions of 600 x 900 pixels.

Step 2: Upload Your Image

Open the blog post you want the pin image to be in. Choose where in your content you want to insert your image (we usually do it at the very top or the very bottom, just so it’s easier to find in Step 7). Click the Add Media button and upload your image to the Media Library. Don’t insert the image yet! Read below!

Step 3: Add Your Title

Before you insert the image, you’ll see a panel of image info on the right-hand side. Change the Title to match your blog post. (Tip: Incorporate your company name into the title. We always add a “- Bloguettes” after the title so the entire title looks like this: “Blog Post Title – Bloguettes.”

Step 4: Insert Alt Text

This is so important! On the right-hand panel, there will be a spot called Alt Text. When someone pins your image, THIS is what auto-populates into the description. You can include your title again and write a brief description explaining what your blog post is about. Double check and make sure there are no spelling or grammar mistakes! If there is, your pin could potentially have a description with typos floating around Pinterest!

Step 5: Adjust Your Image Size

Add the bottom of the panel, there is a place where you can adjust the image size. Make sure your image is the Full Size (in our case, 600 x 900 pixels).

Step 6: Insert Your Image

Scan over everything one more time and Insert your image. You should see your image in the blog post!

Step 6: Switch To Text View

In WordPress, at the top of your Text Editor box, there are two tabs: Visual and Text. If you’re in the Visual tab, switch over to the Text tab. This is where you will insert your code.

Step 7: Insert The Code

Find your image. If you followed along in Step 2, it should be easy to find because it’s at the very top or bottom of your content. The Image Code should be around a paragraph long and start with “<img class.”

Hit Enter to create a new line (this just makes it easier to see both your codes)

Copy and Paste the Hidden Image Code to hide your pin image:
<div style=”display:none;”>PASTE IMG CODE HERE</div>

Highlight the entire Image Code from your pin and Paste it into the Hidden Image Code area that says “PASTE IMG CODE HERE.”

You should now have one piece of code that starts with <div> and ends with </div>.

Step 8: Switch Back To Visual View

Switch back to the Visual tab and your image should be gone. Save your settings by hitting Update.

Step 9: Test It

If you have the Pin It button installed on your browser, you can test out the image by hitting Pin It. If you don’t, go to Pinterest and create a new pin. Copy and paste the URL of the blog post and a couple of images should pop up from you to choose from. Your pin image should be there! Click it and make sure your Alt Text description is what you want it to be and pin!

Want to see this in action? Watch our step-by-step tutorial below!