How To Hide A Pinnable Image In Your Blog Posts

The blog

WHAT ARE YOU REALLY KNOWN FOR?

So tell me

Take control of your narrative and find your brand's true voice in just 3 simple steps.

send me the free guide

MORE ABOUT Me

Categories

Web Design

Branding

For entrepreneurs

Personal

Featured in:

I've spent my career building brands, designing websites, and sharing my seasoned marketing experience with companies and entrepreneurs just like you. I already know you're doing great things. My mission is to show you how to build a profitable brand experience that grows with your business (and your bottom line).

Hi! I'm Tracy Dungo.

How To Hide A Pinnable Image In Blog Posts

For Entrepreneurs

By Tracy Dungo

Want to get more shares on Pinterest for your content? Learn exactly how to hide a pinnable image in blog posts | unodostrae.com. #socialmedia #graphicdesign #entrepreneur #bloggers #seo #blogging101
Want to get more shares on Pinterest for your content? Learn exactly how to hide a pinnable image in blog posts | unodostrae.com. #socialmedia #graphicdesign #entrepreneur #bloggers #seo #blogging101

Of all the ways you can distribute and promote your content on, Pinterest has got to be one of my favorites. As soon as I shifted my mindset and stopped considering it social media, things changed entirely. Believe it or not, Pinterest is one of the largest search engines in the entire world. Just think about how powerful that is. The opportunity for discovery is huge! So if you have something you want to direct an audience to, you should absolutely be optimizing your content for Pinterest. Let’s talk about one of the easiest and most impactful things you can start doing now.

 

Knowing How To Hide A Pinnable Image In Blog Posts Is A Blogging Essential

When I sit down to write a blog post, I try to include at least three different pinnable images in the article. Is it completely necessary? Probably not. But I want to give my articles the best chance they have to make their way around the Pinterest circuit. When I first thought to do this, one of the problems I ran into was how to not clutter up my posts with these extra images. Adding regular photography to enhance my article is one thing. But adding a bunch of graphics designed to get readers to click on them is a whole other story.

So how did I get around it? With one of the smartest tricks in the digital marketing trade: hide a pinnable image in blog posts.

By the way, if you’ve never created a pinnable image for your blog posts before, download this checklist. It breaks down the essentials of a great pinnable graphic in easy, actionable steps:

How To Create A Title Image Checklist - Content Upgrade Button | unodostrae.com

By knowing how to hide a pinnable image in blog posts, you make your article more valuable (by optimizing it for Pinterest, one of the largest search engines in the world) without distracting your readers. And perhaps more importantly is what it can do for your digital marketing strategy. Let’s talk about the two biggest marketing reasons why you’d want to hide images in your blog posts.

1. Test different ad strategies to represent your post

Have you noticed that you are drawn to pins that look a certain way? It’s different for everybody. For me, I find myself re-pinning images that have brighter colors and bold text. Knowing that I personally respond to this style (in other words, I know that at the very least, it works even if just on me), I want to pin images with bright colors and bold fonts for my posts. But neither design element is a part of my core branding or aesthetic. So it looks pretty random and disconnected if I were to create graphics like this and include them in my articles.

So, as a solution, I hide them. I create additional pins with bright colors and bolder fonts (that still go with my brand colors of course!) and then hide them in my post. That way, whoever lands on my site sees imagery that is still consistent with my site’s style. But I know pins with a punchier personality are standing out on Pinterest and being shared with my ideal readers.

2. Test different variations of your title

Creating more than one pinnable title image for your blog post is a great way to test headlines. Let’s say you have a wellness lifestyle blog for busy 30-something professionals. You write a how-to article about meditation titled 5 Steps To Build A Meditation Habit. But then you ask your friend if she’s read your article yet and she responds, “I’m so sorry! Not yet, I’ve been so busy on this project at work. I barely have enough time to eat – I wish I had time to start a meditation practice! Ugh, I wish I could just pause life for a few moments each day to reset myself.”

You know your article could help her a ton. But you realize in that moment that upon reading the title, your friend immediately associated it with more work for her. If only the benefits of meditating came to her mind instead! You know she would drop everything for that kind of answer.

So, as a solution, create additional pins with different titles and then hide them in your post. The best part by using Pinterest analytics, you can test which titles work best for your content and then create more titles like that. So your three pins might look something like this:

  • 5 Steps To Build A Meditation Habit (to attract readers who are already in the market for a step-by-step plan to establish their practice)
  • Title #2: How To Practice Mindfulness And Reduce Anxiety (to attract readers who are looking for ways to achieve these results – your article shows them how they can via meditation)
  • Title #3: How to Meditate If You Have No Idea Where to Begin (to attract readers who want to meditate but might be overwhelmed on how to start)

How To Hide Multiple Images In A Blog Post

Follow these step-by-step directions to hide any image in your articles. I explain everything in the context of WordPress but these instructions will apply to other content management systems as well.

Step 1. Create your graphics

Use a high-quality vertical image and size it for Pinterest pins (my pin dimensions have been  736×1104). Include relevant text (your post title, website URL, opt-in incentives) so people have a reason to click on your pin over anybody else’s. If you need more help on this part, click here.

Step 2. Upload your image

Open the blog post you want to add your image to. Decide where in the article you want to insert your graphic and place your cursor there (I usually do it at the very top, others add it at the very bottom. Both positions make it easier to find later on). I always place my hidden images at the very top because they will then appear first when someone goes to pin your article). Click the Add Media button and upload your image to the Media Library. But don’t insert the image just yet.

Step 3. Update the image panel

In WordPress, to the right is a panel of image details. Before you add your image, update the title (so it matches your blog post- if you’re testing variations of your title, this should match whatever variation you have on your graphic). You’re also going to want to update the Alt Text field. When someone pins your image, this text 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 (making sure to include your keyword(s)). You will also want to scroll down to the bottom of the panel to adjust the image size. Make sure your image is set to Full Size.

SEE ALSO:  Website Content Strategy: 3 Ways To Connect With Your Dream Customers

Step 4. Insert your image

Look everything over one more time in your image panel and then go ahead and insert your image into the article. You should then see your image appear in your blog post.

Step 5. Switch to text view

In WordPress, there are two tabs – Visual and Text – at the top of your Text Editor box. It will likely default to the Visual tab. If so, switch over to the Text tab. This is where you will insert your code.

Step 6. Insert The Code

Now that you’re in the Text tab of the Text Editor box, locate your image. It should be relatively easy to find if you chose to place your image at the very top or bottom of your content (like we discussed in Step 2). Look for the blip of code that starts with “<img class=”

In a new line (so it’s easier to see what you’re adding), copy + paste the following Hidden Image Code into your text:

<div style=”display:none;”>PASTE YOUR IMAGE CODE HERE</div>

***This is important: When you copy and paste this into your text editor, WordPress will change the quotation marks you see here in this code snippet to curly quotes (instead of leaving them as straight ones). The code won’t work with the curly quotes. To fix this, re-type both quotation marks directly in the text editor (both ” and “) after you copy and paste the code in.

Now we’re going to replace the PASTE YOUR IMAGE CODE HERE with your actual image code with a simple cut + paste. To do this, highlight the entire Image Code of your pinnable graphic and then cut + paste it into the Hidden Image Code where it says “PASTE YOUR IMAGE CODE HERE.”

You should now be left with something that looks like this:

Step 7. Save Everything

Switch back to Visual View in the text editor. If done correctly, your image should now be gone (though you know it hasn’t been deleted, only hidden thanks to the Hidden Image Code). Save your settings by clicking the Update button.

Step 8. Test It

To see this all in action, go ahead and try pinning your article.  You can either utilize the Pin It button installed on your browser or directly pin your blog post via one of the images or using the social sharing buttons on your webiste. If you don’t have either set up, you can still test out the image by going directly to Pinterest and creating a new pin there. Once you go to pin the article, a couple of images should pop up for you to choose from – including your hidden pin image(s) which should be there! Click on it and make sure your Alt Text description is appearing the way you want it to be and pin away.

That’s it! You just learned how to hide a pinnable image in your blog posts. Incorporate this into your workflow and it will soon become second nature when updating your site. If you need help designing pinnable blog title images, download this simple one-sheeter that will break everything down for you in quick and easy steps.

How To Create A Title Image Checklist - Content Upgrade Button | unodostrae.com

If you want another set of eyes on your work, feel free to drop your blog post link in the comments so I can check it out!

UPDATE: A few people have commented that once they hide an image in their article (per these instructions), the hidden image won’t show up as pinnable when they go to pin their article. I’m not quite sure why this is only happening for some and not everyone (wish I had an answer!). But if this is happening to you, you can try a few things:

  1. Cache your browser. You can do this after you’ve hidden your images and published your article. Sometimes the browser we’re using temporarily stores recently visited webpages to speed up load times. So if you visited a site, clicked out of it, then went back to it, your browser would display the stored pages from your last visit instead of downloading them again so everything loads super fast for you. For instructions on how to clear your cache, click here.
  2. Use a plug-in to hide your pinnable images. If adding this simple code isn’t working for you, there are a few WordPress plug-ins you can check out that might do the job. Pros: there’s no coding required (for my non-techies out there). Cons: hiding pinnable images isn’t a free feature (of course). You can check out Warfare Plugins or Tasty Pins if this interests you. I personally haven’t used these myself but have heard quite a bit about them.

Looking For More?

Sign up for more out-of-the-box ways that transform your branding, get you to think more creatively, challenge your assumptions, and help you market your business in a whole new way. You'll also get instant access to my FREE resource library that I created specifically for entrepreneurs and creatives like yourself.

Powered by ConvertKit
  1. Tracy

    June 4th, 2018 at 10:29 pm

    I used to use this code to hide my pinnable images in WordPress but now it no longer hides them! The images show up in the blog post. Would you have any idea why it would stop working? Thank you!

  2. Tracy Dungo

    June 5th, 2018 at 3:47 pm

    Hi Tracy! Sometimes when you copy and paste things into WP, it changes the quotation marks from straight quotes (” “) to curly ones for whatever reason. Can you try something for me? Find the code that you pasted into your blog post and then re-type the quotes manually and see if that works. If not, shoot me an email at tracy@unodostrae.com and we’ll try and figure out what’s going on!

  3. Christina

    June 28th, 2018 at 2:07 am

    For me, it was easy to hide the images, but I don’t see that they show up as options when I try to pin from the website. It automatically pins the first image in the post. Have you run into this before?

  4. Tracy Dungo

    June 28th, 2018 at 2:33 am

    Hi Christina! I haven’t seen this happen before but just sent you a quick email directly to see if we can figure it out!

  5. Emma @ Misfit Gardening

    June 28th, 2018 at 3:08 am

    Oh my goodness I didn’t see the code had changed to curly quotation marks until I read this and checked the coding on my posts. A thousand thank you’s for this! You have helped fix a very annoying problem on my posts!

    Thank you so much!

  6. Tracy Dungo

    June 29th, 2018 at 1:36 pm

    Hi Emma! Oh good! So glad you found it helpful!

  7. Meygan

    July 2nd, 2018 at 8:06 pm

    Hello! I am having the same issue as Christina – it’s hiding my image, but it is not showing up as a pinnable option. 🙁

  8. Tracy Dungo

    July 3rd, 2018 at 11:37 pm

    Hi Meygan! Just sent you a quick email directly to see if we can figure it out!

  9. Meygan

    July 3rd, 2018 at 11:44 pm

    Thanks so much for all of your help, Tracy! It works for me now!

  10. Mindy L Walker

    July 11th, 2018 at 6:21 pm

    I would love to know how to hide an image permanently from pinterest because they are personal. Do you know how to do that? There is not a lot of information on the interenet about this, and those that have posted on this topic are outdated or hard to follow. I would love to read a post on that and I’m sure others out there would too! I am using Elementor, WP and the Ocean theme. Thanks!

  11. Tracy Dungo

    July 12th, 2018 at 2:00 am

    Hi Mindy! Great question and definitely a good thing to know- so if you want to prevent any single image on your site from being saved to Pinterest, add this little piece of code. Don’t forget to replace the outside brackets [ ] with <>:​

    [img src = “IMAGE.jpg” nopin = “nopin” /]

    Hope that helps!

  12. Yolanda

    July 20th, 2018 at 1:30 am

    I’m having the same problem as a few others. The pin is hiding, yet not showing up as a pinnable option. I’ve fixed the quotations also.

  13. Ashley Smith

    September 26th, 2018 at 6:31 pm

    Hi! Thank you for the helpful post! I read so many similar articles and yours finally cleared up the issue of WordPress changing the text. But I’m afraid I’m having the same problem as a few others. The image will hide, but won’t show up as pinnable. I’ve searched everywhere on the internet for an answer – would you be able to provide guidance? 🙂

  14. Tracy Dungo

    October 12th, 2018 at 3:30 am

    Hi Ashley- I wish I did! I’m not quite sure why that keeps happening to only a handful of people and not everyone (for example, the code is still working for me on my sites as well as my clients’). A few of the others who’ve encountered the same thing may have been able to sort it out on their end. But I did just update the article with plug-in recommendations you could try out in case you need other options. Good luck!

  15. Ashley Smith

    November 3rd, 2018 at 4:05 pm

    Thank you Tracy! Clearing my cache worked – thank you for your advice!!!

  16. Honestly Holly

    November 20th, 2018 at 12:31 pm

    Oh my word. I have been trying to do this for a week. I’ve read about 25 articles telling me how to do it but none of them worked! You’re the ONLY one to mention changing the parenthesis and now FINALLY it worked. Thanks!
    Holly | http://www.honestlyholly23.com

  17. Lori

    January 31st, 2019 at 3:53 pm

    Hi Tracy! Everything works until I hit update. After saving the code changes and the image is visible again. Any idea what’s going on?

Leave a Reply

Your email address will not be published. Required fields are marked *

Give me access!

All the freebies

WORKSHEETS AND TIPS AND GUIDES . . . OH MY

You know better brand visuals are within reach...if only you had a little organization and guidance. Check out my free resource library for the essential tools you need for a better looking brand.

Yes please!

want a better looking brand?

smart Visual marketing for Purpose-driven entrepreneurs

Visuals can be tricky. You know what you need done but you're busy building your business and you just want things done right. Grab a coffee and let's chat.

word on the street