HTML - Microdatos

Introducción a los Microdatos

Los microdatos son una especificación que te permite agregar datos estructurados a tus documentos HTML. Proporcionan una forma de etiquetar contenido con tipos específicos de información, como productos, eventos, reseñas o recetas. Al añadir microdatos a tu HTML, haces que tu contenido sea más comprensible para los motores de búsqueda, rastreadores web y otras aplicaciones que procesan datos estructurados.

El uso de microdatos en tu HTML ofrece varios beneficios. Ayuda a los motores de búsqueda a entender mejor el contenido de tus páginas web, lo que puede llevar a mejores posiciones en los resultados de búsqueda y resultados más relevantes. Los microdatos también permiten a los motores de búsqueda mostrar fragmentos enriquecidos, que son listados mejorados que incluyen información adicional, como calificaciones con estrellas, precios o fechas. Los fragmentos enriquecidos hacen que tus páginas web destaquen en los resultados de búsqueda y pueden aumentar las tasas de clics.

Los microdatos funcionan con HTML utilizando atributos para anotar elementos con tipos específicos de información. Para añadir microdatos a tu HTML, utilizas los atributos itemscope, itemtype e itemprop. El atributo itemscope indica que el contenido dentro de un elemento trata sobre un elemento en particular. El atributo itemtype especifica el tipo de elemento que se está describiendo, utilizando una URL que define el vocabulario. El atributo itemprop se utiliza para identificar las propiedades de un elemento, como su nombre, descripción o precio.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nombre del Producto</h1>
  <p itemprop="description">La descripción del producto va aquí.</p>
  <span itemprop="price">$99.99</span>
</div>

El elemento div está marcado con el atributo itemscope, indicando que contiene información sobre un elemento. El atributo itemtype especifica que el elemento es un producto, utilizando el vocabulario de schema.org. Los atributos itemprop se utilizan para identificar el nombre, la descripción y el precio del producto.

Al añadir microdatos a tu HTML, permites que los motores de búsqueda y otras aplicaciones extraigan datos estructurados de tus páginas web, lo que lleva a una mejor visibilidad en las búsquedas, fragmentos enriquecidos y una experiencia de usuario mejorada.

Sintaxis de Microdatos

La sintaxis de microdatos tiene tres atributos principales: itemscope, itemtype e itemprop. Estos atributos definen la estructura y el significado de los datos dentro de los elementos HTML.

El atributo itemscope indica que el contenido dentro de un elemento se refiere a un elemento en particular. Es un atributo booleano, lo que significa que no necesita un valor. Cuando se añade el atributo itemscope a un elemento, se crea un nuevo elemento que puede tener sus propias propiedades.

<div itemscope>
  <!-- El contenido del elemento va aquí -->
</div>

El atributo itemtype se usa junto con el atributo itemscope para especificar el tipo de elemento que se está describiendo. Toma una URL como valor, que apunta a un vocabulario que define el tipo de elemento. El vocabulario más comúnmente utilizado es Schema.org, que tiene muchos tipos de elementos, como Person, Product, Event, y más.

<div itemscope itemtype="https://schema.org/Product">
  <!-- El contenido del producto va aquí -->
</div>

El atributo itemprop identifica las propiedades de un elemento. Se añade a los elementos dentro de un itemscope para especificar el nombre y valor de cada propiedad. El valor del atributo itemprop coincide con una propiedad definida en el vocabulario especificado por el itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nombre del Producto</h1>
  <p itemprop="description">La descripción del producto va aquí.</p>
  <span itemprop="price">$99.99</span>
</div>

Los microdatos también permiten anidar elementos dentro de otros. Esto es útil para estructuras de datos complejas que incluyen múltiples elementos con sus propias propiedades. Para anidar elementos, se añade otro atributo itemscope dentro de un itemscope existente.

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Juan Pérez</h1>
  <p itemprop="jobTitle">Ingeniero de Software</p>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Calle Principal 123</span>
    <span itemprop="addressLocality">Ciudad Cualquiera</span>,
    <span itemprop="addressRegion">CA</span>
    <span itemprop="postalCode">12345</span>
  </div>
</div>

En este ejemplo, el elemento Person incluye una propiedad de dirección, que es un elemento de tipo PostalAddress con sus propias propiedades, como streetAddress, addressLocality, addressRegion y postalCode.

Vocabularios comunes de Microdatos

Al agregar Microdatos a tu HTML, necesitas usar un vocabulario que defina los tipos de elementos y sus propiedades. Un vocabulario es un conjunto de definiciones para tipos de elementos y sus propiedades. Existen varios vocabularios comunes utilizados con Microdatos, incluyendo Schema.org, Dublin Core y Open Graph Protocol.

Schema.org es el vocabulario más utilizado para Microdatos. Fue creado por una colaboración de los principales motores de búsqueda, incluyendo Google, Bing, Yahoo! y Yandex. Schema.org proporciona una colección de vocabularios compartidos que los administradores web pueden usar para marcar sus páginas de manera que puedan ser entendidas por los principales motores de búsqueda.

El vocabulario de Schema.org incluye una amplia gama de tipos de elementos, como Persona, Organización, Lugar, Producto, Evento, Reseña y muchos más. Cada tipo de elemento tiene un conjunto de propiedades que se pueden usar para describir el elemento en detalle. Por ejemplo, un elemento Producto puede tener propiedades como nombre, descripción, precio, marca y reseña.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Portátil Acme</h1>
  <p itemprop="description">Un portátil de alto rendimiento para trabajo y ocio.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$1,199.99</span>
    <span itemprop="priceCurrency">USD</span>
  </span>
</div>

Dublin Core es otro vocabulario utilizado con Microdatos, particularmente en el contexto de metadatos para recursos digitales. El vocabulario de Dublin Core incluye propiedades como título, creador, tema, descripción, editor, fecha, tipo, formato e identificador. Este vocabulario es utilizado a menudo por bibliotecas, museos y otras organizaciones que gestionan activos digitales.

<div itemscope itemtype="http://purl.org/dc/terms/">
  <h1 itemprop="title">El Gran Gatsby</h1>
  <span itemprop="creator">F. Scott Fitzgerald</span>
  <span itemprop="date">1925</span>
  <span itemprop="format">Impreso</span>
  <span itemprop="identifier">ISBN: 978-0-123-45678-9</span>
</div>

El Open Graph Protocol, creado por Facebook, es un vocabulario utilizado para describir el contenido de las páginas web para compartir en redes sociales. Incluye propiedades como og:title, og:type, og:url, og:image y og:description. Cuando añades Microdatos de Open Graph a tus páginas, las plataformas de redes sociales pueden usar esta información para crear vistas previas enriquecidas cuando se comparte tu contenido.

<head>
  <meta itemprop="og:title" content="Mi Página Web">
  <meta itemprop="og:type" content="website">
  <meta itemprop="og:url" content="https://www.misitioweb.com/">
  <meta itemprop="og:image" content="https://www.misitioweb.com/imagen.jpg">
  <meta itemprop="og:description" content="Una descripción de mi página web.">
</head>

Al elegir un vocabulario para tus Microdatos, considera el tipo de contenido que tienes y la audiencia que quieres alcanzar. Schema.org es un gran vocabulario de uso general que los motores de búsqueda entienden bien, mientras que Dublin Core es mejor para recursos digitales en contextos académicos o de patrimonio cultural, y Open Graph Protocol es ideal para contenido compartido en plataformas de redes sociales.

Implementación de Microdatos

Para implementar Microdatos en tu HTML, agrega los atributos itemscope, itemtype e itemprop a los elementos correspondientes. Primero, identifica el elemento o elementos principales en tu página, como un producto, evento o persona. Luego, añade el atributo itemscope al elemento que contiene toda la información sobre ese elemento.

<div itemscope>
  <!-- La información del producto va aquí -->
</div>

A continuación, agrega el atributo itemtype al mismo elemento, indicando el vocabulario y tipo de elemento que deseas utilizar. Por ejemplo, si estás describiendo un producto utilizando el vocabulario de Schema.org, usarías el siguiente itemtype:

<div itemscope itemtype="https://schema.org/Product">
  <!-- La información del producto va aquí -->
</div>

Ahora, añade el atributo itemprop a cada elemento que represente una propiedad del elemento. El valor del atributo itemprop debe coincidir con una propiedad del vocabulario que especificaste en el itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nombre del Producto</h1>
  <img src="imagen-producto.jpg" itemprop="image" alt="Imagen del Producto">
  <p itemprop="description">La descripción del producto va aquí.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$99.99</span>
    <span itemprop="priceCurrency">USD</span>
  </span>
</div>

Además de usar Microdatos directamente en tu HTML, también puedes utilizarlos con JSON-LD (JavaScript Object Notation for Linked Data). JSON-LD es una forma de codificar datos enlazados usando JSON, y se puede usar para proporcionar datos estructurados de una manera fácil de analizar para los motores de búsqueda.

Para usar Microdatos con JSON-LD, incluye un elemento script con el atributo type establecido en "application/ld+json". Dentro del elemento script, define tus datos estructurados usando la sintaxis JSON-LD.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Nombre del Producto",
  "image": "imagen-producto.jpg",
  "description": "La descripción del producto va aquí.",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "USD"
  }
}
</script>

Al implementar Microdatos, sigue estas mejores prácticas para obtener los mayores beneficios:

Microdatos y SEO

Los microdatos ayudan a los motores de búsqueda a entender mejor el contenido de tus páginas web. Buscadores como Google, Bing y Yandex usan microdatos para extraer datos estructurados de tu HTML, lo que puede mejorar tus rankings de búsqueda y visibilidad.

Cuando los motores de búsqueda rastrean tus páginas web, buscan microdatos para entender el significado y contexto de tu contenido. Al usar microdatos para marcar información importante, como detalles de productos, información de eventos o reseñas, facilitas a los motores de búsqueda procesar e interpretar tu contenido. Esto puede llevar a mejores rankings de búsqueda para consultas relevantes, ya que los buscadores pueden relacionar tu contenido con las búsquedas de los usuarios con mayor confianza.

Uno de los principales beneficios de los microdatos para SEO es la posibilidad de obtener fragmentos enriquecidos en los resultados de búsqueda. Los fragmentos enriquecidos son listados de búsqueda mejorados que incluyen información adicional, como calificaciones por estrellas, precios o fechas, junto con el título estándar, URL y descripción. Cuando marcas tu contenido con microdatos, los motores de búsqueda pueden usar esa información para mostrar fragmentos enriquecidos de tus páginas web.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nombre del Producto</h1>
  <p itemprop="description">Aquí va la descripción del producto.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$99.99</span>
  </span>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span> estrellas basadas en
    <span itemprop="reviewCount">100</span> reseñas
  </div>
</div>

En este ejemplo, el marcado de microdatos incluye información sobre el nombre del producto, descripción, precio y calificación general. Los motores de búsqueda pueden usar estos datos para mostrar un fragmento enriquecido con la calificación por estrellas y el número de reseñas, haciendo que el listado de búsqueda sea más llamativo e informativo para los usuarios.

Los fragmentos enriquecidos pueden aumentar tus tasas de clics en los resultados de búsqueda, ya que hacen que tus listados destaquen y proporcionan más información sobre tu contenido a los usuarios. Tasas de clics más altas pueden, a su vez, llevar a mejores rankings de búsqueda, ya que los motores de búsqueda consideran el compromiso del usuario como una señal de relevancia y calidad.

Para maximizar los beneficios SEO de los microdatos, es importante usarlos correcta y consistentemente en todo tu sitio web. Sigue las mejores prácticas para la implementación de microdatos, como usar tipos de elementos y propiedades específicas, hacer coincidir los microdatos con el contenido visible y mantener tus microdatos actualizados. Prueba tus microdatos usando herramientas como Google's Structured Data Testing Tool para asegurarte de que estén libres de errores y puedan ser analizados correctamente por los motores de búsqueda.

Herramientas y pruebas de Microdata

Existen varias herramientas disponibles para ayudarte a generar, validar y probar tu marcado de Microdata. Estas herramientas pueden simplificar el proceso de añadir Microdata a tu HTML y detectar errores o problemas antes de que tus páginas se publiquen.

Los generadores de Microdata son herramientas que te ayudan a crear marcado de Microdata sin escribir el código manualmente. Estas herramientas suelen proporcionar una interfaz fácil de usar donde puedes introducir tus datos y seleccionar los tipos de elementos y propiedades apropiados. Algunos generadores populares de Microdata incluyen:

Estos generadores pueden ahorrarte tiempo y esfuerzo, especialmente si eres nuevo en Microdata o tienes mucho contenido que marcar. Sin embargo, es importante revisar el marcado generado para asegurarte de que refleja con precisión tu contenido y sigue las mejores prácticas.

Los validadores de Microdata son herramientas que verifican tu marcado de Microdata en busca de errores o inconsistencias. Pueden ayudarte a detectar problemas como etiquetas faltantes o anidadas incorrectamente, tipos de elementos o propiedades inválidos, o problemas de formato. Algunos validadores populares de Microdata incluyen:

Estos validadores pueden ser valiosos para depurar tu Microdata y asegurarte de que está correctamente implementado. Es una buena idea pasar tus páginas por un validador antes de publicarlas, para detectar cualquier error temprano.

Probar tu Microdata con la Herramienta de Prueba de Datos Estructurados de Google es particularmente importante, ya que Google es el motor de búsqueda más grande y utiliza Microdata ampliamente para fragmentos enriquecidos y otras características de búsqueda. La Herramienta de Prueba de Datos Estructurados te permite ingresar una URL o pegar tu código HTML, y luego te muestra todo el Microdata que encuentra en la página. También resalta cualquier error o advertencia, con explicaciones de qué está mal y cómo solucionarlo.

Al probar tu Microdata, presta atención a cualquier error o advertencia, y corrígelos antes de publicar tus páginas. Algunos problemas comunes de Microdata a tener en cuenta incluyen:

• Etiquetas itemscope, itemtype o itemprop faltantes o anidadas incorrectamente
• Uso de tipos de elementos o propiedades inválidos o mal escritos
• Desajuste entre el Microdata y el contenido visible en la página
• Repetición de la misma información varias veces en diferentes formatos
• Inclusión de marcado para información que no es visible para los usuarios

Si encuentras problemas con tu Microdata, soluciónalos sistemáticamente. Verifica que tu marcado siga las reglas de sintaxis, coincida con tu contenido y use tipos de elementos y propiedades válidos de tu vocabulario elegido. Utiliza los mensajes de error y advertencias de los validadores como guía, y consulta la documentación de tu vocabulario si es necesario.

Al usar herramientas de Microdata y probar tu marcado regularmente, puedes asegurarte de que tu Microdata sea correcto, consistente y optimizado para los motores de búsqueda. Esto puede ayudarte a obtener el máximo valor de tu Microdata, en términos de mejor visibilidad en las búsquedas, fragmentos enriquecidos y participación del usuario.

Ejemplos de Microdatos

Puedes usar Microdatos para marcar diferentes tipos de contenido, como productos, eventos, personas y recetas. Aquí hay algunos ejemplos de cómo usar Microdatos para varios tipos de contenido:

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Portátil Acme</h1>
  <img src="laptop.jpg" itemprop="image" alt="Portátil Acme">
  <p itemprop="description">Un portátil de alto rendimiento para trabajo y ocio.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$1,199.99</span>
    <span itemprop="priceCurrency">USD</span>
    <link itemprop="availability" href="https://schema.org/InStock">En Stock
  </div>
</div>

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Conferencia Tecnológica 2023</h1>
  <p itemprop="description">Únete a nosotros en el evento tecnológico más importante del año!</p>
  <time itemprop="startDate" datetime="2023-09-01T09:00">1 de septiembre de 2023, 9:00 AM</time> -
  <time itemprop="endDate" datetime="2023-09-03T17:00">3 de septiembre de 2023, 5:00 PM</time>
  <div itemprop="location" itemscope itemtype="https://schema.org/Place">
    <span itemprop="name">Centro de Convenciones</span>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="streetAddress">Calle Principal 123</span>
      <span itemprop="addressLocality">Ciudad Ejemplo</span>,
      <span itemprop="addressRegion">CA</span>
      <span itemprop="postalCode">12345</span>
    </div>
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$299.99</span>
    <span itemprop="priceCurrency">USD</span>
    <a itemprop="url" href="https://www.ejemplo.com/entradas">Comprar Entradas</a>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Juan Pérez</h1>
  <p itemprop="jobTitle">Ingeniero de Software</p>
  <div itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Acme Inc.</span>
  </div>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Calle Roble 456</span>
    <span itemprop="addressLocality">Ciudad Ejemplo</span>,
    <span itemprop="addressRegion">CA</span>
    <span itemprop="postalCode">12345</span>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Galletas Clásicas de Chispas de Chocolate</h1>
  <img itemprop="image" src="galletas.jpg" alt="Galletas de Chispas de Chocolate">
  <p itemprop="description">Una receta para galletas caseras de chispas de chocolate.</p>
  <ul>
    <li itemprop="recipeIngredient">2 1/4 tazas de harina para todo uso</li>
    <li itemprop="recipeIngredient">1 cucharadita de bicarbonato de sodio</li>
    <li itemprop="recipeIngredient">1 cucharadita de sal</li>
    <li itemprop="recipeIngredient">1 taza de mantequilla, suavizada</li>
    <li itemprop="recipeIngredient">3/4 taza de azúcar granulada</li>
    <li itemprop="recipeIngredient">3/4 taza de azúcar morena compactada</li>
    <li itemprop="recipeIngredient">1 cucharadita de extracto de vainilla</li>
    <li itemprop="recipeIngredient">2 huevos grandes</li>
    <li itemprop="recipeIngredient">2 tazas de chispas de chocolate semidulce</li>
  </ul>
  <ol itemprop="recipeInstructions">
    <li>Precalentar el horno a 190°C (375°F).</li>
    <li>Mezclar la harina, el bicarbonato de sodio y la sal en un tazón pequeño.</li>
    <li>Batir la mantequilla, el azúcar granulada, el azúcar morena y el extracto de vainilla en un tazón grande hasta que esté cremoso.</li>
    <li>Agregar los huevos, uno a la vez, batiendo bien después de cada adición.</li>
    <li>Incorporar gradualmente la mezcla de harina.</li>
    <li>Añadir las chispas de chocolate.</li>
    <li>Colocar cucharadas redondeadas de masa en bandejas para hornear sin engrasar.</li>
    <li>Hornear de 9 a 11 minutos o hasta que estén doradas.</li>
    <li>Enfriar en las bandejas durante 2 minutos; transferir a rejillas para enfriar completamente.</li>
  </ol>
  <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
    <span itemprop="calories">260 calorías</span>,
    <span itemprop="fatContent">12 gramos de grasa</span>
  </div>
</div>