El protocolo Open Graph (OG) es un conjunto de etiquetas meta creado originalmente por Facebook en 2010. Estas etiquetas se sitúan en el <head> de tu HTML e indican a las plataformas de redes sociales exactamente cómo mostrar tu contenido cuando alguien comparte un enlace. Sin ellas, las plataformas intentan armar una vista previa con lo que puedan encontrar en la página, y el resultado normalmente no es bueno.
Dónde aparecen las etiquetas Open Graph en la práctica
Cuando alguien pega un enlace en Facebook, LinkedIn, WhatsApp, Telegram, Slack o Discord, la plataforma busca la página y lee sus etiquetas OG. Esas etiquetas determinan el título de la vista previa, la descripción y la imagen que aparece en la publicación o mensaje. Esta vista previa suele ser la primera impresión que la gente tiene de tu contenido, así que controlarla importa. Un enlace con una imagen clara y un título atractivo recibe significativamente más clics que uno con una miniatura rota o una descripción genérica extraída del pie de página.
Etiquetas Open Graph requeridas vs. opcionales
La especificación Open Graph define cuatro propiedades requeridas:
og:title: El título de tu contenido tal como debe aparecer en la vista previa social.og:type: El tipo de contenido. Por defecto es "website" si se omite.og:image: La URL de la imagen a mostrar en la vista previa.og:url: La URL canónica de la página.
Más allá de estas, varias etiquetas opcionales se usan habitualmente:
og:description: Un resumen de una o dos frases de la página.og:site_name: El nombre de tu web global (p. ej., "InspectWP").og:locale: El idioma y territorio (p. ej.,en_US,de_DE).og:video: Una URL a un archivo de vídeo asociado al contenido.
Entender los valores de og:type
La etiqueta og:type indica a las plataformas qué tipo de contenido representa la página. Los valores más comunes son:
- website: Úsalo para tu página de inicio y páginas generales. Es el valor por defecto si no se especifica ningún tipo.
- article: Úsalo para entradas de blog, artículos de noticias y cualquier contenido escrito con fecha de publicación. Este tipo desbloquea etiquetas adicionales como
article:published_time,article:authoryarticle:section. - product: Lo usan los sitios de comercio electrónico para describir productos. Soporta etiquetas como
product:price:amountyproduct:price:currency. - profile: Para páginas que representan a una persona. Soporta
profile:first_nameyprofile:last_name.
Requisitos y buenas prácticas para og:image
La imagen de vista previa es la parte visualmente más prominente de un contenido compartido en redes sociales, así que acertar es importante. Aquí están los detalles:
- Tamaño mínimo: Facebook recomienda al menos 1200 x 630 píxeles para pantallas de alta resolución. Las imágenes de menos de 600 x 315 píxeles pueden no mostrarse correctamente o aparecer como una miniatura pequeña en lugar de una tarjeta grande.
- Relación de aspecto: 1,91:1 es el estándar para vistas previas grandes en la mayoría de plataformas. Las imágenes cuadradas (1:1) también funcionan, pero producen un diseño diferente.
- Tamaño de archivo: Mantén las imágenes por debajo de 8 MB. Facebook y LinkedIn pueden ser lentos al renderizar imágenes muy grandes.
- Formato: JPEG y PNG están universalmente soportados. WebP funciona en algunas plataformas pero no en todas.
- Usa siempre URLs absolutas: La URL de la imagen debe empezar por
https://. Las rutas relativas no funcionarán porque la plataforma social busca la imagen desde sus propios servidores.
Cómo funciona el Facebook Sharing Debugger
Facebook cachea tus datos OG de forma agresiva. Si actualizas tus etiquetas OG, la vista previa antigua puede seguir mostrándose cuando alguien comparte tu enlace. El Facebook Sharing Debugger (developers.facebook.com/tools/debug/) te permite introducir una URL y ver exactamente lo que Facebook lee de ella. Puedes hacer clic en "Scrape Again" para forzar a Facebook a volver a buscar la página y actualizar su caché. Esta herramienta también es valiosa para depurar problemas como imágenes faltantes, títulos incorrectos o etiquetas que no se están analizando correctamente. LinkedIn tiene una herramienta similar llamada Post Inspector.
Open Graph y Twitter Cards
Twitter (ahora X) desarrolló su propio sistema de etiquetas meta llamado Twitter Cards. Las etiquetas de Twitter Cards usan el atributo name en lugar de property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />La buena noticia es que Twitter recurre a las etiquetas Open Graph cuando faltan las etiquetas de Twitter Cards. Así que, si tienes og:title pero no twitter:title, Twitter usará el título OG. Sin embargo, la etiqueta twitter:card en sí no tiene equivalente en OG, por lo que siempre deberías incluir al menos esa etiqueta específica de Twitter. Configurarla como summary_large_image produce la vista previa visualmente más atractiva, con una imagen grande encima del texto.
WordPress y la generación de etiquetas Open Graph
El núcleo de WordPress no incluye etiquetas Open Graph por defecto. Necesitas un plugin para añadirlas. Las opciones más populares son:
- Yoast SEO: Genera automáticamente todas las etiquetas OG esenciales usando el título de la entrada, el extracto y la imagen destacada. Te permite anular el título OG, la descripción y la imagen por entrada a través de la pestaña "Social" en el editor. También genera etiquetas de Twitter Cards.
- Rank Math: Similar a Yoast con generación automática de OG y anulaciones por entrada. Incluye una función de vista previa social que muestra cómo se verá la entrada al compartirse.
- The SEO Framework: Una alternativa ligera que genera etiquetas OG y Twitter con una configuración mínima. Menos opciones de configuración pero valores por defecto sólidos.
Si usas un maquetador de páginas como Elementor o un plugin de caché, asegúrate de que las etiquetas OG estén presentes en la salida HTML cacheada. Algunas configuraciones de caché agresivas pueden eliminar etiquetas meta de la sección <head>.
Etiquetas Open Graph para productos WooCommerce
Para tiendas WooCommerce, las etiquetas OG son aún más importantes porque las vistas previas de los productos influyen directamente en las decisiones de compra. Una página de producto bien configurada debería incluir og:type establecido en "product", junto con el nombre del producto como título, una descripción atractiva y la imagen principal del producto. Plugins SEO como Yoast WooCommerce SEO o Rank Math pueden generarlas automáticamente. El precio del producto y la disponibilidad también pueden incluirse mediante etiquetas OG adicionales, que algunas plataformas muestran en la vista previa.
Errores comunes con Open Graph
- Tamaño de imagen incorrecto: Usar una imagen menor de 600 x 315 píxeles resulta en una miniatura pequeña en lugar de una vista previa de tarjeta grande. Usa siempre los recomendados 1200 x 630 píxeles.
- Etiqueta og:image faltante: Sin una etiqueta de imagen, las plataformas o bien no muestran ninguna imagen o eligen una aleatoria de la página, que podría ser un anuncio de la barra lateral o un logo que se ve fatal como vista previa.
- URLs relativas: Todas las URLs OG deben ser absolutas.
/images/photo.jpgno funcionará; debe serhttps://example.com/images/photo.jpg. - Etiquetas OG duplicadas: Tener dos etiquetas
og:titleen la misma página (por ejemplo, de dos plugins distintos) provoca un comportamiento impredecible. Comprueba el código fuente de tu página para asegurarte de que cada etiqueta OG aparece solo una vez. - No probar tras los cambios: Los datos OG son cacheados por las plataformas sociales. Después de actualizar las etiquetas, vacía siempre la caché usando el Facebook Debugger o el LinkedIn Post Inspector para verificar que las nuevas etiquetas funcionan.
Qué comprueba InspectWP
InspectWP escanea la sección <head> de tu página e informa de qué etiquetas Open Graph y Twitter Card están presentes. Muestra los valores exactos de cada etiqueta, lo que facilita verificar que los títulos, descripciones y URLs de imagen son correctos. Las etiquetas meta de redes sociales faltantes se destacan como una oportunidad de mejora SEO, ya que las páginas sin etiquetas OG tienden a recibir menos interacción al compartirse en plataformas sociales.