Cuando alguien comparte un enlace de tu web en WhatsApp, Facebook, LinkedIn, X, Telegram o Slack, la plataforma visita la página y busca unas etiquetas concretas en el <head> para construir la tarjeta: imagen, título y descripción. Ese estándar se llama Open Graph (lo creó Facebook) y hoy lo usan prácticamente todas las aplicaciones. Una tarjeta atractiva multiplica los clics; una tarjeta sin imagen o con el logo pixelado del tema de WordPress parece descuidada. En esta guía verás las etiquetas que necesitas, el tamaño correcto de la imagen y cómo resolver los problemas de caché.
Las etiquetas básicas
<meta property="og:type" content="website">
<meta property="og:url" content="https://ejemplo.es/servicios/diseno-web">
<meta property="og:title" content="Diseño web para pymes en Bilbao">
<meta property="og:description" content="Webs rápidas y autogestionables desde 1490 €. Entrega en 4 semanas.">
<meta property="og:image" content="https://ejemplo.es/og/diseno-web.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Portátil mostrando una web corporativa">
<meta property="og:site_name" content="Estudio Norte">
<meta property="og:locale" content="es_ES">| Etiqueta | Obligatoria | Notas |
|---|---|---|
og:title |
Sí | Puede ser distinto del title SEO: más directo, sin la marca |
og:description |
Recomendada | 1–2 frases; muchas apps solo muestran la primera línea |
og:image |
Sí | URL absoluta y con HTTPS |
og:url |
Recomendada | URL canónica de la página |
og:type |
Recomendada | website o article |
og:image:width/height |
Recomendada | Ayuda a que la imagen se muestre a la primera |
Fíjate en que se usa property=, no name=. Con el generador de meta tags obtienes todas las etiquetas de una vez.
Tarjetas de X (Twitter)
X lee Open Graph como respaldo, pero para la tarjeta con imagen grande necesitas al menos:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@estudionorte">Si no defines twitter:title, twitter:description o twitter:image, X usa los valores de Open Graph.
La imagen: tamaño y formato
- Tamaño: 1200 × 630 px (proporción 1,91:1). Es la medida que mejor se adapta a Facebook, LinkedIn, WhatsApp y X.
- Formato: JPEG para fotos, PNG para gráficos con texto. WebP no es compatible con todas las plataformas de forma fiable; mejor evitarlo aquí.
- Peso: cuanto menos, mejor. WhatsApp puede no mostrar imágenes pesadas; procura quedarte por debajo de 300 KB.
- Zona segura: algunas apps recortan la imagen a un cuadrado (WhatsApp en ciertos formatos, por ejemplo). Deja el texto y el logo en el centro, con márgenes amplios.
- Texto legible: el titular de la imagen debe leerse en el móvil; usa letra grande y poco texto.
Un buen sistema es crear una plantilla con la marca y cambiar el titular para cada página o artículo.
Cómo comprobar la vista previa
Antes de compartir, pega la URL en la vista previa de Open Graph: muestra cómo se verá la tarjeta y avisa si falta alguna etiqueta o si la imagen no se puede descargar.
Herramientas oficiales de cada plataforma:
| Plataforma | Herramienta | Para qué |
|---|---|---|
| Facebook / Messenger | Depurador de contenido compartido (Sharing Debugger) | Ver lo que lee Facebook y forzar una nueva extracción |
| Post Inspector | Ver la tarjeta y actualizar la caché | |
| X | Vista previa al redactar el post | La antigua herramienta de validación ya no muestra la tarjeta |
| No hay | Ver la sección siguiente |
Problemas frecuentes y soluciones
La vista previa muestra una imagen antigua
Las plataformas guardan en caché la tarjeta durante días o semanas. Soluciones:
- Facebook: Depurador → «Volver a extraer» (Scrape Again).
- LinkedIn: Post Inspector lee la página de nuevo.
- WhatsApp y Telegram: no tienen herramienta pública. Comparte la URL con un parámetro distinto (
?v=2) para que se genere una vista previa nueva. En Telegram, el bot @WebpageBot permite actualizar la caché. - Cambia también el nombre del archivo de la imagen (
og-v2.jpg): algunas plataformas la cachean por URL.
No aparece ninguna imagen
og:imagecon ruta relativa (/img/og.jpg) en lugar de absoluta.- Imagen por HTTP o con certificado no válido.
- Imagen demasiado grande o en formato no compatible.
- El servidor, un plugin de seguridad o la CDN bloquean a los rastreadores (
facebookexternalhit,WhatsApp,LinkedInBot,Twitterbot). Revisa las reglas del WAF. - La página requiere inicio de sesión o devuelve un error al rastreador.
Sale el título o la imagen equivocados
- Hay etiquetas duplicadas: el tema y el plugin SEO generan cada uno las suyas y la plataforma elige la primera. Desactiva una de las dos fuentes.
- La web es una aplicación JavaScript que inserta las etiquetas en el navegador. Los rastreadores de redes sociales no ejecutan JavaScript: las etiquetas deben estar en el HTML que envía el servidor.
Buenas prácticas por tipo de página
- Portada: imagen de marca con eslogan; título con el nombre y lo que haces.
- Artículo: imagen con el titular del artículo;
og:type=article. - Producto: foto del producto sobre fondo limpio; precio en la descripción si cambia poco.
- Páginas de campaña: imagen específica de la oferta, con fecha si es limitada.
Lista de comprobación
og:title,og:description,og:imageyog:urlen todas las páginas.- Imagen de 1200 × 630, JPEG o PNG, ligera y con URL absoluta HTTPS.
twitter:card=summary_large_image.- Sin etiquetas duplicadas entre tema y plugins.
- Etiquetas presentes en el HTML del servidor, no añadidas por JavaScript.
- Vista previa comprobada antes de cada campaña.
Para el título y la descripción que aparecen en Google, consulta la guía de title y meta description.