Es decir, permiten al buscador formatear los resultados de las búsquedas de sus usuarios, de tal manera que al presentarlos, se distinga perfectamente cada apartado localizado dentro de las página web que se ajustan a la búsqueda que se ha realizado.
¿Cómo funcionan los datos estructurados paso a paso?
Pongamos algunos ejemplos bastante ilustrativos de cómo utilizan los datos estructurados los motores de búsqueda para presentar sus resultados:1) El usuario se conecta a Google y escribe en el cuadro de búsqueda aquello que desea encontrar:
- Mete una película, una receta, las instrucciones sobre cómo hacer algo... cualquier cosa que necesite y pulsa sobre "Buscar con Google".
2) El motor de búsqueda analiza su índice de páginas web buscando aquello que mayor coincidencia o relevancia pueda tener para el usuario con respecto a su búsqueda.
A la hora de representar en el resultado el contenido de cada página web que ha sido seleccionada para su presentación en el resultado, el buscador debe saber qué parte de la página web es aquella que corresponde al título, que parte de la web es la que corresponde a la descripción, cuál al contenido...
Es decir, necesita conocer la web para presentarla en los resultados de tal manera que el usuario pueda visualizar de un vistazo si le interesa el resultado propuesto o por el contrario no se ajusta a lo que él necesita.
Así, una vez analizada la web, se agrupa y conceptualiza cada parte de la misma en un apartado del resultado:
- Una parte de la web analizada que aparecerá en el resultado se irá al título de la búsqueda.
- Otra parte de la web analizada se corresponderá a la descripción o resumen del resultado.
- Otra parte, si en el resultado que el buscador se ha decidido mostrar es el de una tienda online, presentará el precio del artículo o una foto del mismo.
- Si se trata de un evento que organiza una web en un lugar con fecha y hora, mostrará en el resultado las fechas organizadas por un lado y el lugar con un enlace que localizará el Google Maps el sitio.
- Si es un sitio muy "concurrido" de usuarios y dispone de muchas entradas, el buscador puede optar por presentar un cuadro de búsqueda bajo el resultado para que sea más cómodo encontrar o refinar la búsqueda desde el propio resultado.
Toda esta manera de distribuir las partes de una web en sus resultados, la hemos visto en otras guías como en la de "Radiografía de los resultados de una búsqueda con Google":
Cada parte del código de nuestra web es analizado para poder ofrecer la información en el resultado según el tipo de contenido con el que se está trabajando.
Ejemplos de datos estructurados
Hay partes del código de una web que luego se representan de una manera especial en los resultados de la búsqueda, estos son ejemplos de cómo se presentan los datos estructurados:- El título:
- La descripción:
- Valoraciones de un producto:
- Fechas de actualización:
- Eventos:
- Y muchos más. La W3C por ejemplo recoge aquí todos los datos estructurados que oficialmente son susceptibles de ser analizados y presentados de una manera especial en los resultados de búsqueda.
¿Cómo detectar problemas con los datos estructurados en una web?
Hasta hace poco, los datos estructurados eran en ocasiones difíciles de arreglar, hoy día con la nueva herramienta de Google Developers para la prueba de datos estructurados la tarea se ha simplificado enormemente.Te muestro a continuación cómo utilizar esta magnífica aplicación que te ayudará a tener perfectamente al día los datos estructurados de tu web.
0) IMPORTANTE: Trata de pensar dentro de tu Blog, dónde tienes datos estructurados. Datos susceptibles de ser presentados en los resultados del buscador con un "formato especial" (cualquiera de los mostrados en la imagen anterior).
- Localiza en el código de tu web o Blog dónde escribes "cosas" a las que luego se les asigna un formato especial en los resultados de las búsquedas: nombre de autor, fecha de actualización, título... En una tienda online podrían ser importes, valoraciones de product, etc...
1) Para acceder a la herramienta de prueba de datos estructurados haz "clik" aquí
- En la pantalla que aparece, verás que la pantalla se divide en dos grandes partes, una a la izquierda y otra a la derecha:
1- Introduce tu código fuente: donde añadir la URL de tu web o copiar y pegar directamente el código fuente que desees reviser de tu web.
2- Valida los datos estructurados: la zona donde podrás visualizar la validación de los resultados sobre datos estructurados de la URL (la dirección de tu web) que introdujeras.
2) En la zona de la izquierda Haz clik en la parte superior izquierda "Obtener la URL" para escribir la dirección de tu web:
- Ten en cuenta que la URL (dirección web) que introduzcas sera la que sea revisada para datos estructurados. Si pones la URL de tu web, analizarás la página principal. Si pones la URL de una página en concreto de tu web, analizarás esa página en concreto.
- En los Blogs, donde la mayor parte del código está en la página principal, conviene que pruebes siempre una vez con tu dirección principal (tu nombre_de_blog.com o nombre_de_blog.BlogSpot.com o wp...) y después siempre repitas la prueba con una de las direcciones del detalle de una de tus entradas. Muchas veces puedes tener bien los datos estructurados a nivel de página principal pero los puedes estar utilizando mal a nivel de entrada.
¿Cómo se presentan los datos estructurados en una web?
Cada web presenta los datos estructurados según sus necesidades. Todos ellos normalmente se encuentran a la vista. En la pantalla principal de Diarios de la nube podemos ver como se marcan los datos estructurados de "author" (en rojo) y los datos estructurados "updated" (texto en azul).
En el detalle de las entradas también se informan los datos estructurados. En la pantalla que se muestra a continuación de Diarios de la nube, se puede apreciar el marcado "author" y "updated":
¿Cómo solucionar problemas con datos estructurados en una web?
Para que los datos estructurados sean correctamente identificados por el buscador, se deben emplear en el código fuente de nuestra web o Blog unas etiquetas determinadas:"Missing Required Field Author":
En la pantalla inferior vemos un ejemplo del uso de Author con una publicación de Google+ que aparece en los resultados de búsqueda privados (el autor, cuando es alguien que se encuentra en tus círculos Google+ que ha hecho una publicación, aparece en algunos resultados):
Otro ejemplo del uso de Author en datos estructurados:
En una web o en un Blog siempre debería manejarse el concepto de autor (como creador del contenido). La manera de mostrar correctamente el autor es:
<span class='post-author vcard'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><Código fuente para extraer el nombre del autor/></span>
Es decir, en tu web o Blog debes mostrar en alguna parte del mismo. el autor con la estructura de etiquetas que te he mostrado.
Un ejemplo con Blogger podría montarse así para mostrar el autor con el dato estructurado correcto.
<span class='post-author vcard'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span>
Un ejemplo en WordPress sería:
<span class="post-author vcard"><span class="fn" itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><?php the_author(); ?></span></span>
Es decir, en todos los casos añadimos a las etiquetas de author las etiquetas de marcado de datos estructurados "itemprop", "itemscope" e "itemtype" que les correspondan.
"Missing Required Field Update":
En la pantalla que se muestra inferiormente, podemos ver como en los resultados de Google se presenta una búsqueda mostrando "Update".
En una web o en un Blog siempre debería controlarse adecuadamente el concepto fecha de última actualización (updated). La manera de mostrar correctamente el updated es:
<a class='updated' href='http://DIRECCIÓN DE TU WEB'> NOMBRE DE TU WEB</a><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
<span> <data:post.date/></span>
Es decir, en tu web o Blog debes mostrar en alguna parte del mismo. el "Updated" con la estructura de etiquetas que te he mostrado.
Un ejemplo con Blogger podría montarse así para mostrar el autor con el dato estructurado correcto.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<a class='updated' href='http://nombre_de_tu_blog'> </a><abbr class='published' expr:title='data:post.timestampISO8601'><data:top.timestamp/></abbr>
<b:if cond='data:post.url'>
<a class='updated' href='nombre_de_tu_blog'> Nombre de tu Blog.</a><abbr class='published' expr:title='data:post.timestampISO8601'><data:top.timestamp/></abbr>
</b:if>
</b:if>
</span>
Un ejemplo en WordPress:
<span class="post-date updated"><?php the_date(); ?></span>
Es decir, en todos los casos añadimos a las etiquetas de updated, las etiquetas de marcado de datos estructurados "itemprop", "itemscope" e "itemtype".
"Missing Title":
En la pantalla que se muestra inferiormente, podemos ver como en los resultados de Google se presenta una búsqueda mostrando "Title".
En una web o en un Blog siempre debería controlarse adecuadamente el concepto título (el título de una entrada). La manera de mostrar correctamente el título es:
<h2 class='post-title entry-title' itemprop='headline'>
Es decir, en tu web o Blog debes mostrar en alguna parte del mismo el "Entry-title" con la estructura de etiquetas que te he mostrado.
Un ejemplo con Blogger podría montarse así para mostrar el autor con el dato estructurado correcto.
<h2 class='post-title entry-title' itemprop='headline'>
Un ejemplo en WordPress:
<h2 class="entry-title"><?php the_title(); ?></h2>
Es decir, en todos los casos añadimos a las etiquetas de Title, las etiquetas de marcado de datos estruturados "itemprop", "itemscope" e "itemtype".
Conclusión:
Con los datos estructurados, primero identifica en tu Blog dónde localizas el nombre de autor, la fecha de actualización, el título... o cualquier otro dato factible de representarse en los resultados del buscador con un formato especial. Después, busca las etiquetas que le correspondan para que se detecte como tal (itemprop, itemscope, itemtype...), y ¡ya lo tienes!.Ánimo, es ir probando, cualquier duda me tienes en los comentarios.
Hola, en la busqueda de google no me aparece ni la fecha (pone publicado hace 4 dias) ni el autor. En la plantilla aparece varias veces esos terminos pero no exactamente como tu lo mencionas. ¿Donde tendría que añadir los codigos de autor y update? Un saldudo
ResponderEliminarHola,
Eliminarpara que los datos estructurados funcionen, si aparece los datos de author y updated en tu plantilla, simplemente tendrás que montar la estructura tal como explico en la guía:
- Por ejmplo, imagina que encuentras en la plantilla algo donde pone (quito los < y > para que no de error en el comentario):
"span class='post-author vcard' data:post.author/ /span"
pues tú pondrías para añadirle datos estructurados a ese código algo así:
span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person' span itemprop='name'
Es decir, he añadido itemprop, itemscope e itemtype.
Deberías hacer eso con cada ejemplo que veas. Siempre verifica con la herramienta de Google que explico en la guía para comprobar que todo está bien.
Es paciencia e ir probando.
Cualquier cosa aquí estoy.
Un saludo!
Hola Miguel!
ResponderEliminarA mi los errores que me dan son los de Blogposting (3 errores) de imagen_url, BlogId y PostId.
Como lo puedo solucionar?
Hola Isela,
Eliminarconvendría analizar uno a uno. Blogposting es ideal para indicar al buscador que se trata de entradas de un Blog. Estos datos estructurados yo los utiliza para declarar mis entradas con su título y cuerpo de entrada.
Lo hago de esta manera (quito los < y > para que el código entre en el comentario):
div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting' --> Justo aquí es donde activo BlogPosting, fíjate que justo ahí ya utilizo itemscope e itemtype
b:if cond='data:post.firstImageUrl' --> Aquí en mi código evalúo cuál es la primera imagen
meta expr:content='data:post.firstImageUrl' itemprop='image_url'/ --> Así debes usar image_url
/b:if
meta expr:content='data:blog.blogId' itemprop='blogId'/
meta expr:content='data:post.id' itemprop='postId'/
a expr:name='data:post.id'/
b:if cond='data:post.title'
h3 class='post-title entry-title' itemprop='headline' --> Esta marca de headline es ideal para marcar los títulos.
div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody' --> La marca articleBody sirve para indicar el cuerpo de la entrada
data:post.body/
div class='postmeta-primary'
div class='vcard' id='Miguel García Sánchez - Colomer' --> Aquí declaro el autor, la descripción y nombre coincide con la de mi usuario en Google+
span class='fn n' --> Necesario para el marcado de autor y justo en la parte inferior también van los datos "updated" con la ruta a mi usuario Google+
span class='given-name' Por: span class='meta_author'>a href='https://plus.google.com/XXXXXXXXXXXX?rel=author' data:post.author/ /a /span /span
En: a class='updated' href='http://www.diariosdelanube.com' Diarios de la nube.a abbr class='published' expr:title='data:post.timestampISO8601' data:post.timestamp/ /abbr
/span
Esto en cada plantilla es distinto. Lo que deberías es añadir, como comento en la guía, el itemprop, itemtype e itemprop que corresponde a cada tipo de etiqueta que se marca como dato estructurado (autor, updated, blogsposting, cuerpo de la entrada, etc...).
Es ir haciendo los cambios y a posteriori probándolos en la herramienta para ver si están correctos o contienen algún error o aviso.
Un saludo!!!