Fondo diseño web en Guadalajara
Atracción Web
Cómo programar una web semántica

Cómo programar una web semántica

16/May/2017

Compártelo:
Facebook Google+ Twitter

Hace ya tiempo que tenemos a disposición de los programadores los microdatos para comunicar a los buscadores con precisión la información que deben indexar, pero somos pocos los que los estamos incorporando a nuestro código; de hecho, yo los he ido integrando en mis últimos proyectos, y puedo garantizar que los resultados han sido positivos.

Esto me ha llevado a escribir este artículo, en el cual voy a explicar su uso básico para que os sirva de punto de partida a la hora de crear vuestras webs semánticas.

Para qué sirven los microdatos

Los microdatos, sirven para aportar valor semántico a los textos e imágenes que conforman las páginas web. Hasta su aparición, si escribiamos una dirección en un párrafo, esto era un simple conjunto de palabras que el navegador va a mostrar, pero si los usamos, podremos comunicarle a los buscadores, que no es un simple conjunto de palabras, sino que es la dirección de la empresa X, que su C.I.F. es Y, que se dedica a Z, que tiene un horario de ... Es decir, por medio de los microdatos podremos indicar a los buscadores con total precisión la información que deben indexar.

Qué microdatos debo utilizar

Schema.org es el diccionario universal que debemos utilizar para el marcado semántico de los datos de las webs. En él podemos encontrar los distintos esquemas que podremos aplicar, detallando los diferentes microdatos que podemos utilizar en cada uno de ellos.

Un par de ejemplos:

Si habéis abierto cualquiera de los vínculos anteriores, parece una labor complicada incorporarlos a nuestro código, pero no es así. Con un par de ejemplos las cosas se ven más claras.

Cómo los incorporo en las webs

Dispondremos de dos metodos: el uso de microdatos HTML o comunicarlos por medio de JSON-LD, la elección de uno de ellos dependerá de si la información a la que queremos aportar el valor semántico se muestra o no en la página web:

  • Si la información se muestra en la página, ultilizaremos los microdatos.
  • Si la información no se muestra, utilizaremos JSON-LD

Uso de microdatos

Una vez hayamos localizado en schema.org el esquema que vamos a utilizar, debemos proceder a marcar los datos; para ello usaremos las siguentes atributos HTML:

  • itemscope. No se le asigna ningún valor, normalmente se aplica a etiquetas contenedoras del tipo SECTION o DIV, indican que todo los microdatos que se definan dentro de ella pertenecen a la misma entidad.
  • itemschema="url del esquema a aplicar". Indicamos el esquema utilizado, es decir, indicamos si es un negocio local, una página web, un artículo del blog, un artículo médico... Se aplica a la misma etiqueta que itemscope.
  • itemprop="cualquiera de las propiedades definidas en el esquema aplicado". Con este atributo indicaremos que este párrafo contiene el teléfono, el precio, la distancia, la ubicación o lo que sea, siempre que esté definido en el esquema aplicado a su contenedor. 

Es posible que, a causa del diseño, alguno de los datos que queramos comunicar a los buscadores no aparezcan en la web, pero tranquilos, está previsto: en estos casos añadiremos, dentro de la etiqueta que defina el ámbito, una equiqueta meta por cada atributo a definir. Queda claro en el ejemplo:

Veamos un ejemplo completo, un artículo del blog:

 

JSON-LD

Usaremos JDON-LD, cuando la información a comunicar a los buscadores no se muestre en la web. Por ejemplo, imaginad que tenemos un home precioso, pero que únicamente muestra una animación, ¿Mala página para el SEO? Pues no, aquí aparece JSON-LD, y nos va a permitir añadir en el encabezado de la página, por medio de scripts, lo que queramos comunicar a los buscadores, sin que esto necesariamente tenga que aparecer en la web, y como para un programador, más vale un buen ejemplo que mil palabras, os dejo el código que utilizo en nuestra web de Atracción Web para comunicar que es la web de un negocio local:

 

Por último, os comento que, como se puede ver ver en este último ejemplo, los distintos esquemas pueden ser anidados, es decir puede estar uno incluido dentro de otro. Hay propiedades de un esquema que pueden ser otro esquema. En ejemplo anterior, la propiedad address es otro esquema que nos permite definir con total precición los distintos datos que la componen.

Cómo verificar los datos estructurados

Para verificar los datos transmitidos, bastará com que accedamos al apartado Datos Esctructurados de Google Search Console

 

Espero que os sea de utilidad.

ANTERIORVOLVERSIGUIENTE

Contacta con Atracción Web
Contacta con Atracción Web
Ven a visitarnos
Síguenos en Facebook
Síguenos en Google+
Síguenos en Google+
Contacta con nosotros
Contacta con Atracción Web Contacta con Atracción Web Ven a visitarnos Síguenos en Facebook Síguenos en Google+ Síguenos en Google+
Contacta con nosotros

 

 

Cerrar

 

 

Aceptar   Cancelar