How to set the Custom Pin Image and Description

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

If you are wondering, how do you add a custom pin image and custom description on your Pinterest pins, so when people pin from your site, it is prefilled for them? Then you came to the right place, these are the instructions for both Classic and Gutenberg. This method can be used to hide full size images on your post without slowing down your site. However, these tools can be used on both visible or hidden pins.

Reference: https://developers.pinterest.com/docs/widgets/save/, scroll about halfway down the page to “Source Settings”.

Let’s get started.

First I will explain the method of hiding pins that slows down your website:

Note: You must be using the Text editor in WordPress to add the html code.

Remember – the “alt” in your image tag is for those who are vision impaired, to describe the image to them with good SEO Keywords if possible, and not for your Pinterest Description – However, Pinterest will pick up the alt text, if you don’t include the “data-pin-description” on your image tag.

See this example showing the fancy curly or slanted quotes, the Gutenberg and Classic editor will ignore these, and you will get weird output. This is the same for the Pinterest code data-pin-description.
Screenshot showing curly or slanted quotes

So you need to delete them and re-type the quotation mark, so it appears straight up and down like this for every spot where their is a quotation: "

A trick I use, is to paste the code into notepad, this is program that comes with Windows free, needs to be notepad not wordpad or Microsoft Word these will not work for this step. Copy and paste the code there, and if there are any curly or slanted quotes, I copy one and then click edit on the menu and select replace, I’ll paste the curly or slanted quote in the find box, and type in the straight quote in the replace box and then click replace all

How to set your custom pin image and desc

Here is the first example that will hide an image, but will also slow down your webpage load time:

<div style="display:none;"><img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-beautiful-full-size-pin.png" alt="happy couple, looking out over the beach" width="735" height="1102" class="alignnone size-full wp-image-2243" /></div>

This image is compressed and is 232KB in size. The reason this slows down your website is that the browser still downloads the full size hidden image every time the page loads. If you have 3-4 hidden pins it will add up even more.

So how do you add multiple pins to your post, without slowing down your website? Here are a couple options.

Option: 1

Let’s say you have a horizontal or non-Pinterest-optimized image visible on your post, and you don’t want to people to pin that image, but rather, you want visitors to Pin your optimized Pin. What do I mean by optimized Pin? Optimized for Pinterest images are tall, vertical images in a ratio of 2:3 with text overlay that makes the viewer want to click on your pin.

One thing you need to note before you use this method. When you add “data-pin-media” to your image tag. Make sure to add it on every image that you want visitors to be able to pin. So if you have VISIBLE Optimized Pinterest pins, make sure to add the “data-pin-media”, in this case the “src” and “data-pin-media” for the img tag will be the same.

On the horizontal image or just one you don’t want pinned you can add this code to pin your Optimized Pin image instead:

<img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-non-optimized-horizontal-image.png" alt="happy couple, looking out over the beach" width="500" height="300" class="alignnone size-full wp-image-2244" data-pin-media="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-beautiful-full-size-pin.png" data-pin-description="YOUR PINTEREST DESCRIPTION #hastags"/>

When a visitor clicks on the “Pin it” button or any Pinterest Share button on your website or the browser Pin it button on Chrome or Firefox, your Optimized pin with your Optimized description are pulled up.

 

 

Option: 2

Now let’s say, like us, on our regular blog site, you only have one visible image and you want to add 2-4 or more hidden pins. That’s where a tiny transparent image is perfect!

Another note: Visitors are more likely to Pin visible full size Pins, so if you can, arrange your post to display one or more full size, Pinterest Optimized images or at least a smaller version of your pin. Make sure you are using a good image compression plugin (Like Shortpixel) or compressing your images before you upload them, so that the file size is as small as possible, while still being a good quality image.

Related: Speaking of site speed, see this post on other plugins to make your site faster

Click here to download the transparent 1×1 png image to use for your site. You can use it for every hidden pin you want to add, file size is 119 bytes
This is much smaller than the compressed full size optimized Pin above that is 237,567 bytes.

Upload the transparent image to your post, as if you are adding a visible image (you can add it multiple times to add several pins), then update the code on the image tag like shown below. Setting data-pin-media and data-pin-description to the full size image you want users pin from your website.

<img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/1x1_.png" alt="Transparent Place holder" width="1" height="1" class="alignnone size-full wp-image-2246" data-pin-media="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-optimized-full-size-pin.png" data-pin-description="YOUR PINTEREST DESCRIPTION #hastags" />

Paid Plugins you can use to hide Pinterest Images or Set Descriptions

You can use Tasty Pins to manage your images for Pinterest. Such as:

  • hiding additional Pinterest Optimized images.
  • Adding your customized Pinterest Description to your Pinterest images
  • Setting specific images such as your profile photo as not pinnable

Another great option is to use the paid version of Social Pug

Now we can look at additional image source settings that you may want to use.

  • data-pin-url
  • data-pin-url is used to give your img a specific URL. In one instance where we would have used this on our other blog site, is when we had the full blog post appear on our homepage, we have since changed this. But at that time, any pins pinned from the homepage, just lead to the homepage. In order to set the image to pin to the specific article you would use data-pin-url.

    <img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/1x1_.png" alt="Transparent Place holder" width="1" height="1" class="alignnone size-full wp-image-2246" data-pin-media="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-optimized-full-size-pin.png" data-pin-description="YOUR PINTEREST DESCRIPTION #hastags" data-pin-url="https://example.com" />
  • data-pin-nopin
  • data-pin-nopin is used to prevent an image from being pinned to Pinterest. So this could be used on the images that are not optimized for Pinterest. remember: Optimized for Pinterest images are tall, vertical images in a ratio of 2:3 with text overlay that makes the viewer want to click on your pin.

    <img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/1x1_.png" alt="Transparent Place holder" width="1" height="1" class="alignnone size-full wp-image-2246" data-pin-nopin="true" />

I have used this code on the image at the top of this post. If you are using Chrome or Firefox for your browser, you can right-click on the image and select inspect and you’ll see the image tag including the data-pin-nopin attribute. The theme adds additional information to the image tags, so in the screenshot I’ve posted below, I have highlighted the data-pin-nopin attribute.

Inspecting an image using the Chrome Browser feature to show the image tag

There are two caveats to data-pin-nopin that I know of. I spent a lot of time tracking down why data-pin-nopin wouldn’t work for some images. I found that any image that is set with the meta tag “og:image” will still appear for Pinterest, even if you set “data-pin-nopin”. What’s more, your blogs Feature Image will also display for Pinterest to be pinned. On this and our other blog site, I have modified the featured image template to add “data-pin-nopin=”true”.

Using data-pin-nopin on Gutenberg

note: These are the same instructions to use to add any of the Pinterest attributes to Gutenberg.

Option 1:

Add your image block as usual.
Then click the three dots and edit as html
Gutenberg example to edit image block as html

Add the code to the image as shown below.

<figure class="wp-block-image"><img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/Hide-Pinterest-Pins.jpg" alt="Hide Pinterest Pins without slow down site, man and woman on each corner of the image on their laptops working on their blogs" class="wp-image-28" data-pin-nopin="true" /></figure>

OR

<figure class="wp-block-image"><img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/Hide-Pinterest-Pins.jpg" alt="Hide Pinterest Pins without slow down site, man and woman on each corner of the image on their laptops working on their blogs" class="wp-image-28" nopin="nopin" /></figure>

Once you click save, you see this alert message, click “convert to HTML”
Gutenberg example to convert image block to html

Option 2:

First set or convert your block to the custom HTML
Selecting the Gutenberg custom html block

Then enter this code for your image.

><img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-beautiful-full-size-pin.png" alt="happy couple, looking out over the beach" width="735" height="1102" class="alignnone size-full wp-image-2243" data-pin-nopin="true" />

Another example, using the data-pin-media and data-pin-description

<img src="https://wpbloggerassist.com/wp-content/uploads/2019/01/starvoters-beautiful-full-size-pin.png" alt="happy couple, looking out over the beach" width="735" height="1102" class="alignnone size-full wp-image-2243" data-pin-media="https://example.com/your-full-size-pin-image.jpg" data-pin-description="Your pin description for Pinterest, including your #hashtags" />

SEO Plugins may set this “og:image” meta tag for you, on the Facebook image. To avoid this, I set my own meta tags, using the plugin Meta Tag Manager. Facebook and several other social websites use the Open Graph meta tags. But one difference, Facebook and LinkedIn recognize “og:image:url”, but Pinterest ignores this one (thankfully). So I use this to set my Facebook sharing image. For more details on this I’ll write another post for another day.

Well that’s all for today. Thank you for reading.

PS. Do you hide your Pinterest Pins in your posts now? Which method do you use? Will you make any changes now that you’ve read this post? Let us know the in comments below.

Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

10 thoughts on “How to set the Custom Pin Image and Description

  • May 20, 2019 at 1:06 pm
    Permalink

    Dear Expert,

    I have tried data-pin-media to lead the visitors pinning my optimized pins, but it didn*t work. Then I tried use data-pin-nopin=”true” to block the visitors from pinning the non-optimized images, it didn’t work either. What could be the problem?

    Reply
    • May 20, 2019 at 4:24 pm
      Permalink

      Hello Mijia, can you share a link to a post where you are having this issue? I checked on the website from your comment, but I do not see the data-pin-media or the data-pin-nopin attributes on your post. You may need to clear your host cache or clear the caching plugin as well to see changes.

      Reply
      • November 14, 2019 at 7:56 am
        Permalink

        Hi Tara, I have the exact same issue as Mijia. I’ve tried everything and nothing has worked so far. It still pulling the feature image instead of the pinterest optimised. Any thoughts on that? Many thanks

        Reply
        • November 14, 2019 at 8:09 pm
          Permalink

          Hi Butter.and.fly.

          Can you share a post where you have tried adding the data-pin attributes and I can take a look and give you some recommendations.

          Thanks.

          Reply
          • November 15, 2019 at 10:04 am
            Permalink

            Hi Tara, Thank you very much! Here is the post: *link removed*
            Now i’ve inserted the data-pin-nopin on the feature image, but nothing has changed 🙁

        • November 16, 2019 at 8:18 pm
          Permalink

          Hi Butter.and.fly,

          I checked your post and it looks like the visual editor is adding extra paragraph tags

          ?lt;p>

          to your image tag so it is breaking the code. WordPress also does this automatically if it thinks there is an “enter” character from the “enter” key on your keyboard. See you can delete any extra spaces and just make sure to use spacebar for one space between attributes on your image tag.

          <img class="aligncenter wp-image-1456 size-full" src="...Frankfurt1.jpg" alt="Frankfurt, Germany" width="1100" height="733" data-pin-nopin="true" < p />
          Reply
  • August 20, 2019 at 8:02 pm
    Permalink

    Hi Tara. I have been trying to figure out how to make the featured images on my posts “no pin” for months. I don’t know how to edit the code for them, since it’s part of my theme, I guess. Can you tell me where to add and what to add to make those images not pinnable? They are auto pulled from all the social sharing plugins and from the social sharing my theme provides as well, so all the pins people make from my site are a horrible Pinterest size. Thank you!!

    Reply
    • August 24, 2019 at 10:34 am
      Permalink

      Hi Lauren, I had to dig through our theme files and find the one that created the featured image, then I added the nopin code to the featured image on the template on our main site. Its a bit more complicated, but I’ll share here what I did.

      On the Nisarg theme for example this is in the template-tags.php file, so in the Child-theme I added ‘data-pin-nopin’ => ‘true’ to the the_post_thumbnail array, see below.

      /**
      * Display featured image of the post
      */
      function nisarg_featured_image_disaplay() {
      if ( has_post_thumbnail() && ! post_password_required() && ! is_attachment() ) { // check if the post has a Post Thumbnail assigned to it. ?>
      <div class="featured-image">
      <?php if( !is_single() ) { ?>
      <a href="<?php the_permalink(); ?>" rel="bookmark">
      <?php }
      the_post_thumbnail('medium', array('class' => 'aligncenter', 'data-pin-nopin' => 'true')); ?>
      <?php if( !is_single() ) { ?>
      </a> <?php } ?>
      </div>
      <?php
      }
      }
      Reply
  • September 12, 2019 at 2:16 pm
    Permalink

    Hello Tara, thank you so much for sharing this detailed description here. I have been trying different codes from bloggers and never fully understood the concept, but now the codes finally worked- thanks to you! I only have one question. When I add my data description and hashtags, my pin does not have a title. I always add a title manually. Is there a way how I can add the alt text into the code? I feel like I am overlooking something.
    Thank you in advance

    Reply
    • September 13, 2019 at 7:55 pm
      Permalink

      Hi Anike,

      If you have Rich Pins enabled and approved (takes at least a few weeks these days), the the title will pull from your post. There doesn’t seem to be a data-pin attribute for the title. The alt-text is used for the visually impaired to understand the image on the post, Pinterest was making use of it in place of data-pin-description but that has been hit or miss lately and seems more beneficial to use alt-text for the intended purpose for your visually impaired readers and the data-pin-description for the Pinterest description.

      If you do have Rich pins enabled, you’ll still need to make sure you have opengraph tags enabled on your site, these create the title and Rich pin description. Usually the SEO (Yoast or SEO Framework) plugin or Social sharing plugin will set these for you or have fields you can modify.

      Reply

Leave a Reply

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