Using Pinterest Data Attributes and Meta Tags

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:

1. The image is in a pinnable format.
2. The image is at least 80x80px.
3. 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.