- [A][A]
A la hora de optimizar la web la indexación es importante, es preciso que los robots de los buscadores lean e indexen bien los contenidos, esas máquinas de código son cada vez más sofisticadas y potentes. Aún así valoran y prefieren que marquemos e indiquemos las directrices básicas de la información que ofrecemos en cada página y para ello se han creado etiquetas tanto para la cabecera del archivo como para el contenido, los llamados metadatos y los datos estructurados.
Open Graph es un protocolo de etiquetado creado para identificar el contenido a mostrar cuando publicamos el enlace a una página web en Facebook, pero que ya lo están leyendo otras plataformas como Google o Twitter.
Con este protocolo buscamos que los elementos con los que se haga la referencia estén optimizados y por lo tanto optimizen la indexación de la web.
Está pensado para las webs que trabajan en las redes sociales para las que se creen las etiquetas, ya que es imprescindible poner la id de la cuenta en esa red.
Estas etiquetas se incluyen en el <head> del código fuente de la página, en las que indicaremos el titulo, tipo, imagen destacada, url e idioma del contenido, entre otras cosas.
La información sobre el protocolo más ejemplos de uso lo tenemos en la web del proyecto “The Open Graph Protocol”. En ella veremos todas las posibilidades que nos brinda para etiquetar el contenido.
Los datos posibles son muchos pero totalmente imprescindibles para cualquier caso son: og:type, og:image y og:url.
El tipo de contenido (type) por defecto sería website, en un blog un post sería del tipo article, tienes más información sobre los types en el apartado de Open Graph Protocol.
La imagen tiene que tener un tamaño al menos de 600 x 315 píxeles y hasta un máximo de 1200 y 630 píxeles para pantallas con una gran densidad de píxeles.
Algunos de los datos que se pueden etiquetar tienen un límite de caracteres:
Conviene tener redactados estos dos elementos antes de generara las etiquetas, para redactarlos hay que tener encuentra las palabras clave que estemos trabajando en esa página.
Cuando se trabaja con WordPress se puede hacer uso de los plugins que implementan el protocolo de manera automática. Por ejemplo:
También tal como comenta Dario BF en su blog se puede añadir al archivo function.php un código basado en el siguiente:
//Agregamos Open Graph en los language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Añadimos la información Open Graph
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //Si no es un post o página
return;
echo '<meta property="fb:admins" content="EL ID DE TU USUARIO"/>';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="AQUI VA EL NOMBRE DE TU SITIO WEB"/>';
if(!has_post_thumbnail( $post->ID )) { //La entrada no tiene imagen destacada, utiliza una imagen predeterminada
$default_image="http://ejemplo.com/image.jpg"; //Aquí tienes que poner la ruta de la imagen prefeterminada que se mostrará.
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
Acuerdate de cambiar la id del usuario de facebook, el nombre de tu sitio web, la imagen por defecto (para cuando no haya imagen destacada).
Para conocer tu id de facebook puedes usar la utilidad que ofrecen en PiliApp.
También si colocamos el cursor en nuestra foto de perfil, en la barra inferior de información del navegador nos aparece la url de la imagen y al final del todo esta nuestra id de facebook.
Trabajamos en el <head> del archivo de la página.
Para Facebook y para que lo lean los buscadores:
<!-- Open Graph data --> <meta property="og:title" content="Título aquí" /> <meta property="og:type" content="article" /> <meta property="og:url" content=" http://www.ejemplo.com/" /> <meta property="og:image" content=" http://ejemplo.com/imagen.jpg" /> <meta property="og:image:secure_url" content="moniatura_de_la_imagen"> <meta property="og:image:type" content="image/jpg"> <meta property="og:image:width" content=""> <meta property="og:image:height" content=""> <meta property="og:description" content="Descripcion aquí" /> <meta property="og:site_name" content="Puertas metálicas - Andreu" /> <meta property="article:published_time" content="2013-09-17T05:59:00+01:00" /> <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" /> <meta property="article:section" content="Sección del artículo" /> <meta property="article:tag" content="Etiqueta del artículo" /> <meta property="fb:admins" content="Número de ID de Facebook" />
Recordar que:
Para cuando se coloca el enlace en Twitter, leerá las siguientes etiquetas:
<!-- Twitter Card data → <meta name="twitter:card" content="producto"> <meta name="twitter:site" content="@publisher_handle"> <meta name="twitter:title" content="Título de la página"> <meta name="twitter:description" content="Descripción de la página"> <meta name="twitter:creator" content="@author_handle"> <meta name="twitter:image" content=" http://www.ejemplo.com/imagen.html">
Recordar que:
Si se presentan productos con precio
Añadimos a las etiquetas Open Graph para Facebook y buscadores:
<meta property="og:price:amount" content="15.00" /> <meta property="og:price:currency" content="USD" />
Para que lo use Twitter, estas son las etiquetas data y label a indicar:
<meta name="twitter:data1" content="$3"> <meta name="twitter:label1" content="Price"> <meta name="twitter:data2" content="Black"> <meta name="twitter:label2" content="Color">
Si se presenta un vídeo
Para Twitter añadimos:
<meta name="twitter:card" content="player"> <meta name="twitter:site" content="@vimeo"> <meta name="twitter:title" content="TÍTULO_DEL_VIDEO"> <meta name="twitter:description" content="DESCRIPCIÓN_DEL_VIDEO"> <meta name="twitter:image" content="VÍNCULO_A_LA_MINIATURA"> <meta name="twitter:player" content="https://player.vimeo.com/video/ID_DEL_VIDEO"> <meta name="twitter:player:width" content="1280"> <meta name="twitter:player:height" content="720"> <meta name="twitter:site" content="@vimeo">
Los datos estructurados son el resultado de aplicar un protocolo de etiquetas del código html para que los robots de los buscadores reconozcan el tipo de dato que están leyendo. Ese protocolo se mantiene desde Schema.org, una web colaborativa en la que se crean y se mantienen esas etiquetas.
Dichas etiquetas se pueden rellenar a mano, trabajando sobre el código html. También se pueden usar herramienta que los generan como el Markup Helper de las Webmaster Tools de Google.
Las etiquetas forman un conjunto de instrucciones o microdatos que se van incluyendo en las lineas de código para identificar el contenido.
Items
itemid: el identificador unívoco y global de un elemento.
itemprop: utilizado para añadir propiedades a un elemento. Cualquier elemento HTML puede contener un atributo itemprop definido, y tal itemprop consiste de un nombre y un valor.
itemref: las propiedades que no desciendan de un elemento y contengan el atributo itemscope pueden asociarse con el elemento a través de una itemref. Itemref proporciona una lista de identificadores de elementos (distintos de los itemids) con propiedades adicionales en otras partes del documento.
itemscope: Itemscope (por lo general) funciona en conjunto con itemtype para especificar que el HTML contenido en un bloque se refiere a un término concreto. itemscope crea el elemento y define el alcance del itemtype asociado con él. itemtype es un URL válido de un vocabulario (como Schema.org) que describe el elemento y el contexto de sus propiedades.
itemtype: Especifica el URL del vocabulario que se empleará para definir itemprops (‘propiedades de elementos’) en la estructura de datos. Se emplea Itemscope para establecer el alcance del área de funcionamiento del vocabulario establecido por itemtype dentro de la estructura de datos.
Cada item tiene subitems para consultarlos tenemos los enlaces al final de la ficha de cada item principal en la web de schema.org.
Por ejemplo el item type tiene entre otras estas opciones:
Action: Una acción realizada por un agente directo y participantes indirectos sobre un objeto directo. La ejecución de la acción puede producir un resultado. La documentación de subtipo de acción específica especifica la expectativa exacta de cada argumento / rol.
CreativeWork: El tipo de trabajo creativo más genérico, incluidos libros, películas, fotografías, programas de software, etc.
Event: Un evento que ocurre en un momento y lugar determinados, como un concierto, una conferencia o un festival. La información de emisión de entradas se puede agregar a través de la propiedad de ofertas Los eventos repetidos pueden estructurarse como objetos de eventos separados.
Intangible: Una clase de utilidad que sirve para identificar datos ‘intangibles’, como cantidades, valores estructurados, etc.
MedicalEntity: El tipo de entidad más genérico relacionado con la salud y la práctica de la medicina.
Organization: Una organización como una escuela, una ONG, una corporación, un club, etc.
LocalBusiness: Un negocio físico particular o sucursal de una organización. Los ejemplos de LocalBusiness incluyen un restaurante, una sucursal particular de una cadena de restaurantes, una sucursal de un banco, un consultorio médico, un club, una bolera, etc.
Corporation: Una empresa más grande
Person: Datos de una persona o personaje de ficción.
Place: Datos de la ubicación física de una entidad, oficina , instalaciones.
PostalAddress: Dirección (forma parte de Place).
Las etiquetas se puden generar introduciendolas dentro de las etiquetas html o generando un código javascript encabezado con el type: «application/ld+json».
Ficha de contacto del proyecto
En el html:
<div id=”contacto” itemtype="http://schema.org/Person"> <p itemprop=”Name”>Nombre del contacto</p> <img itemprop=”image” src=”url de la imagen de perfil del contacto”> <p itemprop=”jobTitle”>Cargo del contacto en el proyecto</p> <p itemprop=”telephone”>000 000 000</p> <p itemprp=”email”>correo del contacto</p> <p itemprop="streetAddress">Calle y número</p> <p itemprop="addressLocality">Ciudad</p>, <p itemprop="addressRegion">Estado, provincia o región</p> <p itemprop="postalCode">Código postal</p> </div>
En javascript:
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Organization",
"name": "Nombre de la web",
"url": "Url de la web",
"logo": "url de la imagen del logo del proyecto",
"image": "url de la imagen por defecto del contenido",
"description": "La descripción del contenido máximo 155 caracteres",
"address": {
"@type": "PostalAddress",
"streetAddress": "Calle y número",
"addressLocality": "Cioudad",
"addressRegion": "Provincia o región",
"postalCode": "Código postal",
"addressCountry": "País"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+34-000-000-000"
},
"sameAs": [
"url facebook del proyecto",
"url twitter del proyecto",
"url linkedin del proyecto",
"url instagram del proyecto"
]
}
</script>
Ficha de contacto de personaje
En html:
<div id=”contacto” itemtype="http://schema.org/PostalAddress"> <p itemprop="streetAddress">calle y número</p> <p itemprop="addressLocality">Ciudad</p>, <p itemprop="addressRegion">Estado, provincia o región</p> <p itemprop="postalCode">Código postal</p> </div>
En javascript:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Nombre del contacto",
"image": "url imagen de perfilo del contacto",
"jobTitle": "Cargo del contacto",
"telephone": "000 000 000",
"email": "mailto:correo del contacto",
"streetAddress": "calle y número",
"addressLocality": “Ciudad”,
"addressRegion": “Región, provincia”,
"postalCode": “Código postal”
}
</script>
Presentación de un producto
En el html:
<div itemscope itemtype="http://schema.org/Product" itemid="74470"> <img itemprop="image" src="url de la foto del producto" alt="alt de la foto del producto"/> <p itemprop="name">Nombre del poroducto</p> <p>Product code: <span itemprop="product-code">74470</span></p> <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">$1250</span> to <span itemprop="highPrice">$1495</span> from <span itemprop="offerCount">8</span> sellers Sellers: <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="url del producto"> Save A Lot Monitors - $1250</a> </div> </div>
En javascript:
<script type="application/ld+json">
//json microdatos
{
"@context": "http://schema.org",
"@type": "Product",
"description": "la descripción del producto",
"name": "El nombre del producto",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
“url”: “la url del producto”,
"brand": {
"@type": "El tipo de producto por ejemplo Phone",
"name": "Marca"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/anvil",
"priceCurrency": "USD",
"price": "999.99",
"priceValidUntil": "2020-11-05",
"itemCondition": "https://schema.org/UsedCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Executive Objects"
}
}
</script>
Presentación de una noticia
En html:
<article class="blog-posts post-single" itemscope itemtype="https://schema.org/Article">
<meta itemprop="mainEntityOfPage" content="True" />
<div class="post">
<div class="post-content">
<a href="https://tutorialesenlinea.es/532-que-es-schemaorg.html">
<h2 class="title" itemprop="headline">Titulo de la noticia</h2></a>
<div><a class="highslide" href="url de la foto de la noticia" target="_blank">
<img src="url de la foto de la noticia" itemprop="image" alt="alt de la foto de la noticia" class="fr-dib">
</a>
</div>
<div itemprop="description">Texto de la noticia</div>
<ul>
<li>Autor: <span itemprop="author">Nombre de la sección</span></li>
<li>Editor: <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<ul itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img src="url del logo del proyecto"/>
<meta itemprop="url" content="url de la noticia">
<meta itemprop="width" content="250"><meta itemprop="height" content="60">
</ul>
<meta itemprop="name" content="Autor de la noticia"></span>
</li>
<li>Fecha:<span itemprop="datePublished">fecha de publicación</span><span itemprop="dateModified">fecha de modificación</span></li>
<li>Categorias: <span itemprop="articleSection">Noticias / Tutorial / Schema.org / WebSite / webmasters / Internet</span></li>
</ul>
</div>
</div>
</article>
En javascript:
<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "url de la noticia"
},
"name" : "Que Es Schema.org",
"author" : {
"@type" : "WebPage",
"name" : "Nombre del autor"
},
"headline": "Titulo de laq noticia",
"datePublished": "2019-01-05T08:00:00+08:00",
"dateModified": "2019-01-05T09:20:00+08:00",
"image" : "url de la foto de la noticia",
"articleSection" : "Texto de la noticia ",
"url" : "url de la noticia",
"publisher": {
"@type": "Organization",
"name": "Nombre del proyecto que publica",
"logo": {
"@type": "ImageObject",
"url": "url de la imagen del logo del proyecto"
}
}
}
</script>
Para etiquetar una web.
Para etiquetar listados.
Para etiquetar dirección y ficha de contacto.
Para etiquetar un listado de trabajos realizados.
Para etiquetar la venta de productos.
Para etiquetar temas médicos.
Existen una serie de herramientas online para validar los metatags, según la red en la que se enlazaría la página.
Para validar en Twitter.
Para validar en Facebook.
Para validar en Pinterest (hay que poner la url de una página que tenga metadatos).
Para testear el resultado de los datos enriquecidos.