If you want traffic from Pinterest, it is essential to create a Pinterest perfect image for every post you write. I’ve already taught you about the size your graphics should be and how relevant images help you on Pinterest. Today I want to help those of you that don’t necessarily want those big vertical images in your blog posts.
“Hiding Pins” has become a popular trick amongst Pinterest users. The problem is that most people are using a technique that Google has a tendency to frown on. <display: none>
If you want to stay on Google’s nice list and “hide” an image for Pinterest, use Pinterest code instead. You’ll need to include an image in your blog posts for this to work, but it can be any size: a smaller version of the full-size pin you want Pinners to save, a horizontal image, or even an image CTA.
Lately, I’ve been adding a landscape or square image into my posts, but when people click the pin it button or the hover button, Pinterest will pop up the Pinterest perfect image I’ve created for the post.
Test it out with the image below. Click your browser pin it button or the hover button on the image below and see what pops up. (While you have it open, you might as well pin this post to your Pinterest tips board, wink. wink.)
If you’d like to do this in your blog posts, here’s how.
To start, I add the image I want to show up in the post. In order to hide an image for Pinterest, it has to be attached to an image in the post that you do want to show up.
<img class="aligncenter size-full wp-image-6600" src="https://kristiehill.com/wp-content/uploads/2017/02/hide-a-pin.png" alt="Computer with pinterest feed." width="800" height="600" >
Then, I add this Pinterest code into that image code. I keep this code in a sticky note on my desktop for easy reference.
data-pin-url=" "
data-pin-media=" "
data-pin-description=" "
data-pin-url= this is the URL you want people to visit when they click your pin
data-pin-media= this is the image you want Pinners to save, but not show up in your post
data-pin-description= This is the description you want Pinners to include with your pin
The final product for my image looks something like this:
<img src="https://kristiehill.com/wp-content/uploads/2017/02/hide-a-pin.png" alt="Computer with pinterest feed."
data-pin-url="http://kristiehill.com/how-to-hide-pins"
data-pin-media="http://kristiehill.com/wp-content/uploads/2017/02/how-to-hide-a-pin.png"
data-pin-description="Hide pinnable images in your blog posts without ruining the flow and branding of your posts" />
If you’re in a time crunch, you can get away with only adding in the data-pin-media to let Pinterest know which image to use. Your readers will just have to fill in the comment description on their own.
Why you can do this and still be on Google’s nice list
“He’s making a list, he’s checking it twice. He’s gonna find out who’s naughty or nice. Google’s always checking your site”(cheesy, yes. true, yes)
When you hide pin images using the display none method, Google might think you’re trying to manipulate the system by hiding content. This is especially true for all you bloggers who are using really heavy keywords in your Pinterest descriptions.
By adding Pinterest data to hide your images Pinterest and Google will be happy with you. You’re not actually hiding any images, you’re just telling Pinterest what image to use. Plus, your readers will be able to save pinnable images to your blog post > resulting in more traffic to your site.
Happy pinning, friends!
8
Hi!
Does this tutorial work on blogger website? Or only on wordpress.
Thanks Kristie
http://www.knottylaces.com
Hi Kristie. Is there a way to use this code with a post which only has a featured image? I’m not sure where I would attach the code of the long image I want to hide since there doesn’t seem to be a way to add to the code of the featured image.
Thanks,
Erin
There is not a way to use this method if there is not an image inside the post. You would have to use the method or a plugin like Social Warfare.
Thanks for this detailed way to hide pins. It took me some time to get the first one done, but this is the way I intend to do it from now on. Thanks, Kristie. By the way, your data pin url goes to a 404 page.
Hi, Brain. I’m glad that you got it to work!
I tried this and my image isn’t showing up still, just the one that is visible on the blog. Not sure what I am doing wrong…
Nevermind, I think I figured it out. I had copied and pasted and one of the quote marks was wrong.
You are not the first to have problems with the quote marks. I’ll see if I can fix it on my end. Thanks for trying the tutorial, Kim!
Which post did you try it on? I’ll go take a look!
I tried this, but it didn’t work for me. I must be doing something wrong. I uploaded my pins to my media library that I wanted to change the original images to. I changed the code to your specifications for the first and last image. But the original image keeps showing up to Pin. The new pin images are nowhere to be found in the post. Is there any way you could advise me?
Thanks!
I’d be happy to help you out. Can you shoot me an email with the exact code you tried? (copy/paste).
If I have 10 images in my single post, should I make 10 long hidden images for pinterest too?
are vertical image didn’t make good impression if I didn’t hide them on my blog post?
No, not necessarily. I think the better option would be to upload them (if you have the copyright for them) directly to Pinterest with the share URL. Just make sure every post has at least one vertical image.
I’m still confused.
Would I first have to create a Pin,
pin it to a board w/ a description & link back to the post,
then somehow assign this in those Pinterest codes so that if someone pins the image that appears more congruent with the look & feel of my post — is really pinning the Pin I created above to whatever board of their own they pin it to?
Is that right?
Can data-pin-media= be a Pin URL?
Is there a WP plugin to set this all up?
Thanks!
It can be a pin for Pin URL, but that would make it a repin and not organic pin from your site.
The tutorial mentioned in this post is for organic pins and you do not need to create a pin first. This is just telling Pinterest which image to use when users click the pin it button from their browsers or phone.
Thank you!
Hi Kristie,
Thanks for this writeup, I’ve actually just started using Pinterest for about 2 months and learning the ins and outs of using it to help me grow my traffic.
I use Social Warfare for my Pinterest images so it makes it easy to control which images I want people to share. Quick question though, how many images do you create for each blog post?
I really enjoyed reading this blog post and I am sure that it’s going to help a lot of bloggers improve their Pinterest techniques. Not to mention avoid getting in trouble by Google.
Social Warefare is a great plugin option. They are adding a lot of great Pinterest features soon too.
The number of pictures I create for a post is different for each post, and will certainly vary by niche. No magic number.
thanks for stopping by, good luck growing your traffic!
Thanks for this super blog post! I kind of got it to work; but for me on my website – the image sharing plugins don’t pick up the ‘Pinnable Image’ but instead only shows up the featured image that is in the post – shame and a little annoying.
It seems to only be affected when using image sharing plugins where you hover on an icon which overlays the image. If there was any consistency i could look for a reason why this is happening.
Hi Chris, which image sharing plugins are you using? Can you give me a link to your blog so I can check it out?
Mine works when I hover over the horizontal image and use the hover button. It also works when someone uses the browser Pin it or tailwind schedule button. As for my pin it button at the bottom of the post, that one only shows my feature image – which is exactly what I want it to do.
Thanks for the code Kristie! 🙂 Already tried it on my blog!
So glad to hear it worked for you Emmerey!
Thank you Kristie! 🙂
you are very welcome Emmerey!
I did the code you mentioned above and the image still shows up in my blog post which is what I do not want it to do. What did I do wrong?
data-pin-description=”How I Lost 80 Pounds Walking In A Year”
Hi Megan. I think I need to clarify the post a little bit more, because you’re not the first to mention this problem. Using the Pinterest data code, the hidden image has to be attached to an image you already have in the post (a smaller version of the long one, a horizontal or square image, or just a shorter version)
So, pick an image you DO want to show up in your post. THEN, add in the code to that image.
<img src=”image url that you WANT in the post” alt=”Computer with pinterest feed.”
data-pin-url=”post url”
data-pin-media=”url to image that you don’t want to display in the post, but you want people to pin”
data-pin-description=”super awesome Pinterest description”>
hope that helps more. Sorry for the confusion.
Hi Kristie
Thanks for the post, but I am still confused. I am totally new to blogging and just trying to get my very first post out. I read alot about Pinterest and want to start things of on the right foot. Now my question: How do I “attach” the image? In other words, where exactly do I attach this code? In the media upload screen?
Regards
Claudia, South Africa
Yes, first upload the two images in you media upload screen (the small one and the one you want to hide). Second, insert the small one into your post. Switch to text editor mode and add in the Pinterest code to that image. You’ll get the URL from the large image you want to hide inside the media screen.
Hope that clarifies for your Claudia. If it’s still throwing you off, I’d suggest not hiding the image and just leaving it inside your post for people to pin. 🙂
Thanks for this great info! If you have time could you write about how to put a pin in a post but make it display smaller? I find 735 x 1102 pins too big to look nice in my blog posts. Thanks!
Hi Tori! You would do it the exact same way. You would add the Pinterest data code mentioned in the tutorial to a smaller image that you already have inside the post. When users hover over or use the browser pin it button, they’ll be given the larger image you specified in the data code.
Also, heads up that the 725 x 1102 recommendation is outdated. Here is a description on the current Pinterest size recommendations.
Hi Kristie, I am pretty new to using WordPress and I have a theme Silver from Sugar and Code, so bit nervous to touch existing coding. could you expand on where exactly you would cut and paste the sections of code above to get the desired result? I have already fallen foul of using the wrong size images in my blog post and forgetting that Facebook will grab the biggest if you haven’t specified a feature image. I have only posted a few times so far and I really want to get this right, and each time have had to go back and edit the images.
Many thanks
Sarah
Hi Sarah. There definitely is a lot to learn when it comes to images and blogging. It can be overwhelming! For this tutorial, if you want to hide a long image inside your post, you will switch to the post’s TEXT option and use the Pinterest code inside the image code that you are displaying inside the post.
Here are a few more articles I have written on images: Optimizing images for web and image SEO
Great advice! I didn’t even know google frowned upon the display: none property, but you learn something new everyday!
http://www.angelicabbie.com
Yeah, it can be seen as trying to hide content to show up in search, but not actually offering readers the content. There are obviously a billion ranking factors with Google, but might as well knock out as many as we can!