Open Graph
Open Graph son etiquetas meta en el head de una página que controlan el título, la descripción y la imagen al compartir un enlace en redes sociales.
¿Qué es Open Graph?
Open Graph es un protocolo que Facebook introdujo en 2010 que utiliza etiquetas meta en la sección <head> de una página para controlar cómo se ve un enlace cuando se comparte. Etiquetas como og:title, og:description, og:image, og:url y og:type indican a plataformas como Facebook, LinkedIn, Messenger, WhatsApp y Slack qué título, texto e imagen mostrar en la vista previa. Sin ellas, la plataforma lo adivina por su cuenta, a menudo con una imagen aleatoria o un texto incorrecto.
¿Por qué es importante Open Graph?
Para una tienda online, los enlaces compartidos son exposición gratuita, y la vista previa determina si la gente hace clic. Una imagen og:image nítida y un título og:title claro en las páginas de productos y colecciones generan una tarjeta atractiva y profesional en los feeds y chats. Open Graph no es un factor directo de posicionamiento en Google, pero influye enormemente en el porcentaje de clics (CTR) desde canales sociales. Tenga en cuenta que X (Twitter) utiliza sus propias etiquetas Twitter Card, pero recurre a Open Graph cuando estas no están disponibles.
Casos de uso comunes
- Páginas de productos, donde
og:imagedebe mostrar la foto del producto, no el logotipo de la tienda. - Páginas de campaña y de destino (landing pages) compartidas en boletines, anuncios y publicaciones.
- Artículos de blog y guías, donde una imagen de portada editorial aumenta la tasa de clics (CTR).
- Depurar una vista previa incorrecta con el Depurador de contenido compartido de Facebook o el LinkedIn Post Inspector.
- Conseguir el tamaño correcto: una
og:imagede 1200×630 px evita recortes innecesarios.
Perspectiva de Shopify
La mayoría de los temas de Shopify rellenan automáticamente las etiquetas de Open Graph en theme.liquid y extraen og:image de la imagen destacada del producto. Los problemas surgen cuando las aplicaciones inyectan etiquetas duplicadas o cuando las páginas carecen de una imagen dedicada para compartir. Compruebe el código fuente renderizado en URL reales y valide con un depurador en lugar de asumir que el tema lo hace de forma correcta. Open Graph complementa su meta descripción y sus datos estructurados, pero no los reemplaza.