4. Hide a pinnable image within another image using Pinterest’s HTML code
This is my favorite method, but I’m only just starting to use it.
Pinterest has it’s own data-pin HTML tags that you can add to your code to communicate with Pinterest. These work on any website – not just WordPress, and not just blogs.
There are 3 different Pinterest codes you can use:
You can use these codes to include a Pinterest-specific description for your images, to change the URL on the Pin that will be shared to Pinterest, or to change the image that will be shared.
In the context of hiding a Pinterest image, we can use the data-pin-media and attach our pinnable image to another image already on our website. It’s not ‘hidden’ as such, but it tells Pinterest that you’d rather use a different image when someone tries to share your post.
For example, I might want a horizontal title image on my blog post – which isn’t very ‘pinnable’. By adding this code to my horizontal image, I can point Pinterest to a pinnable vertical version of the image (hosted on my website) to share instead.
A big benefit of using this method is that because it’s not hiding anything in your website, it won’t slow down your website load time… and it will keep Google happy!
Compared to the other methods in this article, this method provides the most SEO and Pinterest friendly result, but it’s probably the most time-consuming.
First, you need to upload your pinnable image to your website and identify it’s URL in the media viewer. Copy this URL and paste it somewhere that you can copy it back shortly.
Then, insert your normal image on your page (the one that will be visible in your post), then go to your HTML/text view and find the tag for the image you just inserted.
Add the following code within your new image tag, replacing the below URL with the URL that you copied from the pinnable image you want to hide:
Your final code should look something like this:
<img src=”http://yourwebsite.com/visible-image.jpg” alt=”your description here” width=”217″ height=”267″ data-pin-media=”http://yourwebsite.com/hidden-image.jpg”>
The src code points to the visible image and the data-pin-media code points to the hidden image. Pinterest will use the ‘alt=’ description when people save your Pin unless you choose to include the data-pin-description code in your image as well.
If your website includes ‘Pin It’ buttons that hover over your images, this will use the hidden image instead of the visible image if someone tries to save it to Pinterest.
Extra note: I took this a step further and tried to create a tiny 100x200px white placeholder image to use in my post instead of a visible image, using the data-pin-media code to attach the hidden image. However, in my experiments, I found that the Tailwind browser button I use didn’t pick up the hidden image, and Pinterest could only identify the first instance of the placeholder – so my second or third hidden images (using the same placeholder image) weren’t found.