Uso de atributos de datos y metaetiquetas de Pinterest | Programar Plus

Pinterest es algo importante. En el mundo de los blogs y el comercio electrónico, amenaza con superar a Google como el motor de búsqueda más importante. Ese es el mundo del que vengo, así que tuve muchas oportunidades de trabajar con los atributos de datos y las metaetiquetas de Pinterest. Estos fragmentos de marcado dan a los propietarios del sitio control sobre cómo se presentan sus imágenes y su sitio en Pinterest, y qué se puede y qué no se puede “anclar”.

Antes de entrar en los detalles de las etiquetas y los atributos, permítame brindarle una descripción general de cómo los usuarios de Pinterest crean pines y qué tipos de imágenes funcionan para Pinterest.

Cómo la gente pin

Los usuarios de Pinterest crean tableros temáticos en sus cuentas de Pinterest y “anclan” imágenes de la web a esos tableros utilizando extensiones del navegador, el marcador “Pinmarklet”, los botones “Pin It” en la página o la función para compartir en los navegadores móviles. Una vez que una imagen se guarda en un tablero, se llama “pin”.

Los tableros de un usuario de Pinterest (vale, son míos).

Cuando un usuario de Pinterest agrega un pin a uno de sus tableros públicos, otros usuarios de Pinterest pueden ver el pin, hacer clic en la fuente del pin, hacer clic en “Me gusta” o “repin” en uno de sus propios tableros. Repinning es similar a retwittear: cada repin se cuenta en el pin original, y cualquiera que siga la cuenta del repinner puede ver el repin en su feed de inicio de Pinterest.

detalle de un pin de Pinterest que muestra repins y me gusta

Imágenes pinnables

Las herramientas para compartir de Pinterest reconocen imágenes en formato .jpg, .png, .gif, .bmp y .tiff con un tamaño mínimo de 80x80px. Con la excepción de los GIF, las imágenes se convierten a .jpg para mostrarlas en Pinterest. Las imágenes animadas .gif se pueden reproducir en Pinterest.

Pinterest ignora las imágenes SVG, las imágenes de menos de 80x80px, las imágenes de fondo, las imágenes base64 y las imágenes en el contenido de pseudoelementos.

Aunque Pinterest no reconoce SVG, sí reconoce imágenes ráster dentro de un picture elemento. Puede adjuntar cualquiera de los atributos de imagen de Pinterest al img dentro de una picture elemento y los botones “Pin It” los manejarán correctamente.

Atributos de datos de Pinterest para imágenes

Hay cuatro atributos de datos específicos de Pinterest para las imágenes. Estos atributos le permiten controlar el enlace de clic para las imágenes de Pinterest, establecer una descripción predeterminada, especificar una imagen alternativa y asociar nuevos pines de un sitio con pines en la cuenta de Pinterest del propietario del sitio. A continuación, se muestra un desglose de cómo funciona cada atributo.

data-pin-url

Nota: las URL relativas no funcionan para este atributo.

<img src="https://css-tricks.com/using-pinterest-data-attributes-and-meta-tags/blog-post-image.jpg" data-pin-url="http://www.example.com/blog-post-permalink.html">

Este atributo le permite establecer el enlace de clic para los pines. De forma predeterminada, los pines están vinculados a la URL de la página en la que estaba el usuario cuando creó el pin. A menudo eso está bien, pero hay algunos casos en los que es preferible vincular el pin a una página diferente. Por ejemplo, un pin creado a partir de una publicación en la página de inicio de un blog se vinculará a la página de inicio del blog de forma predeterminada. Cuando un usuario de Pinterest hace clic en ese pin unas semanas o meses después, llegará a la página de inicio, donde la publicación que desea ver desapareció hace mucho tiempo. Este atributo te permite vincular el pin al enlace permanente de la publicación.

data-pin-description

<img src="https://css-tricks.com/using-pinterest-data-attributes-and-meta-tags/blog-post-image.jpg" data-pin-description="Greatest Pin of all time, #A+">

Este atributo te permite establecer una descripción de Pinterest predeterminada para una imagen. Los usuarios de Pinterest pueden editar la descripción de un pin en cualquier momento, por lo que en la práctica es más una descripción “sugerida”.

Un alfiler quedando clavado. Observe la descripción editable.

Pinterest buscará el data-pin-description atributo primero para completar el campo de descripción. Si el atributo no está configurado, buscará el título de la imagen y luego el texto alternativo. Si no se establece ninguno, utilizará el título de la página como descripción predeterminada.

Lo bueno de este atributo es que te permite personalizar la descripción de una imagen para Pinterest con hashtags, palabras clave o @ -nombres de usuario sin dañar la accesibilidad al meter esas cosas en title o alt texto.

data-pin-media

<img src="https://css-tricks.com/using-pinterest-data-attributes-and-meta-tags/blog-post-image.jpg" data-pin-media="high-res-blog-post-image.jpg">

Este atributo le permite especificar una versión alternativa de una imagen para Pinterest. Puedes usarlo para señalar a Pinterest una versión de mejor calidad de tu imagen, o una imagen completamente diferente. Algunos sitios utilizan este atributo para presentar una imagen compuesta optimizada para Pinterest que incluye todas las imágenes de la página.

Demostración: presione el botón Pin It para ver la imagen compuesta alternativa enlazada en el data-pin-media atributo. La descripción de la imagen compuesta se establece con el data-pin-description atributo e incluye un hashtag.

Vea la demostración de Pen Pinterest data-pin-media de Programar Plus(@ css-tricks) en CodePen.

data-pin-id

<img src="https://css-tricks.com/using-pinterest-data-attributes-and-meta-tags/blog-post-image.jpg" data-pin-id="ID NUMBER HERE">

Este atributo da un impulso a la “prueba social” al aumentar el recuento de repin en los pines del propietario del sitio. Es un poco más complicado de implementar que los otros atributos de datos de Pinterest, en parte porque no hay forma de automatizarlo.

Usar data-pin-id, primero debe crear un pin de la imagen en la cuenta del propietario del sitio. Una vez creado el pin, puede obtener el número de identificación del pin del final de la URL del pin en Pinterest. La identificación de un pin se resalta en esta captura de pantalla:

Una vez que tenga el número de identificación, puede agregarlo a la imagen en el data-pin-id atributo. Los pines posteriores de esa imagen hechos a partir de esa página se acreditarán como un “repin” del PIN del propietario del sitio. Cuando este atributo se utiliza en combinación con el data-pin-url atributo, cualquier pin de esa imagen de cualquier página en el sitio se cuenta como un repin.

Pines ricos

Los Rich Pins son pines expandidos que brindan a Pinterest y a sus usuarios más información sobre una página. Hay cinco tipos diferentes de Pines enriquecidos, pero todos tienen algunas cosas en común que los distinguen de los pines normales en el feed y los resultados de búsqueda.

Todos los Pines enriquecidos muestran el favicon del sitio de origen y el nombre del sitio de origen sobre un título en negrita. Esta imagen muestra un Pin enriquecido de artículo como se ve en el feed de Pinterest (izquierda) en comparación con un pin de la misma página creada antes de que se habilitaran los Pines enriquecidos (derecha):

Pin básico de Rich Pin (izquierda) (derecha)

Pinterest admite al menos dos tipos de marcas para la mayoría de los pines; los requisitos varían según el tipo de pin. Los formatos admitidos son Open Graph, Schema.org, hRecipe u oEmbed.

Pinterest no recoge automáticamente el marcado de Rich Pins o los puntos finales de un sitio. El sitio debe pasar una verificación de marcado a través del Validador de Pin enriquecido. Una vez que el sitio pasa el validador, puede enviarlo para la aprobación de Rich Pins. El tiempo de aprobación varía desde unos pocos días hasta unas dos semanas.

Muchas plataformas de comercio electrónico tienen incorporado el marcado para Product Rich Pins. Además, los complementos de WordPress como Yoast WordPress SEO tienen opciones para facilitar Rich Pins. Antes de comenzar a agregar marcas a su sitio, vale la pena probarlo en el validador para ver si ya tiene lo que necesita para obtener la aprobación.

Aquí hay una descripción general de cada uno de los cinco tipos de Pines enriquecidos.

Colocar alfileres

La marca Place Pins agrega un icono de puntero de mapa al Pin en los resultados de búsqueda y agrega un mapa vinculado a Foursquare y un número de teléfono opcional al pie del pin.

Detalle de Colocar alfiler en el feed de Pinterest (izquierda) y detalle del mapa del pie de alfiler (derecha)

Formatos reconocidos: Abrir Graph o Schema.org
Documentación: https://developers.pinterest.com/rich_pins_place

Pines de recetas

El marcado de Pines de recetas le da a Pinterest acceso a detalles como ingredientes y tiempo de cocción y los muestra en el pin. Pinterest utiliza esta información para mostrar recetas en la búsqueda. Por ejemplo, Recipe Rich Pins podría ayudar a un usuario de Pinterest que busca “recetas vegetarianas rápidas” a encontrar su receta de sopa de lentejas de 10 minutos, incluso si las palabras “rápido” y “vegetariano” no están incluidas en la descripción básica del pin.

Detalle parcial de Receta Rich Pin

Formatos reconocidos: Schema.org o hRecipe
Documentación: https://developers.pinterest.com/rich_pins_recipe

Artículo

Mucha gente usa Pinterest como un servicio para “leerlo más tarde”. Los Pines enriquecidos de artículos tienen un título en negrita y una descripción ampliada adicional para ayudar a los lectores a obtener más información sobre su artículo o publicación de blog antes de hacer clic. Esta descripción ampliada no es editable por el usuario, por lo que seguirá su artículo donde sea que vaya en Pinterest.

Detalle del Pin enriquecido del artículo que muestra el autor, el título en negrita y la descripción ampliada.

Formatos reconocidos: Abrir Graph o Schema.org
Documentación: https://developers.pinterest.com/rich_pins_article

Pines de producto

Los Pines ricos en productos muestran el precio de un producto y el estado de las existencias. Cuando un producto sale a la venta, el precio de oferta se resalta en la página de detalles del pin.

Los usuarios que optan por las notificaciones de precios de Pinterest reciben un correo electrónico cuando un artículo que han fijado sale a la venta.

Formatos reconocidos: oEmbed, Open Graph, Schema.org
Documentación: https://developers.pinterest.com/rich_pins_product

Pines de aplicaciones (solo aplicaciones de iOS)

Los Pines enriquecidos de aplicaciones son diferentes de los otros tipos de Pines enriquecidos: no se necesitan metaetiquetas. Para habilitar App Rich Pins, cree un Pin dentro de la aplicación Pinterest y vincúlelo a la página de su aplicación en la App Store. Pinterest lo toma desde allí.

Documentación: https://business.pinterest.com/en/blog/get-more-downloads-new-app-pins

Cómo no quedar anclado

Pinterest’s nopin La metaetiqueta y el atributo de imagen le permiten evitar que los usuarios creen pines a partir de sus imágenes en todo el sitio, por página o por imagen.

Metaetiqueta: Bloqueo de Pinterest en todo el sitio o en toda la página

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

Esta es la opción nuclear de Pinterest, si agrega esta metaetiqueta al head de su sitio o página, ninguna de las imágenes se puede anclar a través de los canales oficiales para compartir.

De forma predeterminada, la ventana de Pinterest mostrará este mensaje cuando alguien intente anclar desde una página con el nopin metaetiqueta:

“Este sitio no permite el uso de pines en Pinterest. Comuníquese con el propietario si tiene alguna pregunta. ¡Gracias por su visita!”

Puede reemplazarlo con su propio mensaje como description atributo.

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

Atributo de imagen: bloqueo de Pinterest por imagen

<img src="https://css-tricks.com/using-pinterest-data-attributes-and-meta-tags/image.png" nopin="nopin">

Si desea bloquear la fijación de algunas de sus imágenes, pero no todas, puede usar la nopin atributo de imagen.

Para bloquear la fijación de una imagen individual, agregue nopin="nopin" al elemento de imagen.

Bloqueo del botón de desplazamiento con la metaetiqueta “Nohover”

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

De forma predeterminada, la extensión del navegador de Pinterest agrega un botón “Pin It” en la esquina superior izquierda de una imagen al pasar el mouse si todas estas tres cosas son ciertas:

  1. La imagen está en formato pinnable.
  2. La imagen mide al menos 80x80px.
  3. La imagen no tiene el nopin atributo.

El botón de desplazamiento se ve así:

Esta etiqueta solo desactiva el botón de desplazamiento. No evita que los pines de la página, solo los nopin La metaetiqueta y el atributo pueden hacer eso.

Bloqueo de pines ricos

Si está aprobado para Rich Pins pero desea bloquear Rich Pins en una página, puede agregar esta metaetiqueta a la página. head:

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

Soporte, peculiaridades y problemas

El navegador compartido de Chrome en iOS ignora la data-pin atributos y la descripción de autocompletar del botón “Pin It” en la página. Sin embargo, respeta el nopin atributo.

El propio soporte de Pinterest para sus metaetiquetas y atributos de datos es irregular pero está mejorando. Los datos de Rich Pin no siempre se muestran en los pines, incluso cuando todo el marcado está presente. También el data-pin-description El atributo a veces se ignora, especialmente si se fijó una imagen en Pinterest antes de agregar el atributo.