Love this article? Spread the word!

One smart trick to get more content to share on Pinterest is to create multiple pins.  Most Pinterest books and courses recommend doing this, so you have more content to share.

Not only that, but readers can decide which pin image they want to share. You never know what will resonate with them and end up going viral.

But then comes the next question: “How do you hide a pinnable image on WordPress?”

 

 

You need to add 2, 3 — or more pinnable images to your blog post.  And, as necessary as that is for Pinterest, you don’t want them all to be visible. You’d rather hide your pin images, so they don’t all show at the bottom of your article.

A quick search for “how to hid a pin” will serve up several results.  Sadly, several are show outdated practices, and even more, do not teach you how to do this if you use Gutenberg.

Let’s go through the methods you can use to add two, three, or even five images to your blog post.

 

THE RIGHT WAY TO HIDE PINS ON YOUR BLOG POST

WHY SHOULD I HIDE PINS?

If you are new to using Pinterest, you may be wondering why anyone would want to hide an image on their site?  Why not put it out there for everyone to see?

You could do that, but if you have four or five images, they can clutter the end of the post. It also takes time for the page to load, which can affect site speed.

Having a single image on your post makes for better user experience and focuses the reader’s attention on your content – which is what you want.

 

DOES THE IMAGE HAVE TO BE ON MY SITE FOR PINTEREST TO SEE?

There is a myth floating around regarding hiding pins and that Pinterest has to see it on your site.  That’s not true.  What matters is that the pin relates to the content.

Yep!

Even if you find a stolen pin that is yours and the image is hidden, you can report it.  The image’s visibility on your post has little to do with ranking, search, or reporting stolen content to Pinterest.

 

WHAT IS THE WRONG WAY TO HIDE A PIN?

You may have also heard that if you use the wrong code, Google will not be happy.  Well, yes and no.  Let’s talk first about what the code looks like:

<display:none>

The reason Google may not like this is that you are using code to hide something on your site. If your site is on the verge of being spammy, and you use this method of hiding images, you could get a manual action imposed by Google.

The truth is that most bloggers will be OK if they use this code.  However, that does not mean you should.

Sadly, this code does not always work. If you add the system to an image using your HTML editor and then toggle back to visual, the code is removed.  That can result in additional work.

Instead of making hard work for yourself, let’s talk about simpler ways to add the hidden pin-code code to your site. And don’t worry; even if you don’t know how to code, you can add this to your site.

 

WHAT IS THE HIDDEN PIN CODE BLOGGERS SHOULD USE?

Pinterest has shared the code that they love the most. And, if Pinterest happens to enlighten us on best practices, it makes sense that we should listen.

The code is “data-pin-media.”  You can use this if you have an image you want to be pinned that is different than the one on your site.  Let’s talk about a couple of examples when you would use this code.

 

If you have a smaller version of the pin on your post

When it comes to adding images to your site, you must upload it at the size you want for it to be rather than force your site to scale it up or down.  For example, if your pin is 1000×1500, it may be too large to show on your post.  Instead,  you want it to be 467×700.

You should not change the image size on your blog post once added as that means every time the page loads, WordPress has to go to work adjusting the size.  That could potentially affect how your site loads.

Create two pinnable images for your site: one is for your blog post, and the other is for pinning. You will add them both to your post and use the code below to hide the larger one, so it pulls only when a user clicks to share a post.

 

You have a different image for Pinterest 

There may be instances where you have a featured image on your site and do not want to display a pinnable image.  However, you want the proper one to pull if a reader hits the pin button.

You can add, and hide, the pinnable image on your post, so no one sees it displayed, but is ready for sharing.

 

THE CODE TO MANUALLY HIDE A PIN (SINGLE IMAGE)

You have to combine the code for two images into a single one, but don’t worry – you don’t need to be an expert in coding to do this. If you can type, you can hide your images.

Step 1 – Upload the image you want to display on your post.

Step 2 – Upload the pinnable image you want to hide directly beneath the image that will display.

Step 3 – Open the text editor on your post (or if you use Gutenberg, click the three dots in the upper corner to open the code editor).

Step 4 – Find the images and you will see the code looks something like this:

Classic Editor Users<img class=”aligncenter size-full wp-image-3948″ src=”https://traciefobes.com/wp-content/uploads/2019/12/resource-library-pin.png” alt=”Pinterest resource library” data-pin-desription=”Share your freebies and op-tin forms by creating a resource library on your site” width=”735″ height=”1102″ />

<img class=”aligncenter size-full wp-image-3889″ src=”https://traciefobes.com/wp-content/uploads/2019/11/Copy-of-amateur-blogger-mistakes-1.png” alt=”Pinterest resource library” data-pin-desription=”Share your freebies and op-tin forms by creating a resource library on your site” width=”735″ height=”1102″ />

 

Gutenberg Users

<!– wp:image {“id”:131,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Blank-1000-x-1500-70-copy-1.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” class=”wp-image-131″/></figure>
<!– /wp:image –>

<!– wp:image {“id”:118,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-17-at-2.03.32-PM.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” class=”wp-image-118″/></figure>
<!– /wp:image –>

 

Step 5 – Remove the code below that is written in RED:

Classic Editor Users<img class=”aligncenter size-full wp-image-3948″ src=”https://traciefobes.com/wp-content/uploads/2019/12/resource-library-pin.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” width=”735″ height=”1102″ /><img class=”aligncenter size-full wp-image-3889″ src=https://traciefobes.com/wp-content/uploads/2019/11/Copy-of-amateur-blogger-mistakes-1.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” width=”735″ height=”1102″ />

 

Gutenberg Users

<!– wp:image {“id”:131,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Blank-1000-x-1500-70-copy-1.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” class=”wp-image-131″/></figure>
<!– /wp:image –>

<!– wp:image {“id”:118,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=“https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-17-at-2.03.32-PM.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” class=”wp-image-118″/></figure>
<!– /wp:image –>

 

and replace it with data-pin-media so it looks like this (also in red below):

Classic Editor Users<img class=”aligncenter size-full wp-image-3948″ src=”https://traciefobes.com/wp-content/uploads/2019/12/resource-library-pin.png” alt=”Pinterest resource library” data-pin-desription=”Share your freebies and op-tin forms by creating a resource library on your site” width=”735″ height=”1102″ data-pin-media=“https://traciefobes.com/wp-content/uploads/2019/11/Copy-of-amateur-blogger-mistakes-1.png”/>

Gutenberg Users

<!– wp:image {“id”:131,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Blank-1000-x-1500-70-copy-1.png” alt=”Pinterest resource library” data-pin-description=”Share your freebies and op-tin forms by creating a resource library on your site” data-pin-media=“https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-17-at-2.03.32-PM.png”/></figure>
<!– /wp:image –>

 

Step 6 – Click the Preview button to see how it looks on your site, and you will notice you cannot see the hidden image, but if you click the pin button, the other image appears.

NOTE FOR GUTENBERG USERS:  Once you add the code to your block, you may get an error asking you to resolve the code.  Click the HTML button, and the code will be retained.

 

MANUALLY HIDING MULTIPLE IMAGES

If you have more than one image you want to have hidden in your blog, you can hide the image with a small bit of code.  Add this to each image you want to hide:

<div class=”dpsp-post-pinterest-image-hidden” style=”display: none;”><img src=”IMAGE LINK” data-pin-media=”IMAGE LINK” data-pin-description=”PINTEREST DESCRIPTION” /></div>

 

Open the HTML view for your post (see above for how to do that) and add it to your article (the end of the post is fine).  Here is how it looks for an image and description on my site:

<div class=”dpsp-post-pinterest-image-hidden” style=”display: none;”><img src=”https://traciefobes.com/wp-content/uploads/2017/03/Artboard-2-copy-200×300.jpg” data-pin-media=”https://traciefobes.com/wp-content/uploads/2017/03/Artboard-2-copy.jpg” data-pin-description=”Feeling like a fake, fraud or phony when you are blogging is normal. Get the tricks and tips to overcoming imposter syndrome that every blogger MUST know.” /></div>

 

While you are using the display none code, it is not done in a way that should negatively affect you on Google.

 

THE PLUGIN TO USE TO HIDE PINS

The simplest way to hide a pin is to use a plugin. While you don’t want to use too many plugins (or even worse, the wrong ones), a well-coded plugin can have multiple features making it a better option than adding several plugins.

The one I recommend is Grow by MediaVine (formerly called SocialPug).  This plugin will do many things on your site, including:

  • Add sharing buttons
  • Track share counts
  • Link to your social accounts
  • Add the proper pin description
  • Make images non-pinnable
  • Allow you to add multiple hidden images to your blog post

Even though it does a lot, it is still well-written, so it is not heavy and should have no bearing on site speed.  But, the thing is you need to pay for the pro version if you want all the bells and whistles ($34 a year).

Once you add the plugin to your site, you will activate it (the developer shows you how).  Then, you need to make sure it is set up correctly for Pinterest.

First, find the plugin in the dashboard. Navigate to Grow > Settings > Pinterest Settings.

 

Now, let’s configure the settings, so you get everything out of the plugin and enable every feature they have to offer.

Pinterest Description Source:  Set to Post Custom Pinterest Description (the alt text is not what to use as that is for Google – not Pinterest)

Pinnable Images:  Only the Pinterest Images Set OR Images from the Post.  I recommend you set the images for the most control over what is pinnable and is not.

Pinterest Button Behavior:  Set to Show Selection of Pinnable Images

Add Post Pinterest Image as Hidden:  Toggle on so that all images you add here will be available for pinning

Multiple Hidden Pinterest Images:  Toggle on so you can add more than one picture to a post

Make sure you save your changes!

Next, you will be able to add multiple images to your post and hide those you want!  Let’s show you how to do that.

Write the post and create the images you want to use for Pinterest as usual.  Scroll down to Grow Share Options and click on the black Pinterest banner to add a pin image.

Update the title and description as needed.  Then, scroll down, and beneath Pinterest, you will see boxes where you can add additional images.  Click to add the images you want.

This is how it may look. You can see I have four images for this blog post.

 

When the user clicks the pin button on my site, they see this, and they can save whichever image they want!

Grow by MediaVine covers all your hidden and multiple pin needs.

 

HOW DO YOU MAKE AN IMAGE NON-PINNABLE?

If you ask some bloggers, they say they want readers to be able to pin any image from their site. But, do you want someone to pin an image of your face or that small screenshot or image you used in the post?  More than likely not.

You make any image non-pinnable in one of two ways:  using a plugin or manually coding.

 

USING A PLUGIN TO MAKE AN IMAGE NON-PINNABLE

If you are using Grow by MediaVine (aka Social Pug) on your site, you can add the no-pin code to any image you add to your blog post. The only thing is that this is a feature limited to paid customers.  If you are on the free version, scroll down to find out how to add the code manually.

What is great is that if you have the settings added as noted above, it should default.  However, those settings apply only when the user clicks the pin button.  If they use another extension to pin, there is a chance that all images will pull – even if those you don’t want to be pinned.

Fortunately, you can disable pinning on images if you use Grow by MediaVine.  Here’s how you can do that:

Add the image to your site (image widget or to the blog post).  Then, you need to edit the image.

Classic Editor Users

Hover on the image until you see the pencil icon and click on it to edit, you will see this window.  Toggle the Disable Pinning button to YES.  Now that image cannot be pinned (the code is added to the image and is not connected to the pin button).

 

Gutenberg Users

Open the block with the image and look in the sidebar for Grow.  Beneath that, you will see a button that says Disable Pinning.  Toggle that on.

 

ADD THE NO-PIN CODE MANUALLY

Even if you have the plugin, there are images on which you will need to add the code manually.  One example is your image in your about that maybe in a widget. You can’t disable pinning there (unless you know how to dig into CSS – and we don’t want to go there).

It is straightforward to add the no-pin code to any image — as long as you can view the HTML format.   The code is: data-pin-nopin=”true”.  That is the signal that you are saying it is true that you do not want that to be pinned.

Now, let’s show you how to do this on your images. You will use this same code on images on your site through widgets* – -anywhere that you have an image added, you do not want to be available for pinning.

*Note, you can not edit this if you use the image widget. If you need to make your image non-pinnable, you will need to use text code to make the image non-pinnable.

Add the image to your post as usual and toggle to the HTML view (see above for both Classic and Gutenberg).  Add a small bit of code directly to the image code and that will prevent the image from being pinned (no matter what).  See the code below in red:

Classic Editor Users

<img class=”aligncenter wp-image-3948 size-full” src=”https://traciefobes.com/wp-content/uploads/2019/12/resource-library-pin.png” alt=”Pinterest resource library” width=”735″ height=”1102″ data-pin-desription=”Share your freebies and op-tin forms by creating a resource library on your site” data-pin-media=”https://traciefobes.com/wp-content/uploads/2017/03/artboard-2-2.jpg” data-pin-nopin=”true” />

Gutenberg Users

<!– wp:image {“id”:131,”sizeSlug”:”large”} –>
<figure class=”wp-block-image size-large”><img src=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Blank-1000-x-1500-70-copy-1.png” alt=”Pinterest resource library” data-pin-desription=”Share your freebies and op-tin forms by creating a resource library on your site” data-pin-media=”https://bloggereducationnetwork.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-17-at-2.03.32-PM.png” data-pin-nopin=”true”/></figure>
<!– /wp:image –>

Now, one thing to keep in mind is that your featured image may still be pinnable. If you want to disable that, you will need to check with the theme developer or a qualified IT professional to make this adjustment.

NOTE TO GUTENBERG USERS:  Once you add the code, you will get an error asking you to resolve the code.  Click the HTML button, and you should be set.

 

There you go!  The smart way to hide your pinnable images and add multiple pinnable images to a single blog post!

 

Love this article? Spread the word!