Advertisement
  1. Web Design
  2. SEO

Mejorar la visibilidad de su sitio web con el marcado semántico

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial veremos cómo crear significado en su contenido con open graph, Twitter cards y microdatos. Al hacerlo, su contenido será más atractivo, más relevante y más accesible para los usuarios potenciales.

Google, Facebook, Twitter y las otras plataformas que tu y yo usamos para compartir y descubrir contenido todavía no pueden leer nuestras mentes. Las máquinas que alimentan la nube dependen de tu y yo, diseñadores y desarrolladores, para enseñarles el significado contenido en nuestro contenido y cómo se relaciona con nuestro público que tenemos de objetivo. Al enseñar estas plataformas sobre la abstracción y el significado, les permitimos mostrar contenido más relevante, provocativo y encontrable.

¿Qué es Encontrabilidad?

Encontrabilidad es la facilidad con la que una máquina o persona puede encontrar un poco de información relevante en línea.

¿Cuál de estos mensajes en Facebook obtiene más su atención?

¿Cuál de estos tweets es el más provocativo?

¿Y cuál de estos resultados de búsqueda de Google parece más relevante para sus intereses?

Google search result with and without microdata

Las diferencias anteriores son claras. Si no está implementando el protocolo Open Graph de Facebook, el sistema de Twitter cards y los microdatos para los motores de búsqueda, es probable que su contenido se ignore a favor del contenido más relevante de sus competidores. En este artículo le mostraré la importancia de entender a su público que tenemos de objetivo al implementar estos sistemas en su marcado semántico.

Marcado

En primer lugar, ¿qué es exactamente el marcado?

"Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación." - Wikipedia

En términos más simples, es una forma de marcar, anotar o diseñar un documento con plumas, lápices o computadoras de una manera que se ve simbólicamente diferente del texto que está marcando. El término proviene de revisores que marcarían manuscritos para ediciones.

Proofreaders Marks from the Chicago Manual of Style
Desde el Chicago Manual of Style

Las marcas de los revisores son una forma de marcado. Recuerda esto de la clase de inglés de la escuela intermedia (¿o estabas demasiado ocupado jugando con tu elegante walkman para prestar atención ?!)

Aquí hay tres maneras de marcar un documento digital para indicar un encabezado:

HTML:

Markdown

LaTeX

Ahora que tiene una comprensión más clara de lo que LaTeX ... error, marcado es, vamos a crear un documento básico HTML5 con una sola pieza de contenido. Lo usaremos para ilustrar las diferentes maneras en que podemos construir significado en ese contenido, lo que conduce a un aumento en su descubrimiento.

HTML

Primero, cree el documento HTML inicial en el editor de texto de su elección.

Eso es mucho más sencillo de lo que solía ser. !Ahora vamos a añadir un poco de contenido!

Contenido

Aquí está nuestra única pieza de contenido, una imagen de un gato muy infeliz, en una sección dentro del cuerpo de nuestro documento.

Cheer up mate
Anímate compañero...

Título

Ahora que sabemos con qué contenido estamos trabajando, podemos agregar el primer bit de contexto a nuestra página. Nuestro viejo amigo, etiqueta <title> en el <head> del documento

Vamos a pasar a algo un poco más desafiante (aunque aún simple) con el protocolo Open Graph de Facebook!

Protocolo Open Graph de Facebook

El Protocolo Open Graph permite que cualquier página web se convierta en un objeto rico en el gráfico social de Facebook. Permite que cualquier página web tenga funcionalidad similar a un objeto en Facebook.

El Open Graph de Facebook (así como el sistema Cards de Twitter, que veremos a continuación) funciona con los metadatos que agrega dentro de las páginas web de su <head> El mismo lugar en el que acabamos de poner nuestro <title>. En el caso del protocolo open graph de Facebook hay cuatro propiedades que se requieren.

Marcado de Open Graph necesario

Las cuatro propiedades de open graph requeridas por Facebook son:

  1. Title
  2. Type
  3. Image
  4. URL

Title

El primero de ellos es la etiqueta de title, que es el título del objeto que debería verse en Facebook.

Aquí está cómo mi ejemplo será titulado cuando el documento HTML se comparte en Facebook.

Nota: si crea un título que es diferente al título original, Facebook le dará un error al depurar su página. Facebook permite la diferencia pero no validará el 100%. No sé por qué Facebook frunce el ceño en esto, si tiene alguna idea por qué ¡hágamelo saber!

Type

La segunda propiedad que Facebook requiere es el tipo de objeto que mostrará a los usuarios en su plataforma.

Nuestro contenido no representa música o video. No es tampoco un artículo, libro o perfil. Todo lo que nos queda es el hecho de que nuestro contenido vive dentro de un documento HTML, que cuando se sube a un servidor web, y se convierte a un sitio web.

Image

La tercera propiedad que requiere Facebook es una imagen que representa nuestro objeto. ¡Éste es bastante simple!

URL

La cuarta y última propiedad que requiere Facebook es la URL que los usuarios experimentarán al interactuar con el objeto.

Al igual que la propiedad de imagen de esta es bastante sencillo.

Eso es todo lo que se requiere. Es hora de ser más abstracto con el significado que estamos inyectando en nuestro contenido, y para eso necesitamos identificar a nuestro público que tenemos de objetivo.

Publico que tenemos de objetivo

El punto de este artículo no es enseñarle a identificar su público que tenemos de objetivo. Sin embargo, deseo remarcar la importancia de saber quién es. Cuando está construyendo el contexto en su contenido, necesita saber quién desea descubrir su contenido, y qué deben aprender sobre ese contenido.

Para el contenido de este artículo, la imagen del gato de aspecto infeliz, el público que tenemos de objetivo es un diseñador de páginas web del que buscan aprender más sobre encontrabilidad (tu). Vamos a ver lo que parece en el siguiente en el marcado opcional que Facebook entiende.

Marcado abstracto opcional

Podemos añadir un marcado adicional como una descripción, que, si bien no es necesario, lo hace mucho más interesante para cualquiera que se encuentre con nuestro contenido.

¿Cuál debe ser nuestra descripción? Debe ser relativo al público que tenemos de objetivo.

¡Estupendo! ¿Recuerdas cómo te dije que Twitter funciona de manera similar al protocolo Open Graph de Facebook? ¡Vamos a echarle un vistazo a continuación!

Twitter

Twitter requiere diferentes propiedades dependiendo del tipo de tarjeta que esté usando. Para este ejemplo usaremos la predeterminada tarjeta de resumen que requiere estas cuatro propiedades:

  1. Card Type
  2. Attribution
  3. Title
  4. Description

La mayoría de estas propiedades en realidad no nos obliga a hacer ningún trabajo adicional. ¿Porqué es eso?

"Cuando el procesador de tarjetas de Twitter busca etiquetas en su página, comprueba primero la propiedad de Twitter y, si no está presente, vuelve a la propiedad Open Graph admitida. Esto permite que ambos se definan en la página de forma independiente y minimiza la cantidad de marcado duplicado necesario para describir su contenido y experiencia. - Twitter

Minimizar el marcado duplicado

¡Eso es genial! Las etiquetas que no necesitamos duplicar (aunque podrías si tienes una razón) son:

  1. og:title
  2. og:description
  3. og:image

Tres abajo, ¡faltan dos!

Card Type

En primer lugar vamos a decirle a Twitter el tipo de contenido que estamos compartiendo. Esta tarjeta se establecerá en la predeterminada tarjeta de resumen cuando se comparta el documento HTML en Twitter.

Eso fue simple, ¿qué sigue? ¡Espero que sea algo increíble!

Attribution

Twitter requiere una cuenta para ser atribuida con una cuenta de Twitter perteneciente al creador del contenido y/o propietario del contenido. Si el contenido pertenece a una página de la empresa o un departamento de la empresa (o existe en el sitio de la empresa pero no es propiedad de la empresa), puede utilizar una atribución de estilo de sitio.

Aquí es cómo esto se verá si está alojado en mi sitio personal:

Así es como se vería si Tuts+ Web Design alojaba el HTML:

Twitter tendrá que autenticar y lista blanca del dominio para cada tipo de tarjeta de Twitter. Esto es simple y automatizado, aunque no sé lo que implica si recibe una lista negra. Si alguien tiene experiencia con esto me gustaría aprender más.

¡Eso es todo para Twitter! Lo bueno de que hicimos Open Graph primero, es que Twitter nos ahorra mucho tiempo al trabajar con otras plataformas lo mejor posible. ¡Gracias Twitter!

Es hora de revisar los motores de búsqueda para encontrar nuevas formas contextuales y emocionantes de optimizar su contenido.

Microdatos y optimización de motores de búsqueda

Google SEO Microdata Rich Text Snippet Example

En primer lugar, una palabra rápida de Microsoft:

"El 2 de junio de 2011 [Microsoft] anunciamos una colaboración entre Bing, Google y Yahoo para crear y apoyar un conjunto estándar de esquemas para el marcado estructurado de datos en páginas web. Aunque nuestras empresas compiten de muchas maneras, era evidente para nosotros que la colaboración en este espacio sería buena para cada motor de búsqueda individualmente y para la industria en su conjunto. - Michael O'Connor

Microdatos es diferente de los otros marcados que ya hemos estructurado en que no vive en la cabeza del documento.

Utilizaremos microdatos para infundir el contexto en nuestro contenido en el cuerpo de nuestro documento HTML. Los motores de búsqueda utilizarán nuestros datos para mejorar la detección de nuestro contenido para sus usuarios.

Las máquinas creen lo que les decimos. Por ahora al menos...

Marcado de microdatos necesario

Las siguientes etiquetas son necesarias para cada elemento en el que desea crear significado.

  1. Item Scope
  2. Item Type

Primero necesitamos identificar lo que estamos describiendo. Vamos a tener un poco de diversión con la semántica y construir algún contexto o significado en nuestro contenido dirigido a nuestro público que tenemos de objetivo.

Recuerde que sólo tenemos una pieza singular de contenido. ¿Cuál es un poco obvio de significado del contenido dentro de nuestra imagen?

 gato

Bueno, parece un gato. ¡Eso es grande puesto que el Internet ama a los gatos! ¿Qué cosa representa mejor a un gato en el esquemas de marcado disponible para nosotros?

El significado contenido en esta imagen probablemente no es una acción, un servicio de difusión, una entidad médica de evento o un lugar. Definitivamente es un trabajo creativo, más específicamente es un ejemplo de una obra de arte visual, aunque Google está haciendo algunos cambios que podrían afectar el uso de este marcado en el corto plazo:


Vamos a declarar el itemtype dentro de la etiqueta section:

Ese es un buen comienzo, aunque nuestro contenido sigue siendo en su mayoría sin sentido. Google, Bing, Yahoo y Yandex están ahora 100% seguros de que nuestro contenido es un trabajo creativo, pero nada más. Vamos a añadir un contexto más significativo dirigido a nuestro mercado que tenemos de objetivo: diseñadores web.

Propiedades de microdatos opcionales

No es necesario que liste todas las propiedades que puede utilizar con el tipo de elemento Trabajo creativo. En este caso, son algunas relativas a los diseñadores web, que identificamos como nuestro público que tenemos de objetivo.

Comencemos por declarar todas las cosas acerca de este contenido que no son abstractas, sino que son concretas, firmes e inmutables en su significado.

Image

En primer lugar, se trata de una imagen con una ubicación de origen (src) en la web.

Author

Yo Soy el autor, o creador, de la ilustración digital.

Audience

¡Se ve bien! Ahora vamos a añadir el público que tenemos de objetivo.

Educational Use

Ahora vamos a establecer el tipo de uso educativo que pretendemos para esta imagen, que es un ejemplo en este caso.

Family Friendly

Nada de esto es NSFW, así que asegúrese de que este claro.

Character

¿Cómo nombramos a nuestro personaje de gato?

Oh si. Ese es un nombre bastante impresionante, aunque se está moviendo en un ámbito más abstracto. Las cosas están por ser del todo abstractas ahora.

About

Vamos a añadir un poco más de contexto acerca de la situación en nuestra imagen relacionada con nuestro público que tenemos de objetivo.

Terminemos esto con una lista de palabras clave delimitadas, segmentadas y relativas por comas para aumentar el factor de detección de nuestro contenido en 9000.

Validacion

Todo lo que queda por hacer es validar tu código con Google, Facebook y, finalmente, con Twitter. Esto es lo que ve en:

Facebook

Validating facebook open graph markup

Twitter

Twitter validation

Google

Google Structured Data Testing Tool Validation

Resumen

Entonces, ¿qué aspecto tienen todos juntos?

Al construir un significado en nuestro singular contenido con gráficos abiertos, cards de Twitter y microdatos, hemos mejorado la posibilidad de que nuestro público que tenemos de objetivo lo descubra, lo comparta y cree camisetas con él impresas en la parte delantera en tonos brillantes y audaces colores. ¡Buena suerte implementar marcado significativo en sus propios sitios web!

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.