Primeros pasos

Primeros pasos con OG Preview

Una herramienta gratuita basada en el navegador para previsualizar cómo se ven tus enlaces en las redes sociales. Sin registro, sin instalación.

OG Preview se ejecuta por completo en tu navegador. Puedes escribir los valores de tus etiquetas a mano o dejar que la herramienta los lea desde una URL en vivo, y verás al instante cómo aparecería la página en Facebook, X (Twitter) y LinkedIn.

Paso 1: Abre la herramienta

Ve a la página de inicio. Se abre por defecto en el modo Entrada manual, que funciona para cualquier página, incluidos los borradores que aún no se han publicado o las páginas protegidas por inicio de sesión.

Paso 2: Introduce los valores de tus etiquetas (Entrada manual)

Rellena los campos:

  • URL / Dominio — se muestra como la línea de origen en las vistas previas.
  • Título (og:title) — tu titular; procura que tenga menos de 60 caracteres.
  • Descripción (og:description) — un resumen breve, de unos 150–160 caracteres.
  • URL de la imagen (og:image) — un enlace absoluto https:// a tu imagen de vista previa (idealmente 1200×630px).

Las vistas previas de Facebook, X (Twitter) y LinkedIn se actualizan en vivo a medida que escribes. No hay ninguna subida de archivos: la imagen se referencia mediante su URL.

Paso 3 (opcional): Obtén las etiquetas desde una URL (Beta)

Cambia a Obtener URL (Beta), pega la URL de una página pública y pulsa Vista previa. La herramienta obtiene la página a través de un proxy CORS público, lee las etiquetas OG/Twitter que ya tiene y muestra las vistas previas junto con una tabla de las etiquetas encontradas y las que faltan. Este modo funciona en la medida de lo posible: algunos sitios bloquean los proxies, en cuyo caso la Entrada manual es la alternativa fiable.

Paso 4: Ajusta hasta que se vea bien

Ajusta el título, la descripción y la imagen hasta que las vistas previas se vean como quieres. Presta atención a una imagen que falte o a un título que se corte.

Paso 5: Añade las etiquetas a tu página

OG Preview no exporta un archivo de código: añades las etiquetas al <head> de tu propio sitio. Con los valores que hayas elegido, el marcado se ve así:

<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A short, compelling summary."> <meta property="og:image" content="https://yoursite.com/preview.jpg"> <meta property="og:url" content="https://yoursite.com/page"> <meta name="twitter:card" content="summary_large_image">

Si usas un CMS, la mayoría de los plugins de SEO (por ejemplo, Yoast SEO o Rank Math en WordPress) ofrecen campos para exactamente estos valores.

Paso 6: Prueba en las plataformas reales

Una vez que las etiquetas estén publicadas, confírmalas con los depuradores oficiales, que también te permiten borrar la caché de la plataforma:

← Volver a la herramienta