How to Hide Pins in Blog Post
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
- Why you need to hide pins?
- Does hiding pins has any impact on SEO of your WordPress site?
- How to hide Pinterest images in WordPress using plugins
- Hiding pinnable images in WordPress manually (For both Gutenberg and Classic editor)
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 How to create Pinterest Business accounts.
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 pins in WordPress blog post 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 Pins 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 hide pins as you do not have the permissions to edit code or use plugins if you are using the free plan.
You may like to read- WordPress.com vs WordPress.org
To get access to these basic features, you need to upgrade and I do not recommend doing that because it is way more expensive than starting your own self hosted blog.
If you are looking to start one then you can follow our guide on How to start a WordPress blog.
With that said,
As discussed before, there are 2 ways to hide pins in blog posts
- Using plugins
In this article we will be learning both the methods starting with using plugins first as it is an easy way to implement this and just with a click of a button you can hide pins in WordPress.
Also, 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.
Having said that, lets start the tutorial
How to hide pins in WordPress blog post using plugins
If you are looking to hide pinnable images in blog posts then using plugins is the most easy and reliable way.
With plugins you don’t have to think about inserting codes for neither hiding the pin and nor for adding the description. And in case you want to hide multiple images, the process gets a little complicated if you are doing it manually.
However, using plugins you don’t have to think about anything mentioned above. All you have to do is upload and add your pins to blog posts just like you do on a regular basis. And for adding descriptions to the pins there is an option available to simplify the process. (will be explaining it in detail later in this article).
While doing research for this article we did search for free alternatives that can help you with hiding pins in blog posts
But all the plugins that we found were not updated and compatible with the latest version of WordPress and hence were a threat to your site’s security. Also, the ones that had this feature, offered it only in the premium or pro versions.
Having said that,
To implement this feature we recommend you going with any of the 2 plugins below
The first plugin that we will be using to hide images in WordPress is Tasty Pins and this will be followed up by a complete tutorial on how to do this using Social Snap.
How to hide pinnable images in WordPress using Tasty Pins
To hide pins in blog posts using Tasty Pins the first thing you have to do is download the plugin.
Tasty Pins is a premium Pinterest SEO plugin by WP Tasty and this brand is know for its products mentioned below
- Tasty Recipe-This is a must have plugin for food bloggers as it lets you add recipe card to your blog posts and also implements its schema markup.
- Tasty Links– This plugin is for you if you are an affiliate marketer and want to boost your revenue. Tasty links lets you auto link your keywords to the URL’s of your choice.
- Tasty Pins– If you are looking to optimize your website or pins for Pinterest and improve your reach and traffic then this plugin is for you.
To read more about these products visit WP Tasty’s official website.
Having said that,
You can buy Tasty Pins for $29 and this is an investment that you will never regret. Here are a few reasons on
Why Tasty Pins is recommended for hiding pins in WordPress
- Hiding pins made easy– Hiding pins in blog posts using Tasty Pins is very similar to adding an image in your article in WordPress. All you have to do is upload the pin and it is that simple.
- Force pinning hidden pins– This is an amaing feature which when enabled asks the people to share the hidden first than the one available on the page.
- Custom Pinterest description– To add a pin description you need to insert
data-pin-descriptionattribute to the image and with Tasty Pins all you have to do is add Pinterest optimized description and not worry about the code.
- Add Pinterest Save button– When you install Tasty Pins it automatically adds hovering Pinterest Save button on images which encourages people to pin and this helps boost your sites reach on the platform.
- Disable pinning of selected images– Not every image is meant to be pinned and to exclude those images you need this feature. Often this feature is implemented by manually adding
data-pin-nopinattribute to the image. However with Tasty Pins you can disable pinning of selected images with just a click of a button.
Above listed are some features of Tasty Pins plugin that makes it a must have if you want to grow on the platform. Also, let me tell you using this plugin will make your life super easy when optimizing for Pinterest.
And the best part is all of this can be done with a few clicks and no coding required.
Having said that,
After downloading the plugin, the next step is to install the plugin and for that you can follow our guide on how to install a WordPress plugin
Once you are done installing the plugin its time to hide pins in blog posts. And for that you need to head over to Posts >> All posts and Edit an existing post.
When you click edit it will take you to the WordPress editor. Now all you have to do is scroll to the bottom of the editor and look for Tasty Pins or Pinterest hidden images. It will look like the screenshot below.
Now, the next step is to click Select Images and it will take you to the media library. Here either you can select a pin that you have already uploaded. Also, you can upload a new pin.
Once you are done uploading click Select.
Now, before we move forward it is important not to ignore a setting known as Pinterest Text.
You can see this option just below the attachment details when you select a pin.
If you are not familiar with this then let me tell you, this option adds a custom Pinterest description to your pin and in this box you need to add that description.
You can also include hashtags. Be sure to add this to every pin to make it Pinterest friendly.
Having said that,
Once you hit select, you can see the hidden pin will be uploaded just like the screenshot below.
Once you are done uploading the pin and have included an optimized Pin description, the last step is to click Update to save the changes you have made.
How to check if a pin is hidden in blog post
To check if a pinnable image is hidden is a blog post or not, the first thing you have to do is visit the blog post and see if the pin you have uploaded in the hidden pin section is visible on the page or not.
The image won’t be visible until and unless you have included it in the body of your post.
The next step is to click on Pinterest Save button and it will show you the hidden pin. See the below screenshot for reference.
As you can see in the above screenshot, the Blogging Unplugged’s logo can be seen next to the other image and it was the logo that was uploaded in the hidden pins section.
Having said that,
With the recent Pinterest algorithm changes and the platform favoring new pins, it is important that you create multiple pins for a blog post.
And this takes me to my next question which is
How to hide multiple pins in WordPress using Tasty Pins
The process of hiding multiple pinnable images in blog posts using plugins is very similar to that of hiding a single image.
All you have to do is upload multiples pins in the Pinterest hidden images section below the WordPress editor as explained above.
As you can see in the screenshot above, I have uploaded two images. Similarly you can hide as many pins an you want using this technique.
Also, you can add custom Pinterest description to every pin using the Pinterest text section and I will highly recommend doing this if you want to boost your reach on Pinterest.
Now, while we are on the topic of Pinterest descriptions there is another setting that you should know about.
And it is the Default Pinterest Text.
This setting can be found below the Pinterest hidden images section and is used to set default Pinterest description for all the images on the blog post.
Once you have set the default Pinterest text and an image is pinned from the blog post that does not include a Pinterest description, then this Default Pinterest text will be automatically fetched as the description of the pinned image.
In case you have already set the Pinterest text on individual image level then that will be the one showing as Pinterest description and not the default one.
After you are done adding the default Pinterest text the next setting we are going to discuss is
How to force pin hidden images in WordPress using plugins
Before we begin let me tell you briefly about this setting. When your blog post is pinned on Pinterest, the pin that is more likely to be pinned is the one that is showing on the blog post and not the one that is hidden.
Now to boost the pinning of the hidden pin you can use this setting.
Keep in mind if you have multiple pins in a blog post then the first hidden pin or image will appear in front followed by the rest of the images and pins.
Having said that,
To force pin hidden images in WordPress, all you have to do is select “Force pinning of first hidden image”.
As you can see, this setting is above the section where you add hidden images to a WordPress post.
Once you are done till here, the last step in the process is to click Update and save the changes you have made.
This covers everything you kneed to know about hiding pins in WordPress blog posts using Tasty Pins and in case you have any problems regarding the plugin you can contact the Tasty Pins support and in no time your problem will be solved.
If you are new to the blogging world and looking for a plugin that will help you with all your social media platforms including Pinterest optimization then the next section is for you.
Before we moe forward it is important to know some of the features that are aavailable in Tasty Pins will not be available in Social Snap.
Because Social Snap is a social media share plugin and it focuses on multiple channels instead of one. But the best part is it still offers Pinterest optimization features that are enough for you if you are just starting out.
However, when we talk about Tasty Pins, the plugin is focused on optimization for single platform which is Pinterest and that is why it offers more features as compared to any other plugin in the market.
Selecting one out of the two can be a difficult choice, you need to pick one based on your requirements and rest assured you won’t be disappointed.
Having said that, its time to hide pinnable images in WordPress using Social Snap.
How to hide pins in blog posts using Social Snap
For hiding pins in WordPress using Social Snap, the first step in the process is to download the plugin.
Social Snap is a premium social media plugin that is packed with features. The plugin is originally priced at $39 and with our special link you will get a flat 30% discount which is $27.30.
As mentioned above this plugin is not just any social media share plugin. With Social Snap you get access to features that will not only boost your reach on Pinterest but on other platforms as well and here is
Why we recommend using Social Snap?
- If you are currently using a social share plugin, I m sure it only allows people to share your content on limited platforms. However, with Social Snap visitors can share your articles or blog posts on over 30 platforms. This feature is enabled on our site and you can see it yourself.
- To increase your reach on social media platforms you need people to follow you and for that Social Snap allows you to add follow buttons on your site from over 40 networks.
- Another important factor that encourages people to follow you and share your content on various social media platform is Social share and follower counters. And with Social Snap you can add both these features on your website.
- Just like schema markup, social media platforms use tags like opengraph and twitter cards to display meta like titles, descriptions and images on social media platforms. You can add these important tags usings Social Snap with just a click of a button.
- With Social Snap you also get complete control on how your posts appear on social media platforms. This plugin allows you to add custom description, titles and images to blog posts.
- To increase your reach on twitter Social Snap has a feature caled Click to Tweet using which people can share custom tweets with a single click and the best part is your blog post link will be included.
- For Pinterest, Social Snap allows you to add Pinterest Save button on images. Also, if you want you can add other social share buttons on images as well. Using this feature, people can share your images on Pinterest or other social media platforms.
The list of Social Snap is extensive and if you are looking for one then definitely consider buying Social Snap
As we are using Social Snap on this site we have implemented some of its features and you can them in action before buying.
In case you are looking to read more on the features of this plugin then I will recommend visiting the official Social Snap website.
With that said,
Once you have downloaded the plugin, the next step is to install it. For installing a plugin you can follow our guide on How to install a WordPress plugin.
In the next step you need to visit Posts and edit an existing post.
After you click edit, you will enter the Gutenberg editor. On the right sidebar under Document settings you need to locate Social Snap options.
Under Social Snap options you will find the Pinterest image settings.
Now click the upload image button and it will take you to the Media library from where you can either upload or select an existing image as hidden pin.
In the next step, you need to add a description to the image and you can do that by entering a description in the Pinterest description option which can be found just below where you have uploaded the hidden image.
It is important to keep in mind, you can include hashtags in this description and Social Snap will let you do that.
Once you are done till here, click Save draft or update to save the changes you have made.
If you are a Classic editor user then you will find the Social Snap options below the editor.
Now that you have included a hidden pin in your blog post and a description, if anyone shares your content using the Pinterest Share button, it will only show them the hidden image.
If you want to include multiple images in WordPress using Social Snap, then let me tell you this plugin currently does not offer this feature and for that you will need Tasty Pins.
This concludes all the settings that you need to know about hiding images in WordPress using Social Snap.
In case you have any plugin related problems or haing difficulty configuring it then reach out to Social Snap customer care and your problems will be resoled quickly.
Having said that,
Next on the list is
How to Hide pinnable images in WordPress manually
Before we begin this section, let me tell you this section is not for you if you are not comfortable with adding code snippets on your site.
Having said that,
In this section we will be covering
- Implementing hidden pins in both Gutenberg using different blocks
- Hiding pins in Classic editor
- Force pinning images
Also, later in this article we have discussed a techniue that is a combination of 2 scenarios and using it you can hide images with no impact on your page speed.
So without further ado, lets dive into the tutorial
Hiding Pinterest images in WordPress Gutenberg editor manually
When it comes to hiding pins in blog posts, there are 2 methods.
The first one is where you just want to hide a single image using the
<div style="display:none;">. I do not recommend using this method as
data-pin-description attribute won’t work alone with this code. That means when you try to pin the hidden image it won’t fetch the custom description.
However understanding this method is important as it will be later used in hiding pinnable images that won’t imact page speed.
To hide pins in WordPress using this method the first thing you need to do is create a new post or edit an existing one by navigating to Post >> Add new or Edit.
On doing this, it will take you to the Gutenberg editor. Now, the next step in the process is adding an image block and uploading the pin you want to hide in the blog post.
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.
It will look like the screenshot below
After you are done converting the image block to HTML, add the following code snippet in the beginning.
</div> in the very end as shown in the screen shot below.
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.
Also, after adding the code you will get an error “This block contains unexpected and invalid content”.
To resolve this just click Convert to HTML
The last step in the process is to 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 visit the blog post, the image will not be visible. Use the Pinterest browser extension to see if it fetches the hidden pin.
In case the image is visible, then you will have to go back and check if you have implemented the code correctly.
The next question is,
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
- Select the classic block
- Add the pin
- Convert the block to HTML
<div style="display:none;"> at the very start and end it with
</div>. Here is a screenshot
The process is the same, the only difference is the block you are using is different.
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.
Force pinning hidden images in WordPress Gutenberg manually
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 this is the correct method for hiding images in WordPress without plugins.
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 include in your blog post but you don’t want it to be pinned. For example, it can be a screenshot, a general image 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 the 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 the popup.
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. Replace the PIN URL part with the source URL. See the below image for reference.
While you doing these steps you will 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
- Convert to HTML
- Convert to Blocks
Select Convert to HTML
Once you are done till here, the next thing you have to do is add a custom 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" attribute after the pinnable image link you have just inserted. For referrence see the screenshot below
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.
You can see the image above contains a custom pin 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, the process is very similar to what we have discussed above and for this, all you have to do is
- Add Classic block instead of the image block
- Insert/ find the image that you don’t want users to pin
- Convert the Classic block to code by converting to HTML
- Upload the pin and copy the link
data-pin-media="URL of the Pin"code snippet before
- 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.
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 pin 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 methods we have discussed above and was featured on Mediavine
If you want hide pins using this, the first thing you need to do is add a small place holder (image) to your blog post the size of the image neds to be 100 x 200 px. Now, we will use the hiding and force pinning technique simultaneously.
Once you are done uploading this image, the next step is to insert this image in a blog post just like a regular image and convert 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.
On adding the code you will get an error and to 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-media="PIN URL" and
data-pin-description="PIN Description" attributes as shown in the screenshot below.
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.
And that’s it you have successfully hidden Pinterest images in Gutenberg manually.
This process is a little confusing so I will suggest following this tutorial very carefully. Also, I have tested everything myself so every method mentioned here works
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 editor
Hiding pinnable images in Classic editor manually
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.
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
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 if that is the case then you will have to remove them.
Having said that,
If everything is implemented correctly, you will be able to see the pin when you click the Pinterest Save button.
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.
Force pin hidden images in WordPress Classic editor without plugins
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.
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 however the pinnable image will be hidden. When the user tries to pin the visible image, 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.
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
What this will do is, it will hide the small image and show the pin every time someone clicks the Pinterest browser extension.
It is also important to keep in mind that, this image will not be visible when you switch back to visual composer. In case it is visible, then 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.
Final Words- How to hide Pinterest images in WordPress blog posts
Above we have discussed 2 ways of hiding pins in blog posts and that is manually and using plugins. Which one do I recommend?
You can use any process be it using plugins or manually. However, I recommend using plugins because of the 2 reasons listed below
- It saves a lot of time as it is very straight forward.
- You can optimize pins while hiding and not worry about coding at all
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.
You may like to read next
- Quick SEO Tips to Skyrocket traffic
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. In case you are looking to check the tools we have used to create this site then see the Recommended Blogging tools section and for exclusive deals visit Blogging Deals and Discounts.