Las etiquetas Open Graph son metaetiquetas HTML que indican a las redes sociales y a las aplicaciones de mensajería cómo mostrar una vista previa cuando se comparte la URL de una página, especificando el título, la descripción, la imagen y el tipo que deben aparecer en lugar de lo que la plataforma podría deducir por su cuenta. Desarrollado originalmente por Facebook, el protocolo Open Graph lo leen hoy casi todas las grandes redes sociales y plataformas de mensajería, lo que lo convierte en la forma estándar de que un minorista controle el aspecto de sus páginas de producto cuando se comparten, se fijan o se enlazan desde fuera de su propio sitio. En el comercio electrónico, unas etiquetas Open Graph bien configuradas marcan la diferencia entre que un enlace de producto compartido muestre una imagen y un precio atractivos o una miniatura genérica y defectuosa.
Por qué las etiquetas Open Graph son importantes en las páginas alimentadas por el feed
Las páginas de producto se comparten constantemente, ya sea por el boca a boca de los clientes, enlaces de afiliados, publicaciones de influencers o ubicaciones de pago en redes sociales, y cada uno de esos enlaces compartidos se muestra a partir de las etiquetas Open Graph y no del contenido real de la página que vería un visitante al hacer clic. Una página de producto sin etiquetas bien configuradas puede mostrar un logotipo deformado, una descripción truncada o irrelevante, o ninguna imagen, lo que perjudica el porcentaje de clics de un contenido compartido que, de otro modo, supone una distribución gratuita y con alta intención de compra. Como las páginas de producto suelen generarse de forma masiva a partir del mismo catálogo que alimenta el feed de shopping, los valores Open Graph pueden generarse con plantillas directamente a partir de los metadatos de producto existentes en lugar de redactarse a mano para cada SKU, lo que convierte esta práctica en una de las mejoras más escalables para un catálogo grande.
Cómo funcionan las etiquetas Open Graph
Las etiquetas Open Graph se ubican en el <head> de una página web como elementos <meta property="og:...">, y og:title, og:description, og:image y og:url cubren los campos básicos de la vista previa que leen la mayoría de las plataformas. En un catálogo de productos, estos valores suelen corresponderse directamente con atributos del feed que ya se mantienen para Shopping y Meta Catalog: el mismo título, la misma descripción y la misma imagen principal que se usan en el feed pueden rellenar las etiquetas Open Graph equivalentes, lo que mantiene la coherencia entre ambas superficies sin necesidad de redactar textos por separado. Las plataformas y los motores de búsqueda contrastan cada vez más este marcado estructurado con un grafo de conocimiento más amplio de entidades para entender qué representa una página, lo que significa que unos datos Open Graph coherentes refuerzan la comprensión automática de un producto más allá de la vista previa inmediata en redes sociales. Como estas etiquetas determinan el comportamiento de un enlace allí donde se comparta, también son una parte discreta pero importante de una sindicación de contenidos eficaz, en la que el mismo producto puede aparecer en varios sitios asociados o agregadores.
Ejemplo
<item>
<g:id>SKU-10234</g:id>
<g:title>Organic Cotton Crewneck Sweater - Charcoal, M</g:title>
<g:description>Soft, breathable organic cotton crewneck in charcoal.</g:description>
<g:image_link>https://example-shop.com/img/org-sweater-charcoal.jpg</g:image_link>
</item><!-- Open Graph tags on the corresponding product page, templated from the feed -->
<meta property="og:title" content="Organic Cotton Crewneck Sweater - Charcoal, M">
<meta property="og:description" content="Soft, breathable organic cotton crewneck in charcoal.">
<meta property="og:image" content="https://example-shop.com/img/org-sweater-charcoal.jpg">
<meta property="og:type" content="product">Conceptos relacionados
Como los valores Open Graph reflejan tan fielmente los metadatos de producto existentes, lo mejor es mantenerlos mediante una plantilla y no como una tarea manual, y contribuyen a que la identidad de un producto se entienda de forma coherente en un grafo de conocimiento más amplio de entidades. También facilitan discretamente la sindicación de contenidos, al garantizar que un producto se vea y se lea igual dondequiera que acabe compartiéndose un enlace a él.
