Datos estructurados en Wordpres

Datos estructurados en Wordpres
Rate this post

Vamos a ver una forma sencilla de utilizar datos estructurados en wordpress, utilizando microdatos de una manera que esta comprobado que funciona. No me molesté mucho en usar microdatos hasta que vi que efectivamente había gente sacando provecho de ellos. Y sobre un modelo a replicar, estudiamos como lo conseguían y copiamos el modelo.

Aquí el ejemplo en concreto:

 

Datos estructurados wordpress

 

La web del telegraph ha conseguido con su resultado de la 5 posición, subir hasta la primera, con resultado enriquecido (foto y parte del texto) gracias a utilizar los datos estructurados.
Cómo lo logran?

Vamos entonces a la herramienta de comprobación de datos estructurados de google:
Herramienta de google para comprobar datos estructurados
y le corremos una comprobación. Este es el resultado:

 

 

No vamos a entrar en la parte teórica ni técnica, simplemente vamos a copiar un modelo que funciona (quien quiera puede leer schema.org)

A grandes rasgos vemos que define todo como un “article” y que en los datos marca especialmente un “headline”, “name”, “alternativeheadline”, “description”, “image”, “datepublished” y “articlebody”

Todos esos datos se encuentran normalmente en cualquier post de wordpress, así que vamos a ver como los implementaríamos en nuestro blog.

Dependiendo del tema, donde encontraremos esta información, en algunos temas estará en “single.php” y en otros (como el tema Twenty Fifteen) estará en “content-page.php”

Para este ejemplo utilizaremos el tema Twenty Fifteen ya que es el último tema oficial, correspondiente al año 2015.

Nos vamos al editor de nuestro tema o por FTP bajamos para editar “content-page-php” y allí buscamos lo siguiente:

1) Vamos a marcar todo como un artículo:

Buscamos:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>">

Y le agregamos:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="http://schema.org/Article">
2)  Definimos “headline” y “name” (usamos el mismo texto para ambos tal y como esta en el ejemplo):

Buscamos:

<header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->

Y le agregamos:

<header class="entry-header">
       <?php the_title( '<h1 class="entry-title" itemprop="headline name">', '</h1>' ); ?>
    </header><!-- .entry-header -->
3) Definimos el “articlebody”:

Buscamos:

<div class="entry-content">

Y le agregamos:

<div class="entry-content" itemprop="articleBody">

 

Nos quedan por marcar: “alternativeheadline”, “description”, “image”, “datepublished” , aquí dependerá de como manejes tu tema para marcarlos. Nosotros vamos a tener en cuenta que no lo has modificado demasiado y por eso los siguientes datos los marcaremos en cada post individualmente. Si tienes varios posts con las mismas características, puedes modificar el tema para no tener que hacerlo a mano en cada post.

Ya en cada post, en la sección de “texto”:

4) Definimos “alternativeheadline” y “description” (usamos el mismo texto para ambos tal y como esta en el ejemplo):

Buscamos:

Un texto que sirva como descripción del texto del post. Se puede usar un subtítulo como un <h2> y un <h3> en este caso como ejemplo:

<h3><strong>Qu’est-ce que c’est une luxation acromio-claviculaire ?</strong></h3>

Y le gregamos:

<h3 itemprop="alternativeHeadline description" ><strong>Qu’est-ce que c’est une luxation acromio-claviculaire ?</strong></h3>
 5) Definimos la imagen principal:

Buscamos:

Una imágen que represente nuestro post, tenemos que tener en cuenta que puede salir (si tenemos suerte) en el resultado enriquecido. Para este ejemplo:

<img class="size-full wp-image-14" src="http://luxationacromioclaviculaire.queteimporto.com/files/2015/05/luxation-acromioclaviculaire.jpg" alt="luxation-acromioclaviculaire" width="234" height="188" /></a>

Y le agregamos:

<img class="size-full wp-image-14" itemprop="image" src="http://luxationacromioclaviculaire.queteimporto.com/files/2015/05/luxation-acromioclaviculaire.jpg" alt="luxation-acromioclaviculaire" width="234" height="188" /></a>
6) Definimos la fecha:

Personalmente no uso fecha en mis posts, pero si queréis definirla en el tema Twenty fifteen tenéis que ir al archivo “template-tags.php”

Buscamos:

printf( ‘<span class=”posted-on” ><span class=”screen-reader-text”>%1$s </span><a href=”%2$s” rel=”bookmark”>%3$s</a></span>’,

Y le agregamos:

printf( ‘<span class=”posted-on” itemprop=”datepublished” ><span class=”screen-reader-text”>%1$s </span><a href=”%2$s” rel=”bookmark”>%3$s</a></span>’,

 

Ya tenemos todo listo, ahora hacemos una comprobación con la herramienta de google para ver que todo este correcto. Si queréis comprobar la url que utilizamos para este ejemplo es la siguiente (está en francés):

luxationacromioclaviculaire.queteimporto.com

 

saludos!

Deja un comentario