,

How to Control the Pin-No-Pin Meta-Tag on Pinterest

Why might you want to control the pins from your blog?

Sometimes it doesn't make sense to start off your blog post with a gigantic vertical rectangle like this:

Pin No Pin Meta-Tag on Pinterest

Implementing the “pin-no-pin” meta-tag within your WordPress website is a great way to control what your readers can pin to their Pinterest boards, without having to sacrifice images that don't always enhance the way your post looks and reads. Because Pinterest is so visual, most professional bloggers want to make sure their content both stands out above the competition and provides an exceptional experience for their audience.

Please note that some of the links included in this article are affiliate partner links. For more information, click here.

In 2018, 2.4% of U.S workers voluntarily quit their jobs. That number is absolutely staggering. (In case you’re wondering, that is millions of people). According to the Bureau of Labor Statistics, there haven’t been rates this outstanding since 2001.

New media has made it a genuine reality for people across the globe to work for themselves. This is exciting for the global workforce, because it’s so different from what life was like when many of us first started our career. Social networks not only enable connections for social reasons, if you know how to use them in the right way, they act as a vehicle for an infinite number of possibilities for growing your business.

If you spend a lot of time on Pinterest, you know the network is much more a search engine than it is a social network; I recently had the opportunity to meet with Charlie Padilla from Pinterest who gave me some great insights about the platform. Optimizing your blog for Pinterest using the “pin-no-pin” meta-tag is a great way to ensure that you have complete control over what your content (pins) look like across the platform.

Optimizing Your Blog Images for Pinterest

Optimized pins are the best at 1000px by 1500px (these pins are also sometimes referred to as the “long” rectangle). They are both visually attractive and they take up a lot more vertical space than their square counterparts. In order to be eye-catching and impactful, be sure to put careful thought into both your design and your copy. A great free tool is Canva, and if you need something a little more robust, I recommend PicMonkey. PicMonkey is similar to Photoshop, but not quite as expensive.

To further optimize your pins for the best visual impact, aim to use at least 2 different fonts and colors that compliment your logo and branding. Need a professionally designed logo? Check out 99Designs. They offer a variety of branding packages at incredibly affordable pricing compared to hiring a graphic designer, and you can select from a variety of custom designs where the professionals compete for your business!

99 Designs

When you don’t use the pin-no-pin meta-tag, and a user pins from your blog post, they will get a choice of any image that is part of your blog, and that includes images on your sidebar, the featured image, as well as any embedded video thumbnail images. A typical blog post that is not optimized for Pinterest pins will look something like this when a reader clicks to pin:

All the pins

This is not ideal, because the user can choose any of these images, and most of the time, a reader doesn’t really care which image they choose, they'll choose the first one, or wherever they happen to click; they just want to be able to come back to your website later. The problem with this method is that anyone who follows their boards will then see a pin that is not as “optimized” as it could be, and it may even be a photo from your sidebar, an ad, or something that isn't even really related to that post.

You want to ensure that your blog reader can only pin what you want them to. After all, you've spent a lot of time creating Pins specifically to correlate to your post, you want them to Pin the right image! To do this, you will use something called Inline CSS to wrap the images that you don’t want pinned in a specific meta-tag that tells your blog “hey, don't make this photo available to pin”.

data-pin-nopin="true"

Now, when you add the code above to the images you don't want pinned, when the reader tries to pin, they get something like this instead:

example of the right pin

Here’s how the code actually looks inside the body of your post:

<a href="http://the-url.com"><img src="https://your-image.jpg" alt="Your Image Alt-Text" class="aligncenter data-pin-nopin="true" /></a>

The above Inline CSS is used whenever you embed an image directly into your blog post. This is also called “manual” coding. It should be used when you embed a YouTube video as well, otherwise the rectangular YouTube Thumbnail will also show up as an option. There are other meta-tags you can use such as the data-pin-media as well as the data-pin-description, but you won’t need to do that if you have your Pinterest account enabled as a business account. That would be the recommended and automated way to pull in the rich-text directly from your blog’s meta-tags into your Pinterest Pin, that way you won’t have to deal with coding this manually using these additional tags. To enable your blog for business, follow the link to this article that explains how to do it on Pinterest.

The WordPress Sidebar

The next item of business is to take care of the sidebar. Since your sidebar likely changes often, I find that the most efficient way to take care of this is to add a snippet of code to your WordPress Theme’s Functions File. Don’t let this “techy” stuff scare you. To see a quick demo, watch the video below.

Before you modify your website’s code, I highly recommend making a backup just in case you accidentally change or delete something wrong. Code is very sensitive and even a space in the wrong place can throw it all off and take down your entire website. To make a backup of your site for Free, I recommend using the Free version of the WordPress plugin UpdraftPlus.

To add a snippet to your functions.php file:

/* added by Insert Your Name to exclude featured image and sidebar images from pinning  */

function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); 
    $src = wp_get_attachment_image_src($id, $size); 
    $alt = get_the_title($id); 

    $html = '<img src="' . $src[0] . '" alt="' . $alt . '" data-pin-nopin="true" />';

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);


add_filter( 'generate_logo_attributes', function( $atts ) {
    $atts['data-pin-nopin'] = true;

    return $atts;
} );

Finally, the code that you want to use so that the image you want Pinned shows up as an option to Pin but not a big long rectangle inside your blog post looks like this:

<div style="display:none;"><a href="your-blog-post-link.com/"><img src="image-you-want-pinned.jpg" alt="Title-of-Image" /></a></div>

I hope you enjoyed this post! What other questions do you have? Let me know in the comments below!

8 Comments

Join the Conversation!

Please Note:
Comments will be submitted for approval before being posted.

Leave a Reply

Your email address will not be published. Required fields are marked *