Las metaetiquetas esenciales para las redes sociales
Hoy en día, casi todos los sitios web animan a los visitantes a compartir sus páginas en las redes sociales. Todos hemos visto los omnipresentes iconos de Facebook y Twitter, entre otros, pidiendo que se haga clic en ellos. Esto no es una sorpresa, ya que compartir a través de las redes sociales, la encarnación en Internet del boca a boca, es una de las formas más eficaces para que las empresas y los individuos se den a conocer.
Cuando los usuarios deciden compartir estos enlaces, es tarea del desarrollador web asegurarse de que las páginas web asociadas estén debidamente preparadas, que es lo que veremos ahora. Facebook y Twitter son, con diferencia, las plataformas de medios sociales más populares, así que vamos a centrarnos en esas dos.
Compartir en Facebook y Twitter
Facebook ofrece a los desarrolladores varias opciones sobre cómo aparece una página web compartida en su línea de tiempo en función del contenido del sitio web. A menos que se especifique lo contrario, toda página web aparece por defecto en el tipo llamado, apropiadamente, «página web», que es el ejemplo que utilizaremos.
Digamos que alguien ha compartido la página principal de una empresa de viajes ficticia: Facebook la muestra así:
Twitter, además, tiene múltiples formas de formatear las páginas web compartidas que aparecen en su feed, pero vamos a ver la que es bastante similar al ejemplo anterior de Facebook, que Twitter llama «Tarjeta de resumen con imagen grande»:
Como podemos ver, cada una presenta múltiples atributos de la página web compartida:
- una imagen destacada y un título
- una descripción
- el nombre del dominio
Propiedad <meta> Etiquetas
¿Cómo especificamos estos atributos? Con las etiquetas <meta>. Cuando se comparte un enlace, tanto Facebook como Twitter raspan la página web asociada y leen sus etiquetas <meta> para mostrar la información adecuada.
Facebook utiliza las etiquetas <meta> aprovechando el protocolo Open Graph, un sistema de clasificación de páginas web que va más allá de las etiquetas <meta> ya definidas en HTML5. La lista completa de etiquetas <meta> disponibles se puede encontrar en el sitio web de Open Graph. Hay tantas entre las que elegir que puede resultar algo intimidante, pero en realidad solo son necesarias cuatro:
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">Twitter tiene sus propias etiquetas <meta> que son similares al protocolo Open Graph, pero utiliza el prefijo «twitter» en lugar de «og». Al igual que en el caso de Facebook, sólo se requieren unas pocas. También se especifica el tipo de formato de visualización que estamos solicitando a Twitter:
<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">Tanto Facebook como Twitter ofrecen directrices sobre cómo utilizar las etiquetas <meta> anteriores. Son bastante similares entre sí, aunque su interpretación puede ser algo subjetiva. Ten en cuenta que, a nuestros efectos, Facebook se refiere a la página web compartida cuando utiliza el término «objeto»:
| Título | El título, titular o nombre del objeto. | Un título conciso para el contenido relacionado. |
| Descripción | Una breve descripción o resumen del objeto. | Una descripción que resuma de forma concisa el contenido según lo apropiado para su presentación dentro de un Tweet. No debe reutilizar el título como descripción ni utilizar este campo para describir los servicios generales que ofrece el sitio web. |
| Imagen | La URL de la imagen de su objeto. Debe tener al menos 600×315 píxeles, pero es preferible 1200×630 o más (hasta 5MB). Manténgase cerca de una relación de aspecto de 1,91:1 para evitar el recorte. | Una URL a una imagen única que represente el contenido de la página. No debe utilizar una imagen genérica como el logotipo de su sitio web, la foto del autor u otra imagen que abarque varias páginas. Las imágenes para esta Tarjeta deben tener al menos 280px de ancho, y al menos 150px de alto. La imagen debe tener un tamaño inferior a 1MB. |
| URL | La URL canónica de su página. Esta debe ser la URL sin decorar, sin variables de sesión, parámetros de identificación del usuario o contadores. |
Dado que estas etiquetas propietarias <meta> están, al final, refiriéndose a los mismos elementos, sería ideal si hubiera de alguna manera una forma de reconciliar los dos. Afortunadamente, la hay.
Conciliar las etiquetas <meta>
No hay nada malo en tener varias etiquetas <meta> que parezcan redundantes. El exceso de información nunca ha hecho daño a nadie, salvo añadiendo unos bytes extra al archivo HTML.
Pero para nuestros propósitos, y en aras de la brevedad, podemos aprovechar el hecho de que Twitter nos permite sustituir las etiquetas Open Graph <meta> por las suyas propias. Al final, salvo la necesidad de especificar un formato de visualización, no se necesita ninguna de las etiquetas personalizadas de Twitter <meta>. Esto nos da lo siguiente, que podría considerarse el mínimo de etiquetas <meta> necesarias para que una página web sea susceptible de ser compartida en las redes sociales:
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">Reconciliar las directrices para la imagen es sencillo: seguir la recomendación de Facebook de una dimensión mínima de 1200×630 píxeles y una relación de aspecto de 1.91:1, pero cumplir con el requisito de tamaño de archivo de Twitter de menos de 1MB.
Validar <meta> Etiquetas
Si hay dudas sobre la legitimidad de la paridad de estas cinco etiquetas, podemos utilizar el útil Facebook Sharing Debugger y Twitter Card Validator. Ambas herramientas rastrearán cualquier página web alojada en un servidor público en busca de etiquetas <meta> relevantes y mostrarán cómo se vería cuando se compartiera. También se enumeran los errores y se ofrecen sugerencias. Entonces, ¿cómo nos fue con nuestro ejemplo particular? Twitter parece estar bien con las cosas, pero Facebook, en cambio, lista un elemento como advertencia:
Esto proporciona una perfecto para hablar de…
Análisis de redes sociales
Lo que Facebook está indicando es que si vas a utilizar su herramienta de análisis, que llaman Domain Insights, debes proporcionar el número de identificación único asociado a tu cuenta. La etiqueta <meta> quedaría así:
<meta property="fb:app_id" content="your_app_id" />Twitter tiene algo similar que llaman Twitter Card Analytics. Para sacar el máximo partido a esta herramienta, Twitter recomienda utilizar la siguiente etiqueta <meta> que contiene el nombre de usuario de Twitter que se quiere asociar a la página web compartida:
<meta name="twitter:site" content="@website-username">Tenga en cuenta, sin embargo, que si no tiene ningún interés particular en utilizar estas herramientas de análisis, entonces omitir las dos etiquetas anteriores <meta> no tiene ningún efecto sobre cómo aparece una página web compartida en una línea de tiempo de Facebook o en el feed de Twitter.
¿Algo más?
La documentación de Facebook recomienda una etiqueta <meta> adicional, aunque no es necesaria. Una etiqueta <meta> que denota el nombre del sitio web en el que reside la página compartida:
<meta property="og:site_name" content="European Travel, Inc.">Twitter sugiere otra etiqueta <meta> también recomendada, pero no obligatoria:
<meta name="twitter:image:alt" content="Alt text for image">Esto proporciona una descripción alternativa de la imagen para aquellos que tienen problemas de visión.
Marcación final
Eso debería ser todo. Para reiterar, cuando se mira la documentación de Facebook y Twitter para compartir páginas web, hay muchas otras etiquetas <meta> disponibles que se pueden utilizar para especificar diferentes tipos de contenido. Pero, en general, lo siguiente será suficiente:
<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">