Herramienta gratuita de vista previa Open Graph

Cuando comparte un enlace en Facebook, LinkedIn, Twitter o WhatsApp, la plataforma lee las etiquetas meta Open Graph (OG) de su 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 le permite visualizar exactamente cómo aparecerá su página al compartirse en todas las principales plataformas sociales, antes de publicar. Detecte errores, optimice sus visuales y maximice 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 su página, controla cómo las plataformas muestran su contenido cuando se comparte.

Las etiquetas Open Graph esenciales incluyen:

og:title, El titular que se muestra en la tarjeta de compartir. Manténgalo por debajo de 60 caracteres para mejores resultados.

og:description, Una descripción complementaria que aparece bajo el título. Apunte 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, vídeo, etc.).

og:site_name, El nombre de su 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 su estrategia SEO

Quizás se pregunte: ¿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 su identidad de marca y generan confianza con su 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 le ayuda a depurar y optimizar sus tarjetas de compartir social:

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

Paso 2: Visualice 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 le muestra el aspecto exacto en cada una.

Paso 3: Identifique 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: Corrija y vuelva a probar. Después de corregir sus etiquetas meta, vuelva 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 su página. Siempre especifique 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úrese de que cada etiqueta OG aparezca exactamente una vez.

No limpiar el caché: Facebook y otras plataformas almacenan en caché sus datos OG de forma agresiva. Después de actualizar sus etiquetas, debe 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 su 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, use 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

Su imagen OG es el elemento más importante de su tarjeta de compartir social. Siga estas pautas de diseño:

• Use 1200×630 píxeles (proporción de aspecto 1,91:1) para compatibilidad universal.
• Mantenga 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.
• Incluya el logotipo o los colores de su marca para un reconocimiento instantáneo.
• Use texto en negrita y legible con alto contraste, ya que muchos usuarios navegan por las redes sociales en dispositivos móviles.
• Mantenga el tamaño del archivo por debajo de 5 MB (idealmente por debajo de 1 MB) para una carga rápida.
• Use JPEG para fotografías y PNG para gráficos con superposiciones de texto.
• Cree imágenes OG únicas para sus páginas más importantes en lugar de usar una imagen genérica para todo el sitio.
• Pruebe su imagen sobre un fondo oscuro, ya que plataformas como Twitter/X admiten el modo oscuro.

Integración de etiquetas OG con su 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 su contenido. También puede 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. Puede establecer el título, la descripción y la imagen para cada página.

Next.js / React: Use 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ñada etiquetas meta OG directamente en la sección <head> de cada página. Use nuestra herramienta Generador de etiquetas meta en sorank.com para crear el código automáticamente.

Independientemente de su plataforma, use siempre nuestra herramienta de vista previa OG para verificar que sus etiquetas se muestren correctamente en todas las plataformas sociales antes de publicar.