Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Cómo Crear un Currículum Potenciado con Microdatos HTML5

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En mayo de 2009, Google introdujo los Fragmentos Enriquecidos, más conocidos por su nombre en inglés como "Rich Snippets", son un pequeño bloque de información mostrada en los resultados de los motores de búsqueda de Google para que les resulte más fácil a los usuarios decidir qué páginas son importantes para su búsqueda. En junio de 2011, Google anunció la creación de Schema.org, una nueva iniciativa de Google, Bing y Yahoo! que intenta mejorar la web a través de la creación de estructuras de código.

Este tutorial muestra cómo crear un currículum online que incorpore los Microdatos de Schema.org. ¡El tutorial también incluye instrucciones sobre cómo usar Código Estructurado para la Autoría!


¡Elementos Extra Incluídos!

La muestra de ejemplo para el tutorial es una web con una sola página que puedes usar para crear tu currículum con toda libertad. Como extra, incluye algunas versiones con diferentes colores en los archivos zip; verde oscuro, verde vivo, azul oscuro y azul claro.

Por favor advierte que no se trata de un tutorial sobre diseño web o CSS, así que sólo veremos el código correspondiente al HTML5 y a los Microdatos de Schema.org.

Ahora, ¡empecemos!


Paso 1: El CSS

Crea una hoja de estilo CSS llamada "style.css" e incluye el siguiente código. No te preocupes; es bastante sencillo y comprenderlo no es realmente necesario para el tutorial.


Paso 2: La Estructura del Código (Sin los Microdatos de Schema.org Incluídos)

Después, necesitamos un .html. Ésta es una maquetación básica a la que todos estamos acostumbrados. 


Algunas Notas Relativas a la Estructura del Código

Adición al HTML5

Debido a que los Microdatos de Schema.org están basados en las especificaciones para los microdatos de HTML5, la estructura del código HTML5 se usa para crear la plantilla de la web de una sola página del currículum. Desafortunadamente, los navegadores antiguos como IE7 e IE8 no reconocen ciertos elementos HTML5. Las páginas escritas usando HTML5 no se visualizarán correctamente en estos navegadores.

Aquí tienes una captura de pantalla del currículum online de ejemplo visto en IE8 (pulsa sobre la imagen para verla al completo):

Para resolver este problema con las versiones antiguas del navegador IE, hemos añadido el código de abajo entre

etiquetas (justo bajo la hoja de estilo CSS):

Este código es una adición de JavaScript HTML5 para que IE reconozca y aplique el estilo adecuadamente a los elementos HTML5.

Nota: La adición de JavaScript HTML5 no es necesaria en IE9 y superiores, así como tampoco en otros navegadores modernos que admitan HTML5.

Listas de Definición

Las listas de definición, <dd></dd> se usaban en el código en lugar de listas sin orden. La razón es que tiene mucho más sentido, si consideramos que cada elemento de lista va siempre seguido de una pequeña descripción.

Diferencias entre Secciones y Artículos 

Parece que existe confusión en lo que respecta a los elementos HTML5 para las secciones y los artículos. El elemento section se usó en el código porque ninguna de las secciones del currículum se considera por sí misma un contenido aparte.  
El elemento HTML5 article se usa para apartados que constituyen un contenido por sí solo, y la mayoría de las veces está sindicado como por ejemplo una entrada de un blog o un artículo de noticias. Este artículo explica bastante bien la diferencia entre los elementos article y section en HTML5.


Paso 3: Añade Microdatos de Schema.org - Person y PostalAddress

Los primeros tipos de esquemas que vamos a añadir a la estructura del código son Person y PostalAddress.

El Elemento Itemscope y el Atributo Itemtype

Un elemento itemscope se añade a las etiquetas <div></div> que son colocadas alrededor del contenido relativo a la información de Schema, como en este ejemplo: 

El elemento itemscope y el atributo itemtype para el Schema Person será colocado tanto en las secciones de los enlaces de Contacto como en los enlaces a Perfiles en Medios Sociales de la web del currículum, de la siguiente forma: 

El elemento itemscope y el atributo itemtype para el Schema PostalAddress están anidados dentro del Schema Person y están colocados alrededor de la lista sin orden <ul></ul> conteniendo la información de la dirección de la siguiente forma:

Atributos Itemprop

Los atributos Itemprop necesitan ser añadidos siempre que sea adecuado usando las etiquetas span de forma que la información adicional  sobre nuestra página web sea proporcionada a los motores de búsqueda.

Esquema Person

  • itemprop = "image"
  • itemprop = "name"
  • itemprop = "jobTitle"
  • itemprop = "telephone"
  • itemprop = "email"
  • itemprop = "url"

Esquema PostalAddress

  • itemprop = "streetAddress"
  • itemprop = "addressLocality"
  • itemprop = "addressRegion"
  • itemprop = "postalCode"
  • itemprop = "addressCountry"

Código Final para los Enlaces de las Secciones Contacto y Medios Sociales


Paso 4: Añade Microdatos de Schema.org - Item List 

El próximo esquema que vamos a añadir a la estructura del código es ItemList.

El elemento Itemscope y el Atributo Itemtype

El elemento itemscope y el atributo itemtype para el Schema ItemList serán colocados en la Sección Habilidades como ves aquí:  

Atributos Itemprop

Añade el atributo "itemprop" siempre que sea apropiado mediante las etiquetas <span></span>. Más abajo está los atributos que serán usados para este esquema.

Esquema ItemList

  • itemprop="itemListElement"

Código de la Estructura para la Sección de Habilidades


Paso 5: Añade Microdatos de Schema.org - Organization

Después, vamos a añadir el esquema Organization al código estructurado.

Elemento Itemscope y el Atributo Itemtype

El elemento itemscope y el atributo itemtype para el Schema Organization serán colocados alrededor de cada "Position" enumerada en la sección "Experiencia", de la siguiente forma:

Atributos Itemprop

Añade el atributo "itemprop" siempre que sea indicado mediante las etiquetas <span></span>. Más abajo están los atributos que usaremos para este esquema:

Esquema Organization

  • itemprop = "jobTitle"
  • itemprop = "name"
  • itemprop = "description"

Código Final para la Sección de la Experiencia


Paso 6: Añade Microdatos Schema.org - Article

Ahora vamos a añadir al código del esquema Article.

El elemento Itemscope y el Atributo Itemtype para Article

El elemento itemscope y el atributo itemtype para el Schema Article serán colocados en el "Article" incluido en la Sección Publicaciones de la siguiente forma: 

Atributos Itemprop

Añade el atributo "itemprop" siempre que esté indicado usando las etiquetas . Más abajo tenemos los atributos de este esquema que vamos a usar:

Esquema Article

  • itemprop = "name"
  • itemprop = "url"

El Código Final para la Sección de las Publicaciones


Paso 7: Añade Microdatos Schema.org - EducationalOrganization y PostalAddress

Después vamos a añadir los esquemas EducationalOrganization y PostalAddress al código.

El Elemento Itemscope y el Atributo Itemtype para EducationalOrganization

El elemento itemscope y el atributo itemtype para el Schema EducationalOrganization se colocan en la Sección dedicada a la Formación de la siguiente forma:

El elemento Itemscope y el Atributo Itemtype para PostalAddress

El elemento itemscope y el atributo itemtype para el Schema PostalAddress están anidados dentro del Schema EducationalOrganization y están colocados alrededor del código que contiene la información de la dirección dentro de la sección de Formación de la siguiente manera:

Atributos Itemprop

Añade el atributo "itemprop" siempre que sea apropiado usando las etiquetas <span></span>. Abajo tienes los atributos que usaremos para estos esquemas:

Esquema EducationalOrganization

  • itemprop = "name"
  • itemprop = "url"

Esquema PostalAddress

  • itemprop = "streetAddress"
  • itemprop = "addressLocality"
  • itemprop = "addressRegion"
  • itemprop = "postalCode"
  • itemprop = "addressCountry"

Código Final para la Sección Formación


Sobre el Código para Authorship

La imagen muestra el esquema del código para Authorship (John Resig) mostrado en los resultados de Google.

En junio de 2011, Google empezó a admitir "Authorship Markup". A través del uso de código, como rel="author" y rel="me", con el los motores de búsqueda podrán identificar contenido creado por un mismo autor en todo Internet. Al usar el esquema de código para Authorship, una web con múltiples autores podría enlazar todos los artículos y entradas escritos por cada autor a una página específica para cada autor. 

Los artículos y las entradas de una web de varios autores necesitan ser enlazados a la página de autor adecuada usando la etiqueta rel="author". Si la página del autor también incluye un enlace al perfil del autor en Google usando la etiqueta rel="me", la información sobre el autor podría aparecer también en los resultados de búsqueda de Google.

Para ayudar a los usuarios a descubrir contenido de calidad, Google está experimentando con la forma de mostrar la información de los autores en los resultados de los motores de búsqueda. Esta característica está siendo lanzada gradualmente y podría llegar a ser una parte muy importante en los resultados de del motor de búsqueda y en el posicionamiento. 


Etiquetas Rel

Tanto los Enlaces de la sección de Contacto como los de la sección de Medios Sociales del currículum en la plantilla del sitio de una página contienen URLs que enlazan a un sitio web principal externo y a páginas en medios sociales. El atributo "rel" necesita añadirse a los enlaces de estas secciones de forma que el Código Authorship pueda ser implementado. El Markup Authorship permite a los motores de búsqueda identificar contenido creado por el mismo autor en todo Internet.  

Existen dos etiquetas específicas para rel usadas dentro del código Authorship:

  • rel = "me"
  • rel = "autor"

La mayoría de los enlaces incluidos en la página web del currículum apuntan a sitios relativos a la misma persona. Así que la etiqueta rel="me" ha sido añadida. Para el enlace del Perfil de Google, se ha añadido la etiqueta rel="author". Dependiendo de en dónde publiques tu currículum, podrías necesitar usar en cambio la etiqueta rel="me" para tu enlace al Perfil de Google. 


Paso 8: Crea un Perfil de Google

Si quieres empezar identificando tu contenido original a través de Internet usando Código Estructurado para Authorship, primero necesitas crear un Perfil de Google.

Si ya dispones de una página de Perfil de Google, entonces deberías actualizar la información de tu perfil para que esté en consonancia (añade una foto de perfil, información sobre ti, ocupación, etc.).

También necesitas asegurarte de que se muestra una pestaña +1 en la página.

Si tu perfil de Google incluye una buena, directa y clara visión sobre ti, optará a aparecer como miniatura en los resultados de búsqueda.


Paso 9: Crea Enlaces en Página(s) Web Hacia Tu Perfil

Según Google, para establecer la autoría de una página web, necesitas hacer dos cosas:

  • Coloca un enlace en esa página web hacia tu Perfil de Google
  • Actualiza tu Perfil de Google con un enlace de vuelta hacia la página de inicio de la web. 

Puedes enlazar tu contenido a tu Perfil de Google usando un enlace de texto:

o hacerlo a través del código que te proporciona Google Profile Button:

Google recientemente realizó cambios en las instrucciones de la estructura del código para la autoría que afectan al uso de las etiquetas rel="author" y rel="me".  Las nuevas instrucciones indican que debemos usar rel="author" tanto para los enlaces en forma de texto como los de botón. En cualquier caso, la etiqueta rel="me" necesita usarse en lugar de rel="author". Observa la captura de pantalla de abajo.

Captura de pantalla de "Error: La página de perfil del autor no dispone de un enlace rel=me hacia un Perfil de Google".

Usando Jonh Resig como ejemplo:


Paso 10: Completa el Formulario Google Authorship (¡Importante!)

Una vez hayas añadido los microdatos de Schema.org y hayas completado los pasos 8 y 9, completa y envía el Formulario de Solicitud de Autoría de Google

Tu Código Estructurado para la Autoría no funcionará correctamente hasta que el Formulario de Autoría de Google haya sido completado y enviado.


Paso 11: Comprueba el Código de los Microdatos Empleando la Herramienta de Comprobación para los Fragmentos Enriquecidos 

Pulsa sobre la imagen para ver los resultados completos de la prueba

Puedes cerciorarte de que Google es capaz de procesar y mostrar el código de tus microdatos en los resultados de búsqueda comprobando tu página con la Herramienta para Comprobar los Fragmentos Enriquecidos. Esta herramienta puede revisar varios tipos de código de datos estructurados, entre los que se incluyen los Microdatos, los Micro Formatos y RDFa

Nota: La Herramienta de Comprobación para los Fragmentos Enriquecidos de Google está en modo Beta y podría dar resultados inesperados. Los resultados mostrados en la captura de pantalla al completo incluyen un error "Advertencia: Falta rellenar el campo fn." Schema.org no usa la etiqueta "fn", sin embargo la etiqueta se usa con los Microformatos. Esto es probablemente un error.


¡Hecho!

Ahora ya has creado un buen currículum online usando HTML5 y Microdatos de Schema.org, lo que proporciona información sobre ti que podría mostrarse en los resultados de los motores de búsqueda. Adicionalmente, al usar Código Estructurado para la Autoría, ¡ayudas a los motores de búsqueda a identificar todo tu contenido original que esté distribuido por Internet!

¿Te queda alguna duda? Cuéntanoslo en los comentarios, ¡y muchas gracias por leer este artículo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.