How to Hide a Pinterest Image in a WordPress Blog Post (The Right Way)
Pinterest is one of the most powerful traffic generating sources for bloggers and Internet marketers. While organic traffic from the search engines is still the best kind of traffic, one can’t ignore the potential of Pinterest as a traffic source.
The main prerequisite to be successful on Pinterest is using purpose-built images. You know, those big vertical images with catchy taglines. To encourage your website visitors to share your blog posts on Pinterest, having a Pinterest-ready image available to share is crucial.
But to share these images, they don’t actually need to be visible. Read on to learn how to hide a Pinterest image in a WordPress blog post in two different ways.
Why Hide Pinterest Images in Blog Posts?
Of course, you don’t have to hide a Pinterest image if you don’t want to. In fact, a lot of bloggers actually choose not to hide their Pinterest images. They want them to be visible so that visitors are more inclined to share them.
Here are a few reasons why you could choose to hide Pinterest images:
- They can take up too much space
- They can be distracting
- They can have a negative impact on page load due to the size
All of the above issues can be resolved or prevented in many ways, and hiding the Pinterest image is one of them.
If a Pinterest image is hidden in a blog post, it can still be shared via the share buttons. It will pop up in the list of available images to share when choosing Pinterest as the preferred platform.
How to Hide Pinterest Images
There are two commonly used ways to hide a Pinterest image in a blog post.
The first one is the easiest, and most popular one. But in my opinion, it’s not the best option, which I’ll explain. The second one requires a little bit more work, but is my preferred way of hiding a Pinterest image in a WordPress blog post.
Let’s dive into these two options.
1. Using the CSS Display Property
The easiest way to hide a Pinterest image in a blog post is by simply using the CSS “display” property. If that sounds complicated, have a look at the following snippet.
All you need to do is wrap the Pinterest image in a div with the “display” property set to “none” and it won’t be visible. But when a user hits the share buttons, it will still be available to share. Awesome!
The reason I don’t quite like this approach is that the search engines may interpret this the wrong way. Don’t worry, your website won’t get in trouble if you do it this way, but still.
Mr Google may think that your trying to hide something from your readers while at the same time using this image to stuff a few extra keywords in your blog post.
While nobody would have that intention, we do need to populate that image ALT tag with a descriptive text (including keywords) so that Pinterest can pick that up as the description. And because you’re hiding the image from readers, Google may interpret this the wrong way
The other reason I don’t use this approach is that I simply like the next one better :).
2. Using Custom Pinterest Attributes
By using the custom attributes that Pinterest has invented, you’re not really hiding anything. You’re basically telling Pinterest that a certain image is the best candidate for sharing purposes.
The way it works is simple. The first step is to upload the Pinterest image to your WordPress site. You can do this via the image library or directly from the blog post you’re working on.
Find an image in that blog post that you don’t want people to share. Then go into WordPress text mode and add three Pinterest attributes to that image you don’t want shared, as per the following code snippet.
This attribute contains the URL of your blog post.
This attribute contains the link to the Pinterest image.
This attribute contains the description of the Pinterest image. This description will be included when the image is shared on Pinterest.
What this code does, is it replaces one image with another to be a Pinterest shareable image. In the blog post itself, the original image remains visible, and the Pinterest image is not visible.
But when you click on the blog post share buttons, the Pinterest image will pop up as the first in the list of images that can be shared.
Ps: Do you want certain images in your blog posts to not be pinned? Check out my guide to blocking images from being pinned with the NoPin code + 5 valid reasons to do so.