Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Cuando compartes un enlace en Facebook, la red social utiliza las etiquetas Open Graph (og:meta) para determinar qué imagen, título y descripción se mostrarán en la vista previa. En esta lección aprenderás a configurar estos metadatos en tu página web para asegurarte de que la imagen correcta aparezca al publicar en Facebook.
🔹 Código para definir la imagen destacada
Para especificar qué imagen se mostrará en Facebook, debes agregar las siguientes etiquetas dentro del <head> de tu archivo index.html:
<meta property="og:image" content="https://pablomonteserin.com/juggling/statics/images/c.png" />
<meta property="og:image:width" content="768">
<meta property="og:image:height" content="948">
<meta property="og:image:alt" content="elvis">
<meta property="og:image:type" content="image/png">
<meta property="og:description" content="Por fin la aplicación para aprender a hacer malabares que estabas buscando">
<meta property="og:title" content="Malabares con Monteserín">✅ Explicación de las etiquetas
🔹 og:image → Especifica la URL de la imagen que se mostrará al compartir el enlace. 📸 Debe ser una ruta absoluta (con el dominio incluido).
🔹 og:image:width y og:image:height → Indican el tamaño de la imagen en píxeles. Facebook recomienda 1200x630px para una vista óptima.
🔹 og:image:alt → Describe el contenido de la imagen para accesibilidad.
🔹 og:image:type → Define el tipo de archivo de imagen (image/png, image/jpeg, etc.).
🔹 og:description → Muestra una breve descripción en la vista previa del enlace.
🔹 og:title → Especifica el título que aparecerá al compartir la página.
🚀 Comprobando que todo funciona
Después de añadir estas etiquetas, puedes probar cómo se verá tu enlace en Facebook con la herramienta:
📌 Pasos para probar:
- Ingresa la URL de tu página web en el debugger.
- Haz clic en «Scrape Again» para actualizar la vista previa.
- Verifica que la imagen y los datos se muestran correctamente.