I'm part of the Simple Pin Pinterest Strategy Group on Facebook where Kate Ahl of Simple Pin Media dispenses some valuable Pinterest insights.
Kate Ahl often posts these two articles in response to people asking about keywords and SEO:
(1) http://www.simplepinmedia.com/how-to-keyword-on-pinterest/
(2) http://www.simplepinmedia.com/seo-and-pinterest/
And I read some discussion in the comments about whether to use the “alt” attribute or Pinterest's proprietary “pin-data-description” attribute for your default Pin descriptions. And in one of the comments, Kate links to this resource: https://kimberlyherrington.com/seo/seo-and-pinterest-descriptions/
And in that resource, Kim Herrington gives this example of optimal code for an image:
I'd like to expand on this from an SEO perspective because I've recently been figuring out how to best utilize these tags for my blog.
First I'll say that for me, SEO is top dog and will always take precedent over anything else including Pinterest. I will never do anything to benefit Pinterest or another social platform that will hurt my SEO. Luckily though, I'm discovering that I don't have to.
What is image ALT tag?
The words you place within the alt tag is what appears in lieu of an image when it cannot be displayed. It's also what is read aloud for blind people who are browsing the web. This is not a place for keyword stuffing or overly long Pinterest descriptions.
Google says the following about ALT tags:
https://support.google.com/webmasters/answer/114016?hl=en
Filling alt attributes with keywords ("keyword stuffing") results in a negative user experience, and may cause your site to be perceived as spam. Instead, focus on creating useful, information-rich content that uses keywords appropriately and in context.
So as you can see, a problem arises if you use your ALT tags as your Pinterest descriptions. And that problem is that you SHOULD "keyword stuff" a little bit with Pinterest, or at least append a few to the end of your description, but you SHOULD NOT do that for Google. Well, put even better, you should not do that for your USERS. Don't be a jerk to blind people and make their audio browser read a 300 character Pinterest description instead of a short actual alternative description of the image.
There is a limit to how long your ALT text should be but very few reliable sources of information on exactly what that limit is. Google does not comment on a limit directly. But one number floating around as a limit is "16 words". You can read more about how Shaun Anderson ascertained that limit here:
https://www.hobo-web.co.uk/how-many-words-in-alt-text-for-google-yahoo-bing/
In my experience for SEO purposes, I don't go near 16 words. Examples of my alt tags are "Pollution is heavy in Hanoi Vietnam" ... "Sunsets are breathtaking in Boracay Philippines" ... "GoPro Hero 5 Review & Comparison".
So you can see that this rule of thumb for ALT tags goes against best practices for Pinterest descriptions and therefore shouldn't be used as such. More on that in a moment.
What is image TITLE tag?
The title attribute is shown as a tooltip when you hover over the image (except for Internet Explorer which still shows ALT tag as the hover over text, and Microsoft Edge doesn't seem to show anything). So for example, if your image leads to an Amazon product, the pop-up title tag could read, "Buy the GoPro Hero 5 on Amazon". This is also not a place for keyword stuffing, but, it is a place to insert a different keywords than what was in your ALT. At minimum, it should just be the same as your ALT attribute if you don't want to get too fancy.
What is the image DESCRIPTION tag?
If you add text to the description field that text will be stored as post content for the attachment post. That means if someone lands on the attachment post page for the image they will see the long description (provided the current theme supports it). By default, WordPress often links the image to the attachment page. I always change that to a relevant link (like to the Amazon product the image references), or I remove the link all together.
Though the Description field does not have the Visual (WYSIWYG) editor you can treat it exactly as you would any other post or page. It takes HTML and allows you to format the content to make it look like a regular post. Obviously you can see that this is another great opportunity to optimize your images for search that isn't limited in length like the ALT or TITLE attributes.
You can learn more about this here:
https://mor10.com/power-of-wordpress-image-metadata/
Keep in mind though that this DESCRIPTION image attribute has nothing to do with Pinterest. So let's jump into Pinterest now and how all this relates.
What is the DATA-PIN-DESCRIPTION tag?
As Kim was showing you in her example of optimal code above, the DATA-PIN-DESCRIPTION is essentially code that Google doesn't read, but Pinterest does read. If you create a special DATA-PIN-DESCRIPTION for your image, that is what will appear as your Pinterest description automatically when someone Pins that image from your site.
As of now, I don't create a separate Pinterest description for EVERY one of my images on every post. I only do it for the special Pinterest friendly graphic that I make for each post, because chances are, that's the one that people are going to Pin from my site (at least I hope).
Pinterest says that, "Descriptions can be up to 500 characters. While only 75-100 characters of your description will appear in grid view, the entire description will appear when Pinners click on a Pin."
You can learn more about Pinterest attributes here:
https://developers.pinterest.com/docs/widgets/save/?
Like Kim was showing you, there's also the DATA-PIN-ID attribute which treats any new Pins of this image as repins of the original. Doing this can give you a better feel for engagement, because any Pins you create will count towards repins of your original Pin.
Then there's the DATA-PIN-URL which overrides the image's page URL and substitutes the URL of your choice. You should make sure this is the URL of the specific blog post and not the URL of your blog's homepage so that people get to the correct place when they click on your Pin.
There's also the DATA-PIN-MEDIA which overrides the image and substitutes a different image in the Pin Create form. You can use this to have (1) a compressed version of the image on your blog post which reduces page load time for your visitors, and (2) a separate higher resolution version of the image that's hosted on your website, doesn't appear on the post itself, but is pulled up instead when someone Pins the compressed image. You could technically use this feature so that when someone clicks Save on one of the other 20 images on your post, the DATA-PIN-MEDIA queries your special vertical Pinterest friendly graphic. Probably not the best move because you want to allow people to Pin the image they choose that's relevant to whatever board they're saving to, but technically it's possible to use this attribute for that purpose.
And there's quite a few more Pinterest specific attributes but those are the main ones I'd concern myself with.
So should I use the ALT attribute or the DATA-PIN-DESCRIPTION attribute?
Well, I'd hope you see by now that you should use ALT the way it's intended, to accurately describe the image in as few words as possible, and DATA-PIN-DESCRIPTION as it's intended, which is to write an eye catching Pinterest-specific description. If you were to write up to 500 character descriptions as your ALT tags (or even 75-100 character descriptions), Google may consider your website spammy and penalize you. However, you should write the best Pinterest descriptions possible. So for these reasons, DON'T use ALT attribute, and DO use DATA-PIN-DESCRIPTION attribute for your default Pin descriptions.
Here’s a bit of smart code you can use to automatically set the data-pin-description text in cases where 1) title is missing (pinterest will use this if present) 2) data-pin-description isn’t already manually set 3) alt text is multi-word (ie. covers cases where WordPress automatically assigned a non-human readable name)
https://support.shareaholic.com/hc/en-us/articles/115004262983#title-data-pin-description
Hope it is useful!
Good find, thanks Jay
Hello Paul
We have had problems with descriptions showing on our pins. We use jQuery Pin It Button for Images for our hover button on our pins. We use Social Warfare (free version) for our share buttons.
Today I finally figured out how and where to place the image code data-pin-description=”” to get the description to show. This works grand when it is a single pin. However we use the gallery option quite a bit to display 2 or 3 pins at the bottom of our posts.
I cannot figure out how/where to place code to get the description to show for pins in a gallery. Is it even the same code?
Please help! We are not very techy at all. I was very proud that we figured out the placement of the code for the single pin and it worked, but now we are stumped!
Thanks a million,
Fiona and Jerry (Your Drifters)
Hi Fiona – What type of gallery are you using? Does it display the pin images with shortcode or are the actual IMG html tags visible for the multiple pins when in text mode?
If you’re using a gallery plugin that displays the posts via shortcode, I’m not sure.
If the IMG tags for all of the pins is still visible within the post, then you should be able to use the same ‘data-pin-media’ code in every IMG code.
I pulled up your most recent post and I see the gallery of pins at the end (looks good btw), but I can’t tell from the source code if that HTML is being populated by a shortcode or not. So let me know and I’ll do my best to help.
Hi Paul,
Thanks a million for getting back to us.
It is just the standard “Create Gallery” of WordPress when we select Add Media on our dashboard. It is not a plugin. I had screenshots for you but cannot attach them on here. Let me know if there is a way to send them to you.
I believe it is shortcode. When in Text Mode it shows like this for a gallery. It seems the pin id’s show:
[gallery link="none" size="full" ids="17414,17416,17415"]
[gallery link="none" size="full" ids="17419,17420,17417"]
The above is our most recent post: https://www.acoupleofdrifters.com/guide-museum-hill-santa-fe/
When you click on the “Pin It” hover button on any of these pins it just says “Tell Us About This Pin” instead of the description.
This is what I inserted for alt and pin description in a post with a single pin image and it worked:
The above pin is from:
https://www.acoupleofdrifters.com/3-otherworldly-sites-in-mexico/
So when you click on the “Pin It” hover button you do see the description.
We are using WordPress Classic editor. We decided to go Guten Free, so we do not use the Gutenberg editor! I don’t know if that makes any difference.
Thanks for liking our pins. I hope I’ve provided you with enough information. Please let me know if there is anything else you may need. We really hope you can help us out. We would just rather not have to buy a plugin. We’ve also heard too many plugins can slow down your website.
Thanks a million, Paul.
Fiona and Jerry (Your Drifters)
I see. Unfortunately I don’t know of a way to edit the HTML that’s output by that shortcode. I saw that you tried using your ALT tag instead of the DATA-PIN-DESCRIPTION, but that didn’t work, and isn’t a good use of the ALT tag. The only solution I can think of is if you were to use a plugin that adds a DATA-PIN-DESCRIPTION input as an image field, however, I wouldn’t know for sure if the built-in WP Gallery would output every tag or just the default ones like ALT and TITLE. You’d have to experiment with it and find out. Sorry I can’t be more help to you here.
Hi Paul,
No worries it was worth a shot and we appreciate you trying. We were hoping to not have to use a plugin but we may have to. However hopefully they provide image fields for galleries, we will have to check before signing up for anything!
Thanks again Paul for all of your help,
Fiona and Jerry (Your Drifters)
When I sent you the rather long comment this morning, it contained the code excerpts, as I could not attach screenshots. I am hoping the comment went into your spam folder!? Would it be easier if you reached out to us via email?
Thanks a million,
Fiona and Jerry (Your Drifters)
Hello! I saw you were discussing how to get the pinterest descriptions to show up on Pinterest. I add the data-pin-description to my html, but for some reason it isn’t showing up next to the Pin image when I pin directly from my website. Does anyone have any ideas on how to fix that? If I create a pin right on Pinterest, it works fine. Only when I try to save from my site.
Hi Paul,
I am thinking about using a plugin to add these tags since I have zero clue about coding.
I know of two that do this job – the first is TastyPin (paid) and the other is Meta For PInterest (free but not updated for WordPress 5.0).
Interested in knowing your thoughts on the plugins and if I should go in for them
Hi Bhavna – I’ve never used a plugin before, but some folks in my Travel Tribe use TastyPin and speak very highly of it. I can’t vouch for it personally, but I respect their opinions, and they are admittedly “not code savvy” which is why they use it. I’ve looked into TastyPin before and it seems like they work hard to keep it updated. I try and use paid plugins on my sites when possible, especially for things that would be difficult to revert back from. For example, if you setup all your posts with a Pinterest plugin, it’d be a pain to have to go back and set them all up again with a different one. Just some food for though and that isn’t to speak ill of Meta For Pinterest because i’ve never seen it. Please pop back in and provide some feedback if you end up choosing one or the other, or a different one all together. Good luck!
Thanks for your response, Paul. That is a very useful point you bring up about going back from a plugin.
This morning I updated my recent post using the HTML code. Have checked on my phone and it looks like it is working. This is the post https://penniesforcents.com/free-fun-things/
The only thing is it took me a few hours – couldn’t figure out why the code was not saving in the Block Editor. Ultimately reverted to the classic editor for this and it didn’t take too long.
Will try out this method for the next 3-4 posts. If using the code doesn’t hamper my speed, that is the route I will go.
Cheers.
(p.s – I am starting a blog like this one to organize and save the tons of information I read up on but can never get back to when I need to. This blog though public, will essentially be for my reference. Thanks for the idea.)
Cool yeah, looks like it’s working for me too when I clicked the link. Good job. You’re welcome regarding the idea for public notes. I get a lot of value having them public because of the conversation that they generate. Good luck with your new projects.
Hi Paul,
Hope you got our last comment, with all of the info. in it. It was a rather long comment, so I hope it made it through!
Thanks a million,
Fiona and Jerry (Your Drifters)
Hello!! This still isn’t working for me….do you know if it’s something on Pinterest’s end that I am doing wrong? Or would it be mine… I am adding pin-data-description right at the end of my code and it just isn’t pulling. I am hesitant to start throwing this code into all of my posts as it may be time-consuming, just in case it never goes back to working….Thanks!
Hey Sydney – Make sure you’re adding “data-pin-description” and not “pin-data-description”. It’s easy to get the two confused and switch up the data/pin words. I may have possible confused them a couple times in my article too. (Sorry if I did.) So double check that first. Otherwise, Pinterest constantly goes through updates and changes. A few weeks ago, everyone had the code installed properly but it just stopped working for like a week and it was an issue on Pinterests end. Eventually it resolved itself. So if you’re typing the code right and it’s still not working, perhaps wait a few days and try again to see if it’s a Pinterest issue before taking the time to do it for all yoru posts like you said.
Hi! I’m having the same trouble, pin-data-description doesn’t seem to be working for me. I’d really like to create a custom description since Pinterest is making all these huge changes. Did they ever respond to you? Or did you perhaps find a way to make it work?
Hey Sher – Two things. 1) Make sure you’re inserting ‘data-pin-description’ and not ‘pin-data-description’. I easily confuse the two and may have once or twice in this article too, but that’s the first step to troubleshooting is to make sure you’re writing the code correctly. 2) I’ve since heard back from Pinterest but the issues were temporary on their end. Eventually they resolved themselves and my previous/existing code worked again. I know that they’re going through some changes right now, so the issue may be temporary again.
Hey Paul, great to read all of this. Am I doing something wrong here? Doesn’t seem to be pulling the pin description.
https://www.pinterest.com.au/pin/175640454201879068/
Hi Kerri – I don’t believe you are doing anything wrong. It’s been reported to me by several people in the past few days that Pinterest is not pulling their data-pin-description code. I’ve also been having the same issue. I just e-mailed Pinterest Help the following on 3-23-2018 and will update this post and reply back to the comments if I hear of a solution:
* * * * * * * * * *
Hello – The data-pin-description in my image HTML isn’t being pulled by Pinterest as of the last couple weeks like it used to. And it’s been reported to me by others as well that it’s not working on their sites either. I’m using Chrome browser and a combination of your Pin Widget and/or Social Warfare plugin. Other people who have reported the issue, I’m not sure what they are using.
Here’s a post I had written about how to properly use data-pin-description tags and now a few people are reporting in the comments that it’s not working for them, but your Help section still shows that as the proper way to tag our images.
https://workfromsomewhere.com/pinterest-use-alt-attribute-pin-data-description-default-pin-description/
You can read the comments in that post for other people having the same issue.
Just wanted to bring this to your attention. If there’s a solution on my end, please let me know. Otherwise I’m thinking it’s an issue with how the tags are being pulled within your system.
Thank you
PAUL
* * * * * * *
I’ve been using this code you mentioned on several of my sites, after reading about it on Kim’s site a few months ago. It was working great, but now it isn’t.
Now, it only pulls the correct image and description via the image hover save tool. The browser extension, and my SumoMe image sharer both pull incorrect data:
Browser extension pulls the right image but pulls the alt tag of the image that is on the post (very strange).
Image sharer pulls the image from the post and the SEO Title of the post.
Any ideas why that might happen? Did pinterest change something?
Daniel – I’m having problems as well. Using that same code and process outlined in my post, normally I’d use the Social Warfare plugin on the frontend of my site to initially Pin my my three pins to my main board. (Could’ve done it directly on Pinterest, but that way was fastest since I was already on my site and had the description loaded in the data-pin-description tag.) And as of recently, my description isn’t auto-loading. I wasn’t sure if the problem was because of the plugin or my code. I actually just yesterday looked up on Pinterest Help section to make sure I was using the right code. I thought maybe somewhere along the lines I had accidentally started using the wrong code.. but nope, still doing the same thing as always but now it’s not working.
So short answer is that – sorry I do not know why. It’s on my list of things to do in the next week or two to figure that out. For now I was just manually copying/pasting my descriptions into the Pinterest field before I published them, but that’s just a temporary fix. Obviously I have the meta tags in there because I want it to work as default for everyone. If I find a solution I’ll reply back to this comment again so you get the notification. And if you find one in the meantime, or find cause of the problem, please do the same for me.
Thanks the response, Paul. I actually didn’t get notified, so I’ll just leave this tab open.
I’m guessing the only way to solve this is going to Pinterest directly. But, there doesn’t seem to be a way to contact them through the site. It might take some digging.
Hi Paul thanks for this super informative article! I have a few questions:
1. Do I need to add all those attributes to my image or can I just use the PIN DESCRIPTION attribute alone?
2. Where do I add the code in terms of my post? Usually I have one pinnable image at the start of my post and then 2 more at the bottom. Would I put the code in above each picture? I’m a little confused where it would go.
3. If I go back to update old posts where I used the alt image as the pin description and change the alt image description to what they really ought to be, would this affect my existing pins that are on Pinterest since I would have changed the description from being in the alt text?
4. The DATA PIN ID how could I insert that if it’s a new post that hasn’t already been pinned as yet? Or is it that after I’ve pinned it to one of my boards I’d then take that pin ID and insert it into this code?
5. Just to be sure I understand, the DATA PIN URL will substitute the link that would originally take the user to the page for just the one image and directs them now to the blog post in general (instead of the original image url)
I know that’s a lot but I’m a newbie to this so please forgive me!
Hey Tori-Ann
1. Do I need to add all those attributes to my image or can I just use the PIN DESCRIPTION attribute alone?
–You can only use the DATA-PIN-DESCRIPTION if you’d like and not the others.
2. Where do I add the code in terms of my post? Usually I have one pinnable image at the start of my post and then 2 more at the bottom. Would I put the code in above each picture? I’m a little confused where it would go.
–You would put the code within the HTML of the image itself. For example, in this post of yours (http://www.theswissfreis.com/jamaica-strawberry-fields-together-eco-resort/) I see this code for your Pin:
So in the example above, you are using the ALT incorrectly (as the Pin Description), so you could just replace “alt” with “data-pin-description”. And in future new Pins, you would add the data-pin-description=”Description goes here” within your![]()
code. This is done in by switching from Visual to Text Mode within your post composer.
3. If I go back to update old posts where I used the alt image as the pin description and change the alt image description to what they really ought to be, would this affect my existing pins that are on Pinterest since I would have changed the description from being in the alt text?
–No it would not affect anything that’s already on Pinterest. It would only affect if people in the future were to share those pins directly from your site.
4. The DATA PIN ID how could I insert that if it’s a new post that hasn’t already been pinned as yet? Or is it that after I’ve pinned it to one of my boards I’d then take that pin ID and insert it into this code?
–Yes, you’d have to go back. That’s the only tag I don’t ever use for that reason.
5. Just to be sure I understand, the DATA PIN URL will substitute the link that would originally take the user to the page for just the one image and directs them now to the blog post in general (instead of the original image url)
–I think I understand, but to clarify, the DATA PIN URL is just the URL of the blog post itself. So in the example above, your data-pin-url=”http://www.theswissfreis.com/jamaica-strawberry-fields-together-eco-resort/”
Thanks for this write up Paul. Love how you put SEO first 🙂
Thanks for the great tips! Although I have a question about actually using the DATA-PIN-DESCRIPTION tag…
I have images on my blog posts specifically designed for Pinterest, so I would like to set the default description for those images (because users hardly ever change the description when pinning). I’m assuming the best way to do that would be through the DATA-PIN-DESCRIPTION tag, but I’m not sure how I would include that on my WordPress blog post. Any help would be appreciated. Thanks!
You’re welcome Kiyoko. And yes you are correct that data-pin-description is the way to go here. Normally I’d say to insert that code directly into the img tag using HTML. For example, in WordPress, you’d have to switch from Visual Mode to Text Mode (in the upper right corner of the Post Editor) and then insert the code from there. But I looked on your site and your Pins look slightly separated from your post content. Are you using a plugin or software to insert your Pins into your posts? Because if so the process would be different for you.
Thanks for getting back to me! I separate my pins from my content just because I often find long, vertical images distracting when I’m reading, but I do it manually. I just use an line in the text editor, not the visual.
So if I switch to text mode, I could have something that looked like this:
<img src=”source.png” DATA-PIN-DESCRIPTION=”my description”>
You’re exactly right. That should work perfect.