How to hide pinnable images in your blog posts without messing up SEO

How to hide pinnable images in your blog posts without messing up SEO | CodeLoveCreative.com

Raise your hand if you want to increase traffic to your website to help grow your business. Yup, me too! That’s why I’m always on the lookout for new tips and tricks to improve my marketing efforts. Things that make ALL of the time and effort you put into your business to go even further. The most recent thing I’ve implemented is a new way to hide pinnable images in your blog post – but without messing up SEO!

Why you would want to hide pinnable images

Ultimately, the main reason you want to hide pinnable images in your blog post is to increase traffic to your website.

You want to encourage your blog readers to share your content because it helps to get your blog post in front of their audience and therefore increases the reach of your content. The more people who set eyes on the pins from your website, the more people will be clicking to visit your website and saving the pin which keeps the process going exponentially.

One way to encourage people to save your post on Pinterest is to give them options for which pinnable image to save. This enables them to pick the image that they feel will be best for their boards for a variety of reasons, such as relevancy, target audience, etc.

What is a pinnable image?

I’ve seen the phrase “pinnable image” a lot in my Pinterest research. It’s basically referring to an image that people want to save (re-pin) to their Pinterest boards.

The elements that typically make people want to save a pin are:

  • a beautiful image (bright and colorful work well)
  • descriptive writing (not TOO much; with important words that are easy to read)
  • size & orientation (600×900 is recommended by Pinterest – vertical pins are a MUST)

Why hiding pinnable images in your blog post can negatively affect SEO

If you have a lot of images in your blog post it’s going to increase the time it takes for that page to load on the reader’s device.

Google announced last year that page speed is a factor when they rank websites for mobile. This is super important because a huge majority of Pinterest users are using a mobile device.

Basically, if you have a ton of images on your page, your website will take longer to load and you could be docked “SEO points” by google. That’s bad because we all want Google to love our website so we get more traffic from people searching.

So it’s important to not only know how to hide pinnable images in your blog posts, but to do it properly without negatively affecting page load times and SEO. Remember, if you want to increase your website traffic, SEO is important!

How to hide pinnable images in your blog posts without messing up SEO:

A common way people hide their images is to use the CSS value “display: none;” which ends up with a line of code that looks like this:

<div style=”display: none;”><img src=”[image url]”></div>

What that essentially does is load the image in your web page but hides it from view. The problem with this method is that it can add to the load time of the webpage, which I just explained is a negative in terms of SEO. It also wasn’t functioning properly with the SumoMe plugin I use (the share icons on the left side of the screen).

The method I recommend is using the “data-pin-media” attribute that Pinterest provides which “Overrides the image and substitutes a different image in the Pin Create form.”

We’re still going to use the technique from the popular method above, but we’ll be improving upon it by:

  • loading a very small “dummy” image (to save load time)
  • setting a pinnable image via “data-pin-media” attribute
  • using the “data-pin-description” to add the default caption for the pin

(it’s ok if that doesn’t make sense!)

How to hide pinnable images in your blog posts without messing up SEO. Get the tutorial here: Click To Tweet

Here’s an example that I use in one of my posts:

I’ll describe each section below or you can skip to the end to copy the code if you know how to use it.

pinterest code example

Pink: This is where you put the URL for the “dummy” image. Feel free to save and use mine here.

Teal: This is where you put the URL for your pinnable image.

Yellow: This is where you put the default caption you want to associate with the image when people save it to Pinterest.

Grey: This is an empty alt tag. An alt tag tells screen readers and search engines what information is in the image. This makes websites more accessible to the visually impaired. It also enables Google and other search engines to crawl your site and understand the content on each page more easily, which helps them show your link to the right people.

In order to meet SEO recommendations, I’ve included the alt tag but left it blank since the image we’re actually loading into the page is in fact, blank. If I omitted the alt tag all together, that could lead screen readers to read out the entire image URL, which I would imagine could become very annoying to people who use them.

If I put the description of the pinnable image in the alt tag then that would technically be incorrect. That would actually hurt our SEO since Google might see this as keyword stuffing.

What does all of this achieve?

In this example, I’ve included two hidden pinnable images using the same code structure. Now when someone goes to share this post on Pinterest, they’ll see the following pinnable image options:

Choose a pin to share screenshot

 

Here is the code you can copy:

**Be sure to update your URLs and description for your own content!)

<div style="display: none;">
    <img class="pinterest" src="[your dummy image URL goes here]" data-pin-media="[your pinnable image URL goes here]" alt="" width="630" height="900" data-pin-description="[your pin caption goes here]" />
</div>

If you want to hide more than one pinnable image, you’ll need to paste another img tag for each one. You also need to use a different “dummy” image for each one. In order to create more than one, just upload the same image multiple times (this works in WordPress) and it will automatically be given a different URL each time.

Here’s an example of the entire code for three pinnable images:

<div style="display: none;">
    <img src="http://codelovecreative.com/blank.png" data-pin-media="http://codelovecreative.com/pinnable-image.jpg" alt="" data-pin-description="Image Caption" />
    <img src="http://codelovecreative.com/blank-1.png" data-pin-media="http://codelovecreative.com/pinnable-image-1.jpg" alt="" data-pin-description="Image Caption" />
    <img src="http://codelovecreative.com/blank-2.png" data-pin-media="http://codelovecreative.com/pinnable-image-2.jpg" alt="" data-pin-description="Image Caption" />
</div>

Have questions? Leave a comment below and I’ll do my best to help 🙂

FREE Website Resources Guide

Top 5 tools for creating an enlghtened website

Sign up receive my weekly emails with tips for your website, branding and email marketing PLUS my website resources guide!

By signing up, you will receive my weekly newsletter. Unsubscribe at any time. Powered by Seva

About the author

I’m Taylor and I help yoga teachers and intentional entrepreneurs transform their vision into an enlightened website to help them grow their businesses, build a tribe, attract ideal clients and create the lifestyle they dream of. Read more…

Related Posts

More posts