Home » SEO » Cómo destacar el contenido principal de una página web

Cómo destacar el contenido principal de una página web

En muchos casos en los que se optimiza una landing page para una keyword, se invierte un esfuerzo considerable en la elaboración del contenido, en procurar  que la landing sea accesible por el buscador, en dotarla de autoridad, etc. Pero hay un factor el cual se suele descuidar bastante y que ayuda en gran medida a las arañas a determinar de qué habla la página, hablamos de diferenciar el contenido principal (contenido por el cual se ha creado la landing) del resto. Durante este post se comentará que se puede hacer para que el buscador distinga con mayor claridad cuál es el contenido central de una landing page.

Determinando el contenido principal

Pongamos un ejemplo para entender de qué hablamos. Supongamos que estamos viendo la ficha de producto de un televisor. Esta página podría tener una estructura como la siguiente (este es un solo un ejemplo simplista para entender el post):

 ejemplo-estructura-web

Del ejemplo anterior destacar que el contenido central se puede entender como lo englobado por el cuadro rojo, este agrupa la siguiente información del televisor: nombre, imágenes, información general (pestaña 1) y características (pestaña 2). Una persona puede determinar esto con mayor o menor claridad (depende del diseño) pero un buscador no analiza el contenido de la misma forma que nosotros (la araña del buscador analiza código),  por lo que le puede resultar difícil distinguir que contenido es el principal y cual el complementario. Debido a esto es necesario destacar en el código el contenido central, de esta forma le facilitamos el trabajo al buscador y ayudamos a que indexe la landing de la forma deseada.

Destacando el contenido central

La forma de resaltar el contenido central de cara a un buscador, puede variar en función de diversos factores, entre ellos versión de HTML, tipo de maquetación, etc. Por ello a continuación se presentan un conjunto de prácticas las cuales, dependiendo del contexto, nos permitirán resaltar en el código cual es la información principal.

Usando Wai-Aria

Wai-Aria (Web Accessibility Initiative Accessible Rich Internet Applications) es una iniciativa de la W3C que define cómo hacer más accesibles contenidos y aplicaciones web, dando un marco que permite trabajar los siguientes aspectos:

  • Estructuras más semánticas.
  • Mejora de navegación mediante teclado.
  • Widgets más accesibles.
  • Accesibilidad para el contenido actualizado de forma dinámica.

Dado que lo que pretendemos es destacar el contenido principal, nos centraremos en el primer aspecto del listado anterior (estructuras más semánticas).

Para conseguir esto Wai-Aria dispone del atributo “role” el cual sirve para definir el papel que juegan los elementos dentro del HTML. De estos roles, los que ayudan a dotar de significado a la estructura son los siguientes:

  • Role=”Article”: sección de la página que contiene un grupo de elementos que son independientes dentro de la misma. Suelen ser elementos del tipo: un comentario, un post, cada post dentro de un listado o cualquier elemento independiente dentro del contenido.
  • Role=”Banner”: región que contiene el encabezado principal de la página. Generalmente esta zona contiene información que se repite (logo, buscador, nombre del site, etc) en todas las páginas del sitio y suele coincidir con el header. De este elemento solo debería haber uno.
  • Role=”Complementary”: región separada del contenido principal pero que tiene relación con él, un ejemplo de esto pueden ser una sección de productos relacionados en una ficha de producto.
  • Role=”Contentinfo”: región que información relativa a la web del tipo, copyright, información de la empresa (nombre de sociedad, cif, dirección, etc), enlaces a páginas de privacidad y condiciones, etc. Se suele utilizar este role en el footer, ya que usualmente contiene este tipo de información. De este elemento solo debería haber uno.
  • Role=”Main”: región que engloba el contenido central de la landing. De este elemento solo debería haber uno.
  • Role=”Navigation”: una colección de elementos navegacionales, elementos que conforman menús.
  • Role=”Search”: zona para búsquedas dentro del site.
  • Role=”Application”: región de la página que contenga una aplicación web.

El que mayor carga semántica aporta al contenido central es el atributo “main”, pero el utilizar los demás roles para etiquetar el resto de la estructura también es útil para que la araña diferencie lo que es contenido principal de lo que y la estructura de estos contenidos.

Un ejemplo de cómo se usan estos roles roles lo podemos ver a continuación:

<div id=»content» role=»main»>

…Contenido principal…

</div>

Es importante comentar que especificaciones anteriores a HTML 5 no contemplan los roles de Aria, debido a ello si el documento contiene este atributo, no será posible validarlo. Dicho esto, para las versiones anteriores a HTML5, al utilizar roles hay que estar dispuesto a tener algunos errores de validación o incluir los roles mediante javascript, de esta forma pese a que realmente siguen estando los errores, el documento ya validaría.

Otro tema destacar es que muchos de los roles de Wai-aria tienen una coincidencia semántica con tags semánticos de HTML 5. Esto no quiere decir que no se debe utilizar estos roles, se pueden utilizar e incluso es conveniente, dado que hay muchos roles que no tiene correspondencia con ningún tag de HTML5. Que pasa entonces con los roles que si tienen una correspondencia? Por ejemplo, situaciones como la siguiente:

<nav role=»navigation»>

… Elementos navegacionales …

</nav>

Para facilitar la labor a las arañas y pensando también que muchas tecnologías asistivas usan estos roles debido a que el estándar de HTML5 aún puede sufrir modificaciones (la W3C ha anunciado que para el 2014 su borrador de HTML 5.0 pasará a estado “recomendado”), es de interés usar conjuntamente tags semánticos y roles aunque haya redundancias semánticas.

Usando los tags semánticos de html5

Una de las mejoras que ofrece HTML 5 es precisamente el dotar a la estructura de significado. Debido a esto dispone de tags semánticos los cuales pueden ayudar en gran medida al buscador a determinar cuál es la función de cada parte de la web.

Estos tags principalmente son los siguientes:

  • <header>: cabecera de la página.
  • <nav>: pie de página.
  • <section>: sirve para englobar un conjunto de elementos que forman una agrupación temática, hablamos de elementos tipo “productos relacionados”, si el contenido se divide en pestañas cada una de ellas puede ser un section, apartado de información de contacto, etc. Es importante tener en cuenta que este tag solo debería ser utilizado cuando los elementos a englobar no sean susceptibles de ser marcados con otro tag semántico como <article>.
  • <article>: grupo de elementos con un significado concreto los cuales tiene sentido, incluso si se sacaran de la página. Suelen ser elementos del tipo: un comentario, un post, cada post dentro de un listado de ellos o cualquier elemento independiente dentro del contenido.
  • <aside>: región separada del contenido principal pero que tiene relación con él, un ejemplo de esto pueden ser una sección de productos relacionados en una ficha de producto.
  • <footer>: pie de página.

Pese a que con estas etiquetas se puede englobar y dotar de significado a las mayores estructuras de una página, aún hay un cierto grado de incertidumbre al determinar cuál es contenido central ya que no hay nada que lo marque explícitamente. Debido a esto se propuso la inclusión de una nueva etiqueta:

  • <Main>: región que engloba el contenido central de la landing.

Esta etiqueta estará disponible en la nueva versión de HTML 5.1 y ya está soportada por varios validadores de HTML.

Usando las Clases y los Ids

En las páginas webs que usen especificaciones anteriores al HTML 5, hay formas de valerse de las clases e Ids para dotar de significado a los elementos estructurales del site. Estos elementos (Clases e Ids) son leidos por las arañas y si se usan nombres ampliamente usados del tipo “header”, “footer”, etc, el buscador puede interpretar el propósito de los elementos.

En el caso del contenido central, es recomendable nombrar el identificador como “main” o “content”, de esta forma la araña entenderá su función.

Minimizando código innecesario

En muchas ocasiones las páginas tienen mucho contenido que no es parte del contenido principal o que no es relevante y que se pone solamente por respetar la estructura que se ha seguido durante todo el site. Un ejemplo de este tipo de contenido y teniendo de nuevo en cuenta la página de una ficha de producto, puede ser los banners publicitarios, gran cantidad de textos en footer, información dentro del contenido central y que es común a todas las fichas de producto, comentarios de redes sociales, etc.

Esta información comentada anteriormente, en muchas ocasiones solo sirve para hacer bulto y restar relevancia al contenido central. Por ello es recomendable revisar las páginas en busca de la información extra, sopesar si realmente aporta algún tipo de valor añadido y eliminarla en caso de que no sea así. Decir que esto no quiere decir que haya que eliminarlo todo dejando las páginas solamente con el contenido central, solo hay que eliminar este tipo de contenidos siempre y cuando no afecten negativamente al site, es decir no deben afectar negativamente en términos de usabilidad y rendimiento.

Otro factor a tener en cuenta es la relación entre el contenido y el código. Si la maquetación ha sido descuidada y se ha incluido mucho código innecesario se producen situaciones de este estilo: estructuras con muchos tags anidados de forma inecesaria, gran cantidad de divs los cuales se podrían reducir, tags usados solamente como recurso de maquetación y no como elementos semánticos, etc. Este tipo de situaciones hacen que al robot le sea más difícil clasificar el contenido, por lo que en la medida de lo posible hay que reducir este código innecesario.

En pocas palabras

Si nos preocupamos de optimizar una landing para obtener unos ciertos resultados en los resultados de búsqueda, es necesario procurar que el contenido central pueda ser fácilmente detectado y clasificado por la araña, ya que en caso contrario puede que el esfuerzo invertido no de los resultados deseados.

 

Check Also

El tiempo de carga, Relevancia, Mitos y Recomendaciones

He estado este 23/09/2019 en Madrid en el 404summit dando una charla de optimización del ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *