You know those times when you love the article so much that you want to pin it to your board, but as soon as you click the Pinterest button you get 5 horizontal images, 7 unrelated posts’ features, a few logos and 0 optimized vertical images? For me, that is a big NO-NO. And you? ?
If you run a blog you already know that your visitors’ experience is the cornerstone of everything. So you don’t want to have that happen with your post. To avoid that, consider creating a special vertical graphics for your article and either:
a) add it to your blog post and make it visible for visitors to pin (like in this post);
b) hide it in your post code for the visitors to see the vertical image only after they have clicked the Pinterest share button.
I usually suggest b) because if you leave a vertical image in your blog post it may not be be the best experience for mobile users who will have to scroll through the entire image to get to another element of your blog – particularly when using super long pins. However, sometimes you want to encourage your visitors to pin by showing your vertical graphics and if it is not super long (e.g. 600px by 900px) it may work, too.
Hide Pinterest Images in WordPress
To hide your Pinterest graphics in WordPress follow the following steps:
Step 1. Change the tab of your WordPress editing area from Visual to Text.
Step 2. Copy the following code and paste into your text area.
<div style="display: none;"> <img src="IMAGE LINK" alt="ALT" width="NUMBER" height="NUMBER" data-pin-description="TEXT" /> </div>
In general, you can paste the below code anywhere, but I suggest pasting it in the very end of your post – always. This will keep things consistent and will eliminate the risk of showing the pin above-the-fold should anything go wrong.
Step 3. Replace the following to what you need:
• IMAGE LINK – full path to your image starting from https://.
• ALT – description of your image that will be picked up by search engines.
• Width NUMBER – your pin’s width in pixels. For example: 600px.
• Height NUMBER – your pin’s height in pixels. For example: 900px.
• TEXT – the description for Pinterest.
Here is a quick video example:
Once you save the page you will have a hidden image that will show up when shared on Pinterest but stay hidden for regular readers. And that is how to hide Pinterest images in WordPress!
Here is a quick video showing the result:
P.S. In the video above you will notice how when I share the post on Pinterest all the non-related content comes up as well (such as related posts, featured images, logo, etc.). If you also have the same issue when sharing to Pinterest let me know in the comments below. I am going to create another post with the solution and publish it to our blog, so stay tuned!
And if you need more help with it, let us know through our business page here.
P.S. Try pinning this post to see the above in action 😉