Si utilizas wordpress u otros CMS es posible que te hayas dado cuenta de que al compartir tus páginas en las redes sociales se muestra muchas más información que cuando compartes tus paginas HTML. Esto es porque la mayoría de CMS automatizas el protocolo de meta tags de Open Graph. Estas meta etiquetas “señalan” a Facebook los elementos que queremos mostrar al compartir nuestra página en la red social.Antes de empezar a introducir estas “nuevas” meta tags tendremos que indicar el XML Namespace para Open Graph dentro de nuestro html antes del header.
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"> <head></head> <body></body> </html>
Una vez hecho esto, podemos introducir nuestras meta tags de la misma manera que introducimos las meta tags tradicionales, es decir dentro de la etiqueta header.
Content Type
Para describir el tipo de contenido que tiene nuestra página utilizaremos la etiqueta og:type. Puede variar desde ser un “website”, un “artículo”, un “producto” etc.…
<meta property="og:type" content="website" />
Meta URL
La etiqueta og:url muestra la url absoluta de nuestra web si se encuentra en la home o el url del propio artículo.
<meta property="og:url" content="https://msbarrons.com/" />
Meta Title
La etiqueta “og:title” muestra a Facebook el titulo de nuestra página, ya sea la home o un artículo concreto.
<meta property="og:title" content="¿Ya sabes cómo utilizar Open Graph?" />
Meta Description
La descripción de nuestra web no siempre tiene por qué coincidir con el título de la misma. En la etiqueta “og:description” se introduce información más detallada y concreta de la página para poder captar más visitas.
<meta property="og:description" content="Unos cuantos consejos para utilizar las nuevas meta tags de facebook.">
Meta Image
Con la etiqueta “og:image” podemos señalar cual es la imagen que queremos que se muestre al compartir nuestra publicación. El tamaño ideal para una imagen según FB es de 1200x630px aunque admite hasta resoluciones de200x200px.
<meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" />
