Cómo adaptar tu web a las Redes Sociales
Siguiendo con nuestra tendencia de Consejos para el desarrollo web, hoy nos centramos en un aspecto más técnico del desarrollo, y os traemos las claves para la optimización de una página web y su adaptación a las redes sociales de cara a la compartición de contenido, ya que no debemos olvidar que éstas constituyen una pieza fundamental de nuestra Estrategia de Comunicación Digital y nuestro Marketing de contenidos.
Cuando desarrollamos y ejecutamos el diseño de una web, si somos meticulosos y cuidadosos o incluso, maniáticamente perfeccionistas intentamos que el aspecto visual sea exactamente igual al diseñado en nuestra imaginación, sin tener en cuenta dónde se visualizará el contenido final. La adaptación responsive para dispositivos móviles, las distintas hojas de estilo para visualización panorámica, vertical o según resolución, y un sinfín de parámetros más, son elementos que no podemos dejar al azar.
Es por ello que también es importante qué y cómo se visualiza el sitio web que hemos diseñado cuando alguien lo comparte en sus redes sociales. Para ello existen etiquetas específicas que nos permitirán personalizar la información que será visible cuando se comparta el contenido en alguna ellas como Facebook, Twitter, Google+ o Pinterest.
Vamos a repasar cuáles son las meta etiquetas sociales más utilizadas y qué finalidad tienen.
<html itemscope itemtype="http://schema.org/Tipo">
No es una etiqueta social, pero sí que debemos actualizar la etiqueta html del documento para el correcto funcionamiento definiendo el tipo de documento que será compartido.
El documento puede ser de los siguientes tipos:
- Article, si es un artículo de redacción.
- Blog, si el documento es un blog.
- Book, si se tratase de un libro.
- Event, para un evento o acontecimiento.
- LocalBusiness, para un negocio local.
- Organization, si es la página de una organización.
- Person, si es un perfil o una página personal.
- Product, si se trata de la descripción de un producto.
- Review, para la revision de un producto o servicio.
- Other, si no está enmarcado en ninguno de los anteriores.
El marcado social define qué información se muestra al compartir contenido a través de una red social. Vamos a revisar los distintos marcados sociales existentes y repasaremos brevemente cada uno de ellos:
Marcado social para Google+
<meta itemprop="name" content="Título">
<meta itemprop="description" content="Descripción">
<meta itemprop="image" content="https://bilnea.com/imagen.jpg">
Es el marcado social utilizado por Google+ y basado en los microdatos de schema.org. En él se define el título que se utilizará al compartir, la descripción y la imagen que se compartirán. La imagen debe tener una altura no menor a 120px.
Podemos utilizar la herramienta que nos facilita Google si queremos realizar la tarea de una forma más sencilla y más tarde comprobar que el marcado es el correcto.
Marcado social para Twitter
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@bilnea">
<meta name="twitter:creator" content="@samuelcerezo">
<meta name="twitter:title" content="Título">
<meta name="twitter:description" content="Descripción">
<meta name="twitter:image:src" content=" https://bilnea.com/imagen.jpg">
Este marcado define la descripción que se compartirá en Twitter. En primer lugar:
- twitter:card define el tipo de tarjeta que se compartirá. Podemos revisar todas las existentes y ver las distintas posibilidades que nos ofrecen en la web de Twitter.
- twitter:site define el sitio al que pertenece el contenido.
- twitter:creator el autor del mismo.
A continuación se definen las etiquetas de título y descripción y por último el enlace a la imagen que servirá de previsualización. En el tipo de tarjeta utilizada, esta imagen será como mínimo de 280x150px.
Una vez realizado el marcado social de Twitter, podemos comprobar que funciona correctamente.
Marcado social para Facebook (OpenGraph)
OpenGraph es un protocol que nace con el fin de crear un marcado que facilite la compartición de enlaces. Las posibilidades de metadatos que ofrece son casi infinitas. Basta visitar la web de OpenGraph para salir de dudas sobre qué etiquetas utilizar.
<meta property="og:title" content="Título" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://bilnea.com/" />
<meta property="og:image" content="https://bilnea.com/imagen.jpg" />
<meta property="og:description" content="Descripción" />
<meta property="og:site_name" content="bilnea" />
<meta property="article:published_time" content="2015-03-23T11:30:00+01:00" />
<meta property="article:author" content="100002546172237" />
<meta property="article:tag" content="marcado social" />
En el marcado de ejemplo, procedemos a definir:
- El título que se compartirá, tipo de contenido (el cual puede ser music, video, article, book, profile o website), la dirección al contenido compartido y la imagen usada en la previsualización.
- La descripción del contenido, el nombre de la web a la que pertenece el contenido y fecha de publicación.
- Etiqueta exclusiva de Facebook, donde se detalla la ID o el nombre de usuario de Facebook del autor (también podemos vincular con él o los administradores utilizando la etiqueta fb:admins). Estas etiquetas pueden ser más de un perfil, para ello separaremos los distintos perfiles con comas.
- Por último y no menos importante se definen las palabras claves que describen el contenido.
Al igual que en los puntos anteriores, Facebook también nos ofrece una herramienta para comprobar el contenido compartido.
Y esto es sólo una pequeña muestras de las posibilidades del marcado social. Un uso más avanzado del mismo nos permite vincular sitios webs con aplicaciones móviles, e incluso obtener un mayor detalle del contenido como por ejemplo el director de una película o el precio de un artículo.
Mediante la implementación de estas meta etiquetas, nos aseguraremos de dotar a nuestro contenido de toda la información necesaria con el objetivo de que sea 100% entendible para las redes sociales y se visualice tal y como pretendemos que así sea.
Sobre el autor
Samuel E. Cerezo - Desarrollador web en bilnea, administrador de sistemas y consultor informático. Cocinando webs de autor para los paladares y teclados más exquisitos. Consultor informático, resolución hoy de problemas del mañana.