Resumen: El contenido compartido en redes sociales con etiquetas Open Graph correctamente configuradas recibe hasta 2,5 veces más engagement que las publicaciones sin ellas, según un informe de 2024 de Social Media Examiner.
Cuando compartes un enlace en Facebook, LinkedIn, Twitter o WhatsApp, la plataforma lee las etiquetas meta Open Graph (OG) de tu página para generar una vista previa enriquecida: una tarjeta con título, descripción e imagen. Si estas etiquetas faltan o están mal configuradas, la vista previa puede parecer rota, mostrar la imagen incorrecta o presentar una descripción genérica que no atrae clics.
Nuestra herramienta gratuita de vista previa OG en sorank.com te permite visualizar exactamente cómo aparecerá tu página al compartirse en todas las principales plataformas sociales, antes de publicar. Detecta errores, optimiza tus visuales y maximiza el engagement en tiempo real.
¿Qué son las etiquetas Open Graph?
Open Graph es un protocolo creado originalmente por Facebook en 2010 que permite que las páginas web se conviertan 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 esenciales incluyen:
og:title, El titular que se muestra en la tarjeta de compartir. Mantenlo por debajo de 60 caracteres para mejores resultados.
og:description, Una descripción complementaria que aparece bajo el título. Apunta a 150-200 caracteres.
og:image, La imagen de vista previa. Este es el elemento visualmente más impactante. Tamaño recomendado: 1200×630 píxeles.
og:url, La URL canónica de la página que se comparte.
og:type, Define el tipo de contenido (website, article, product, video, etc.).
og:site_name, El nombre de tu sitio web o marca.
Twitter utiliza su propia variante llamada Twitter Cards, con etiquetas como twitter:card, twitter:title, twitter:description y twitter:image. Sin embargo, Twitter recurrirá 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: ¿cómo se relaciona el compartir en redes sociales con el SEO? Aunque las señales sociales no son un factor de clasificación directo para Google, los beneficios indirectos son significativos:
Más tráfico desde plataformas sociales: Una tarjeta de compartir atractiva y bien formateada aumenta drásticamente las tasas de clics desde las redes sociales. Más visitantes desde canales sociales significa más backlinks potenciales, menciones de marca y señales de engagement.
Tasa de rebote reducida: Cuando los usuarios ven una vista previa precisa antes de hacer clic, saben qué esperar. Esta coherencia entre la vista previa y el contenido reduce las tasas de rebote y mejora el tiempo de permanencia, ambas señales positivas de experiencia de usuario.
Coherencia de marca: Las tarjetas de compartir consistentes y de aspecto profesional en todas las plataformas refuerzan tu identidad de marca y generan confianza con tu audiencia.
Amplificación del compartir de enlaces: Las personas son más propensas a compartir contenido que tiene una vista previa atractiva. Cada compartición crea otra oportunidad para el descubrimiento orgánico y backlinks potenciales.
Cómo usar la herramienta de vista previa OG de Sorank
Nuestra herramienta de vista previa OG 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 recupera la página y lee todas las etiquetas meta 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 el aspecto exacto 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 superan los límites de caracteres recomendados.
Paso 4: Corrige y vuelve a probar. Después de corregir tus etiquetas meta, 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 con Open Graph. Aquí están los problemas más frecuentes que vemos:
Etiqueta og:image faltante: Este es el error número uno. Sin imagen, las plataformas muestran una tarjeta en blanco 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 que las imágenes tengan al menos 200×200 píxeles, pero recomienda 1200×630 para el formato de tarjeta grande. Las imágenes demasiado pequeñas o que no tienen una proporción de 1,91:1 se recortarán torpemente o se mostrarán como una miniatura pequeña en lugar de una tarjeta grande.
Usar URLs relativas en lugar de URLs absolutas: Todos los valores de las etiquetas OG deben usar URLs absolutas (que comiencen con https://). Las rutas relativas como /images/og.jpg no funcionarán en plataformas sociales.
Etiquetas duplicadas o en conflicto: Tener múltiples etiquetas og:title o 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, debes usar el Depurador de compartir de Facebook para forzar un nuevo rastreo y borrar la versión almacenada en caché.
Etiquetas específicas de Twitter faltantes: Aunque Twitter recurre a las etiquetas OG, especificar twitter:card (con el 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 de cada plataforma
Cada plataforma social tiene sus propios requisitos y particularidades:
Facebook: Tamaño mínimo de imagen 200×200px, recomendado 1200×630px. Admite valores og:type como article, product y video. Almacena en caché de forma agresiva, usa el Depurador de compartir para actualizar. Longitud máxima del título: 60 caracteres. Longitud máxima de descripción: 200 caracteres.
Twitter/X: Requiere la etiqueta meta twitter:card. Admite los tipos de tarjeta summary (imagen pequeña) y summary_large_image (imagen grande). Imagen mínima: 144×144px para summary, 300×157px para imagen grande. Recurre a las etiquetas OG cuando las etiquetas de Twitter están ausentes.
LinkedIn: Usa las etiquetas OG directamente. Tamaño de imagen recomendado: 1200×627px. Admite los tipos article y website. Tiene su propia herramienta Post Inspector para depuración.
WhatsApp: Lee las etiquetas OG para las vistas previas de enlaces. Requiere que og:image se sirva a través de HTTPS. Almacena en caché las vistas previas en el dispositivo; borrarlas requiere que el usuario vacíe el caché de la aplicación.
Buenas prácticas para el diseño de imágenes 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 de aspecto 1,91:1) para compatibilidad universal.
• Mantén los elementos de texto y visuales importantes dentro del 80% central de la imagen para tener en cuenta el recorte específico de cada plataforma.
• Incluye el logotipo o los colores de tu marca para un reconocimiento instantáneo.
• Usa texto en negrita y legible con alto contraste, ya que muchos usuarios navegan por las redes sociales en dispositivos móviles.
• Mantén el tamaño del archivo por debajo de 5 MB (idealmente por debajo de 1 MB) para una 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 un fondo oscuro, ya que plataformas como Twitter/X admiten el modo oscuro.
Integración de etiquetas OG con tu CMS
La mayoría de las plataformas CMS modernas y los frameworks admiten etiquetas Open Graph de forma nativa o a través de plugins:
WordPress: Plugins como Yoast SEO o Rank Math generan automáticamente etiquetas OG basadas en tu contenido. También puedes personalizar la imagen social y el título por página.
Webflow: La configuración de Open Graph está disponible en el panel de configuración de la página bajo la pestaña Open Graph. Puedes establecer el título, la descripción y la imagen para cada página.
Next.js / React: Usa el componente <Head> o la API de metadatos para añadir etiquetas OG programáticamente. Bibliotecas como next-seo simplifican este proceso.
HTML estático: Añade etiquetas meta OG directamente en la sección <head> de cada página. Usa nuestra herramienta Generador de etiquetas meta en sorank.com para crear el código automáticamente.
Independientemente de tu plataforma, usa siempre nuestra herramienta de vista previa OG para verificar que tus etiquetas se muestren correctamente en todas las plataformas sociales antes de publicar.
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
