15 49.0138 8.38624 1 0 4000 1 https://www.alexmedina.net 300 true 0

Indicar a Facebook que imagen mostrar cuando se comparte la url

0 Comments

En ocasiones compartimos el contenido de nuestra web en redes sociales como Facebook. Cuando lo hacemos queremos que aparezca la imagen principal, el texto de la entrada y el título de la página, pero en ocasiones esto no es así.

Para que aparezca el contenido en Facebook que queremos al compartir la URL debemos indicárselo de una forma muy sencilla, mediante el marcado Open Gragh. Son etiquetas que se introducen en la cabecera del html y es la manera más sencilla de introducir información de la página para Facebook.

Captura

Así algunas etiquetas son para:

  • Enlaces de páginas web.
  • Vídeos.
  • Fotos que estén en páginas web.
  • Audios.

Esto son los meta tags (og) básicos a poner en el head de nuestras páginas web:

  • og:title: Título del contenido a compartir.
  • og:type: Tipo de contenido. En esta URL tenéis los direntes tipos. (Objetct Types)
  • og:image: Foto que queremos mostrar en Facebook.
  • og:url: URL del post o contenido.

Metas opcionales para complementar con el contenido:

  • og:description: Texto descriptivo de contenido compartido.
  • og:locale: Idioma del contenido, en mi caso “es_ES” –> Lenguaje_Territorio.
  • og:site_name: Nombre de la web de la que compartimos el contenido

Meta tags específicos para imágenes:

  • og:image:url: mismo valor que og:image.
  • og:image:secure_url: Para rutas de imágenes con protocolo HTTPS.
  • og:image:type: Tipo del formato (MIME TYPES) de la imagen, por ejemplo “image/jpeg”.
  • og:image:width: Anchura en pixels de la imagen.
  • og:image:height: Altura en pixels de la imagen.

Meta tags específicos para vídeos:

  • og:video:url: URL del archivo del vídeo. Por ejemplo: www.dominio.com/video.avi
  • og:video:url: mismo valor que og:video.
  • og:video:secure_url: Para rutas de archivos de vídeos con protocolo HTTPS.
  • og:video:type: Tipo del formato (MIME TYPES) del vídeo, por ejemplo “video/avi”.
  • og:video:width: Anchura en pixels del vídeo.
  • og:video:height: Altura en pixels del vídeo.

Meta tags específicos para audio:

  • og:audio: URL del archivo. Por ejemplo www.dominio.com/audio.mp3
  • og:audio:secure_url: Para rutas de audios con protocolo HTTPS.
  • og:audio:type: Tipo de formato (MIME TYPES) del audio, por ejemplo “audio/mpeg3″.
Previous Post
Habilitar la ejecución de scripts para Powershell
Next Post
Linq to XML, .Descendants() no devuelve resultados

0 Comments

Leave a Reply

SOBRE MÍ

Afortunado de trabajar en lo que me gusta, aprendiendo cada día cosas nuevas y ayudando a crear proyectos.
Conocimientos en diversas tecnologías y experiencia demostrable.
¿Nos ponemos manos a la obra?

Mis Apuntes