close
Social Media

How to Hide Pinnable Images in Blog Posts

When it comes to driving traffic to your blog, Pinterest is one of the best and reliable sources alongside SEO. And if you are using Pinterest on a regular basis, I think you already know it is recommended to create multiple pins for a single post or article.

Also, at times you may have noticed, while pinning from some websites when you click the Pinterest Save button, you get the option to pick from multiple vertical pins that you don’t see on the web page.

These sites basically hide Pinterest images in  blog posts.

And in this article you will be learning

  1. Why you need to hide pins?
  2. Does hiding pins impact SEO?
  3. How to hide Pinterest images in WordPress manually and using plugins (For both Gutenberg and Classic editor)

With that said, let’s dive into the tutorial

How to Hide Pins in Blog Post

How to hide pinterest images in blog posts

Why hide pins in blog posts

As mentioned above, it is recommended to create multiple graphics for a single article. Also, vertical pins perform well on the platform and the aspect ratio is 2:3 that means the normal pin size is 1000 × 1500.

And if you try to include multiple pins of this size in your post, it will take up a lot of space making the article look spammy and cluttered.

The second reason to hide pins is multiple pins help you split test and decide which designs are performing well on Pinterest and which needs improvement. You can create more of the well performers and improve on the others. 

Insights to how your pins are performing can be checked using Pinterest analytics. Now, if you do not have access to Pinterest analytics, let me tell you this feature in only available in the Business accounts and you can convert your personal profile to business easily. 

For creating a new Pinterest business profile or converting personal, you can follow our step by step guide on Pinterest for Business.

Having said that, 

If you are thinking, why not add the pins directly to Pinterest or Tailwind instead of hiding it. 

The answer is simple, yes you can do that. However, the drawbacks are the website visitors will only be able to pin the default pin. It can be the featured image or a pin that you may have included. 

I will suggest giving visitors the option to choose from the image they want to pin.

Will hiding pin images in blog impact SEO

While doing research on this topic, one of the common solutions I found was using the display:none value. It is important to know, this code is often used by spammers to hide keywords in the content which comes in the category of Black Hat SEO and can lead to a penalty.

However, in this scenario you are not hiding text or keywords. And the image will be visible when invoked by a mechanism which in this case is Pinterest Save button which will not trigger any penalty.

Also, when you hide pins in posts, it can slow down the speed as the hidden image will load with the page. Page speed is one of the factors that impact your rankings. (To see what other factors impact the ranking of your site follow our article on, On Page SEO Cheat Sheet)

To overcome this we found a hack that will allow you to hide your images without worrying about slow loading issues.

With that said, lets understand

How to Hide Pinterest images in WordPress

Before we begin, if you are using WordPress.com and have landed on this page, let me tell you in WordPress .com you cannot edit code or use plugins in free plan you will need to upgrade.

To find the difference between WordPress hosted and self hosted you can see our guide on WordPress.com vs WordPress.org

Here we will be discussing how to hide pin images in WordPress self hosted.

As you know after the release of WordPress 5.0, the old classic editor was replaced by the new block editor Gutenberg. However, some people still use the Classic editor. And we will be learning to hide pins in both the editors.

Hiding pinnable images in WordPress manually

Gutenberg

When it comes to hiding pins in blog posts, there are 2 scenarios.

The first situation is where you just want to hide the image. All you need to do is create a new post by navigating to Post >> Add new and if you want to hide pins in an existing post click Edit.

When you perform any of the above functions, it will take you to the editor. Now, the next step in the process is adding 2 blocks. The first one will be a Custom HTML block and the second block you will be using is an image block.

Start by adding both blocks one after the other.

adding custom html and image block

After you are done adding the blocks, upload the pin in the media library and add it.

Once you are done adding the pin, you need to convert the image block into code. You can do that by clicking the 3 dots on top of the image block and then select Edit as HTML.

converting image block to html

Now, the next step in the process is copying the code from image block and pasting it in the Custom HTML block as shown in the screenshot below.

copying and pasting image code

In the above image you can see, I have copied the code starting from <img to />. Perform this step very carefully.

After you are done copying and pasting, you need to select the Custom HTML block and  add the following code snippet in the beginning.

<div style="display:none;">

And add </div> in the very end as done in the screen shot below.

adding code to hide pins in WordPress

Once you have implemented the code, click Preview right next to the HTML and it will show you no image. What this means is you have correctly implemented the code.

In the next step, you need to delete the image block and you can do that by selecting the image block >> clicking the 3 dots  and then click remove block.

After removing the image block, click save draft or update to save the changes you have made and click preview to see if you have executed the steps correctly.

When you click, preview, the image will not be visible. Use the Pinterest Save button to see if it fetches the hidden pin.

In situation where the image is visible, then you have to go back and check if you have implemented the code correctly.

The next question is, What if you want to hide multiple pins.

The process to hide multiple pins is pretty much the same. All you have to do is 

  • Add another image
  • Convert to HTML
  • Copy the code as explained above

And add the code to the existing Custom HTML block as shown in the screenshot below.

hiding multiple pins

Once you are done adding the code, delete the image block and click Update / save draft to save the changes you have made. 

And here is how the pins will appear when you use the Pinterest Save button.

multiple hidden pins

You can hide as many pins as you want using this process, but I will recommend the lesser the better or it will slow your site speed.

Having said that,

There is an alternate method to hide pins in Gutenberg. This can be done using Classic block as well. To hide pins using classic block, all you have to do is

  1. Select the classic block
  2. Add the pin
  3. Convert the block to HTML

and add <div style=”display:none;”> at the very start and end it with </div>. Here is a screenshot

hide pin images using classic block

The best thing about using this process is you don’t have to copy, paste or delete anything. You just have to enter above mentioned code fragments.

To hide multiple Pinterest images using this technique, you need to add the second pin in another classic block. And all you have to do is

Copy the code from <img to > and paste it right below the first pin’s code. Here is a screenshot

hide multiple pins using classic block

After you are done adding the code, remove the second classic block and click update / save draft to save the changes you have made.

And that is it. You have successfully hid multiple pins using Gutenberg Classic block.

Moving Forward,

Like I have said before, there are 2 scenarios when hiding pins, the first one was simply hiding the pins that we have discussed above and second one is Force pinning images.

What if you want your users to pin the Pinterest optimized image rather than the visible one. In other words, Force an image to save on Pinterest or Force pinning.

Often while browsing the Pinterest feed, you may have seen horizontal images being pinned. Now, if you want your visitors to not pin that image and instead pin the image specifically created for Pinterest, you need to follow this process.

Before we move further, it is important to know the attributes we will be using are recommended by Pinterest.

And here is how you can do it.

The first step in the process is either creating a new post or editing an existing one. The next step in the process is to add the image that you don’t want users pins. Keep in mind this image can be placed anywhere on the blog. It is a regular image that you use but you don’t want it to be pinned. For example, it can be a screenshot, blogger banner that you normally insert in your posts.

Now, if you are editing an existing post, find the image that you don’t want the users to pins. After you are done locating or inserting the image, you need to add the pinnable image in the media library. 

You can do that by opening your WordPress dashboard in a second tab. Now you have 2 tabs running WordPress dashboard. 

Click Media >> Add new and it will let you add the pin image. Once you are done adding the image, click the image and it will show you all the details on the right.

You need the link of the pin from these details so do not close this tab or popup.

copying pin link

Now, you need to go back to the first tab and convert the block where you have inserted or located the image to HTML by clicking 3 dots on top and selecting Edit as HTML.

On clicking edit as HTML, it will show you the code of the image. 

The next step in the process is to add data-pin-media=” PIN URL” before the /> part. See the below image for reference.

adding data pin media attribute

While you are doing these steps you will also get an error that says “This block contains unexpected or invalid content”. Click the convert to HTML button and the error will resolve.

In case you have clicked the Resolve button, it will give you 2 options

  1. Convert to HTML
  2. Convert to Blocks

Select Convert to HTML

invalid content error gutenberg

Once you are done till here, the next thing you have to do is add description to your pin. It is important to keep in mind description plays an important role in Pinterest SEO.

To add custom description to your pin, you need to add data-pin-description=”PIN DESCRIPTION” after the pinnable image link you have just inserted. For referrence see the screenshot below

adding pin description

Once you are done making the changes, click Save draft / Update to save the changes you have made. And here is how the hidden Pinterest image will show when you click the official Pinterest button.

hidden pin with custom description

You can see in the image above, it contains a custom description and that is how you hide a pinnable image behind an image you don’t want to be pinned.

If you are a classic block user or have migrated block posts from Classic editor to Gutenberg, you can do this by using Classic block as well.

The process is very similar to what we have discussed  and to do this using Classic block, all you have to do is

  1. Add Classic block instead of the image block
  2. Insert/ find the image that you don’t want users to pin
  3. Convert the Classic block to code by converting to HTML
  4. Upload the pin and copy the link
  5. Add data-pin-media=”URL of the Pin” code snippet before />
  6. For custom description add data-pin-description=”Add description of the PIN” after the above code snippet.

As mentioned above, after adding the code you will get an error and to resolve you will have to click Convert to HTML and below is the screenshot of the implemented code.

hiding pins adding description using classic block

The final step is to save the changes you have made by clicking Update or Save Draft.

Now, when anyone will try to save the image using the Pinterest Save button, it will show them the Optimized pins rather than the horizontal image.

While doing research on this topic, I also came across a method that does not impact the page speed when hiding pin images in blog posts.

How to hide pins without impact the page speed in Gutenberg.

This process is the combination of the 2 scenarios we have discussed above and was featured on Mediavine

If you want hide pins using this, you need to add a small place holder (image) to your blog post, and then we will use the complete hiding and force pinning technique simultaneously.

To hide the pins using the fast loading technique, the first thing you need is an image of size 100 × 200 PX. Once you are done uploading this image, the next step is to insert this image in a blog post just like a regular image.

The next step is converting the image to code and for that you need to click the 3 dots on top and select Edit as HTML

After you do this, it will show the code and the first thing you have to do is add <div style=”display:none;”> in the beginning and </div> at the very end.

fast loading hidden pins gutenberg

On adding the code you will get an error and resolve you will have to click Convert to HTML. By adding the above code you have hid the place holder image. Now you have to add the pin that you want your users to pin.

For that you need to add data-pin-url=” PIN URL” and data-pin-description=”PIN Description” attributes as shown in the screenshot below.

fast loading hidden pins gutenberg wordpress

The last part is saving the changes you have made. 

In the above example you have used the image block. However, this can be done using the classic block also. The steps are exactly the same, the only difference is instead of using the image block you will be using the classic block.

Below is the screenshot and I have highlighted the code you need to add.

fast loading hidden pins gutenberg classic block

Follow the steps carefully, I have tested everything myself and you will be able to implement this easily. (Not comfortable with coding jump to the easy method)

Having said that,

What if you are still using the Classic editor and haven’t moved to Gutenberg. Here is how you can do it in the old 

Classic Editor

Again as previously discussed, we will be discussing both the scenarios in this section. The first one is you want to hide your pin completely and do not want to show it anywhere on the blog post.

For doing this, the first thing you need to do is either edit a post if you want to hide the pins in an existing post or click Post >> Add new to create a new one.

After you enter the classic editor, the next thing you have to do is upload the pin and insert it in the blog post or locate it if it is already included.

Once you have inserted the image, the next step is to convert the visual composer to text. You can do that by clicking text on top right of the editor.

changing visual editor to text in wordpress classic editor

If the pin is located somewhere in the middle or towards the bottom, then going through all the lines of code will be a waste of time. Use the search function to find the pinnable image using its name, link or Alt text.

This will save you a lot of time.

After locating or adding the pin image, you need to add <div style=”display:none;”> before the image code and in the end of the code add </div>. Here is a screenshot

hiding images in classic editor

Once you are done adding the code snippet, switch back to the visual composer by clicking visual and click Save draft or Update to Save the changes you have made.

When you switch back to the visual mode, pinnable image shouldn’t be visible anymore. If it is then you have to go back and check the code.

At times WordPress automatically adds double additional set of double quotes to the code and you will have to remove that.

Having said that,

If everything is implemented correctly, you will be able to see the pin when you click the Pinterest Save button.

How to hide multiple pins in WordPress classic editor

Adding multiple pins using this process is very simple, all you have to do is

  1. Add the second pin
  2. Convert visual editor to text
  3. Copy the image code (highlighted in the screenshot)
  4. Insert it right above </div> tag

hiding multiple pins in wordpress classic editor

Using this you can add as many pins as you want, but keep in mind hiding too many pins can negatively impact page speed.

The next scenario that we are going to discuss here is the Force Pinning of Images. If you do not want visitors to pin a regular image from your blog, you can show them an optimized pin instead.

So when the users will pin the regular image, it will ask them to pin the pinnable image you want.

For implementing this all you have to do is create a new post or edit an exisiting one. If you are editing an existing one you will have to find the image and if you are creating a new one add the image to the blog post just like you do.

The next thing is converting the visual composer to text, you can do that by clicking text on top right. It will show you the code of the post. If you are editing an old post you will have to locate the image, if its a new post you already know where the image is.

In the next step, you have to add data-pin-media=”Pin URL” and data-pin-description=”Add Pin Description” attribute to the image tag just before its closing. Here is the screenshot.

force pinning classic editor

And the last step is to convert the text editor to visual and save the changes you have made. If you confused on how to get the link of the pin, for that you have to navigate to media >> select the pin >> it will show you all its details and the link will be at the bottom.

After implementing this you will notice, the visible image cannot be pinned and the pin will be hidden. When the user tries to pin the visible, the Pinterest popup will show them the optimized pin instead.

Like I have mentioned before, hiding pins can slow down your website. But what if I told you there is a way to hide pins which will not impact page speed.

Hiding pins without impacting page speed in classic editor

This process involves combining the above 2 techniques and for this you will need a small image or a placeholder. The dimensions of the image will be 100 × 200 PX. (Minimum size that can be pinned)

Start by adding the small image to your blog post and the next step is to change the visual editor to text.

After changing you need to add <div style=”display:none;”> in the beginning of the image code and add </div> at the very end.

hiding images in classic editor

Ignore the image size in the above screenshot.

Once you are done adding the code, it will hide the small image. In the next step you need to add data-pin-media=”PIN URL” and data-pin-description=”PIN Description” before the closing of the image tag which is />.

hide pin images in classic editor wordpress

What this will do is, it will hide the small image and show the pin  every time someone clicks the Pinterest save button.

It is also important to keep in mind is this image will not be visible when you switch back to visual composer. In case it shows you have to check the code again.

Having said that,

If you are not comfortable with coding, there is an easy way to hide pins and that is by using plugins. 

How to hide pin images in blog post using plugins

For hiding pins using plugins, you either need Tasty Pins or Social Snap. Both these are plugins are premium plugins and are worth buying

Tasty Pins is for $29 and Social Snap is for $39

With Tasty Pins you get access to features like

  • Setting custom Pinterest descriptions
  • Utilizing Alt text for SEO
  • Hiding specific images
  • Disable pinning of certain images
  • Adding Pinterest image hover button
  • Force pinning hidden images

All in all Tasty Pins offer every feature you need to make your blog and images Pinterest friendly. And the best part is this all can be done with a few clicks and no coding required.

If you want to use Social Snap, you get access to the complete social media toolkit that includes

  • Access to 30 popular social networks and apps
  • Freedom to place share buttons 
  • Ability to customize share buttons
  • Access to share counter (both individual and total)
  • Power to control how your posts look on social media
  • Ability to see how your post perform on social media

And much more

The list of features is endless. This plugin is not just any social share plugin it gives you the power to do so much more.

Final Words

Above we have discussed 2 ways of hiding pins in blog posts using 2 different editors and blocks. Which method do I recommend?

You can use any editor be it Classic or Gutenberg and use any block. However, I recommend either following the fast loading technique or the force pinning one that uses the data-pin-url and data-pin-description attributes as it solves 2 purposes

  1. It lets you hide optimized pins
  2. you can add custom description to the pin and not worry later.

With that said, I hope you find this tutorial helpful and are able to execute this easily. Let us know which is your choice of method for hiding pins.

Also, if you haven’t applied for rich pins, I would suggest going for Pinterest Rich Pins as it makes your pin stand out in the feed and get can get you more visibility and traffic.

You may like to read next

If you have any queries regarding this feel free to contact via the comment section, and we will be happy to answer them. Also, don’t forget to share this article with your friends on social media. 

To get regular updates from us subscribe to the blog and follow us on various social media platforms.

GeekyPlug
Tags : Beginner's GuideHide PinsPinterestTutorial
Jasmeet Singh

The author Jasmeet Singh

Jasmeet Singh is the Blogging El Jefe at GeekyPlug. Started his career as a BPO employee and now is a full-time blogger and writes how-to guides and his personal experiences related to blogging. In his spare time, he likes to read books, listen to podcasts and play video games.

1 Comment

  1. Excellent and informative post!
    Just started playing around with Pinterest seriously in the last few months and still quite green with everything so all tips are appreciated.

Leave a Response