hand Inicio
hand JSBloqs
hand GutenBloqs

schema JSON-LD para SEO

Te hablo de la estructura básica para entender de qué va esto del schema

Schema

Primero lo primero, qué es schema?

Te lo definen aquí, y es un esfuerzo conjunto (Google, Microsoft y Yahoo) para que una página web no sólo escriba contenido para sus lectores sino también para los motores de búsqueda

Es decir, es una manera de presentar el contenido de tu página en un lenguaje que los motores entienden

O dicho de otra manera, es una especie de lenguaje nuevo para describir los contenidos de tu página

Y esto, en realidad, se puede escribir de 2 maneras

Con Microdata o RDFa, que viene a ser un conjunto de tags html con el que definiremos nuestro contenido de un modo inline (en el primer caso) o simplemente con tags de tipo <meta> (en el segundo caso)

O con JSON-LD, que hace lo mismo pero en lugar de hacerlo con html lo hace con JavaScript

Y éste es el que voy a utilizar aquí, básicamente por una única razón:

  • Si en algún momento quieres cambiar el contenido de tu schema, no querrás tener que escanear todo el documento html

JSON-LD

La manera de definir el schema es la mar de sencillo

js
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"WebPage",
}
</script>

Y ya lo tenemos, aunque esto es equivalente a no poner nada

Quiero decir, que si no ponemos nada, se interpretará como si hubiéramos puesto lo de arriba

Por lo tanto, de poco sirve, pero eso sí, viéndolo ya tenemos una idea del tema

Aquí le decimos que esta página en concreto es una WebPage

y Qué otros tipos de páginas existen según schema.org?

Bastantes, las tienes aquí y son éstas:

  • Action
  • CreativeWork
  • Event
  • Intangible
  • MedicalEntity
  • Organization
  • Person
  • Place
  • Product

Para poner un ejemplo, para páginas como la presente le podríamos poner BlogPosting que se trata de un subtipo de CreativeWork

  • CreativeWork > Article > SocialMediaPosting > BlogPosting

Y dentro de esta categoría podemos especificar lo que queramos (que esté definido en schema, claro)

js
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"BlogPosting",
"@id":"https://www.kuworking.com/",
"headline":"Cursos de JavaScript y WordPress!!",
"description":"Aprende JavaScript y WordPress aquí, conmigo, ya tardas!",
}
</script>

Con esto Google (y los demás) ya sabrán de qué estamos hablando en esta página, y es bueno que lo sepan

Digo que es bueno porque lo que ellos seguro que saben es lo que decimos en la página, pero con el schema también sabrán lo que queremos decir, que a veces puede prestarse a matices

Y ojo, porque si exploras la API de schema verás que puedes especificar todo el texto del artículo (si quieres), o las partes más relevantes (las que quieres que te posicionen por SEO)

Y ya lo tenemos, sólo falta enfatizar un último mensaje importante

Cuanto más específico y detallado seas en tu schema, mejor

Páginas que te servirán de ayuda?

  • jsonld para ejemplos de templates
  • structured-data para analizar tus esquemas o directamente tu página web (o la de cualquiera)
  • Lo mismo, pero con la herramienta de Google
  • Lo mismo, pero con la herramienta de Facebook
  • Evidentemente la página de schema

Listos 👍👍

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto