0Pricing
HTML Academy · Lección

Conceptos básicos de datos estructurados JSON-LD

Añada datos estructurados legibles por máquinas con JSON-LD

Conceptos básicos de datos estructurados JSON-LD es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué son los datos estructurados?

Los datos estructurados son JSON legible por máquinas que describe el tema de una página: un artículo, una receta, un producto o un evento. Los motores de búsqueda los utilizan para mostrar resultados enriquecidos (valoraciones con estrellas, tarjetas de recetas y rutas de navegación) en lugar de simples enlaces azules.

JSON-LD es el formato recomendado

El formato preferido por Google es JSON-LD: un único bloque <script type="application/ld+json"> en la cabecera o el cuerpo que contiene uno o más objetos de schema.org. Está desacoplado del HTML visible, por lo que añadirlo o actualizarlo no requiere reescribir la plantilla.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2024-05-01"
}
</script>

@context y @type

Cada objeto JSON-LD necesita @context (casi siempre "https://schema.org") y @type (la clase de schema.org: Article, Recipe, Product, FAQPage). @context indica a los analizadores de qué vocabulario proceden los nombres de las propiedades.

Propiedades habituales de Article

Para Article, proporcione headline, image (una URL o un array), datePublished, dateModified, author (un objeto Person u Organization) y publisher (Organization con logo). Estos son los campos mínimos que Google necesita para considerar la página para su carrusel de noticias destacadas.

Esquema Product

Las páginas de productos declaran @type Product con name, image, description, brand, sku y un subobjeto offers que contiene price, priceCurrency y availability. Combinado con aggregateRating, permite que Google muestre valoraciones con estrellas y fragmentos de precios directamente en el resultado de búsqueda.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coddy Plus",
  "offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}

Esquema Breadcrumb

BreadcrumbList describe la jerarquía de navegación. Cada itemListElement es un ListItem con position, name e item (la URL). Cuando está presente, Google sustituye la línea de URL del fragmento por la ruta de navegación etiquetada, lo que consigue más clics.

FAQ y HowTo

Los esquemas FAQPage y HowTo antes desbloqueaban widgets de resultados enriquecidos en las SERP. Desde entonces, Google ha restringido los resultados enriquecidos de FAQ a unas pocas categorías de sitios (gov, edu), pero el marcado sigue siendo valioso para los asistentes de voz y otros consumidores; consérvelo en las páginas de preguntas frecuentes reales.

Hacer coincidir la página visible

Google penaliza el marcado que no coincide con lo que ven los usuarios. No declare una valoración de 5 estrellas que no aparezca en la página ni indique un precio de 9,99 $ que el usuario no pueda ver. Los datos estructurados deben describir con precisión el contenido renderizado.

Validación con Rich Results Test

La herramienta Rich Results Test de Google (search.google.com/test/rich-results) analiza cualquier URL o código pegado, muestra los tipos de esquema detectados y advierte sobre las propiedades obligatorias que faltan. Ejecútela antes de desplegar cualquier cambio en los datos estructurados.

Varios esquemas por página

Puede declarar varios bloques JSON-LD en la misma página (por ejemplo, Article + BreadcrumbList + Organization) o combinarlos en una única matriz @graph. Ambas formas son válidas; elija la que resulte más fácil de convertir en plantilla en su canalización de compilación.

Actualizar sin volver a renderizar

JSON-LD se encuentra en una etiqueta script separada del contenido visible. Para actualizarlo, vuelva a generar el bloque JSON; nunca inyecte datos estructurados únicamente mediante JavaScript del lado del cliente, porque Googlebot no siempre ejecuta JavaScript de forma fiable antes de indexar.

Comprobación de conocimientos

¿Qué dos propiedades de nivel superior debe incluir todo objeto JSON-LD para que los datos estructurados sean válidos?

Resumen

JSON-LD declara datos estructurados en un único bloque de script application/ld+json, donde @context y @type identifican cada objeto. Los esquemas habituales (Article, Product, BreadcrumbList) habilitan resultados de búsqueda enriquecidos cuando el marcado refleja con precisión la página visible. Valide los datos con Rich Results Test antes de desplegarlos.

Preguntas frecuentes

¿La lección «Conceptos básicos de datos estructurados JSON-LD» es gratis?

Sí — el texto completo de «Conceptos básicos de datos estructurados JSON-LD» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Conceptos básicos de datos estructurados JSON-LD»?

Añada datos estructurados legibles por máquinas con JSON-LD Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Conceptos básicos de datos estructurados JSON-LD»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. OpenGraph: og:title, og:description y og:image
  2. Etiquetas meta de Twitter Card
  3. Conceptos básicos de datos estructurados JSON-LD
  4. Hreflang para páginas internacionales
← Volver a HTML Academy