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

Hiding images in a blog post might seem like a strange topic to write a blog about, but I still see professional bloggers adding a big, giant pin inside their blog post.

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:

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.

This can be accomplished with the Tasty Pins plugin, however, it can also be done for free by knowing a few snippets of code that you can add into your website, thus, avoiding paying a fee for the plugin.

Vogue Media is an approved Pinterest Partner Marketing Agency, so I’m fortunate to get the inside scoop on all things Pinterest!

I recently had the opportunity to meet with my account manager, Charlie Padilla from Pinterest, who gave me some great insights about the platform and the recent changes. 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.

If you are designing these images yourself, a great tool to get started with is Canva.com. Canva is an easy and intuitive to use cloud-based app, and they already have pre-set sizes and templates that you can modify to match your own branding.

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.

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:

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”.

The snippet of code to accomplish that looks like this:

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:

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 as well, such as the data-pin-media as well as the data-pin-description.

While you may not need to do that if you have your Pinterest account enabled for Rich Pins, with recent changes to the Pinterest algorithm (in late 2019) even accounts which has Rich Pins enabled stopped pulling the description.

To remedy this situation, I’ve found that adding the manual code:

data-pin-description=”enter your description here”

works really well.

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. To see a quick demo, watch the video below.

Before you modify your website’s code, I highly recommend making a backup of your site 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.

Adding a code snippet to your functions.php file looks like this:

[php] /* 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; } ); [/php]

 

To hide an image from the post, here is the code you need to copy inside the text editor. Copy it exactly as is and replace with the URL to your pin and/or the description you want pulled in. NOTE: You will not be able to copy/paste this code, you will need to retype it in your text editor. With the most recent WordPress core update, they took away the option to add html code. It works above because the code is php, but does not work with example html, even using the pre tag.

Want to learn more about using Pinterest for Business? Download my FREE Getting Started Checklist!

Pinterest Management: Work from Home Jobs are Growing!

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. Not all small business owner’s have the budget to hire an agency to manage their Pinterest account (although if you are considering getting Pinterest off your plate you can view our Pinterest Account Services by clicking here).

Would you like to learn the in’s and out’s of using Pinterest for Business in step-by-step detail? Check out my Pinterest Marketing Course. It’s exclusively designed for small business owners who want to DIY their own Pinterest Marketing, or, those who are seeking to learn how to become a Pinterest Account Manager so you can offer Pinterest Management Services to your clients.