Cómo crear una imagen de vista previa para tu web

¿Qué es una imagen de vista previa de enlace?

Compartes un artículo y la otra persona ve una dirección, una imagen equivocada o una tarjeta con una imagen y un título claros. La imagen de esa tarjeta se conoce como imagen para compartir, imagen de vista previa o imagen Open Graph.

Acompaña al enlace de una página. No cumple la misma función que una publicación de Instagram, el pequeño icono de la pestaña del navegador (favicon) o la portada visible del artículo. Puedes usar el mismo original, pero adapta el recorte, el texto y los ajustes a cada caso.

Al generar la vista previa, el servicio lee el título, la descripción y la dirección de la imagen de la página. Esa información se llama metadatos. Open Graph la identifica para que otros servicios puedan reconocerla. Normalmente puedes introducirla en los ajustes de la web sin programar. La guía de metadatos de MDN explica cómo se diferencia del contenido visible.

Las aplicaciones muestran las vistas previas de forma distinta. Pueden recortar la imagen, acortar el título o no mostrar la tarjeta. Tu web no controla por completo el resultado. Compruébalo en el servicio donde vas a compartir el enlace.

¿Qué tamaño conviene usar?

Empieza con 1200 × 630 píxeles si tu web no recomienda otra medida. Son 1200 puntos de ancho y 630 de alto: casi el doble de ancho que de alto. Es una recomendación práctica, no un requisito de todos los servicios.

Por ejemplo, las indicaciones de LinkedIn recomiendan 1200 × 627 para la vista previa de una publicación de Página. No deformes la imagen por unos pocos píxeles. Sigue las instrucciones del servicio cuando prepares una versión para un espacio concreto.

Las dimensiones y el tamaño del archivo son cosas distintas. Los píxeles indican las medidas; los kilobytes (KB) y megabytes (MB), el espacio que ocupa. No hay un peso ideal para todas las imágenes. Compara copias y elige la menor si sigue clara. Comprueba también el límite del servicio.

Si el original mide 1600 × 1600, prepara primero un recorte horizontal. Cambiarlo directamente a 1200 × 630 puede estirarlo si la herramienta no mantiene las proporciones. La guía para cambiar el tamaño sin deformar explica la diferencia entre recortar y cambiar las dimensiones.

Diseña para que se entienda en pequeño

Muchas personas verán la tarjeta en el móvil, entre otros contenidos. Los detalles pequeños pueden desaparecer. Decide qué deben reconocer enseguida: el tema del artículo, el tipo de evento o el producto del enlace.

«Mejores fotos de producto» puede funcionar mejor en la imagen que el título completo con subtítulo. A menudo el título también aparece fuera de la imagen. No intentes incluirlo todo; la información esencial debe estar igualmente en el texto de la página.

Elige colores que permitan leer el texto con facilidad. Deja espacio alrededor del tema y aleja caras, productos y palabras importantes de los bordes. No existe una zona segura universal. Mira la imagen completa y prueba un recorte más cerrado alrededor del centro.

Reduce la vista previa a unos 300 píxeles de ancho o mírala pequeña en el móvil. Es una prueba de lectura, no un requisito técnico. ¿Se lee sin ampliar? ¿Se reconoce el tema? Si no, acorta el texto, aumenta las letras o simplifica los detalles.

En una tienda, el producto debe reconocerse al instante. En un evento, la imagen puede transmitir ambiente, pero fecha e inscripción también deben figurar en el texto. El logo ayuda a identificar la marca; repetirlo en grande en todos los artículos explica poco sobre cada tema.

Elige el formato y comprime una copia

JPG es un buen inicio para imágenes basadas en fotos. PNG sirve cuando el JPG empeora las letras o los bordes. Elige el fondo a propósito: si la imagen es transparente, depende del fondo de la aplicación y un logo claro puede perderse.

WebP y AVIF pueden funcionar en la web, pero que el navegador los acepte no garantiza que el servicio de vistas previas también lo haga. Empieza aquí por JPG o PNG. Para otros formatos, comprueba la compatibilidad y el resultado real.

Prepara la composición en tu programa de diseño. Usa la herramienta de recorte de Pixilo para encuadrar y la herramienta para cambiar el tamaño para ajustar las dimensiones. Si debes respetar un límite, prueba la reducción a un tamaño máximo. Revisa el archivo descargado: estas herramientas no configuran la imagen para compartir en tu web.

Comprimir reduce el espacio que ocupa el archivo. Conserva el original y trabaja con una copia. Compara letras, bordes del logo y degradados. Si pierde calidad, vuelve al original y aplica menos compresión. Procesar una copia borrosa no recupera detalles. La comparativa entre JPG y PNG ayuda a elegir para textos y fotografías.

Añadir la imagen en WordPress o un creador de webs

Abre el artículo en la administración de tu web. Busca «imagen para compartir», «Social image» u «Open Graph image». Puede estar en los ajustes de posicionamiento en buscadores, llamados SEO. Sigue estos pasos:

1. Abre la página correcta. Edita el artículo o página cuyo enlace vas a compartir.
2. Elige una imagen para esa página. Sube el archivo preparado o selecciónalo en la biblioteca multimedia, donde están las imágenes ya guardadas.
3. Revisa el título y la imagen predeterminada. El cambio debe afectar a esta página, no sustituir la imagen general de toda la web.
4. Guarda y publica. Subir el archivo a la biblioteca no cambia por sí solo los datos de la vista previa.
5. Prueba el enlace público. Sigue las comprobaciones de abajo antes de compartirlo.

En WordPress, el ajuste puede estar en tu plugin de SEO. Un plugin añade funciones a WordPress. Por ejemplo, la guía de Yoast explica sus ajustes de imágenes sociales. Los menús y la vista previa dependen de la versión y la suscripción. Revisa primero las funciones existentes antes de instalar otro plugin.

La imagen destacada puede servir de imagen para compartir, según el tema y los plugins. La documentación técnica de Yoast explica cómo la selecciona. La imagen predeterminada es una alternativa común para páginas sin imagen propia. En artículos importantes, elige una que represente su tema si la general no lo hace.

Si no encuentras el ajuste, entrega la dirección de la página y la imagen a quien mantenga la web. Pide que configure la imagen y compruebe los datos publicados. Pegar metadatos en el texto visible del artículo no equivale a colocarlos donde corresponde.

Opcional: añadir la imagen en el código

Puedes saltarte esta parte si ya seleccionaste la imagen en los ajustes. Es para ti o quien gestione la web cuando se edita el código directamente. HTML describe la estructura de la página; su sección head guarda datos que no aparecen como texto del artículo. Añade allí las siguientes indicaciones. og:image indica la dirección de la imagen; los demás campos Open Graph describen la página. La especificación Open Graph explica estos campos. El ejemplo corresponde a un artículo. Para una página general, usa website como tipo.

Sustituye el dominio, las direcciones, el título, la descripción y el archivo por tus valores. Si declaras 1200 × 630, la imagen debe tener realmente esas dimensiones.

<meta property="og:type" content="article">
<meta property="og:title" content="Mejores fotos de producto para tu tienda">
<meta property="og:description" content="Prepara imágenes claras y compruébalas en la página del producto.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Una taza azul sobre un fondo claro con el texto Mejores fotos de producto.">

Usa una dirección HTTPS completa, con el nombre de la web y la ubicación del archivo. La dirección de la página va en og:url y la de la imagen en og:image. La página debe usar su dirección principal prevista. En una web multilingüe, revisa el título y la dirección de cada idioma.

Describe el contenido y las palabras importantes de la imagen en og:image:alt. Es su texto alternativo, o alt. No sustituye la descripción de una imagen visible en el artículo. Si usas allí el mismo archivo, añade también una descripción adecuada en sus ajustes.

Comprueba si el tema o un plugin ya genera estos campos y actualiza ese ajuste. Varias imágenes pueden ser intencionadas, pero mezclar referencias antiguas y nuevas contradictorias dificulta la elección. Mantén juntas la imagen principal y sus medidas.

Los datos deben estar en el HTML publicado cuando el servicio consulta la página. Un ajuste añadido después solo en el navegador puede no leerse. Si hay ajustes separados para las tarjetas de X, revisa su imagen también: corregir Open Graph no modifica otros campos.

Prueba el enlace publicado antes de compartir

Pega la dirección pública en un borrador de publicación o mensaje y espera la vista previa. ¿Son correctos la imagen y el título? ¿Se lee el texto? Prueba en el servicio previsto sin enviar el borrador. Si falta la imagen o es incorrecta, sigue con las comprobaciones.

Abre el código fuente de la página publicada en tu navegador y busca og:image. El nombre de esta opción varía. Comprueba imagen, título y dirección, o pide a quien mantenga la web que lo haga. Una dirección de borrador del editor no prueba el enlace público.

En LinkedIn puedes usar Post Inspector. En Facebook, la herramienta equivalente es Sharing Debugger. Pega la dirección de la página e inicia la comprobación; quizá debas iniciar sesión. Después revisa un nuevo borrador. No hace falta publicar nada para probarlo.

Anota la dirección de la página, la imagen y el servicio probado. Si funciona en uno pero falla en otro, estos datos ayudan más que cambiar la imagen varias veces. La ayuda de LinkedIn sobre la caché indica que actualizar con Post Inspector afecta a publicaciones nuevas; las vistas previas de las existentes no cambian.

¿Por qué falta la imagen o aparece una versión incorrecta?

Distingue tres causas: la página indica una imagen equivocada, el servicio no accede al archivo o muestra una vista previa antigua guardada. Mejorar la calidad no arregla una dirección rota. Recargar el navegador tampoco vacía la caché de otro servicio.

Si la dirección de la imagen abre una página web, puede ser incorrecta o faltar el archivo. Algunas webs muestran entonces el inicio. Entrega ambas direcciones al responsable y pide que compruebe el acceso al archivo real sin iniciar sesión.

La caché es una copia guardada de una página o imagen. Acelera la carga, pero puede quedarse antigua. Una CDN distribuye archivos desde varios servidores y también puede guardar copias. Pide actualizar las de la web si hace falta. Verifica primero la página y la imagen públicas y después solicita otra consulta al servicio. Vaciar la caché del navegador no actualiza las demás.

Puedes guardar la nueva imagen con un nombre distinto, como product-photos-social-v2.jpg, y cambiar su referencia en la página. Esto distingue los archivos, pero no obliga al servicio a volver a leer la página ni a modificar mensajes anteriores.

No cambies la dirección permanente del artículo ni desactives las protecciones para probar. Da la dirección afectada y el mensaje de error al responsable. Podrá investigar qué impide acceder a ese contenido público.

Ejemplo: la vista previa de una guía de fotos de producto

Imagina una guía para tiendas: su portada es una foto cuadrada de una taza y tiene un título largo sobre imágenes para distintos dispositivos. El recorte horizontal automático corta el asa. Este es un ejemplo de trabajo, no un resultado medido.

1. Crea una composición horizontal. Empieza en 1200 × 630, muestra la taza entera y deja espacio alrededor.
2. Acorta el texto de la imagen. Prueba «Mejores fotos de producto». Conserva el título completo en el artículo y en el ajuste del título de la vista previa.
3. Guarda y revisa. Compara JPG y PNG: tamaño, letras y bordes del producto en la vista pequeña.
4. Configura la imagen de la página. Selecciona el archivo en los ajustes para compartir del artículo. Guarda y publica.
5. Prueba el enlace. Comprueba el archivo público, los datos de la página y una vista previa nueva en el servicio.

La versión puede servir para el enlace sin ser la mejor para Instagram o una portada ancha. Guarda el diseño original para futuras variantes sin editar repetidamente el JPG terminado.

¿Qué relación tiene con el SEO?

La imagen ayuda a entender el enlace compartido. Añadir og:image no garantiza mejores posiciones en buscadores. La imagen del resultado de búsqueda, la de la página y la del enlace son usos distintos; un ajuste no controla todos.

Elige un nombre de archivo descriptivo y un título fiel al contenido. Describe la imagen para una persona, sin llenar el campo de palabras clave. La guía SEO de Google trata el contenido útil y las imágenes comprensibles. La guía de textos alternativos y nombres de archivo ayuda a describir las imágenes visibles de una página.

Reducir la imagen para compartir no acelera automáticamente la portada visible. Si la página usa otro archivo, optimiza su carga por separado. Evalúa la velocidad con las imágenes que realmente se descargan.

Preguntas frecuentes

¿Open Graph exige 1200 × 630?

No. Aquí es una medida inicial práctica. Open Graph define cómo indicar dirección y dimensiones; cada servicio decide cómo mostrar la imagen y sus límites.

¿La portada puede ser la imagen para compartir?

Sí, si la composición funciona y la web indica el archivo correcto. Una versión separada ayuda si la portada es vertical, cuadrada o tiene texto ilegible en pequeño.

¿Cada página necesita una imagen propia?

No necesariamente. Una imagen general sirve de alternativa. Las propias ayudan especialmente en guías, productos y eventos compartidos cuyo tema no se entiende solo con el logo.

¿Por qué la imagen nueva no aparece en una publicación antigua?

El servicio puede conservar la vista previa original. Comprueba un borrador nuevo y sus instrucciones de actualización. Cambiar el archivo de la web no garantiza que cambien mensajes ya enviados.

¿Un botón Compartir añade la imagen a la vista previa?

No. Facilita enviar el enlace, pero no reemplaza los datos de la página. El servicio receptor decide si carga y muestra una tarjeta. Compartir directamente el archivo de imagen es otra función.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)