Pinterest is kind of a big deal. In the blog and e-commerce world, it’s threatening to edge out Google as the most important search engine. That’s the world I come from, so I’ve had lots of opportunity to work with Pinterest’s data attributes and meta tags. These bits of markup give site owners control over how their images and site are presented on Pinterest, and what can and can’t be “pinned”.
Before we get into the tag and attribute details, let me give you an overview of how Pinterest users create pins, and what types of images work for Pinterest.
How People Pin
Pinterest users create themed boards in their Pinterest accounts, and “pin” images from the web to those boards using browser extensions, the “Pinmarklet” bookmarklet, on-page “Pin It” buttons, or the sharing feature on mobile browsers. Once an image is saved on a board it’s called a “pin”.

When a Pinterest user adds a pin to one of their public boards, other Pinterest users can see the pin, click through to the pin’s source, “like” the pin, or “repin” it to one of their own boards. Repinning is similiar to retweeting — each repin is counted on the original pin, and anyone who follows the repinner’s account can see the repin in their Pinterest home feed.

Pinnable Images
Pinterest’s sharing tools recognize images in .jpg, .png, .gif, .bmp, and .tiff format with a minimum size of 80x80px. With the exception of GIFs, images are converted to .jpg for display on Pinterest. Animated .gif images are playable on Pinterest.
Pinterest ignores SVG images, images smaller than 80x80px, background images, base64 images, and images in pseudo element content.
Though Pinterest doesn’t recognize SVG, it does recognize raster images inside a picture
element. You can attach any of the Pinterest image attributes to the img
inside a picture
element and the “Pin It” buttons will handle them correctly.
Pinterest Data Attributes for Images
There are four Pinterest-specific data attributes for images. These attributes let you control the click-through link for Pinterest images, set a default description, specify an alternate image, and associate new pins from a site with pins on the site owner’s Pinterest account. Here’s a breakdown of how each attribute works.
data-pin-url
<img src="blog-post-image.jpg" data-pin-url="http://www.example.com/blog-post-permalink.html">
This attribute lets you set the click-through link for pins. By default, pins are linked to the URL of the page the user was on when they created the pin. Often that’s fine, but there are some cases where it’s preferrable to link the pin to a different page. For example, a pin created from a post on a blog’s homepage will link to the blog’s homepage by default. When a Pinterest user clicks that pin a few weeks or months later, they’ll land on the homepage, where the post they want to see is long gone. This attribute lets you link the pin to the post’s permalink instead.
data-pin-description
<img src="blog-post-image.jpg" data-pin-description="Greatest Pin of all time, #A+">
This attribute lets you set a default Pinterest description for an image. Pinterest users can edit a pin’s description at any time, so in practice it’s more of a “suggested” description.

Pinterest will look for the data-pin-description
attribute first to populate the description field. If the attribute is not set, it will look for the image title, then alt text. If neither is set it will use the page title as the default description.
The nice thing about this attribute is that it lets you tailor an image’s description for Pinterest with hashtags, keywords, or @-usernames without harming accessibility by cramming that stuff into title
or alt
text.
data-pin-media
<img src="blog-post-image.jpg" data-pin-media="high-res-blog-post-image.jpg">
This attribute lets you specify an alternate version of an image for Pinterest. You can use it to point Pinterest to a better quality version of your image, or to a different image entirely. Some sites use this attribute to present a Pinterest-optimized composite image that includes all of the images on the page.
Demo: press the Pin It button to see the alternate composite image linked in the data-pin-media
attribute. The description of the composite image is set with the data-pin-description
attribute and includes a hashtag.
See the Pen Pinterest data-pin-media demo by CSS-Tricks (@css-tricks) on CodePen.
data-pin-id
<img src="blog-post-image.jpg" data-pin-id="ID NUMBER HERE">
This attribute gives a boost to “social proof” by increasing the repin count on the site owner’s pins. It is a bit trickier to implement than the other Pinterest data attributes, partly because there’s no way to automate it.
To use data-pin-id
, you first need to create a pin of the image on the site owner’s account. After the pin is created, you can grab the pin’s ID number from the end of the pin’s URL on Pinterest. A pin’s ID is highlighted in this screenshot:

Once you have the ID number, you can add it to the image in the data-pin-id
attribute. Any subsequent pins of that image made from that page will be credited as a “repin” of the site owner’s pin. When this attribute is used in combination with the data-pin-url
attribute, any pin of that image from any page on the site gets counted as a repin.
Rich Pins
Rich Pins are expanded pins that give Pinterest and its users more information about a page. There are five different types of Rich Pins, but they all have a few things in common that set them apart from regular pins in the feed and search results.
All Rich Pins display the favicon of the source site and the name of the source site above a bold title. This image shows an Article Rich Pin as seen in the Pinterest feed (left) compared to a pin from the same page created before Rich Pins were enabled (right):

Pinterest supports at least two markup types for most pins; the requirements vary by pin type. The supported formats are Open Graph, Schema.org, hRecipe, or oEmbed.
Pinterest doesn’t automatically pick up Rich Pins markup or endpoints from a site. The site must pass a markup check through the Rich Pin Validator. Once the site passes the validator, you can submit it for Rich Pins approval. Approval time varies from a few days to about two weeks.
Many e-commerce platforms have the markup for Product Rich Pins built in. Also, WordPress plugins like Yoast WordPress SEO have options to make Rich Pins easy. Before you start adding markup to your site, it’s worth testing it in the validator to see if you already have what you need to get approved.
Here’s an overview of each of the five types of Rich Pins.
Place Pins
Place Pins markup adds a map pointer icon to the Pin in search results, and adds a Foursquare-linked map and optional phone number to the foot of the pin.

Recognized formats: Open Graph or Schema.org
Documentation: https://developers.pinterest.com/rich_pins_place
Recipe Pins
Recipe Pins markup gives Pinterest access to details like ingredients and cooking time and displays them on the pin. Pinterest uses this information to surface recipes in search. For example, Recipe Rich Pins could help a Pinterest user searching for “quick vegetarian recipes” find your 10 minute lentil soup recipe, even if the words “quick” and “vegetarian” aren’t included in the pin’s basic description.

Recognized formats: Schema.org or hRecipe
Documentation: https://developers.pinterest.com/rich_pins_recipe
Article
Lots of people use Pinterest as a “read it later” service. Article Rich Pins have a bold headline and an additional expanded description to help readers learn more about your article or blog post before they click through. This expanded description is not user-editable, so it will follow your article wherever it goes on Pinterest.

Recognized formats: Open Graph or Schema.org
Documentation: https://developers.pinterest.com/rich_pins_article
Product Pins
Product Rich Pins show a product’s price and stock status. When a product goes on sale, the sale price is highlighted on the pin’s detail page.

Users that opt in to Pinterest’s price notifications get an email when an item they’ve pinned goes on sale.
Recognized formats: oEmbed, Open Graph, Schema.org
Documentation: https://developers.pinterest.com/rich_pins_product
App Pins (iOS Apps only)
App Rich Pins are different from the other types of Rich Pins — no meta tags are needed. To enable App Rich Pins, create a Pin inside the Pinterest app and link it to your app’s page in the App Store. Pinterest takes it from there.
Documentation: https://business.pinterest.com/en/blog/get-more-downloads-new-app-pins
How Not to Get Pinned
Pinterest’s nopin
meta tag and image attribute let you prevent users from creating pins from your images sitewide, per page, or per image.
Meta Tag: Whole Site or Whole Page Pinterest Blocking
<meta name="pinterest" content="nopin" />
This is the Pinterest nuclear option — if you add this meta tag to the head
of your site or page, none of the images can be pinned through the official sharing channels.
By default the Pinterest window will show this message when someone tries to Pin from a page with the nopin
meta tag:
“This site doesn’t allow Pinning to Pinterest. Please contact the owner with any questions. Thanks for visiting!”
You can replace that with your own message as a description
attribute.
<meta name="pinterest" content="nopin" description="your custom nopin message here" />
Image Attribute: Per-Image Pinterest Blocking
<img src="image.png" nopin="nopin">
If you want to block pinning for some of your images, but not all of them, you can use the nopin
image attribute.
To block pinning of an individual image, add nopin="nopin"
to the image element.
Blocking the Hover Button With the “Nohover” Meta Tag
<meta name="pinterest" content="nohover" />
By default, Pinterest’s browser extension adds a “Pin It” button to the upper left corner of an image on hover if all of these three things are true:
- The image is in a pinnable format.
- The image is at least 80x80px.
- The image does not have the
nopin
attribute.
The hover button looks like this:

This tag only disables the hover button. It does not prevent pins from the page — only the nopin
meta tag and attribute can do that.
Blocking Rich Pins
If you’re approved for Rich Pins but want to block Rich Pins on a page, you can add this meta tag to the page head
:
<meta name="pinterest-rich-pin" content="false" />
Support, Quirks, and Issues
Browser share from Chrome on iOS ignores the data-pin
attributes and the auto-fill description from the on-page “Pin It” button. However, it does respect the nopin
attribute.
Pinterest’s own support for their meta tags and data attributes is spotty but improving. Rich Pin data isn’t always displayed on pins even when all of the markup is present. Also, the data-pin-description
attribute is sometimes ignored, especially if an image was pinned to Pinterest before the attribute was added.
I appreciate your thorough discussion of the available options, it illuminated quite a few things I’ve wondered about. I am curious whether you have any links or other sources backing up your initial claim that “in the blog and e-commerce world, it’s quickly edging out Google as the most important search engine”? That would be highly useful to make a case for resource allocation.
I was speaking anecdotally from my personal experience there, but I can see now that’s not clear. Thanks for catching that, I’ll edit it.
But, consider it word from the trenches until a study comes along to prove it — this is happening. I’m in the weird position now of having to convince bloggers & ecom owners that it’s still worthwhile to optimize for traditional SEO, since Pinterest sends such a massive share of their traffic. For the lifestyle blog & luxury retail clients especially, Pinterest is the #1 source of organic traffic with a bullet, and the year-over-year share of traffic & conversions directly attributable to Pinterest is jawdropping.
In the opening paragraph you say “In the blog and e-commerce world, it’s quickly edging out Google as the most important search engine.” Do you have a reference for this? I don’t doubt it’s true, I’m just curious where this comes up.
Thanks for the great info!
Obviously, I overlooked the previous commenter.
No worries Matt, that was just a poor choice of words on my part. Thanks for the catch, I’ve edited it. I elaborated a bit in my reply to Christoph.
Thanks for your comments, Marie, appreciate your candid answer.
FWIW, I doug up these articles pertaining to my original question in my follow-up research:
http://volumeseo.com/importance-pinterest-your-business
http://sproutsocial.com/insights/why-pinterest-guided-search-makes-your-pin-description/
http://www.elegantthemes.com/blog/tips-tricks/how-to-drive-massive-referral-traffic-from-pinterest-in-2015
http://www.thesocialmediahat.com/article/how-implement-and-use-pinterest-article-cards
Wicked. Thanks for the post.
Be sure to check out http://metamaker.32teeth.org/
A small tool to help you create all your awesome metadat