pda-how-to-hide-pinterest-images-in-wordpress-blogs

How to Hide Pinterest Images in WordPress Blogs

Receiving 444 million monthly active users worldwide, Pinterest is one of the best and most reliable potential referral traffic sources for websites. Pinning inspiring images engages user clicks, which drives quality traffic to your WordPress site.

It’s recommended to create about 3 to 5 pins for each article. However, displaying all of these on your post is certainly not a good idea. It delivers a poor user experience and, at the same time, affects your site SEO.

Our post today will reveal how to hide Pinterest images in WordPress in 4 ways. But before digging into the detailed guide, we’ll brief you on why you shouldn’t show Pinterest photos on content.

Let’s jump in!

Why You Should Hide Pinterest Images

Standard Pinterest image size is 1,000 x 1,500, with the ratio of width to height at 2:3. Since these images take up huge space on your content, this definitely clutters up your post and makes it hard for visitors to read.

Consequently, showing Pinterest images on your article affects the user experience in the long run. These photos annoy visitors, in contrast with the original purpose of inspiring them.

Visual content like images and videos contributes a lot of weight to your page. Having large images like Pinterest photos will greatly slow down WordPress websites.

Just a second delay in page speed drives 45% of your customers away from your e-commerce store, according to Unbounce Page Speed Report. Plus, Google doesn’t take great pleasure in websites taking more than 4 seconds to load. Then, it’ll remove your page from the top search engine pages.

Making Pinterest images invisible reduces the page load time resulting in better site performance. You don’t have to bother users with too large images or challenge their patience with slow loading pages.

Does Hiding Pinterest Images Hurt Your WordPress Site SEO?

As mentioned, Google doesn’t prefer pages with visible Pinterest images due to the page speed. Still, the biggest search engine isn’t a big fan of hidden images or content either. It wants to crawl all pages and media to properly index your site.

You optimize your Pin image alt text with multiple related keywords to let search engines know what your images are about. However, not many site owners know how to target keywords correctly.

The outcome is that, once you cover your Pins, Google misunderstands that you’re attempting to conceal spam keywords. It’ll list your site among Black Hat SEO websites.

In fact, hiding Pinterest images doesn’t impact your WordPress site SEO if you use the right method. You can learn our simple yet ideal solutions in the next section.

4 Ways to Hide Pinterest Images in WordPress

There are 4 methods you can apply to make your Pinterest images invisible to visitors, depending on your page builder. If you’re using the Classic Editor, try adding some code to the page with the pins.

Do you build your site with Gutenberg Block or Elementor? The process is much easier thanks to their Image block settings. In case you want to look for a perfect solution for all types of page builders, Tasty Pins will be your smart choice.

#1 Add Code to Your Image Tags

You first need to upload the Pinterest image to your Library by going to MediaAdd New and drag and drop it in the library. After that, open the post you intend to create Pins and insert the image there.

pda-how-to-add-pinterest-image-to-wordpress-use-code
Image source: WPkind

Now go to the ‘Text’ editor of your page editing screen and include the following code in your post.

<div style=”display:none;”>THE IMAGE CODE GOES HERE</div>

Once done, it should look something like this. If the code works correctly, you wouldn’t see it from the front end.

pda-add-code-hide-pinterest-image

#2 Use Gutenberg Block Editor

This way is similar to what you’ve done with Classic Editor. But instead of adding code to the page editing screen, you can make use of the Gutenberg Image block.

You need to upload your Pinterest image to the Library and enter necessary information such as title, alt text, sizing, and other details. Then, in your post editing screen, you can find the Image block and insert that Pinterest image to the page.

Now select the 3-dots tab and choose ‘Edit As HTML’ to edit your image as HTML. The next step is replace the code <figure class=”wp-block-image”></figure> with this code <div style=”display: none;”></div>.

Here is your Pinterest HTML image with the new code.

<div style="display:none;"><img class="alignnone wp-image-236 size-full" 
src="http://greend1.sg-host.com/nhi/index.php?pda_v3_pf=/_pda/2022/01/pda-guide-to-wordpress-admin-dashboard-pinterest.jpeg" 
alt="pda-guide-to-wordpress-admin-dashboard-pinterest" width="564" height="1014"></div>

You can test your Pinterest image visibility to ensure it’s hidden from the front end.

#3 Use Elementor Page Builder

Appearing as the most popular WordPress page builder, Elementor receives over 5 million active users worldwide. You can take different paths to hide Pinterest images on your article, using CSS or disabling responsive features in the Elementor image block. We’ll show you both ways below.

Once inserting an image block into your blog and add the Pinterest image there, you can go to the Advanced tab. You’ll see a ‘CSS Classes’ option at the bottom of the Advanced section. Simply enter the text there:

elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone

 pda-advanced-css-classes

For the latter way, you just need to stay in the Advanced tab. But rather than entering text to the Advanced section, open the Responsive one. Now enable all these options ‘Hide of Desktop,’ ‘Hide on Tablet,’ and ‘Hide on Mobile’.

That’s it!

#4 Use Tasty Pins Plugin

Tasty Pins turns out to be a simple yet powerful tool to hide pins. Besides this core feature, it allows you to do many other things with your pins, from creating a Pinterest follow box to increase followers to adding a Pinterest banner to the first image in your post.

To start using Tasty Pins, you need to download and install it for your WordPress site by going to PluginsAdd New in your WordPress dashboard. Next, click on Upload Plugin and pick the plugin file you’ve just downloaded.

Now, open and edit the article you plan to hide its Pinterest images. Scroll down to the ‘Pinterest hidden images’ option in the Tasty Pins box.

 pinterest-hidden-images

You can press the ‘Select Images’ button and choose your desired photo. On the Attachment Details page, there is an option for you to enter the Pinterest description called ‘Pinterest Text.’

Update your post and you’re done.

Hide Private Images in WordPress

Apart from hiding Pinterest images on blog posts, it’s recommended to block private image visibility from certain site visitors.

PDA Gold plugin proves a perfect solution to protect unlimited WordPress media files of all types. Once your media becomes private, users will see an ‘Image Not Found’ icon. Users have to log in as subscribers or members to view them successfully.

Photographers, online course providers, ebook sellers, and thousands of digital product sellers love this plugin so much. They can hide their premium photos, personal usage images, or even training videos from unpaid users. People have to purchase  to access and download them.

Upon installation and activation, follow the guide below to protect your WordPress media files.

  1. Open your Media Library
    pda-media-library
  2. Hover the image or video you wish to make private
  3. Click ‘Protect’ under the file’s name
    pda-hover-protect-file

Clicking on the ‘Configure file protection’ option gives you full control over your file. You can generate private download links and send them to specific users to access your image.

These private download links are auto-generated to customize, depending on your choice. It’s possible for you to expire private links after a given time or a number of clicks.

You’re able to protect your files in 3 other ways, including in the media attachment page, in the media library grid view, and while editing your post/page.

Ready to Hide Pinterest Images in WordPress?

Making Pinterest images invisible to WordPress site visitors not only improves user experience but also increases your page speed. We’ve shown 4 different ways to hide your Pinterest images in WordPress.

You can add code to the Classic editor, insert some text to the Gutenberg page builder, or use the Responsive feature in Elementor. Want to look for a plugin solution to automate the process? Give the Tasty Pins plugin a try.

Besides Pinterest images, we also recommend hiding other private or medium media files on your WordPress site. As a result, only specific user roles have the right to see your images. In this case, the PDA Gold plugin should be your way to go.

Download PDA Gold to effectively hide your WordPress files now. You may want to check our article on hiding protected files from on-site search too.