La influencia del código HTML en el SEO

Influencia de HTML en el SEO

Uno de los factores más influyentes en lo que se conoce como SEO On Page básico, además de la estructura elegida para nuestra web, es el código HTML que usemos en cada uno de los documentos o páginas que forman nuestro proyecto web.

El código HTML se puede definir como un lenguaje de programación formado por una serie de etiquetas que al ordenarlas de cierta forma son interpretadas por los diferentes navegadores, representando así visualmente su contenido en nuestra pantalla.

Para facilitar a los navegadores la representación visual del contenido de una página web y la compatibilidad con todos los navegadores, existen unos estándares y recomendaciones que debemos de seguir a la hora de diseñar nuestro HTML. La organización conocida como W3C es la encargada de establecer estas recomendaciones.

Evolución HTML

El código HTML ha ido evolucionando a lo largo del tiempo, los diferentes navegadores se han ido adaptando para poder ir incorporando las nuevas etiquetas que han ido surgiendo en cada versión. La obsoletización de los sistemas operativos y el estancamiento de algunos navegadores han generado mas de un dolor de cabeza a los desarrolladores web.

Cuando yo inicié mi andadura en el mundo del desarrollo web se estaba empezando a implantar HTML5, y nos encontrábamos en la situación de que muchos usuarios todavía usaban XP con navegadores obsoletos que no eran capaces de representar correctamente las nuevas etiquetas HTML5.

Se establecía el dilema entre seguir utilizando un XHTML más consolidado y compatible o empezar a desarrollar un lenguaje más moderno, con una estructura más semántica, perdiendo así numerosas visitas y clientes potenciales cuyos navegadores no eran capaces de interpretar y mostrar correctamente el contenido.

Personalmente la compatibilidad siempre fue mi primera opción, la adaptación a HTML5 la he ido realizando progresivamente. Perder visitas por no tener una web compatible con todos los navegadores no es una buena estrategia.

Pero esto no ocurre actualmente, ahora ya no hay excusa para no usar HTML5 en tu web. Todos los navegadores actuales son compatibles y esta versión nos ofrece muchas ventajas, entre otras, su estructura y nuevas etiquetas semánticas que, facilitan a los buscadores comprender y priorizar el contenido importante del documento.

Esta estructura semántica hace mas sencillo a los robots diferenciar entre cabeceras, menús de navegación, pies de página y saber así cual es el contenido realmente importante dentro de cada página de nuestra web, dando mayor relevancia a las palabras clave aquí contenidas.

Facilitar el trabajo a Google y demás buscadores son puntos a favor a la hora de competir por la posición con otras páginas menos optimizadas.

La elección de cómo diseñar tu web siempre depende de cada caso, por ejemplo, este blog. El objetivo para mi, como desarrollador web, cuando me decidí a crear el blog era aprender a crear y utilizar páginas con uno de los CMS en PHP mas extendidos como es WordPress, el uso y modificación de plantillas, cómo se estructuran los plugins etc.

Etiquetas SEO básicas

Existen una serie de etiquetas obligatorias para el posicionamiento, comunes independientemente del lenguaje seleccionado y muy básicas. Son las etiquetas que manejan los propios redactores de contenido, que deben conocer de su importancia para poder diferenciarnos de la competencia con un contenido de calidad.

title

La etiqueta title corresponde al título del documento y es el nombre que aparece arriba, en las pestañas de los navegadores. A pesar de ser la etiqueta más básica y conocida, su optimización es uno de los puntos mas importantes en cuanto a las acciones SEO on Page.

Debemos utilizar una frase que describa de forma breve el contenido de la página incluyendo las palabras clave que tendrán mas importancia en el contenido. Las palabras situadas al comienzo de la frase tendrán más fuerza a la hora de posicionar.

<title>Circuitos por España en Bus económicos - SMSVacaciones</title>

smsvacaciones.com

En este ejemplo, la palabra clave objetivo, que sería Circuitos por España se sitúa al principio de título, mientras que al final se suele poner el nombre de la marca como estrategia de branding.

En la lista de resultados de los buscadores se mostrará esta línea como título del enlace a nuestro sitio, que junto con la meta-etiqueta description, deberán estar redactadas de forma atractiva, teniendo en cuenta que es la única herramienta que disponemos para convencer al usuario del buscador de entrar en nuestra web.

Un dato importante a tener en cuenta a la hora de redactar esta etiqueta es su longitud. Demasiado corta pierde potencial, demasiado larga saldrá recortada en los resultados. El tamaño recomendado actualmente está en unos 55 caracteres. No se recomienda en ningún caso superar los 70 caracteres.

Nada nos asegura que lo que escribamos en la etiqueta title será lo que se muestre en la lista de resultados, en ocasiones Google lo puede cambiar por cualquier otra frase del contenido si considera que se adapta mejor a la busqueda introducida por el usuario.

Es importante que cada página de tu sitio web tenga un title único y diferente al resto de las páginas. Entre las notificaciones que podemos recibir en la herramienta gratuita Google Search Console están las páginas cuyos title se repiten. Debemos prestar atención a estos avisos y corregirlos.

meta description

Existen un tipo de etiquetas que el usuario no ve y que se utilizan sólo para indicar algo a los navegadores y buscadores. Se llaman meta o meta-etiquetas.

La meta-etiquetas tienen la siguiente estructura:

<meta name="" content="">

La meta-etiqueta más conocida es la meta-description. Al igual que la etiqueta title, el redactor de contenido tiene que estar bien informado de su importancia para el SEO y su actuación como gancho para acaparar un mayor número de clics que otras páginas similares.

El tamaño máximo actualmente es de unos 150 caracteres.

<meta name="description" content="Descripción resumiendo el contenido">

El conjunto title - description es lo que hará que un usuario que nos vea en la lista de buscadores decida entrar en nuestra web o no.

Muy importante es que tanto title como description sean una fiel descripción resumida del contenido real que se van a encontrar al entrar en nuestra web.

Si logramos llamar la atención de un usuario, decide entrar en nuestra página y resulta que el contenido de la página no se corresponde con lo esperado, no va a tardar mucho en volver atrás.

Esto, además de generar una mala experiencia de usuario, va a aumentar la tasa de rebote (usuarios que abandonan la web sin hacer ningún click) y disminuir el tiempo de permanencia (dwell time). Dos parámetros que Google mide y podría ser un factor de influencia en el posicionamiento SEO.

A continuación he encontrado un ejemplo de una redacción de titulo y descripción correcta y otro mejorable en SMSVacaciones - agencia de viajes cuya web intento mejorar y posicionar.

etiqueta title y description bien
Etiqueta title y description bien redactadas, con palabras clave, marca y bien resumido.
etiqueta title y description mal
Etiqueta title demasiado corta. Description poco relevante y excesivamente largo.

keywords

La etiqueta keywords es otra meta-etiqueta, pero ésta ha ido perdiendo importancia y quedando en desuso con el paso del tiempo. Anteriormente tenían influencia en el posicionamiento y se utilizaban para situar palabras clave relevantes para posicionar la página.

Hay un debate bastante extendido acerca de su utilidad, porque parece que Google ya no las tiene en cuenta a la hora de posicionar. Lo único seguro es que su utilización de forma discreta no perjudica al posicionamiento y existen buscadores que todavía las tienen en cuenta.

Yo actualmente las sigo utilizando, suelo poner entre tres o cuatro palabras clave separadas por coma. Mientras Google no recomiende su eliminación las seguiremos utilizando en nuestras web.

<H1>, único e importante. Jerarquía <h2>...<h6>

La utilización correcta de las etiquetas de encabezado <h1>,< h2>,< h3>... <h6> es muy importante para conseguir un buen posicionamiento SEO ya que aportan una jerarquía a nuestra página web, esto ayuda a los motores de búsqueda y son fundamentales para los usuarios que emplean lectores de pantalla.

La etiqueta <h1> es la mas importante del documento después de <title> y al igual que ésta su uso es obligatorio, debe contener palabras clave, describir brevemente el contenido y ser única en cada página de nuestra web.

Dentro del documento sólo puede existir un encabezado <h1>. Aunque inicialmente en HTML5 se estableció que cada elemento section podría tener su propio h1, no es nada recomendable porque algunos navegadores no lo contemplan y no nos beneficia en el posicionamiento.

Es muy importante que la jerarquía de la página sea correcta, existen 6 niveles de encabezado <h1>...<h6> cuya secuencia numérica hay que respetar. No tienen ningún sentido pasar directamente de un <h2> a un <h6>, cuyo resultado sería una web mal estructurada.

Con el plugin Web Developer para firefox y chrome podemos analizar los encabezados y detectar posibles problemas con la jerarquía de los mismos.

Listados, <ul> <ol> <dl>

Dentro de una buena estructura HTML cabe destacar el buen uso de las listas, que ayudan a estructurar información de forma esquemática y mejorar la experiencia de usuario influyendo positivamente en nuestro posicionamiento.

Etiquetas Semánticas

La utilización de HTML5 no se debe limitar a cambiar descripción del documento de XHTML a HTML5 cambiando todos los divs por sections.

Como he comentado anteriormente, HTML5 es un lenguaje semántico, es decir, dispone una serie de etiquetas que tiene significado propio aunque quitemos la capa CSS que da estilo a nuestra página.

Esta ventaja es la que nos aporta la mejora SEO frente al HTML anterior ya que para los buscadores es mas sencillo interpretar la estructura.

<header></header>

Con header definimos un grupo de elementos que forman parte de una cabecera, ya sea de la cabecera del documento, como de la cabecera de una sección.

Como sirven para definir cabeceras de diferentes partes del documento es normal encontrar numerosos <header> en un mismo documento. Pueden incluir etiquetas de tipo título (hgroup, h1, h2,...).

<hgroup></hgroup>

Se utiliza para agrupar etiquetas de título h1,h2...h6 cuando disponemos de un título con varios niveles. No es necesario su utilización para un título con un sólo nivel, es decir, cuando el título tiene sólo un h1, por ejemplo.

<aside></aside>

Se utiliza para definir un contenido independiente del objetivo principal de la página o de una sección de la misma. Puede ser un contenido relacionado con lo que le rodea, pero con menos peso. Un ejemplo de su uso serían los laterales donde incluimos enlaces, etiquetas, comentarios etc.

<footer></footer>

Representa el pie de una sección o de la página. Engloba un contenido que puede estar relacionado con el contenido de la página o sección, pero no forma parte del mismo. Por ejemplo, datos del autor de un artículo, enlaces a la política de privacidad etc.

<section></section>

La etiqueta section se utiliza para definir un bloque del documento que agrupa contenido con una misma temática. Su uso es parecido al <div>, con la diferencia que el <div> en HTML5 se utiliza para crear bloques separados visualmente, mientras que el <section> se usa para crear bloques separados por su contenido.

Cada section puede incluir o no sus propios header, footer y aside. Puede a su vez estar dividido en diferentes section y contener bloques con la etiqueta article.

<article></article>

El elemento article lo debemos utilizar para indicar que su contenido es independiente y único, diferente del resto del documento. Es decir, podemos extraer el contenido del article de la página y su contenido seguirá teniendo significado.

Por ejemplo, en un artículo de blog, el contenido del propio artículo podría ser el único article del documento.

Si tenemos, en cambio, una página con una lista de resultados, cada uno de esos resultados son independientes y podríamos formar diferentes bloques article.

Podemos encontrar páginas con <section> que contienen <article>, <article> con varios <section>, <article> que incluyen a otros <article>, <section> con otros <section> etc.

Los elementos <section> y <article> son similares, ambos sirven para agrupar por contenido, siendo <section> un elemento más genérico que normalmente contiene una cabecera.

<nav></nav>

Otra de las etiquetas importantes a tener en cuenta cuando maquetamos en HTML5 es la etiqueta <nav>, donde incluiremos un conjunto de enlaces que forman parte del menú de navegación. Debe contener enlaces internos de navegación por las diferentes secciones principales de nuestra web.

Suele ser común en todas las páginas de la web y estar en la cabecera del documento. Ayuda a los buscadores a entender la estructura de nuestra web

Etiquetas específicas para Buscadores

Como vimos en el apartado de la meta-etiqueta description, existen etiquetas específicas para buscadores que son las meta o meta-etiquetas. Estas etiquetas van siempre definidas en la cabecera del documento, dentro del bloque <head></head>

Además de description y keywords existen otras meta etiquetas muy útiles. Algunas de ellas juegan un papel fundamental en el SEO on Page.

meta canonical

La meta-etiqueta canonical es fundamental en la estrategia SEO on Page, su uso es obligatorio para evitar el contenido duplicado si tenemos páginas accesibles con diferentes URL.

Por ejemplo, en una tienda online podemos tener el mismo artículo con diferentes colores. La descripción del artículo no varía, pero cada uno de los artículos puede generar una URL diferente. Necesitamos, por tanto, definir cual de esas URL queremos que sea la principal o canónica.

Con la etiqueta canonical incluida en el <head> de cada página similar estamos indicando a los buscadores cual de esas URL debe indexar, evitando así la indexación de contenido duplicado.

Veremos cómo implementar y usar correctamente la meta etiqueta canonical en un artículo específico mas adelante.

paginado

Uno de los problemas principales a la hora de presentar una lista de resultados con varias páginas es precisamente el riesgo de que estas páginas sean interpretadas como contenido duplicado.

Existen unos atributos que se pueden agregar a una etiqueta <link ...> para indicar a los buscadores que estas páginas forman parte de una secuencia de paginado y están relacionadas.

Son las etiquetas rel="next" y rel="prev" y se incluyen en el <head> del documento con la siguiente estructura.

<link rel="prev" href="https://smsvacaciones.com/viajes/circuitos-garantizados/p-2">

<link rel="next" href="https://smsvacaciones.com/viajes/circuitos-garantizados/p-4">

Los dos elementos anteriores incluidos en el <head> del documento indican a los buscadores, por tanto, cuáles son los enlaces de las páginas anteriores y posteriores a la que nos encontramos dentro del listado del ejemplo.

Otras recomendaciones HTML

CSS

Existen otras recomendaciones a la hora de maquetar nuestra página, como por ejemplo el uso siempre de estilos CSS, evitando siempre incluir los estilos de forma embebida en el códido HTML, como se hacía anteriormente.

Tiempo de carga

Cuidar los tiempos de carga de nuestra web. Un exceso de código JavaScript, influye en la velocidad de carga. El JavaScript mejora la experiencia de usuario, pero hay que tener cuidado ya que los plugins externos suelen sobrecargar con código innecesario, lo que puede ralentizar la carga influyendo en el posicionamiento.

Imágenes

Hoy en día las imágenes son una parte muy importante en el diseño de cualquier página web, un blog, una tienda online, o , por supuesto, una agencia de viajes deben utilizar imágenes para hacer más atractivo el contenido.

Hay varios atributos que se pueden definir en una imagen, pero en cuanto al SEO el más importante es el alt o texto alternativo, que los navegadores muestran cuando no pueden cargar la página y Google utiliza para saber cual es el contenido de la imagen.

Migas de pan

Los breadcrumbs o migas de pan es un tipo de menú de navegación que se utiliza como ayuda para conocer la posición de la página que estamos visitando dentro de la estructura de nuestra web.

SMSVacaciones > Larga distancia > Japón > Monte Koya

Ayudan al usuario a no perderse dentro de la arquitectura de la web y a los buscadores a interpretar e indexar mejor nuestra página.

Accesibilidad Web

Una página web accesible es aquella que puede llegar al mayor número de usuarios posibles. Hay que tener en cuenta que un gran número de usuarios de nuestra web podría tener algún tipo de limitación y su acceso al contenido no es el convencional.

Un lector de pantallas para personas con deficiencias visuales debe poder interpreta correctamente la estructura de la página para que la experiencia de usuario sea adecuada.

Un correcto uso de la jerarquía de encabezados, emplear anchor texts en los enlaces que identifiquen el contenido enlazado y la utilización del atributo alt en todas las imágenes, por ejemplo, forman parte de las diferentes pautas que hay que seguir a la hora de crear una página web accesible.

En cuanto a su relación con el SEO, hacer un sitio web accesible facilita su lectura y la comprensión del contenido, por lo que las hace más sencilla de indexar mejorando así su posicionamiento.

Un comentario en “La influencia del código HTML en el SEO

  1. Pingback: Link Juice, qué es y cómo funciona - Daniel Barreno

Deja un comentario

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