Meta tags Open Graph: lo que necesitas saber

Qué aprenderás en esta guía

En esta entrada verás qué son las meta tags Open Graph, cuáles son las etiquetas clave, ejemplos de implementación en el head, cómo depurar vistas previas en redes sociales y una lista de comprobación práctica para producción.

¿Qué es Open Graph y cómo funciona?

Open Graph es un protocolo de metaetiquetas que permite a los servicios de redes sociales leer y uniformar el título, la descripción, la imagen y otros metadatos de una página cuando se comparte una URL. Las etiquetas Open Graph se colocan en la sección head del HTML y ayudan a que la vista previa sea coherente y controlada por quien publica el contenido.

Cuando una red social o un bot de compartido solicita una URL, busca estas meta tags en el HTML. Si no las encuentra, la plataforma elige contenido por su cuenta (imagen por defecto, fragmento automático, etc.), lo que puede producir vistas previas irrelevantes o con elementos promocionales no deseados.

Etiquetas Open Graph principales (con ejemplos)

Estas son las meta tags básicas que deberías incluir en el head de cada página que quieras compartir:

• og:title — Título mostrado en la vista previa. Ejemplo: <meta property="og:title" content="Guía rápida de Open Graph">
• og:description — Descripción corta que acompaña al título. Ejemplo: <meta property="og:description" content="Cómo configurar las meta tags sociales correctamente">
• og:image — URL de la imagen destacada que verá el usuario. Ejemplo: <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">
• og:url — URL canónica de la página que se comparte. Ejemplo: <meta property="og:url" content="https://example.com/articulo">
• og:type — Tipo de objeto (por ejemplo, "article" o "website"). Ejemplo: <meta property="og:type" content="article">
• og:site_name — Nombre del sitio web. Ejemplo: <meta property="og:site_name" content="MiSitio">

Coloca estas meta tags en el head estático cuando sea posible. Si tu contenido se genera o modifica por JavaScript, asegúrate de que el HTML inicial contiene las etiquetas o que el servidor las renderiza antes de responder.

Ejemplos prácticos de implementación

Ejemplo mínimo para una página de artículo:

<meta property="og:title" content="Título del artículo">
<meta property="og:description" content="Resumen breve y atractivo del artículo">
<meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">
<meta property="og:url" content="https://example.com/articulo-ejemplo">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Nombre del sitio">

Si además quieres optimizar para Twitter/X, añade meta tags de Twitter Card; muchas plataformas priorizan Twitter cards cuando están presentes, pero Open Graph sirve como fallback en la mayoría de los casos.

Twitter/X Cards y compatibilidad

Twitter/X usa su propio conjunto de meta tags, aunque tiende a respetar las etiquetas Open Graph si faltan las específicas de Twitter. Ejemplo de tags de Twitter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título del artículo">
<meta name="twitter:description" content="Resumen breve">
<meta name="twitter:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">

Buenas prácticas para imágenes y texto

Imágenes: usa archivos accesibles públicamente y con suficiente resolución para que se vean nítidos en pantallas de alta densidad. Incluye la URL absoluta en og:image, evita redirecciones largas y confirma que el archivo no esté bloqueado por robots.txt ni requiera autenticación.

Texto: og:title y og:description deben ser concisos y relevantes para la página. Evita rellenar la descripción con palabras clave sin contexto; en redes sociales la claridad mejora la tasa de clics.

Cómo comprobar y depurar vistas previas

Herramientas y pasos para verificar qué verá un usuario al compartir una URL:

• Ver el HTML servido: usa curl para descargar la respuesta completa (incluye redirecciones) y ver las meta tags. Ejemplo: curl -L -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/pagina > pagina.html
• Comprobar cabeceras: curl -I https://example.com/pagina para revisar el código de estado y cabeceras relevantes (Content-Type, cache-control).
• Simular un dispositivo móvil: si quieres ver la versión móvil que serviría a Googlebot Smartphone, usa curl con un user-agent móvil: curl -L -A "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)" https://example.com/pagina
• Inspección en navegador: abre la página en Chrome, abre DevTools > Elements y busca las meta tags en el head para confirmar que están presentes en el HTML inicial.
• Facebook Sharing Debugger: pega la URL en https://developers.facebook.com/tools/debug/ para ver la vista previa que Facebook extrae y forzar una nueva extracción (scrape).
• Comprobación de indexación pública: usa el operador site: en Google o búsquedas con frases únicas para comprobar señales públicas de indexación, recordando que esto es indicativo y no definitivo.

Nota sobre JavaScript: muchos scrapers de redes sociales no ejecutan JavaScript completo. Asegúrate de que las meta tags críticas estén presentes en el HTML inicial o renderízalas en el servidor para evitar vistas previas vacías o incorrectas.

Errores comunes y cómo evitarlos

• Falta de og:image o imagen inaccesible: confirma que la URL responde con 200 y no está bloqueada.
• Imágenes demasiado pequeñas o con relación de aspecto que provoca recortes indeseados: prueba cómo recortan las principales plataformas.
• Tags generados solo por JavaScript en el cliente: usa renderizado en servidor o prerenderizado si el bot no ejecuta JS.
• og:url que apunta a una URL no canonical: usa la URL canónica que quieres que se comparta para evitar duplicados de vista previa.
• Robots meta noindex o bloqueo vía robots.txt en la página o en recursos (como la imagen): revisa que los scrapers puedan acceder.

Checklist rápido antes de publicar

• ¿og:title y og:description están presentes y específicos para la página?
• ¿og:image apunta a una URL pública y servible sin autenticación ni bloqueos?
• ¿og:url coincide con la URL canónica que quieres compartir?
• ¿Has probado la URL en el Facebook Sharing Debugger y en una previsualización real en la plataforma objetivo?
• ¿Las meta tags están presentes en el HTML inicial (no sólo inyectadas por JS)?

Si quieres profundizar en prácticas de rendimiento y comprobaciones técnicas relacionadas (crawling, cabeceras y renderizado), Lee la guía de Technical SEO.

Preguntas frecuentes

¿Open Graph afecta a la indexación en Google?

Las meta tags Open Graph controlan cómo se muestra una página en redes sociales; no son un factor directo de indexación en Google. No obstante, tener vistas previas atractivas puede aumentar el tráfico social y las señales de usuario, lo que indirectamente puede afectar la visibilidad. Separadamente, recuerda que Google usa la versión móvil como base para crawling e indexación; desde julio de 2024 Googlebot Smartphone es el rastreador por defecto para Search.

¿Puedo usar la misma imagen para todas las páginas?

Técnicamente puedes, pero las mejores prácticas recomiendan imágenes específicas por contenido: una imagen única y relevante mejora la tasa de clics y evita que todas las vistas previas parezcan iguales. Si usas una imagen por defecto, asegúrate de que sea representativa y que no contenga elementos promocionales que confundan al usuario.

¿Qué hacer si la vista previa no se actualiza después de cambiar las meta tags?

Muchas plataformas almacenan en caché las vistas previas. Usa el Facebook Sharing Debugger para forzar una extracción nueva; revisa también las cabeceras de cache-control en el servidor y asegúrate de que la URL de la imagen cambie o tenga un parámetro de versión si la plataforma sigue mostrando la versión anterior.

¿Los scrapers respetan robots.txt?

La mayoría de las plataformas de redes sociales evitan acceder a URLs bloqueadas por robots.txt o a recursos que requieren autenticación. Si deseas que una imagen o página sea utilizada en una vista previa, confirma que no esté bloqueada y que sea accesible públicamente.