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.

[php]
;
[/php]

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

[php]

This is the article

Description of the article

[/php]

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.

[php]

[/php]

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:

[php]

Categorías

;

[/php]

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….

26 comentarios en «Schema.org y microdatos en WordPress»

  1. Victor

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

    Gracias, buen articulo !!

  2. jlmora Autor de la entrada

    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. Maria Fernandez

    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. jlmora Autor de la entrada

    Debes usar alguno de estos

    Product, Offer o AggregateOffer según se adapte a tu caso.

    Saludos

  5. Soy un Gnomo

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

  6. jlmora Autor de la entrada

    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.

  7. Javier Chang Moros

    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!

  8. Javier Chang Moros

    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!

  9. Dariane Francesca

    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

  10. jlmora Autor de la entrada

    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

  11. Alberto

    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.

  12. jlmora Autor de la entrada

    Tienes que hacer una re-escritura del módulo o plugin que se encargue de ese «pintado»

  13. sandrat

    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.

  14. Dario Pereira

    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?

  15. Ana

    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

  16. jlmora Autor de la entrada

    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

  17. Oscar

    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?

  18. jlmora Autor de la entrada

    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

  19. enric

    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

  20. jlmora Autor de la entrada

    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.

  21. alex

    Hola Juan Luis.
    Gracias por tu artículo. Tengo una duda sobre Search Console.
    Tengo un blog y cuando tengo la propiedad añadida a Search Console, en apariencia en el buscador me aparece lo siguiente:
    No detectamos datos estructurados en tu sitio. Y como solucion me añade Para proporcionar datos estructurados, debes añadir marcado HTML a las páginas de tu sitio.Más información acerca de fragmentos enriquecidos.
    Me deriva a schema.org.
    Debo añadir un pluggin a wordpress? se solucionará y veré los datos de mis páginas indexadas??

    Gracias

  22. jlmora Autor de la entrada

    Lo puedes hacer añadiendo el código a cada página o con plugin el resultado final es indiferente siempre y cuando se haga bien claro.

  23. Laura

    Hola,
    Estoy creando una sección de FAQ en mi blog y me gustaría poder marcar con «https://schema.org/Question» las preguntas y respuestas, para intentar que google muestre con el tiempo fragmentos enriquecidos sobre dichas preguntas.

    Utilizo wordpress y redacto en la sección html código con este formato:

    »
    PREGUNTA

    BLABLABALBALBALA
    RESPUESTA

    BLABLABLBALA
    »

    La herramienta de datos estructurados me da por bueno el código, pero cuando guardo los cambios el código se borra sólo, y al testear datos estructurados en la url no me aparecen.

    Me estoy volviendo un poco loca, ¿me puedes echar una mano?

    Gracias de antemano

  24. jlmora Autor de la entrada

    Creo que la solución pasaría por desactivar el editor visual. Saludos, un placer poder ayudarte.

Deja una respuesta

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.