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.
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
Here is the first example that will hide an image, but will also slow down your webpage load time:
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.
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:
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.
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.
Now we can look at additional image source settings that you may want to use.
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.
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.
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.
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.
Add your image block as usual.
Then click the three dots and edit as html
Add the code to the image as shown below.
Once you click save, you see this alert message, click “convert to HTML”
First set or convert your block to the custom HTML
Then enter this code for your image.
Another example, using the data-pin-media and data-pin-description
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.