Are you a Pinterest fan? Do you have pinable images in blog posts? Do you know how to hide them so they don’t show in the post? You are probably doing it wrong! Here is the right way.
A good way to boost traffic to your blog or website is through Pinterest, which is a site used by millions of people looking for great content. Visit the site and the home feed is filled with pins – images that link to interesting blog posts and website articles.
To stand out among the crowd, pinned images must be large and they can be 800 x 1200 pixels and sometimes even bigger. This means that image files can be 2, 3 or even 400k. Pinterest images are big and so are the file sizes.
To encourage people to pin blog posts and articles on Pinterest, it is common to have one or more of these very large images within a blog post. The idea is that when people post a link, the image produces a nice eye catching pin that will appeal to people.
You can spot a Pinterest fan a mile off because they almost always have a huge pinable image at the start of each blog post. However, there are disadvantages and it adds a lot to the size of the page and this slows it down. Slow pages put off visitors and are not liked by search engines.
On the one hand you want a large pinable image but on the other hand you don’t want to slow down your site. What can you do?
Lazy load images
If you must insert a large Pinterest image in a blog post, is the best place for it at the start of a post near the top of the page? There are good reasons to put it at the bottom.
One is so that visitors don’t have to scroll down three screens to get to the real content of the page, which can be irritating. Another is so that you can use lazy loading of images.
Lazy image loading means that any image that is not visible is not loaded. Images down at the bottom of a page and therefore not visible until the user scrolls down to them, are not loaded. Pages therefore load and display more quickly if the large Pinterest image comes after the post rather than before it.
The Jetpack plugin has this feature and it is easy to enable. Go to Jetpack > Settings > Writing and turn on the switch next to Lazy Load Images. That’s it. Now just put the Pinterest image at the end of the post or at least far enough down so that it is off the bottom of the screen.
Do you really need a massive Pinterest image though? Why not hide it or at least show a smaller version of it? When you or someone else shares the page on Pinterest, the full size image can be selected.
Method 1: Hide Pinterest images in posts
A very common way to hide a shareable Pinterest image in a post is to use the div tag. It works like this:
- Upload the Pinterest image to your site’s media library
- Insert the Pinterest image into a post
- Switch to the Text tab in the WordPress post editor
- Find the code for the image, it begins <img class=”blah blah… />
- Insert this before it: <div style=”display: none;”>
- Add this after it: </div>
The whole thing will look something like this:
<div style=”display: none;”><img class=”alignnone size-full wp-image-1437″ src=”https://mysite.com/wp-content/uploads/pin-image.jpg” alt=”Pinterest Pin” width=”800″ height=”1200″ /></div>
(It won’t really appear in bold, that’s just to make it easy for you to see.)
Everything between the two div tags is not displayed on the page and so the image is hidden. However, when someone shares your URL on Pinterest either on the site or through a browser button or extension, they see the image and can select it and pin it.
It might look complicated and you have to be careful not to make any mistakes with the code, but once you can done this a few times, it becomes very easy.
Advantages: Multiple Pinterest images can be hidden in the post. You could insert two or three and see which performs the best on Pinterest. A/B testing in which you show alternatives and see which people prefer is extremely valuable market research. Knowing what your audience likes is the key to success.
Disadvantages: The main disadvantage of this method is that although the image is never displayed, the web browser may download it anyway. If there are several, it might download all of them. This causes the web page to download and display more slowly, which is bad for impatient visitors, uses more data on mobile phones, and is regarded as poor by search engines.
Method 2: Hide Pinterest images in posts
If a very large Pinterest image is to be hidden within a blog post, it is best if the browser does not download it. The page will display faster and both visitors and search engines will prefer it.
There is a way specifying a Pinterest image that only Pinterest recognises. Browsers don’t download it and don’t display it.
- Upload the Pinterest image to your site’s media library
- Upload a small alternative image
- Insert the small image in a post
- Switch to the Text tab in the WordPress post editor
- Find the bit of code for the image: <img class=”blah blah… />
- Insert this before />: data-pin-media=”http://mysite.com/big-pin.jpg”
In a real situation it looks a bit more complicated because of all the code surrounding an image. You also need to know the URL of the Pinterest image in the media library.
Go to the media library and click the Pinterest image. On the right is a URL box. Click it and press Ctrl+C (PC) or Cmd+C (Mac) to copy the URL to the clipboard. It can then be pasted into the post editor with Ctrl+V or Cmd+V.
Here is what the code for image looks like before:
<img class=”alignnone size-full wp-image-1437″ src=”https://mysite.com/wp-content/uploads/small-image.jpg” alt=”Image description” width=”100″ height=”100″ />
Here is what it looks like after:
<img class=”alignnone size-full wp-image-1437″ src=”https://mysite.com/wp-content/uploads/small-image.jpg” alt=”Image description” width=”100″ height=”100″ data-pin-media=”http://mysite.com/big-pin.jpg” />
Notice the data-pin-media before the closing />. This tells Pinterest what image to use for the pin.
Advantages: The small image, which can be anything, is fast to download and display. The big Pinterest image is not downloaded and so does not slow down the page display. You can even display a square or landscape image in your blog but specify a portrait image for Pinterest. Portrait images work best.
Disadvantages: People need to pin the image with the data-pin-media code, so make it an obviously shareable image.
The image on the left is a small 141 x 200 pixels and is a small 14k file, but it hides the full size Pinterest image which is over 200k. Move the mouse over it and it should show a P Save button, click it and you will share the big Pinterest image, not the small one seen here.
It works with the Pinterest extension in Chrome, but should work without it using a plugin that overlays images with a Pin button. Jetpack should do it, but is a bit temperamental. There are other plugins though.
Advanced Pinterest pinning
In the example above we used the data-pin-media parameter but it is not the only one and there are a couple of others. They are all optional but you could have all these:
data-pin-url=”URL of the web page”
data-pin-media=”URL of the image”
data-pin-description=”Text description”
Only 60 or so characters of text appears under a pin on Pinterest, so make them count and load all the important keywords at the start. The text can be longer, but it will not be visible in the feed. The text after 60 characters is visible after someone has clicked a pin, so it is still useful.
Here is an example:
<img class=”alignnone size-full wp-image-1437″ src=”https://mysite.com/wp-content/uploads/kitten.jpg” alt=”Cute cat” width=”100″ height=”50″ data-pin-media=”http://mysite.com/money-pin.jpg” data-pin-description=”Top 10 ways to save money when you’re broke!” />
This image includes the URL of a large Pinterest image and contains a brief text description to go with it.
Action points
- Make sure each post has a large pinable image
- Put Pinterest images at the end and use lazy loading of images
- Hide large Pinterest images
- Add data-pin-media to specify a larger pinable image
