HedgieTools

Vista previa en redes sociales

Mira cómo se verá tu página al compartirla en Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord o Pinterest, corrige lo que se corta y copia las etiquetas Open Graph listas para pegar.

1. Los datos de tu página

Rellena el formulario o importa los datos desde el código de una página.

0 / 60
0 / 155
Tipo de página
Imagen para compartir

JPG, PNG, WebP o GIF. La imagen elegida solo se usa para la vista previa: para el código, indica también su dirección online.

2. Vistas previas

Una simulación de cada plataforma: el resultado real puede variar ligeramente, pero los cortes son muy parecidos a los reales.

Google

Eexample.comhttps://example.com › …
Título de la páginaLa descripción de la página aparecerá aquí.

Facebook

example.comTítulo de la páginaLa descripción de la página aparecerá aquí.

X

Título de la página
De example.com

LinkedIn

Título de la páginaexample.com

WhatsApp

Título de la páginaLa descripción de la página aparecerá aquí.example.com
https://example.com10:24

Slack

example.comTítulo de la páginaLa descripción de la página aparecerá aquí.

Discord

example.comTítulo de la páginaLa descripción de la página aparecerá aquí.

Pinterest

Título de la páginaEexample.com

Pinterest muestra la imagen entera, sin recortarla. Una imagen vertical (2:3, por ejemplo 1000 × 1500 px) ocupa más espacio ahí, pero se recortará en las demás plataformas.

3. Comprobaciones y código

Qué corregir y, luego, las etiquetas para pegar en tu página.

  • ProblemaFalta el títuloSin título, cada red se inventa uno a partir de la página.
  • ProblemaFalta la descripciónLas redes tomarán un fragmento de texto de la página, a menudo mal elegido.
  • ProblemaNinguna imagenLos enlaces sin imagen reciben muchos menos clics. Prevé una imagen de 1200 × 630 px.
  • MejorableFalta la dirección de la páginaog:url indica la dirección oficial de la página, para agrupar todas las veces que se comparte.

Pégalo en la sección head de tu página.

Rellena el formulario para generar el código.

Acerca de la vista previa en redes sociales

Cada vez que alguien comparte tu página, la red social muestra una tarjeta con su título, su descripción y su imagen. Esta herramienta te enseña esas tarjetas antes de publicar y genera las etiquetas que las alimentan.

Haz que tus enlaces se vean bien

Cuando alguien comparte tu página, cada red muestra una tarjeta con un título, una descripción y una imagen. Esos datos vienen de las etiquetas Open Graph incluidas en el código de la página. Sin ellas, la tarjeta queda vacía o con datos mal elegidos.

Las longitudes adecuadas

Google corta un título hacia los 60 caracteres y una descripción hacia los 155. Una imagen de 1200 × 630 píxeles (1,91:1) se ve bien en todas partes: deja lo esencial en el centro, porque algunas plataformas la recortan. Pinterest prefiere una imagen vertical.

Código listo para pegar

Copia las etiquetas HTML para colocarlas en el head de tu página, o el objeto de metadatos para un sitio Next.js. Una vez publicada la página, las redes a veces conservan la vista previa antigua en caché durante unos días.

No se sube nada

Las vistas previas se simulan en tu navegador. Tu imagen y tus textos no se envían a ningún sitio. La única petición es la de la dirección de imagen que escribas, y la hace tu navegador.

Herramientas relacionadas

Desarrollo

Decodificador de JWT

Lee el encabezado, la carga útil y las fechas de un JWT, y verifica su firma.

Desarrollo

SVG a HTML

Convierte SVG en HTML, JSX y React.