• Saltar al contenido principal
  • Saltar a la barra lateral primaria
  • Saltar al pie de página

Webinoly

Optimized WebServer

  • Instalación
    • Guía rápida
    • Documentación
      • Httpauth
      • Log
      • Site
      • Stack
      • Webinoly
    • Changelog
  • Comunidad
    • Comunidad y Foro
    • Preguntas Frecuentes
    • Uso de la Marca
    • Github
  • Tutoriales
  • Contribuir
Inicio » Tutoriales » Open Graph: Facebook & Twitter

Open Graph: Facebook & Twitter

Por: Cristhian Martínez Ochoa

El protocolo Open Graph nos permite enriquecer la manera en la que un sitio web interactúa con Facebook y de manera similar con Twitter. Personalizar el “snippet” que se muestra al compartir un enlace en redes sociales es una manera básica y sencilla de implementar este esquema en tu sitio web, la imagen miniatura, el título y la descripción que aparecen y serán mostrados a los usuarios y además será replicado de manera viral a través de la sección de noticias o “timeline” generados en la red social seguramente será determinante para la imagen y estrategia de marketing de tu negocio en estos medios.

Sitio oficial de OpenGraph: http://ogp.me

Para implementar este protocolo basta con incluir las etiquetas META o Metatags que describiré a continuación.

og:title

Es el título que aparecerá en tu objeto, regularmente es igual o similar al título de la pagina.

<meta property="og:title" content="Título de la página" />

og:type

Se define el tipo de objeto, los más comunes por su uso son: website y article.

Click aquí para ver la lista completa de tipos de objetos soportados por facebook.

<meta property="og:type" content="website" />

og:url

Indica la URL de tu sitio.

<meta property="og:url" content="http://www.midominio.com/" />

Se recomienda indicar la URL canonical.

og:image

Define la imagen miniatura que se mostrará junto al enlace. Si no indicamos la imagen, Facebook elegirá de manera aleatoria entre las imágenes del sitio.

<meta property="og:image" content="http://www.midominio.com/logo.jpg" />

Con el fin de optimizar la visualización en dispositivos de mayor resolución se recomienda utilizar una imagen de al menos 1200x630px y el límite es de 8Mb por imagen.

Facebook Open Graph

Si la imagen es menor a 600×315 pixeles la publicación se mostrará con un tamaño mucho menor y el tamaño mínimo admitido es de 200×200 pixeles.

Facebook Open Graph example

Se recomienda usar imagenes con una relación de aspecto 1,91:1 o lo mas cercano posible, con el fin de mostrar imagenes completas y sin recortes no deseados.

og:site_name

Aquí especificamos el nombre del sitio con el que aparece el enlace.

<meta property="og:site_name" content="Nombre del sitio" />

og:description

Permite personalizar el texto de la descripción que se mostrará en el enlace.

<meta property="og:description" content="Descripción" />

og:locale

Indica el idioma de contenido de tu sitio o aplicación. Es recomendable verificar el listado de lenguajes soportados por Facebook.

<meta property="og:locale" content="es_LA" />

og:locale:alternate

Indica que el contenido de tu sitio o aplicación está disponible en otros idiomas, para el caso de sitios que cuenten con versiones en distintas traducciones. En la mayoría de los casos debiera ir acompañado de la etiqueta “HREFLANG” como se muestra en el ejemplo completo casi al final de este artículo.

<meta property="og:locale:alternate" content="en_US" />

fb:admins

Permite asignar los ID de los usuarios que designaremos como administradores del sitio. El uso más común de esta etiqueta es para llevar estadísticas del sitio mediante Facebook Insigths. Si no conocemos este ID, ahí mismo podemos obtenerlo, basta con loguearnos y seguir los pasos, es bastante sencillo.

<meta property="fb:admins" content="ID de Facebook admin" />

fb:app_id

Para especificar el ID en caso de que hayamos creado alguna aplicación sobre la plataforma de facebook.

<meta property="fb:app_id" content="ID de la aplicación en Facebook" />

Ejemplo

<html xmlns:fb="http://ogp.me/ns/fb#" prefix="og: http://ogp.me/ns#"/> <head>
  <meta property='fb:admins' content='1405030282'/>
  <meta property='og:title' content='Titulo de la página'/>
  <meta property='og:description' content='Descripción'/>
  <meta property="og:locale" content="es_LA" />
  <meta property="og:locale:alternate" content="en_US" />
  <meta property='og:url' content='http://midominio.com/'/>
  <meta property='og:site_name' content='Nombre del sitio'/>
  <meta property='og:type' content='website'/>
  <meta property='og:image' content='http://midominio.com/logo.png'/>
</head>

Facebook Linter (Debbuger for Open Graph)

Es una herramienta muy útil para comprobar la correcta implementación de las etiquetas en tu sitio web, visítalo y podrás ver como Facebook interpreta los metatags Open Graph de tu sitio y así poder hacer las correcciones necesarias.

  • https://developers.facebook.com/tools/debug

Otro uso de esta herramienta es para refrescar la imagen de los datos de tu sitio almacenada en Facebook.

Facebook Social Plugins

Uno de los usos más comunes del protocolo Open Graph es su habilidad para conectar tu sitio con los Social Plugins de Facebook, por ejemplo incluir el botón “Like” o “Compartir” directamente en tu sitio. Además, te permite insertar publicaciones o comentar publicaciones desde cualquier página de tu web.

Te dejo los links con la información completa de todas las posibilidades y funcionalidades que pudieras estar implementando en tus sitios.

  • https://developers.facebook.com/docs/sharing/overview
  • https://developers.facebook.com/docs/plugins

Twitter Cards

Twitter Cards le permite a los usuarios expandir los Tweets y previsualizar los enlaces compartidos; muy similar a lo que hace Facebook con OpenGraph. (De hecho Twitter optó por usar las etiquetas de Facebook cuando las propias no son definidas).

De esta manera se nos permite personalizar la manera en que se visualiza nuestro sitio al ser compartido via Twitter.

OpenGraph protocol Twitter

Para definir estos “Cards” basta con incluir algunos metatags en el head de nuestro código.

Twitter:card – Define el tipo de “Card” a implementar (summary, summary_large_image, app o player).
Twitter:url – URL canonical del contenido de la “Card”.
Twitter:title – El titulo como aparecera en la “Card”.
Twitter:description – Descripcion del contenido (maximo 200 caracteres).
Twitter:image – URL de la imagen que representara el contenido.
Twittter:site – (opcional) @username del sitio web.
Twitter:creator – (opcional) – @username del creador o autor del contenido

Ejemplo.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Organization">
<meta name="twitter:creator" content="@Author">
<meta name='twitter:image' content='http://midominio.com/logo.png'>
<meta name="twitter:title" content="Titulo de la página">
<meta name="twitter:description" content="Descripción de la página">

Ya te habrás dado cuenta que la manera de implementar estas Twitter Cards es muy similar a las etiquetas Open Graph y esto es porque efectivamente está basado en dicho protocolo. Si actualmente utilizas OG en tu sitio no es necesario duplicar el contenido de las meta etiquetas, si Twitter no encuentra sus etiquetas definidas, tomara la información de las etiquetas OG.

Ejemplo completo de la implementación de Open Graph.

<html lang="es-MX" xmlns:fb="http://ogp.me/ns/fb#" prefix="og: http://ogp.me/ns#"/>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Titulo de la página</title>
<meta name="description" content="Descripción de la página"/>
<link rel="canonical" href="http://mydomain.com/pagina" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<!-- OpenGraph metadata-->
<meta property="og:locale" content="es_LA" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Titulo de la página" />
<meta property="og:description" content="Tu descripción" />
<meta property="og:url" content="http://mydomain.com/pagina" />
<meta property="og:site_name" content="Nombre del sitio" />
<meta property="og:image" content="http://mydomain.com/image.png" />
<meta property='fb:admins' content='FB-AppID'/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Tu descripción"/>
<meta name="twitter:title" content="Titulo de la página"/>
<meta name="twitter:site" content="@Organization"/>
<meta name="twitter:creator" content="@Author"/>
<!-- Favicon -->
<link rel="icon" href="http://mydomain.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://mydomain.com/favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://mydomain.com/favicon-180x180.png">
<meta name="msapplication-TileImage" content="http://mydomain.com/favicon-270x270.png">
<!-- Multi-language support -->
<link rel="alternate" href="http://mydomain.com" hreflang="es" />
<link rel="alternate" href="http://mydomain.com/en/" hreflang="en" />
<meta property="og:locale:alternate" content="en_US" />
<!-- Stylesheet CSS & Fonts-->
<!-- Google Analytics Code -->
</head>
<body>
<!-- HTML Code -->
</body>
</html>
view rawmypage.htmlhosted with ❤ by GitHub

Es muy fácil implementar esta nueva funcionalidad de Twitter en tu sitio, te invito a que lo pruebes y aproveches los beneficios de mejorar y personalizar la imagen de tu sitio al ser compartido en Twitter.

  1. Selecciona el tipo de Card que mejor se adapte a tu sitio.
  2. Agrega las etiquetas Meta (metatags) correspondientes a tu sitio.
  3. Valida tu código en la herramienta de validación de Twitter Cards para recibir la aprobación.
  4. Publica un Tweet con una de tus urls y prueba que esten funcionando las Cards.

Te dejo el siguiente enlace para que consultes la información completa de la implementación de los diferentes tipos de “Cards”. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

Para mas información sobre el tema de Etiquetas Meta o Metatags – Click aqui…

Finalmente te invito a seguirnos en @QROkes – Si quieres ver funcionando las Twitter Cards basta con que compartas cualquiera de nuestras publicaciones de este blog en tu cuenta de Twitter.

Etiquetado con: SEO

Genesis Theme Framework for WordPress

Webinoly

Our Optimized LEMP Web Server is a powerful set of commands for doing just about anything you could wish.

With Webinoly you can set up your NGINX web server in just one step.

Interacciones del lector

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Barra lateral primaria

Newsletter

¡Se el primero en enterarte cuando una nueva actualización está disponible!

Documentación

  • Instalación
  • Documentación
    • Autenticación HTTP
    • Logs en Tiempo-Real
    • Paquetes Instalados
    • Administrar Sitios
    • Configuración Webinoly
  • Preguntas Frecuentes
  • API Interna / Eventos
  • Guía de Uso de la Marca
  • Newsletter

Patrocinado

Patrocinador del Mes de Webinoly
¿Quieres ser nuestro patrocinador?

¡Agradecimientos!

Donadores recurrentes, durante tres meses o más consecutivos.

  • Oliver Bentz
  • Yungke Li
  • Tonny Chiu
  • Tim Marringa
  • Mohammed Abo
  • Giorgos Sarigiannidis
  • SeyntJim
  • Jin Liang Tsai

Footer

Documentación

Tu servidor Web LEMP Optimizado en un solo paso. Por favor, lee la guía de instalación y configuración rápida y en menos de 5 minutos tu servidor estará listo para servir tu contenido.

Lista de Comandos:

HttpAuth · Log · Site · Stack · Webinoly

Paypal Donations - Buy me a beer

PayPal · GitHub Sponsors · Bitcoin

Si te ha gustado Webinoly puedes invitarme una cerveza o un cafe haciendo una pequeña donación como muestra de tu apoyo.

Contacto

  • Facebook
  • GitHub
  • Twitter

Si tienes alguna duda o pregunta sobre Webinoly, por favor consulta la sección de Preguntas Frecuentes o usa nuestro Foro de Soporte.

De igual manera es bienvenido cualquier comentario o sugerencia.

© Copyright 2017-2021 by QROkes
Powered by: WordPress · Genesis Framework · Webinoly
Condiciones de Uso | Política de Privacidad | Aviso Legal