Toma el control de tus fragmentos sociales

Las señales sociales son cada vez más importantes en el mundo del SEO. Las acciones de Facebook, Tweets y Google + 1 han alcanzado tal volumen que tienen el potencial de ser una gran medida de la calidad del contenido. Es por esto que los motores de búsqueda han comenzado a considerar estas señales cuando clasifican las páginas web..

Las señales sociales aún no son tan importantes como otros factores de clasificación, como el perfil de enlace de un sitio y el contenido, pero sin duda serán un factor de clasificación esencial en el futuro..

Para maximizar la visibilidad de nuestro contenido, necesitamos controlar cómo se ve como un fragmento social. Un buen fragmento social tiene el potencial de atraer a muchos visitantes adicionales a nuestros sitios web. Veamos cómo podemos crear uno de estos..


Fragmentos sociales?

Un fragmento social es un vista previa de una página que se usa cuando compartes esa página en las redes sociales. En lugar de un simple enlace, los usuarios obtienen información adicional sobre el contenido detrás del enlace.

Por ejemplo, si queremos compartir el artículo sobre paginación de Webdesigntuts + en Facebook, vemos el siguiente fragmento social:

Un fragmento social en Google+ se verá más o menos igual:

Entonces, en lugar de un enlace básico, los usuarios ven mucha más información sobre la página. Podemos ver una imagen de vista previa, el título e incluso una breve descripción. Esto nos facilita decidir si vale la pena hacer clic en el enlace..

Estos fragmentos sociales son generado automáticamente. La persona que comparte la página web no tiene control sobre la imagen, el título y la descripción que se está utilizando. Estos solo pueden ser modificados por el mismo webmaster (aprenderemos cómo hacerlo más adelante en el artículo).


¿Por qué los fragmentos sociales son importantes?

El fragmento social de una página es algo que muchos webmasters olvidan, lo que podría causar problemas de visualización en las redes sociales. Si el marcado de fragmento de código social no está presente, un fragmento de código social a menudo se mostrará incorrectamente.

El objetivo de los fragmentos sociales es persuadir a la gente a hacer clic en ellos. Cuanta más gente haga clic en él, más visitantes recibirá la página subyacente. Por eso debes tratarlos como un anuncio gratuito. Un anuncio equivalente debe tener una fotografía llamativa, un título digno de hacer clic y una descripción interesante. Un fragmento social debe tener los mismos elementos..

Si uno de estos elementos no funciona correctamente, por ejemplo, se muestra una miniatura incorrecta, puede costarle a los visitantes y clientes.

Este es un ejemplo de una página que no tiene Implementamos fragmentos de redes sociales. Compartí una página de 'De Bakboetiek', una tienda que se especializa en equipos para hornear. También tienen una tienda web donde venden productos como este molde pop cake, pero como puede ver, este fragmento social no es particularmente útil ...

En lugar de mostrar una miniatura del molde de la torta y una breve descripción, solo podemos ver el logotipo y el título incorrecto. ¡Ni siquiera hay una descripción! ¿Cómo se supone que este fragmento social lleve a los visitantes de Facebook a su sitio web??


El protocolo de gráfico abierto

Los fragmentos sociales se basan en el protocolo de gráfico abierto. Se utiliza para convertir una página web en un objeto rico en el gráfico social. Gracias a esto, los medios sociales como Facebook, Google+ y Twitter pueden identificar elementos importantes de una página.

El protocolo OG se basa en RDFa (¿recuerda RDFa de nuestro artículo de datos estructurados?). Podemos implementarlo utilizando adicionales. etiquetas en el de una pagina.

Se puede encontrar más información sobre el Open Graph Protocol en ogp.me.


Creando un fragmento social

Ahora es el momento de tomar control de nuestro propio fragmento social. Hay varios elementos que se pueden modificar: la miniatura, el título, la descripción, la URL y el tipo de contenido..

Nota: Facebook y Google+ utilizan el siguiente marcado. Twitter usa diferentes etiquetas meta, las cuales discutiremos más adelante..

Miniatura

Este es quizás el elemento más importante de un fragmento social. Es la parte que la mayoría de los usuarios verán primero, así que asegúrese de usar una imagen clara para esto.

Sugiero usar una imagen cuadrada de al menos 200 x 200 píxeles. Si la imagen es demasiado pequeña, es posible que no se muestre o que se use otra imagen de la página (en algunos casos, la imagen de un anuncio ...).

Podemos especificar la ubicación de la miniatura con este marcado:

Título

Este es el título de tu fragmento social. Es el segundo elemento más importante, junto a la miniatura. Su título debe persuadir al usuario para que haga clic en él. También actúa como texto de anclaje para el enlace a la página..

El código para el título se ve así:

Descripción

Escriba un breve resumen de la página que se puede usar como descripción. A menudo utilizo el texto de mi meta descripción para un fragmento social, pero puedes elegir lo que quieras. Solo asegúrate de que le haga cosquillas a la curiosidad del lector y que haga clic en el enlace..

Tipo de contenido

Si desea especificar el contenido de la página, puede utilizar el og: tipo etiqueta. Si se omite esta etiqueta, la página se categorizará como 'sitio web'. Otros tipos de contenido que se pueden usar son música, video, artículo, libro y perfil. Más información se puede encontrar en la página de objetos incorporados en Facebook.

URL

Esta es la URL a la que se enviará el usuario cuando haga clic en el título. Añade la URL canónica a esta etiqueta:

Si quieres seguimiento del tráfico proveniente de las redes sociales, puede agregar parámetros de seguimiento que permiten que la información se muestre en Google Analytics. Utilice el creador de URL de Google para esto.

Solo necesita agregar tres parámetros: Origen, Medio y Campaña.

  • Fuente: facebook
  • Medio: social
  • Campaña: un nombre / id único

La URL final se verá algo como esto: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Tarjetas de Twitter

Twitter utiliza un marcado diferente para crear tarjetas de Twitter. Las tarjetas de Twitter le permiten adjuntar medios a tweets que enlazan con su contenido.

Se pueden utilizar tres tipos de medios:

  • resumen: similar a un fragmento social en Facebook y Google+
  • foto: una tarjeta fotográfica
  • jugador: una tarjeta de reproductor de medios

Vamos a discutir cada tarjeta de Twitter individualmente:

Resumen

La Tarjeta de resumen es una tarjeta de Twitter que se parece a los fragmentos de redes sociales que vemos en Facebook y Google+. Se puede utilizar para varios tipos de contenido (publicaciones de blog, artículos, productos ...). Una tarjeta de resumen puede verse así:

     

En primer lugar, necesitamos identificar el tipo de tarjeta de Twitter a través de twitter: tarjeta etiqueta (en este caso un resumen). La URL debe ser la URL canónica de la página. los twitter: titulo La etiqueta no debe tener más de 70 caracteres. La descripción por otro lado está limitada a 200 caracteres. La imagen se utiliza como miniatura y debe ser cuadrada. Las imágenes menores de 60 x 60 px no se mostrarán. Finalmente, el creador La etiqueta puede ser usada para dar crédito al autor..

Foto

Hay varios elementos de una Tarjeta fotográfica que también se utilizan en la Tarjeta de resumen. La principal diferencia entre los dos es el estilo del tweet. La tarjeta fotográfica pone la imagen al frente y al centro en el tweet..

Twitter usa el twitter: imagen URL de la foto. Si esta imagen es más pequeña que 280 x 150 px, no se mostrará. Puede especificar un ancho y alto de la imagen para ayudar a Twitter a preservar la relación de aspecto de la imagen al cambiar el tamaño.

Una tarjeta fotográfica podría verse así:

      

los twitter: tarjeta y twitter: imagen Se requieren etiquetas, todo lo demás es opcional..

Jugador

La tarjeta del jugador se utiliza para audio y video. El archivo multimedia está incrustado en el tweet a través de un iframe. La desventaja de una tarjeta de jugador es que debe ser aprobado por Twitter!

Si desea usar una tarjeta de jugador para su aprobación, agregue el siguiente código a su página:

       

los twitter: tarjeta La etiqueta se utiliza para identificar la tarjeta de jugador. URL, título, imagen y descripción son similares a otras cartas de jugador. los twitter: jugador La etiqueta contiene un enlace HTTPS al reproductor iframe. Puede especificar el ancho y la altura del iframe a través del twitter: jugador: ancho y twitter: jugador: altura etiquetas.

Un par de otros requisitos para las tarjetas de jugador:

  • Use una URL de HTTPS (el video debe ser servido a través de HTTPS también)
  • Los controles de parada o pausa son obligatorios.
  • No se permite la reproducción automática
  • El contenido no debe requerir que inicies sesión.

Las tarjetas de Twitter y el gráfico abierto

Twitter primero busca twitter: tarjeta etiquetas en su sitio web, pero si no puede encontrar ninguna, se remonta al marcador Open Graph. Esto significa que no es necesario crear etiquetas duplicadas. Simplemente puede complementar sus etiquetas Open Graph existentes con etiquetas de tarjetas de twitter.

Twitter ve las siguientes etiquetas como similares (marca de twitter a la izquierda, OG a la derecha)

  • twitter: ul = og: url
  • twitter: description = og: description
  • twitter: titulo = og: titulo
  • twitter: imagen = og: imagen
  • Twitter: imagen: ancho = og: imagen: ancho
  • twitter: imagen: altura = og.image.height

Conclusión

Los motores de búsqueda invierten cada vez más tiempo en señales sociales porque son un gran indicador de contenido de calidad. Para mejorar la posibilidad de que alguien haga clic en un fragmento social, debemos tomar el control de su contenido. Podemos hacerlo a través del protocolo Open Graph para Facebook y Google+. Para Twitter necesitamos complementar estas etiquetas Open Graph con código específico de Twitter.


Recursos utiles

Para ayudarlo con la implementación de fragmentos sociales, he recopilado varias herramientas que podrían ser útiles:

  • Google+ Snippet Creator: use esta herramienta para generar un código HTML para un fragmento social. Simplemente pegue el código en la sección de encabezado de su página y listo..
  • Facebook Debugger: verifique la información del gráfico abierto que se raspó de su página.
  • Herramienta de prueba Rich Snippet: se puede utilizar para verificar la información de su fragmento social.