使用 Pinterest 数据属性和元标签

Pinterest 是一件大事。 在博客和电子商务领域，它正威胁着要取代 Google 成为最重要的搜索引擎。 这就是我来自的世界，所以我有大量的机会与 Pinterest 的数据属性和元标签一起工作。 这些标记片段让网站所有者可以控制他们的图片和网站在 Pinterest 上的呈现方式，以及哪些可以和哪些不能“固定”。

在进入标签和属性详细信息之前，让我先概述一下 Pinterest 用户如何创建固定内容以及哪些类型的图片适合 Pinterest。

人们如何固定

Pinterest 用户在他们的 Pinterest 帐户中创建主题板，并使用浏览器扩展程序、"Pinmarklet" 书签、页面上的“固定”按钮或移动浏览器上的共享功能，从网络上将图片“固定”到这些板。 图片保存在板上的时候称为“固定内容”。

当 Pinterest 用户将固定内容添加到他们的公共板时，其他 Pinterest 用户可以看到固定内容、点击链接查看固定内容的来源、点赞固定内容或将其重新固定到他们自己的板。 重新固定类似于转发推文——每次重新固定都会计入原始固定内容，并且所有关注重新固定者帐户的人都可以看到重新固定内容在他们的 Pinterest 主页供稿中。

可固定图片

Pinterest 的共享工具识别 .jpg、.png、.gif、.bmp 和 .tiff 格式的图片，最小尺寸为 80x80px。 除 GIF 外，图片会被转换为 .jpg 格式以在 Pinterest 上显示。 动画 .gif 图片在 Pinterest 上可播放。

Pinterest 忽略 SVG 图片、小于 80x80px 的图片、背景图片、base64 图片以及伪元素内容中的图片。

尽管 Pinterest 无法识别 SVG，但它可以识别 picture 元素内的栅格图片。 您可以在 picture 元素内的 img 中添加任何 Pinterest 图片属性，"固定"按钮会正确处理它们。

Pinterest 图片数据属性

图片有四个专门的 Pinterest 数据属性。 这些属性让您能够控制 Pinterest 图片的点击链接、设置默认描述、指定备用图片以及将网站上的新固定内容与网站所有者 Pinterest 帐户上的固定内容关联起来。 以下是每个属性的运作方式的细分。

data-pin-url

<img src="blog-post-image.jpg" data-pin-url="http://www.example.com/blog-post-permalink.html">

此属性让您能够设置固定内容的点击链接。 默认情况下，固定内容会链接到用户创建固定内容时所在的页面的 URL。 这通常是可以的，但在某些情况下，将固定内容链接到其他页面更可取。 例如，从博客主页的帖子创建的固定内容会默认链接到博客主页。 当 Pinterest 用户几周或几个月后点击该固定内容时，他们会回到主页，他们想查看的帖子早就没有了。 此属性让您能够将固定内容链接到帖子的永久链接。

data-pin-description

<img src="blog-post-image.jpg" data-pin-description="Greatest Pin of all time, #A+">

此属性让您能够设置图片的默认 Pinterest 描述。 Pinterest 用户可以随时编辑固定内容的描述，因此在实践中，它更像是一种“建议”描述。

Pinterest 会首先查找 data-pin-description 属性来填充描述字段。 如果未设置此属性，它将查找图片标题，然后查找 alt 文本。 如果两者都没有设置，它将使用页面标题作为默认描述。

此属性的优点是，它让您能够使用标签、关键词或 @ 用户名，为 Pinterest 定制图片的描述，而不会通过将这些内容塞到 title 或 alt 文本中来影响可访问性。

data-pin-media

<img src="blog-post-image.jpg" data-pin-media="high-res-blog-post-image.jpg">

此属性让您能够为 Pinterest 指定图片的备用版本。 您可使用它来将 Pinterest 指向图片的更高质量版本，或指向完全不同的图片。 一些网站使用此属性来呈现一个针对 Pinterest 优化的合成图片，其中包含页面上的所有图片。

演示：按“固定”按钮以查看 data-pin-media 属性中链接的备用合成图片。 合成图片的描述使用 data-pin-description 属性设置，并包含一个标签。

查看 CodePen 上 CSS-Tricks (@css-tricks) 的 Pen Pinterest data-pin-media 演示。

data-pin-id

<img src="blog-post-image.jpg" data-pin-id="ID NUMBER HERE">

此属性通过增加网站所有者的固定内容的重新固定次数来增强“社会证明”。 它比其他 Pinterest 数据属性更难实现，部分原因是无法对其进行自动化。

要使用 data-pin-id，您首先需要在网站所有者的帐户中创建该图片的固定内容。 创建固定内容后，您可以从 Pinterest 上固定内容 URL 的末尾获取固定内容的 ID 号。 固定内容的 ID 在此屏幕截图中突出显示

获得 ID 号后，您可以将其添加到 data-pin-id 属性中的图片。 之后从该页面进行的该图片的任何固定操作都将被计为网站所有者固定内容的“重新固定”。 当此属性与 data-pin-url 属性一起使用时，从网站上任何页面进行的该图片的任何固定操作都将被计为重新固定。

富媒体固定内容

富媒体固定内容是扩展的固定内容，它们为 Pinterest 及其用户提供有关页面的更多信息。 有五种不同的富媒体固定内容类型，但它们都有一些共同点，将它们与供稿和搜索结果中的普通固定内容区分开来。

所有富媒体固定内容都在粗体标题上方显示来源网站的图标和来源网站的名称。 此图片显示了 Pinterest 供稿中看到的文章富媒体固定内容（左）与在启用富媒体固定内容之前从同一页面创建的固定内容（右）的比较。

Pinterest 支持大多数固定内容的至少两种标记类型；要求因固定内容类型而异。 支持的格式为开放图谱、Schema.org、hRecipe 或 oEmbed。

Pinterest 不会自动从网站中提取富媒体固定内容标记或端点。 网站必须通过 富媒体固定内容验证器 通过标记检查。 网站通过验证器后，您可以将其提交以供富媒体固定内容审批。 审批时间从几天到大约两周不等。

许多电子商务平台内置了产品富媒体固定内容的标记。 此外，Yoast WordPress SEO 等 WordPress 插件提供了一些选项，可以轻松创建富媒体固定内容。 在开始向网站添加标记之前，值得在验证器中对其进行测试，以查看您是否已经具备获得批准所需的内容。

以下是五种富媒体固定内容类型的概述。

地点固定内容

地点固定内容标记在搜索结果中将地图指针图标添加到固定内容，并将 Foursquare 链接的地图和可选电话号码添加到固定内容的底部。

识别格式：开放图谱或 Schema.org
文档：https://developers.pinterest.com/rich_pins_place

食谱 Pin

食谱 Pin 标记可以让 Pinterest 访问诸如食材和烹饪时间之类的详细信息，并在 Pin 上显示它们。Pinterest 使用此信息来突出显示搜索中的食谱。例如，食谱 Rich Pin 可以帮助在 Pinterest 上搜索“快速素食食谱”的用户找到您的 10 分钟扁豆汤食谱，即使 Pin 的基本描述中没有“快速”和“素食”这些词。

识别的格式：Schema.org 或 hRecipe
文档：https://developers.pinterest.com/rich_pins_recipe

文章

许多人使用 Pinterest 作为“稍后阅读”服务。文章 Rich Pin 具有醒目的标题和扩展的描述，可以帮助读者在点击链接之前了解您的文章或博客文章的更多信息。此扩展的描述不可用户编辑，因此它会在 Pinterest 上的任何位置遵循您的文章。

识别格式：开放图谱或 Schema.org
文档：https://developers.pinterest.com/rich_pins_article

商品 Pin

商品 Rich Pin 显示产品的价格和库存状态。当产品降价时，Pin 的详细信息页面会突出显示促销价格。

选择加入Pinterest 价格通知 的用户会在其 Pin 的商品降价时收到电子邮件。

识别的格式：oEmbed、Open Graph、Schema.org
文档：https://developers.pinterest.com/rich_pins_product

应用 Pin（仅限 iOS 应用）

应用 Rich Pin 与其他类型的 Rich Pin 不同——不需要元标签。要启用应用 Rich Pin，请在 Pinterest 应用中创建一个 Pin，并将其链接到您在 App Store 中的应用页面。Pinterest 会从那里接管。

文档：https://business.pinterest.com/en/blog/get-more-downloads-new-app-pins

如何不被 Pin

Pinterest 的 nopin 元标签和图像属性可以让您阻止用户在整个网站、每个页面或每个图像上从您的图像创建 Pin。

元标签：整个网站或整个页面 Pinterest 阻止

<meta name="pinterest" content="nopin" />

这是 Pinterest 的核选项——如果您将此元标签添加到网站或页面的 head 中，则无法通过官方共享渠道 Pin 任何图像。

默认情况下，当有人尝试从具有 nopin 元标签的页面 Pin 时，Pinterest 窗口会显示此消息

“此网站不允许 Pin 到 Pinterest。如有任何问题，请联系网站所有者。感谢您的访问！”

您可以使用 description 属性用您自己的消息替换该消息。

<meta name="pinterest" content="nopin" description="your custom nopin message here" />

图像属性：每个图像 Pinterest 阻止

<img src="image.png" nopin="nopin">

如果您想阻止 Pin 一些图像，但不想阻止所有图像，可以使用 nopin 图像属性。

要阻止 Pin 单个图像，请将 nopin="nopin" 添加到图像元素中。

使用“Nohover”元标签阻止悬停按钮

<meta name="pinterest" content="nohover" />

默认情况下，Pinterest 的浏览器扩展会在图像悬停时将其添加到图像左上角，前提是以下三个条件都为真

1. 该图像采用可 Pin 的格式。
2. 该图像至少为 80x80px。
3. 该图像没有 nopin 属性。

悬停按钮看起来像这样

此标签仅禁用悬停按钮。它不会阻止 Pin 页面——只有 nopin 元标签和属性才能做到这一点。

阻止 Rich Pin

如果您已获准使用 Rich Pin，但想阻止页面上的 Rich Pin，可以将此元标签添加到页面 head 中

<meta name="pinterest-rich-pin" content="false" />

支持、怪癖和问题

来自 iOS 上 Chrome 的浏览器共享会忽略 data-pin 属性和页面上“Pin It”按钮的自动填充描述。但是，它会尊重 nopin 属性。

Pinterest 对其元标签和数据属性的支持参差不齐，但正在改进。即使所有标记都存在，Rich Pin 数据也并不总是显示在 Pin 上。此外，data-pin-description 属性有时会被忽略，尤其是在添加属性之前将图像 Pin 到 Pinterest 的情况下。