Urls más atractivas para redes sociales con Facebook Open Graph y Twitter cards

Facebook Open Graph:

Ejemplo de contenido con formato de etiquetas de Open Graph
  1. Ingresamos a la siguiente link de Facebook Developers
    https://developers.facebook.com/docs/sharing/webmasters
  2. Abrimos nuestro proyecto HTML, buscamos el código de ejemplo que aparece en el link anterior en el apartado Marcado de ejemplo, luego lo copiamos y pegamos en el HEAD del documento.
Ejemplo con sus respectivas descripciones
Código de ejemplo
Ejemplo depurador de contenido compartido
Antes de usar Opengraph
Después de usar Opengraph

Twitter Cards:

Ejemplo de un tweet usando Twitrer Cards
  1. Como en Facebook ingresamos al siguiente link de Twitter Developers, recordemos que hay diferentes tipos de Cards que llamaré tarjetas de aquí en adelante, así que veamos los tipos:
    1.1 Resumen
    1.2 Resumen con imagen grande
    1.3 Tarjeta para Apps
    1.4 Tarjeta con reproductor para contenidos multimedia como vídeo o audio.
  2. Yo he elegido la Tarjeta de Resumen con Imagen grande ya que es más bonita, solo por eso.
Tipos de Tarjetas de Twitter
Ejemplo de código de la tarjeta
Validador twitter cards
Antes de usar las Tarjetas
Usando la tweet Card

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store