¿Qué es JSON-LD?
JSON-LD (JSON for Linked Data) es un formato basado en JSON para estructurar datos enlazados. Su principal ventaja es que es muy fácil de usar y permite definir el contexto de los elementos de una página web. Como en el siguiente ejemplo:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Andres Parra",
"jobTitle": "Software Engineer",
"affiliation": "RPCIDE",
"additionalName": "byandrev",
"url": "https://byandrev.dev"
}
</script>En el ejemplo anterior, definimos un objeto de tipo Person con datos que aportan más información sobre esa persona. Al proporcionar estos datos estructurados, ayudamos a que los buscadores (como Google) comprendan mejor quién es la persona y qué rol cumple.
Cuando buscas a alguien en Google y ves un recuadro de información a la derecha (Knowledge Panel), lo más probable es que el buscador esté utilizando JSON-LD para extraer y mostrar esos datos de forma organizada. Como en este ejemplo:
Panel de Knowledge de Bill Gates
Puedes entrar al Playground de JSON-LD para que conozcas todos los tipos que existen, entre ellos:
- Person
- Event
- Product
Agregar JSON-LD a nuestras webs
El JSON-LD puede ir en cualquier parte del documento HTML, pero la mejor práctica es colocarlo dentro de la etiqueta <head>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://tuweb.com/",
"name": "Nombre de tu Sitio"
}
</script>
</head>
<body>
</body>
</html>Si usas frameworks modernos o CMS, no tienes que escribirlo a mano. Por ejemplo Next.js tiene una guía de como implementar JSON-LD: https://nextjs.org/docs/app/guides/json-ld.
Herramientas útiles
Puedes hacer uso de Rich Results Test (Google), el cual es ideal para ver si el JSON-LD se generará correctamente.
Análisis de mi web con Rich Results Test