Metaetiquetas o metatags para redes sociales en HTML

10. Metaetiquetas o metatags para redes sociales en HTML

A la hora de compartir una página web en una red social hay que tener en cuenta diferentes aspectos para presentar el contenido de una forma atractiva. Por ejemplo, es necesario definir el título, una fotografía, la descripción o el autor, entre otras cosas. Para ello utilizaremos las metaetiquetas o metatags (también conocidas por etiquetas meta o meta tags).

No existe un estándar de metaetiquetas para representar todas las redes sociales. Así por ejemplo, Linkedin, Pinterest o Facebook utilizan Open Graph Protocol y Twitter utiliza Twitter Cards. Veamos cómo representar cada una de ellas.

#1 Metaetiquetas en Twitter

• Selecciona la Twitter Card que quieres añadir en la página de desarrolladores de Twitter.
• Incluye el código o metaetiquetas necesarias en tu sitio web.
• Comprueba que tus Twitter Cards funcionan correctamente. Para ello, introduce la url en el Validador de Cards de Twitter.

Ejemplo de código o metaetiquetas para Twitter:

See the Pen Etiquetas Twitter by Eniun (@Eniun) on CodePen.0

Aspecto validador de Twitter:

#2 Metaetiquetas en Facebook o Pinterest, Open Graph

• Realiza la misma operación para Facebook desde la página para webmasters.
• Verifica si está todo correcto mediante el Depurador de contenido.

Ejemplo de código o metaetiquetas Open Graph:

See the Pen Etiquetas Open Graph by Eniun (@Eniun) on CodePen.0

Aspecto del validador de metaetiquetas de Facebook:

#3 Incluir los botones de para compartir tweets, momentos, likes…

Además de los elementos anteriores, también nos puede interesar incluir en nuestra web los botones para compartir en redes sociales. Para ello, accederemos a las diferentes páginas para desarrolladores y generaremos el código correspondiente para posteriormente insertarlo en nuestra web.

En el caso de Twitter podemos agregar los botones para compartir tweets, perfiles, momentos, likes desde las siguiente página para desarrolladores.