Cómo conseguir que la vista previa en miniatura de tu sitio web se muestre en las comparticiones de Facebook

Por contributor

Paso 1

Antes de pasar por cada una de las páginas de tu sitio añadiendo código y creando imágenes, comprueba que no tengas ya una buena imagen con "Vista previa para compartir". Accede a Facebook, intenta compartir un enlace y mira lo que aparece. Si no consigues una imagen (o al menos una que te guste), continúa.


Paso 2

Encuentra una imagen que quieras utilizar para representar tu sitio. Puedes utilizar un logotipo, una imagen del sitio, o incluso una captura de pantalla. Asumiendo que sólo quieres que la gente conozca el buen aspecto de tu página en sus navegadores, toma una captura de pantalla de tu sitio web. Puedes hacer esto utilizando el botón de imprimir pantalla, Shift+Comando+3 en un Mac, o algún software de captura de pantallas gratuito.


Paso 3

Antes de cargar la captura de pantalla, utiliza un software de imagen para cortarla y editarla de la forma que quieras que aparezca en el sitio. Para cargarla, yo la reduciría a 250 píxeles de anchura o menos, y la comprimiría.


Paso 4

Carga la imagen. Lo mejor es que la cargues en el sitio web real para el que estás generando la vista previa. Aunque puede funcionar con otro servicio como Flickr o Photobucket, a veces no cargará una vista previa de la imagen del sitio.


Paso 5

Añade una etiqueta de metadatos del origen de la imagen en la cabecera de tu documento. La etiqueta tendrá un aspecto parecido a: < link rel="image_src" href="http://site.com/image.jpg" /> (eliminar el espacio entre < y el enlace). Asegúrate de cambiar el href al lugar en el que está alojada la imagen, usando la dirección URL completa. Para poder conseguir una "Vista previa para compartir" y otras funciones para leer la imagen correctamente, necesitas asegurarte de que está entre las etiquetas de cabecera en tu html. También ayuda tener etiquetas de metadatos "title" (Título) y "description" (descripción).