Vista previa Open Graph / redes sociales gratis
Compón metadatos y previsualiza cómo puede verse una tarjeta de enlace en Twitter/Facebook/LinkedIn.
Cargando herramienta…
Cómo previsualizar una tarjeta social para compartir antes de publicar
Compón un título, descripción, URL y referencia de imagen para un modelo de tarjeta social. Revisa el texto y las imágenes antes de publicar metadatos.
- Introduce el título y la descripción.
- Configura las URLs de página e imagen.
- Compara las previsualizaciones de Facebook/LinkedIn y Twitter/X.
- Usa Meta Tag Generator para el marcado, a continuación, probar tu página publicada en la plataforma de destino.
¿Por qué previsualizar una tarjeta social antes de publicar
Cuando alguien comparte tu enlace, la tarjeta que aparece a menudo es la primera impresión de tu página. Un título que se corta, una descripción que termina a media sentencia o una imagen recortada a través de la cara de alguien puede hacer que un artículo sólido parezca descuidado. Esta herramienta le permite dibujar esos elementos y verlos en dos formas de tarjeta comunes antes de escribir cualquier marcado.
Los bloggers pueden probar la longitud de los titulares, los marketers pueden comparar las opciones de imagen para una página de inicio de campaña, y los desarrolladores pueden acordar metadatos con un cliente antes del lanzamiento. Debido a que funciona a partir de los valores que escribes, puedes probar ideas para páginas que aún no se han publicado.
Un ejemplo práctico
Di que ingresas el título Spring Garden Planner: 12 Fáciles verduras para principiantes, una descripción de dos sentencias, la URL https://www.example.com/blog/spring-garden de la página y una URL de la imagen para una imagen de 1200 x 630 píxeles.
La tarjeta de estilo de Facebook y LinkedIn muestra la imagen en una forma de 1,91 a 1, luego el nombre de host www.example.com en letras mayúsculas, el título en una línea y hasta dos líneas de descripción. La tarjeta de estilo Twitter y X muestra la misma imagen en una forma de 2 a 1, que recorta un poco desde la parte superior e inferior de una imagen de 1200 x 630. En ambas cartas el título se limita a una sola línea aquí, así que si tu título completo no encaja, lo verás terminar con una elipsis. Esa es una señal clara para mover las palabras más importantes hacia el frente.
Cómo se relaciona la vista previa con las etiquetas reales Open Graph
Las plataformas sociales construyen tarjetas de enlace a partir de meta tags en el HTML de tu página. El protocolo Open Graph define og:title, og:descripción, og:url y og:image, y muchas plataformas también leen twitter:card y etiquetas relacionadas. Los cuatro campos de esta herramienta coinciden con esos valores básicos.
La vista previa es una maqueta. Muestra tu imagen con recorte de estilo de portada para llenar cada forma de tarjeta y muestra sólo el nombre del host de la URL, que es cómo la mayoría de las plataformas presentan un enlace. No busca tu página ni lee sus etiquetas existentes. Una vez que esté contento, crea las etiquetas con un generador de metaetiquetas, publíquelas y comprueba el resultado con el depurador de compartir de cada plataforma.
Errores comunes a evitar
Usa una dirección web completa, incluyendo https, en ambos campos URL. Una ruta de imagen relativa o un enlace a un archivo privado puede funcionar en tu computadora, pero no será accesible por los rastreadores sociales. Mantén texto importante y caras cerca del centro de la imagen para que los cultivos en diferentes plataformas no los corten.
No escribe una descripción que solo repita el título. Úsalo para decir lo que el lector obtendrá. Y recuerde que las tarjetas de caché de plataformas, por lo que después de cambiar sus etiquetas es posible que tenga que pedir a la plataforma para actualizar su copia.
Consejos útiles y limitaciones
- Esto compone una maqueta en lugar de buscar una página en vivo.
- Las plataformas pueden recortar imágenes, truncar texto o conservar una tarjeta en caché.
- Diseña imágenes sociales a 1200 x 630 píxeles, un tamaño ampliamente utilizado que funciona para ambas formas de tarjeta que se muestran aquí.
- Lee la tarjeta en una pantalla del tamaño de un teléfono también, ya que los títulos que caben en un escritorio pueden sentirse concurridos en el móvil.
Preguntas frecuentes
¿El campo URL lee mis metadatos existentes?
No. Introduce los valores que desea previsualizar.
¿Las plataformas mostrarán exactamente este diseño?
No. La representación varía según la plataforma, el dispositivo y el rastreador.
¿Actualiza mi sitio web?
No. Publique metadatos coincidentes en tu propia página por separado.
¿Por qué mi imagen no aparece en la vista previa?
La imagen se oculta cuando el navegador no puede cargarla, por ejemplo si la URL está equivocada, el archivo es privado o el servidor bloquea la carga de otros sitios. Comprueba que el enlace se abre en una nueva pestaña.
¿Qué tamaño de imagen funciona mejor para las tarjetas de enlace?
Una imagen de 1200 x 630 pixel es una opción común porque coincide con la forma de 1,91 a 1 tarjeta de cerca y todavía se ve nítido en las pantallas de alta resolución.
¿Por qué la tarjeta sólo muestra el dominio en lugar de mi URL completa?
La mayoría de las plataformas sólo muestran el nombre del host del sitio en una tarjeta de enlace, por lo que la vista previa hace lo mismo. La URL completa todavía se utiliza cuando alguien hace clic en la tarjeta.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online