Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Open Graph

Para empezar Open Graph es un marcado para nuestro código basado en RDF, que dicho de forma sencilla es un conjunto de etiquetas que nos permiten darle una información más directa a los servicios que accedan a nuestra web, por ejemplo Facebook.

Estas herramientas ayudan a conocer los gustos de los usuarios de esta web (por ejemplo Facebook observa que tipo de web ve cada usuario y así les podrá enseñar mejores noticias según sus intereses) y esto se hace, en el caso de Open Graph con meta etiquetas que especifican que tipo de contenido tiene tu página (un determinado video o una canción concreta) o de que habla la página (un artículo, un libro...).

Añadir los parámetros básicos

Para que nuestra web pueda interpretarse como un objeto dentro de los gráficos sociales debemos de añadir los siguientes parámetros básicos en meta-tags:
Nota: todos las etiquetas <meta> que usemos para Open Graph su propiedad empezara por "og:" (lo veras en el ejemplo).

og:title: debemos de añadirle un título al objeto, por ejemplo: "The Rolling Stones".
og:type: aquí especificamos que tipo de objeto es, en este caso sería: "music.song".
og:url: especificamos la ruta a la página web asociada a este objeto, que podría ser la siguiente: "http://musica.com/rolling-stones".
og:image: podemos enlazar a este objeto la ruta de una imágen: "http://musica.com/rolling-stones/logo.png"


						
							<meta property="og:title" content="The Rolling Stones">
							<meta property="og:type" content="music.song">
							<meta property="og:url" content="http://musica.com/rolling-stones">
							<meta property="og:image" content="http://musica.com/rolling-stones/logo.png">

Open Graph en tu blog

Como antes he dicho podemos especificar que nuestra página web habla de un álbum de música, de un libro o como en uno de los casos más comunes el de un artículo de un blog.
En un artículo nos encontramos con los elementos básicos que seguiremos usando y el "og:description" donde podemos añadirle una descripción a nuestro artículo.

Para que nuestro objeto sea interpretado como un artículo tenemos que cambiar el og:type y establecerlo como "article", y en este ejemplo tomaremos de referencia este artículo.


						
							<meta property="og:title" content="Open Graph -  Blog [Xitrus - Pedro Gutiérrez]">
							<meta property="og:type" content="article">
							<meta property="og:url" content="http://xitrus.es/blog/18/Open_Graph">
							<meta property="og:image" content="http://xitrus.es/blog/imgs/ogp-logo.png">
							<meta property="og:description" content="Añade Open Graph en tu sitio y mejora el SEO y la integración con Facebook.">

Verificar

El servicio de verificación de Open Graph más completo es el de Facebook, a través de su debugger, y simplemente poniendo la dirección web que queremos verificar nos devuelve todos los datos que le hemos proporcionado.

Comentarios