Generador de meta etiquetas Open Graph

Configuración

Crea el título, descripción, URL e imagen de vista previa que las plataformas sociales utilizan cuando se comparte tu página.

Título de la página

Descripción de la página

URL canónica de la página

URL de la imagen OG

Mejor práctica: usa una imagen pública de 1200×630 para que la vista previa conserve la proporción Open Graph correcta.

Vista previa en vivo

Esta vista previa mantiene una proporción fija de imagen Open Graph y evita que el texto largo rompa la tarjeta.

1200 × 630

Añade una imagen de 1200×630

Pega una URL de imagen pública para previsualizar cómo aparecerá la imagen OG.

ejemplo.com/tu-pagina

El título de tu página aparecerá aquí

Tu descripción aparecerá aquí. Asegúrate de que sea útil, específica y fácil de entender antes de que alguien haga clic.

Código

Pega este código dentro de la sección head de tu página.

<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

¡Comparte esta herramienta con tus amigos!

Guía práctica

Diseña la vista previa del enlace antes de que la gente visite tu página

Open Graph no es solo un detalle técnico de SEO. Controla la primera impresión de tu página cuando alguien la comparte en un feed, mensaje, comunidad, espacio de trabajo o chat grupal. Una vista previa sólida explica la página rápidamente, transmite confianza y da a los usuarios una razón clara para hacer clic.

OG Image

Haz que la tarjeta compartida sea evidente

Usa un título claro, un elemento visual simple y un espaciado seguro.

Piensa en tu imagen OG como una mini página de destino (landing page). Debe seguir teniendo sentido cuando se recorte, comprima o se muestre en una pantalla pequeña.

1. El usuario comparte tu URL

Alguien pega tu enlace en Facebook, LinkedIn, Slack, Discord, Messenger u otra aplicación.

2. La plataforma lee tu página

El rastreador (crawler) comprueba la cabecera de tu página y extrae el título, la descripción, la URL y la imagen de Open Graph.

3. Aparece la tarjeta de vista previa

La plataforma construye una tarjeta. Si tus etiquetas son débiles, la vista previa puede parecer rota, aleatoria o aburrida.

Las etiquetas que realmente importan

No necesitas complicar demasiado Open Graph. La mayoría de las páginas necesitan unas pocas etiquetas sólidas que expliquen claramente qué es la página y cómo debe verse al compartirse.

og:type

Define el tipo de contenido. Para la mayoría de las páginas web normales, el valor correcto es “website”.

og:title

Controla el titular de la tarjeta de vista previa. Debe ser específico, no solo el nombre de tu marca.

og:description

Controla el texto secundario de apoyo. Úsalo para explicar el beneficio o el contexto de la página.

og:url

Define la URL canónica de la página. Usa la URL final limpia, no una URL de seguimiento aleatoria.

og:image

Controla el elemento visual principal. A menudo, esta es la razón principal por la que un enlace compartido parece profesional o incompleto.

og:image:width / height

Informa a los rastreadores sobre las dimensiones esperadas de la imagen. 1200×630 ayuda a las plataformas a entender el diseño más rápido.

Regla de la imagen OG

1200×630

Proporción horizontal de 1.91:1 (landscape)

Usa 1200×630 para obtener una imagen Open Graph segura y de alta calidad.

Mantén el texto importante y los logotipos lejos de los bordes porque las plataformas pueden recortar las vistas previas.

Evita usar logotipos diminutos como toda la imagen. La imagen debe comunicar el tema de la página rápidamente.

Usa una URL de imagen pública. Si el rastreador no puede acceder a ella, es posible que la vista previa no muestre ninguna imagen.

Errores que hacen que las vistas previas parezcan de baja calidad

El mismo título en cada página

Si cada página usa el mismo título, los usuarios no pueden saber qué están abriendo. Dale a las páginas importantes su propio título.

La descripción no dice nada útil

Textos como “Bienvenido a nuestro sitio web” desperdician la vista previa. Cuéntale a la gente qué aprenderá, obtendrá o resolverá.

Proporción de imagen incorrecta

Las imágenes cuadradas, diminutas o mal recortadas pueden hacer que tu enlace parezca roto. Usa una imagen OG horizontal que se ajuste a la tarjeta.

Dónde se utiliza esta vista previa

Facebook

Facebook utiliza intensamente los datos de Open Graph para los enlaces compartidos y las tarjetas de vista previa enriquecidas.

LinkedIn utiliza tu título, descripción, imagen y URL de OG para crear vistas previas de publicaciones con aspecto profesional.

Chat apps

Muchas aplicaciones de chat usan etiquetas Open Graph para mostrar una vista previa antes de que las personas decidan abrir el enlace.

Rastreadores (Crawlers)

Los rastreadores de vista previa suelen guardar los metadatos en caché, así que prueba las páginas importantes después de actualizar tus etiquetas.

Para obtener los mejores resultados, crea una imagen OG and una descripción únicas para cada landing page importante, página de herramienta, entrada de blog y página de producto, en lugar de reutilizar los mismos metadatos genéricos en todas partes.