Sep 9, 2017
Urls más atractivas para redes sociales con Facebook Open Graph y Twitter cards
Muestra tus URL de una forma más atractiva en las redes sociales.
Introducción: Las tarjetas y etiquetas de Open Graph no son más que un pequeño marcado que utilizaremos en nuestro sitio web para poder mostrar de una manera más atractiva y enriquecida nuestras URL al compartirlas en las redes sociales.
Requisitos:
1. Conocimientos básicos de HTML.
2. Tener una web o proyecto para practicar.
3. Conocimientos básicos para poder subir nuestra web al hosting.
4. Una cuenta en facebook y twitter para ver los resultados.
5. Seguir las instrucciones.
Facebook Open Graph:
- Ingresamos a la siguiente link de Facebook Developers
https://developers.facebook.com/docs/sharing/webmasters - 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.
Si se fijan en la imagen anterior he puesto una descripción de cada etiqueta, también en el link de Facebook Developers están descritas con diferentes ejemplos de uso como también hay referencias de las buenas prácticas a utilizar, así que vamos una por una.
Etiqueta url: Ingresamos la URL canónica del post, blog o url; para quien no sepa qué es una URL canónica se refiere a las URL no representativas, sin variables de sesión, parámetros que representen al usuario ni contadores.
URL: http://www.kevinbueno.me/producto?session_id=xyz
URL canónica: http://www.kevinbueno.me/producto
Etiqueta type: Tipo de elementos multimedia del contenido. Esta etiqueta influye en cómo se muestra el contenido en la sección de noticias, el valor por defecto es Website pero hay diferentes tipos como article, book, music.album y más aquí.
Etiqueta title: No es más que el título que llevara nuestro post.
Etiqueta description: Una breve descripción con un tamaño recomendado de dos o cuatro oraciones.
Etiqueta image: Esta es la imagen que llevara nuestra publicación, como recomendación deben tener entre 600 × 315 píxeles y 1.200 × 630 píxeles de máximo, además de un peso máximo de 8 MB, para más información clic aquí.
3. No queda de otra que llenar el contenido de nuestras etiquetas, yo usaré una imagen de 1200 x 630 para que esté optimizado en dispositivos de gran resolución.
4. Una vez llenamos el contenido podemos subimos nuestro archivo html a nuestro hosting e ingresamos al depurador de contenido compartido e ingresamos nuestra URL a depurar, en caso de tener algún error nos mostrará advertencias.
5. Una vez que ya hemos solucionado los problemas procedemos a compartir nuestra url en Facebook.
Antes:
Después:
Twitter Cards:
Bien, ya hemos llegado hasta aquí, así que no perdamos los ánimos, si estas aburrido toma un pequeño descanso como lo acabo de hacer y regresa al trabajo.
- 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. - Yo he elegido la Tarjeta de Resumen con Imagen grande ya que es más bonita, solo por eso.
3. Así que copiamos el código de ejemplo en nuestro HEAD de nuestro Html y procedemos a llenar los campos, estos campos son muy similares a los de Opengraph así que no explicaré de nuevo, si tienes algún problema, comenta o lee la documentación.
4. Luego de completar los campos vamos al validador
5. Procedemos a tuitear.
Antes:
Después:
Conclusión: No es mi mejor foto pero era la que tenía a la mano, espero que le haya servido este tutorial, si tienen dudas o una manera de hacerlo más fácil y rápido, no duden en comentar o enviarme un mensaje.
Gracias
