Resumen: El contenido compartido en redes sociales con etiquetas Open Graph correctamente configuradas recibe hasta 2,5× más interacción que las publicaciones sin ellas, según un informe de Social Media Examiner de 2024.

Cuando compartes un enlace en Facebook, LinkedIn, Twitter o WhatsApp, la plataforma lee las meta etiquetas Open Graph (OG) de tu página para generar una vista previa enriquecida — una tarjeta con título, descripción e imagen. Si esas etiquetas faltan o están mal configuradas, la vista previa puede verse rota, mostrar la imagen incorrecta o una descripción genérica que no genera clics.

Nuestra herramienta gratuita OG Preview en sorank.com te permite visualizar exactamente cómo aparecerá tu página cuando se comparta en cada plataforma social importante — antes de publicar. Detecta errores, optimiza tus visuales y maximiza la interacción en tiempo real.

¿Qué son las etiquetas Open Graph?

Open Graph es un protocolo creado originalmente por Facebook en 2010 que permite a las páginas web convertirse en objetos enriquecidos en un grafo social. Al colocar etiquetas <meta> específicas en la sección <head> de tu página, controlas cómo las plataformas muestran tu contenido cuando se comparte.

Las etiquetas Open Graph principales incluyen:

og:title — El titular mostrado en la tarjeta de compartir. Mantenlo bajo 60 caracteres para mejores resultados.

og:description — Una descripción de apoyo que aparece debajo del título. Apunta a 150–200 caracteres.

og:image — La imagen de vista previa. Es el elemento más impactante visualmente. Tamaño recomendado: 1200×630 píxeles.

og:url — La URL canónica de la página compartida.

og:type — Define el tipo de contenido (website, article, product, video, etc.).

og:site_name — El nombre de tu sitio web o marca.

Twitter usa su propia variación llamada Twitter Cards, con etiquetas como twitter:card, twitter:title, twitter:description y twitter:image. Sin embargo, Twitter recurre a las etiquetas Open Graph si sus propias etiquetas no están presentes.

Por qué la vista previa OG importa para tu estrategia SEO

Quizás te preguntes: ¿qué relación tiene el compartir en redes sociales con el SEO? Aunque las señales sociales no son un factor de clasificación directo de Google, los beneficios indirectos son significativos:

Más tráfico desde plataformas sociales: Una tarjeta de compartir atractiva y bien formateada aumenta dramáticamente las tasas de clics desde redes sociales. Más visitantes desde canales sociales significa más backlinks potenciales, menciones de marca y señales de interacción.

Tasa de rebote reducida: Cuando los usuarios ven una vista previa precisa antes de hacer clic, saben qué esperar. Esta alineación entre vista previa y contenido reduce las tasas de rebote y mejora el tiempo de permanencia — ambas señales positivas de experiencia de usuario.

Consistencia de marca: Tarjetas de compartir consistentes y profesionales en todas las plataformas refuerzan la identidad de tu marca y construyen confianza con tu audiencia.

Amplificación del compartir enlaces: Las personas son más propensas a compartir contenido que tiene una vista previa atractiva. Cada compartido crea otra oportunidad para el descubrimiento orgánico y backlinks potenciales.

Cómo usar la herramienta OG Preview de Sorank

Nuestra herramienta OG Preview te ayuda a depurar y optimizar tus tarjetas de compartir social:

Paso 1: Introduce la URL de la página que quieres previsualizar. La herramienta obtiene la página y lee todas las meta etiquetas Open Graph y Twitter Card.

Paso 2: Visualiza las vistas previas generadas para Facebook, Twitter/X, LinkedIn y WhatsApp. Cada plataforma renderiza las tarjetas de compartir de forma ligeramente diferente, así que nuestra herramienta te muestra la apariencia exacta en cada una.

Paso 3: Identifica problemas. La herramienta resalta problemas comunes como etiquetas faltantes, imágenes demasiado pequeñas, títulos truncados o descripciones que exceden los límites recomendados.

Paso 4: Corrige y vuelve a probar. Después de corregir tus meta etiquetas, vuelve a introducir la URL para verificar que todas las vistas previas ahora se ven perfectas.

Errores comunes de etiquetas OG y cómo corregirlos

Incluso los desarrolladores experimentados cometen errores de Open Graph. Estos son los problemas más frecuentes:

Etiqueta og:image faltante: Este es el error número uno. Sin imagen, las plataformas muestran una tarjeta vacía o extraen una imagen aleatoria de tu página. Siempre especifica una imagen de alta calidad de 1200×630 píxeles.

Imagen demasiado pequeña o proporción incorrecta: Facebook requiere imágenes de al menos 200×200 píxeles, pero recomienda 1200×630 para el formato de tarjeta grande. Las imágenes demasiado pequeñas o sin proporción 1,91:1 se recortarán de forma extraña o se mostrarán como miniatura pequeña.

Usar URLs relativas en lugar de absolutas: Todos los valores de etiquetas OG deben usar URLs absolutas (comenzando con https://). Las rutas relativas como /images/og.jpg no funcionarán en plataformas sociales.

Etiquetas duplicadas o conflictivas: Tener múltiples etiquetas og:title u og:image en la misma página confunde a los rastreadores. Asegúrate de que cada etiqueta OG aparezca exactamente una vez.

No limpiar el caché: Facebook y otras plataformas almacenan en caché tus datos OG de forma agresiva. Después de actualizar tus etiquetas, necesitas usar el Sharing Debugger de Facebook para forzar un nuevo rastreo y limpiar la versión en caché.

Etiquetas específicas de Twitter faltantes: Aunque Twitter recurre a las etiquetas OG, especificar twitter:card (con valor summary_large_image) garantiza que tu contenido obtenga el formato de imagen grande en lugar de la tarjeta de resumen pequeña.

Requisitos OG específicos por plataforma

Cada plataforma social tiene sus propios requisitos y particularidades:

Facebook: Tamaño de imagen mínimo 200×200px, recomendado 1200×630px. Soporta valores og:type como article, product y video. Cachea agresivamente — usa el Sharing Debugger para actualizar. Longitud máxima del título: 60 caracteres. Longitud máxima de la descripción: 200 caracteres.

Twitter/X: Requiere la meta etiqueta twitter:card. Soporta los tipos summary (imagen pequeña) y summary_large_image (imagen grande). Imagen mínima: 144×144px para summary, 300×157px para imagen grande. Recurre a etiquetas OG cuando las de Twitter están ausentes.

LinkedIn: Usa directamente las etiquetas OG. Tamaño de imagen recomendado: 1200×627px. Soporta los tipos article y website. Tiene su propia herramienta Post Inspector para depuración.

WhatsApp: Lee las etiquetas OG para vistas previas de enlaces. Requiere que og:image se sirva por HTTPS. Cachea las vistas previas en el dispositivo — limpiar requiere que el usuario borre el caché de la app.

Mejores prácticas para el diseño de imagen OG

Tu imagen OG es el elemento más importante de tu tarjeta de compartir social. Sigue estas pautas de diseño:

• Usa 1200×630 píxeles (proporción 1,91:1) para compatibilidad universal.
• Mantén el texto y elementos visuales importantes dentro del 80% central de la imagen para considerar el recorte específico de cada plataforma.
• Incluye tu logotipo o colores de marca para reconocimiento instantáneo.
• Usa texto en negrita y legible con alto contraste — muchos usuarios navegan redes sociales desde dispositivos móviles.
• Mantén el tamaño del archivo bajo 5 MB (idealmente bajo 1 MB) para carga rápida.
• Usa JPEG para fotografías y PNG para gráficos con superposiciones de texto.
• Crea imágenes OG únicas para tus páginas más importantes en lugar de usar una imagen genérica para todo el sitio.
• Prueba tu imagen sobre fondo oscuro, ya que plataformas como Twitter/X soportan modo oscuro.

Integrar etiquetas OG con tu CMS

La mayoría de los CMS y frameworks modernos soportan etiquetas Open Graph nativamente o mediante plugins:

WordPress: Plugins como Yoast SEO o Rank Math generan automáticamente etiquetas OG basadas en tu contenido. También puedes personalizar la imagen y título social por página.

Webflow: Los ajustes de Open Graph están disponibles en el panel de configuración de página bajo la pestaña Open Graph. Puedes establecer el título, descripción e imagen para cada página.

Next.js / React: Usa el componente <Head> o la API de metadata para añadir etiquetas OG programáticamente. Bibliotecas como next-seo simplifican este proceso.

HTML estático: Añade meta etiquetas OG directamente en la sección <head> de cada página. Usa nuestra herramienta Generador de Meta Tags en sorank.com para crear el código automáticamente.

Independientemente de tu plataforma, usa siempre nuestra herramienta OG Preview para verificar que tus etiquetas se renderizan correctamente en todas las plataformas sociales antes de publicar.