en etiquetado semántico

Guía sobre como etiquetar una organización con schema.org

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+

El etiquetado para organizaciones de schema.org http://schema.org/Organization. Es un etiquetado importante ya que es el que nos sirve para modificar el gráfico de conocimiento de Google como se explica aquí https://developers.google.com/structured-data/customize/overview. Si tenemos entidades locales podemos etiquetarlo con http://schema.org/LocalBusiness cambiando en los ejemplo “organization” por “LocalBusiness”.

 schema-org

La Guía esta dividida en 4 partes: 

Parte 1:Introducción y notas

Parte 2: formulario de recogida de datos que habría que tener en el backend de la web. Cada campo se marca con “$campo”.

Parte 3: Ejemplo de como se traducirian esos campos en JSON-LD.

Parte 4: Ejemplo de como se traducirian esos campos en MICRODATA.

 

PARTE 1: INTRODUCCIÓN Y NOTAS DE USO

 

Sobre schema.org: Es el lenguaje que Google prefiere para marcar el contenido semántico de tu web y permite escribir sus estructuras en tres formatos JSON-LD, Microdata o RDFa. 

Diferencias entre las distintas estructuras/formatos (RDFa, Microdata o JSON-LD): Microdata es el formato en el que se desarrollo originalmente schema.org por ello la mayor parte de la documentación interna en este portal esta expuesta con ejemplos en microdata.

Microdata es un anexo de html5 y por ello para desarrollos en html recomendaría utilizar RDFa para etiquetar nuestro código y en desarrollos en HTML5 usar microdata ya que es la recomendación oficial de Google. Comentar que también serviría html5 + RDFa. 

Si no queremos etiquetarlo y preferimos pasarlo via JSON-LD podemos utilizar esta forma alternativa. Un par de notas sobre JSON-LD: 

  • He probado a usarlo en un anexo y el validador de Google no lo lee, hay que ponerlo directamente en el código.
  • Se puede poner tanto dentro del <head> como dentro del <body>.
  • Recomendación personal:  que la información pasada vial JSON-LD esté presente también en la web.

 Notas de USO:

En la misma web solo se recomienda utilizar un tipo de marcado semántico, no mezcles.

Utiliza siempre el validador de Google cuando tengas tus códigos terminados. 

https://developers.google.com/structured-data/testing-tool/

https://webmaster.yandex.com/microtest.xml (alternativa)

Fijaros que en el validador de Google los errores se subrayan en el código que le pasas. Algunas veces da errores con JSON-LD y no nos marca porque. En estos casos revisar sobre todo las “,” de cierre alrededor de “}” y “[“, ”]”.

PARTE 2: FORMULARIO PARA EL BACKEND 

<< Campos del formulario para el backend >> 

campo1: ->  Nombre -> $Nombre

campo2: ->  Logo -> $logo (se puede dejar fijo)

campo3: ->  Página Web -> $PáginaWeb

campo4: ->  Facebook  -> $facebook (URL)

campo5: ->  Twitter -> $twitter (URL)

campo6: ->  Google+ -> $google+ (URL)

campo7: ->  Instagram -> $instagram (URL)

campo8: ->  YouTube -> $youtube (URL)

campo9: ->  LinkedIn  -> $linkedin (URL)

campo10: ->  Descripción -> $Descripción

campo11: ->  Dirección -> $Dirección

campo12: ->  Estado/region -> $Estado/region

campo13: ->  Ciudad -> $Ciudad

campo14: ->  Código Postal -> $CódigoPostal

campo15: ->  País -> $País

campo16: ->  Correo electrónico -> $Correoelectrónico

campo17: -> Telefono -> $telefono (formato +codigo del páis-telefono) ejemplo:      +1-800-555-1212

campo18: ->  Fax -> $Fax

 Campo especial para añadir nuestro teléfono al gráfico de conocimiento. Os recomiendo leer:

https://developers.google.com/structured-data/customize/contact-points

 campo19: ->  Selector de uno de esto (solo admite estas opciones): -> $Selector entre estas opciones:

 [“customer support” “technical support” “billing support” “bill payment” “sales” “reservations”

“credit card support” “emergency” “baggage tracking” “roadside assistance” “package tracking”]

 *Cada una de las opciones del campo 19 tendría que tener un campo adicional:

 Campo20 -> telefono de contacto -> $telefonodetalle

Campo21 -> área del servicio ->$ES (código del páis, como la etiqueta lang “ES”)

campo22 -> lenguaje en el que será atendido ->$lenguajeatendido (ejemplo “spanish”, si existen varios se tendría que usar este formato [“French”, “English”,”spanish”]

campo23 -> coste de la llamada ->$costellamada uno de estos dos (gratuito o de pago) [“TollFree,HearingImpairedSupported”]

 *Se pueden añadir varios campos19 con sus subcampos correspondientes.

 

PARTE 3: CODIFICACIÓN CON JSON-LD (en base al formulario de la parte 2)

 

<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "Organization",
"name": "$Nombre",
"url" : "$PáginaWeb",
"logo": "$logo",
"sameAs" : [
"$facebook",
"$twitter",
"$google+",
"$instagram",
"$youtube",
"$linkedin"],
 "description" : "$Descripción",
 "address": {
"@type": "PostalAddress",
"streetAddress": "$Dirección",
"addressRegion": "$Estado/region",
"addressLocality": "$cuidad",
"postalCode": "$CódigoPostal",
"addressCountry": "$País"
},
 "email": "$Correoelectrónico",
"telephone": "$telephone",
"faxNumber": "$Fax",
 "contactPoint" : [
{ "@type" : "ContactPoint",
"contactType" : "$selector",
"telephone" : "$telefonodetalle",
"areaServed" : "$ES",
"availableLanguage" : "$lenguajeatendido",
"contactOption" : "$costellamada"
} ] }
</script>

 

PARTE 4: CODIFICACIÓN CON MICRODATA (en base al formulario de la parte 2)

 

*Nota Importante: la códificación del apartado http://schema.org/ContactPoint es propia de JSON-LD no tendría cabida en microdata pero yo he realizado la adaptación con las reglas que se tendrían que aplicar en microdata y el validador de Google lo lee correctamente.

 

<div itemscope="" itemtype="http://schema.org/Organization">
<a target="_blank" itemprop="url" href="$PáginaWeb"><span itemprop="name">$Nombre</span></a>
<div itemprop="logo">http://www.mapfre.es/logo.jpg</div>
<a itemprop="sameAs" href="$facebook">FB</a>
<a itemprop="sameAs" href="$twitter">Twitter</a>
<a itemprop="sameAs" href="$google+">Google+</a>
<a itemprop="sameAs" href="$Instagram">Instagram</a>
<a itemprop="sameAs" href="$Youtube">Youtube</a>
<a itemprop="sameAs" href="$Linkedin">Linkedin</a>
<div itemprop="description">$Descripción</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">$Dirección</div>
<div><span itemprop="addressRegion">$Estado/region,</span><span itemprop="addressLocality">$Ciudad</span></div>
<div itemprop="postalCode">$CódigoPostal</div>
<div itemprop="addressCountry">$País</div></div>
<div>Email: <span itemprop="email">$Correoelectrónico</span></div>
<div>Teléfono: <span itemprop="telephone">$telefono</span></div>
<div>Fax: <span itemprop="faxNumber">$Fax</span></div>
<div itemprop="contactPoint" itemscope="" itemtype="http://schema.org/ContactPoint">
<div itemprop="contactType">$Selector</div>
<div itemprop="telephone">$telefono</div>
<div itemprop="areaServed">$ES</div>
<div itemprop="availableLanguage">$lenguajeatendido</div>
<div itemprop="contactOption">$costellamada</div>
</div>
</div>

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+

Comentarios

Comentario