I know many have you have seen that bloggers have many pins for Pinterest to choose from when they go to share a post. But a lot of you wonder how they do this because the images are nowhere to be seen in the post itself.
With platforms like WordPress, there were only the options for adding a featured image and for putting images in the post. It seemed impossible to just add images for Pinterest that would be seen when sharing, but not clutter the post.
Until one day I finally figured it out. Now I know that others have definitely figured this out long before me, but every time I tried someone else’s way it never seemed to work.
How to hide images in a blog post
So, how do bloggers hide these images for Pinterest sharing?
Well, they add an HTML code that can hide the images, but still make them visible for sharing.
Now I know there are plugins that could potentially do this as well. Personally, I have never used them because I didn’t want excess plugins that could slow down my site or just to confuse me. So, I have manually been putting this HTML code in each time for each image I wanted to hide.
I know it may seem tedious for some of you and you are welcome to find another way that actually works (If you do then let me know! I would love to see if there is an easier way), but Pinterest is a huge deal for bloggers. That’s where a lot of traffic comes from and I want to grow there as well.
What is the HTML code that works?
This was the super tricky part for me because I tried so many different codes from other people and none of them worked. I repeat none of them worked. There were around 15 different codes that people shared that I tried.
That is when I decided to test out different combinations of all of these codes. Seeing what they had in common and trying different pieces that were different. And this is what I got to finally work:
How does this HTML code work?
Well, you start off by going to your post edit screen. Switch the page from visual view to text view which shows the coding.
Usually, people add this code at the bottom of the post, but you can put it anywhere you want.
Then you will want to type or copy and paste the first part of the code:
And hit the add media button to add in the image you would like to hide.
Now just type or copy and paste the end piece:
Make sure the image is between the two pieces of code because if you forget the second part it will not hide the image.
This is the post we are going to hide for example.
It should look just like this when you add the hiding HTML code:
<div style=”display:none”><img class=”aligncenter wp-image-545 size-large” src=”https://lifeofaura.com/wp-content/uploads/2018/07/How-to-Hide-Images-in-a-Blog-Post-Life-of-Aura-5-683×1024.png” alt=”Find out how to hide your Pinterest perfect pins in your blog post at lifeofaura.com. #Pinterest #blog #blogtips #hideimages” width=”683″ height=”1024″ />
Go back to the visual view and check to see that the image is hidden. If it did not hide the image then check to make sure you have the code correct and placed correctly. If it has been hidden then there you go!
There you have it!
You can put in as many as you would like, but that doesn’t mean you truly need 30 hidden Pinterest images. A few are wonderful though because then you give your readers a choice of their favorite pin to post to Pinterest or even other social media platforms.
If you would like to learn more tips and tricks about blogging then check out more of our related articles!
- How Bloggers Plan Blog Content
- 7 Ways to End a Blog Post
- Best Website for Social Media Design
- 5 Things You Should Not Do When Starting a Blog
- And many more under our Blogging tab!
What was your main reason for hiding images in a post? If it is all about Pinterest, then how many extra pins did you want to have for each post? Or let me know if you have tried another way to hide images and how well that worked out!