Schema.org y microdatos en WordPress

Como os adelantábamos ayer en nuestra entrada: SEO: Schema.org y microdatos, hoy vamos a ponerlo en práctica con un blog de WordPress, concretamente en este mismo que estás leyendo, para que no digan aquello de: “en casa de herrero cuchillo de palo“.

Antes de remangarnos y meternos de pleno en el asunto, me gustaría hacer un pequeño resumen para que nadie se pierda:

  1. Identificaremos los esquemas a usar, seguramente será más de uno.
  2. Identificaremos las partes a las que les vamos a implementar los microdatos, según la propia Schema.org, cuantos más mejor.
  3. Identificaremos los ficheros del tema WordPress que vamos a retocar.
  4. Manos a la obra.

Elección del Schema apropiado

Existen multitud de esquemas para usar, pero por no hacernos la vida demasiado complicada me gustaría utilizar sólo tres o cuatro, repasando el índice en http://schema.org/docs/schemas.html, me quedo con:

  1. http://schema.org/Article, con este implementaré los microdatos en las entradas simples.
  2. http://schema.org/Blog, para definir los microdatos generales del blog, cabecera, pie, aside…
  3. http://schema.org/ItemList, para los menús del blog.
Todas ellas están dentro de: http://schema.org/CreativeWork y básicamente son iguales, cambiando tan sólo alguna propiedad. Por extensión es indudable que voy a tener que usar el esquema para personas, para definir a los editores: http://schema.org/Person. Pero esto lo haremos en otra entrada para no extendernos demasiado.

Donde poner los microdatos

Pondremos microdatos en cada artículo, especificando: Autor, nombre, fechas, categorías, keywords y el enlace. También haremos la implementación para el blog en general especificando nombre, descripción, url y los elementos principales . Por último describiremos los menús del home y de las entradas individuales.

Para hacerlo, cada uno tenemos que conocer bien los ficheros del tema que estamos usando y será allí donde nos pondremos manos a la obra.

Nosotros usamos Gedit con un complemento para conectar por FTPcon el servidor: FTP Browser. Si  no habéis leído la anterior entrada, os aconsejo leerla antes de continuar: SEO: Schema.org y microdatos.

Microdatos en los artículos

En primer lugar haré una definición básica que incluye con la selección del esquema en el body.

  1. <body itemscope itemtype="http://schema.org/Article">;

Ahora vamos con información más específica, marquemos el título y la descripción, el ejemplo quedaría:

  1. <h1 itemprop="name">This is the article </h1>
  2. <p itemprop="description">Description of the article</p>

Con los anterior ya tenemos cubiertos los puntos que no hemos planteado para cada entrada del blog, ahora vamos al punto siguiente:

Microdatos para imágenes

También es conveniente implementar los microdatos en la imagen principal de cada página, por ejemplo Google Plus los usa cuando compartimos.

  1. <img itemprop="image" src="thumbnail.jp" />

Ahora tenemos correctamente marcada la imagen principal de la entrada o página.

Microdatos en los menús de navegación

Ahora vamos a ponernos con los menús de navegación que se muestran en el aside del blog. en nuestro blog tenemos varios menús de navegación, para no alargar demasiado la entrada os vamos a mostrar como hemos hecho el de las categorías:

  1. <div itemscope itemtype="http://schema.org/ItemList">
  2. <h3 itemprop="name">Categorías</h3>;
  3. <ul>
  4. <li>
  5. <a itemprop="url" href=".." title="...">...</a>
  6. </li>
  7. </ul>
  8. </div>

Con esto tenemos las partes fundamentales de nuestro blog con microetiquetas, no obstante todavía queda mucho más que hacer. Por ejemplo nos podemos poner con las páginas de etiquetas, los comentarios, la información de cada autor, las etiquetas….


Conoce mis servicios para WP.



Servicios personalizados para profesionales, agencias y PYMES

22 comentarios en “Schema.org y microdatos en WordPress

  1. Hola, conoces algún plugin pra WP que implemente los microdatos en la entradas del blog.

    Gracias, buen articulo !!

  2. En wordpress existen plugin para hacer esto, si bien es cierto que no hacen exactamente lo mismo que explico en el post, puedes probarlos y te invito a compartir los resultados con nosotros. Los siguientes plugin no solo se adaptan al eschema.org, también he puesto plugins que trabaja con otros esquemas.

    Schema for WordPress

    WordLift

    Micro Anywhere

    WP Customer Reviews

    ReviewPress

  3. Hola,
    me gustaría utilizar los microdata para marcar en las páginas SEO, la tabla que hay de ofertas de vuelos. El problema es que no se cual de ellos coger. He pensado en eventos.
    Y luego como integrarlo ya que la tabla es dinámica y los datos van cambiando.
    Estoy hecha un lio!!!!

  4. Buen artículo, soy novato en esto de los blogs. En qué mejora poner los microdatos?, saludos desde forobeta :)

  5. Por un lado lo más visible son los Rich Snippets y por otro obtendrás un contenido semántico que es más fácil de entender para los buscadores.

  6. Muy buen material amigo Juan!
    Quería preguntar, la parte que aparece después de cada post con tu foto y pequeña biografía, usas un plugin de wordpress para eso? Podrías por favor pasarme el dato? De antemano gracias!

  7. Sólo por si alguien más tiene la misma duda que yo, encontré que lo hace el plugin “Shareholic”, que también coloca lo de “Sharing is Caring” para compartir en las redes sociales. Gracias de nuevo por el post amigo Juan Luis, excelente página!

  8. Hola, muchas gracias por tu articulo, es de grand ayuda.
    Mi duda es, la implementación de los microdatos es solo para sitios HTML 5?
    Saben si hay Plugin para Joomla?
    Muchas gracias

  9. La implementación de microdatos es anterior a HTML5 así que como comprenderás se puede implementar en otras versiones.
    Para Joomla imagino que debe existir módulos o extensiones para ponerlo, prueba a buscar microdatos Joomla

  10. Hola Juan Luis,

    Mi página “pinta” el footer y el header desde una archivo php, así que la dirección, teléfono, etc.. que aparece en el footer, ¿Cómo podría marcarla?.

    Muchas gracias.

  11. Hola¡ muy bueno el post. En los casos que no se puede utilizar plugin o poner en el codigo los datos se pueden metaetiquetar con la herramienta q google ha hecho en webmaster tools y te permite hacerlo facilmente subrayando todos los campos que requiere . Hay dos formas 1 descargandote el codigo o publicando esta ultima no requiere de tocar codgo Google se encarga de adjuntarlo a tu cache.

  12. Gracias por el post

    Un pregunta ¿Como se cambia el tumbnail.jpg? seria por la url completa de tu imagen por ejemplo http:…. /wp-includes/imagenentuservidor.jpg

    Es que no me funciona y tampoco logro poner el schema.org de video como se describe. Alguna fuente que me de un ejemplo de como seria aplicado a una web?

  13. Hola. El post está bien pero no aclaras en que fichero del tema agregamos el código de microdatos, por qué hay que añadir código html , pero en que fichero de nuestro tema lo añadimos

  14. Los códigos se agregan donde son necesarios, este blog los tiene en las plantillas del theme, pero se pueden poner con plugins en el diseño y en los posts

  15. Estoy un poco piedra en esto de los microdatos, pero necesito hacer uno para recetas de cocina.

    Ví el plugin Schema Creator, pero no tiene para recetas, qué puedo hacer?

  16. Mejor instala, algún plugins que te permita meter directamente el marcado en los posts. Lo digo porque lo suyo será escribirlo en modo HTML, pero de esta forma wordpress lo quita al publicar

  17. Una pregunta, si pongo los schema de esta manera que dices cuando paso la pagina web por el w3c validator me dice que no es correcto. ¿Cuál es la manera correcta de ponerlo para que el w3c validator te lo de por bueno? Lo he intentado poner dentro de un span como otras páginas web dicen pero sigue diciéndome que “no es correcto”. gracias

  18. Un validador solo se refiere a la sintexis, no a la semática del código. Si te da errores de validación de igual forma te debe decir en que línea son y cuál es el motivo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *