9. Factores HTML clave para el SEO
En este artículo vamos a ver los factores HTML clave para mejorar el SEO o posicionamiento online de una página web.
S EO es un término que corresponde a las siglas en inglés Search Engine Optimization (optimización para buscadores). Mediante el posicionamiento web SEO conseguimos mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. Hay que tener en cuenta que los buscadores son las principales herramientas de consulta de información en Internet, por lo que si no aparece una web en ellos será muy difícil que los usuarios entren.
E n Europa el buscador que más se utiliza es Google, aunque hay otros como Baidu, Bing, Yandex, Ecosia o DuckDuckGo. Cuando realizas una consulta en un buscador, aparecen los resultados orgánicos y los resultados patrocinados. El SEO se centra en los resultados orgánicos o naturales que son aquellos cuya posición está definida por el algoritmo del buscador. Para escalar posiciones en los resultados de búsqueda hay muchas tácticas que van desde la optimización de la página web hasta la generación de contenido, pasando por la obtención de links de forma natural y la relación con otras plataformas.
O bserva entonces que la razón más importante para tener muy en cuenta el SEO en la estrategia de marketing digital de cualquier página web, es que ayuda a los motores de búsqueda a entender sobre qué trata cada una de las páginas y a mejorar los puestos en los resultados de los buscadores más utilizados.
#1 Título de la página, etiqueta title
La etiqueta title es muy importante ya que los buscadores suelen utilizarla para el título del resultado de búsqueda.
- Título descriptivo, claro y llamativo: El título debe ser descriptivo, claro y que ofrezca una propuesta de valor atractiva con el fin de conseguir que el usuario sienta interés y decida hacer clic.
- Tamaño de 70 caracteres: De cara a los motores de búsqueda, la dimensión óptima del título es de unos 70 caracteres. Hay que tener mucho cuidado en no dejar el título en blanco, muy corto, muy largo o crear etiquetas de título duplicadas.
- Palabras clave al principio: el título debe contener las palabras más importantes al principio de la frase.
<title>Título de la página</title>
En SEO se suele decir que no es necesario incluir un meta title (<meta name="title">) explícito, ya que la etiqueta <title> cumple de manera efectiva con la función principal de proporcionar el título de la página que los motores de búsqueda utilizan para indexar y mostrar en los resultados. Sin embargo, algunos sistemas de gestión de contenido (CMS) pueden generar automáticamente un meta title basado en el contenido de la página, aunque este no tenga el mismo impacto que la etiqueta <title> en términos de SEO.
A continuación, se muestra un ejemplo de cómo se verían la etiqueta <title> y un meta title en el código HTML:
<head>
<title>Título de la página</title>
<meta name="title" content="Título alternativo para SEO">
</head>
#2 Descripción de la página, metadescripción o metaetiqueta description
Igual que con el título, la metaetiqueta description es muy importante puesto que los buscadores suelen utilizarla para el fragmento del resultado de búsqueda.
- Metaetiqueta description con contenido claro y sugerente: la descripción debe ser clara y sugerente con el fin de conseguir que el usuario sienta interés y decida hacer clic.
- Tamaño de 160 caracteres: de cara a los motores de búsqueda, la dimensión óptima de la descripción es de unos 160 caracteres. Hay que tener mucho cuidado en no dejar la descripción en blanco, muy corta, muy larga o crear etiquetas de metadescripción duplicadas.
- Palabras clave incluidas en la metadescripción: la metadescripción debe contener las palabras clave con las que queremos posicionar el documento web.
<meta name="description" content="Descripción de la WEB">
Ver más información sobre títulos y fragmentos en Search Console
#3 Etiquetas de encabezado
Como hemos visto en esta unidad, el lenguaje HTML dispone de las etiquetas h1, h2, h3,… y h6 para especificar los encabezamientos, siendo h1 el más importante y el h6 el menos importante. Además, debemos tener en cuenta las siguientes sugerencias:
- Todas las páginas web deben disponer mínimo de un título de encabezado h1 que debe aparecer al principio de todo el contenido. Lo más recomendable es que este título cuente con las palabras clave con las que queremos posicionar el documento web. Estas palabras clave deben coincidir con las de la etiqueta title y la etiqueta description. Esto favorece a la coherencia de la página web y en definitiva a mejorar su posicionamiento.
- Un documento web no puede disponer de más de un título h1.
- Si existen subsecciones en la página, es recomendable añadir etiquetas h2, h3,… sin dar saltos entre las etiquetas y respetando su jerarquía.
- Siempre que sea posible es recomendable añadir una etiqueta de encabezado cada 300 o más palabras.
#4 Maquetación sin tablas
Originalmente los diseñadores de páginas web utilizaban las tablas y los espaciadores para crear y mantener la disposición de los elementos de un sitio web. Sin embargo, este tipo de diseño ha sido descartado para favorecer la reducción del tamaño de los archivos y porque al ser leído por un motor de búsqueda el orden del contenido de las celdas de las tablas puede resultar muy confuso.
Por tanto, siempre que sea posible es aconsejable maquetar sin tablas (tableless layout). Por ello, para la maquetación debemos utilizar las etiquetas html correspondientes y hojas de estilo en cascada CSS. En la siguiente unidad profundizaremos en la creación de hojas de estilo CSS.
#5 Minificar el código HTML
La velocidad de carga es uno de los factores más influyentes en la experiencia que reciben los usuarios de un sitio web. Por este motivo, tiene una incidencia directa en las tasas de abandono: los usuarios tienden a cerrar la página cuando ven que tarda mucho en cargar.
De esta forma, para reducir el tamaño de los ficheros HTML hay que evitar los espacios en blanco y los comentarios innecesarios. Además, se puede minificar el código mediante herramientas específicas. Ver ventajas y desventajas de minificar el código
#6 Número de enlaces internos/externos
Si el número de enlaces salientes hacia otras páginas web es elevado, tu sitio web puede perder popularidad ya que el zumo de popularidad se está repartiendo a páginas externas y no a tu propio dominio.
Por tanto, hay que mantener un equilibrio entre número de enlaces internos y externos. Intenta minimizar el número de enlaces salientes, sobre todo los situados al pie de página puesto que afectará a todas las páginas de tu web.
#7 Anchor text en los enlaces entrantes
El texto de anclaje o anchor text es el texto visible en el que el usuario hace clic para entrar a una web. Las palabras clave contenidas en ese texto visible intervienen en el cálculo que realizan los buscadores para el posicionamiento por lo que deben contener las palabras clave que se quieren posicionar en esa página concreta.
#8 Busca errores en tu documento HTML
Utiliza el validador HTML para encontrar posibles errores cometidos y soluciónalos para mejorar tu posicionamiento. Además, asegúrate de no utilizar etiquetas HTML antiguas y deprecadas.
#9 Incluye un favicon
Disponer de un favicon es otro de los elementos valorados por los buscadores para mejorar el posicionamiento online de una página web. Además, añadir un favicon a tu sitio es de gran utilidad porque le da un aspecto más serio y profesional, además de que aparece en la barra de navegación y los usuarios pueden ubicar tu página con mayor facilidad cuando tengan varias pestañas abiertas.
Para crear un favicon puedes utilizar la siguiente herramienta: http://www.favicon.pro/es/
Una vez hayas creado tu favicon.ico:
- Sube el favicon.ico generado en tu sitio web (por ejemplo en la raíz del sitio). Verifica que está ahí escribiendo http://susitio.com/favicon.ico en el navegador.
- Copia y pega el siguiente código HTML dentro de la etiqueta head de tu página web.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">También se puede especificar un favicon mediante una imagen en png.
#10 Incluye un mapa del sitio
Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio web ya que aseguran que todas las páginas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús en JavaScript que incluyan enlaces HTML.
La mayoría de los motores de búsqueda no siguen un número infinito de enlaces desde una página, por lo que si el sitio es muy grande la existencia del mapa del sitio puede ser necesaria para que tanto los motores de búsqueda como los usuarios accedan a todo el contenido web.
#11 Utiliza el atributo alt en todas tus imágenes
El nombre de alt viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que se visualiza en una imagen. También es el texto que utiliza el navegador cuando la imagen no se puede cargar.
Asegúrate de escribir bien el atributo alt:
- Describe correctamente el contenido de la imagen.
- Incluye la palabra clave principal.
- Utiliza pocas palabras.
- En el caso de disponer de una imagen meramente decorativa, debemos incluir el atributo alt vacío. Este tema se trata en profundidad en la unidad de accesibilidad web.
#12 Ten en cuenta la accesibilidad web
Un sitio web accesible suele tener contenido de calidad, lo que es fundamental para el SEO, ya que los motores de búsqueda valoran el contenido útil y relevante. Además, tener un sitio web accesible mejora la experiencia del usuario, lo que puede aumentar el tiempo que los visitantes pasan en el sitio, reducir la tasa de rebote y mejorar el posicionamiento en los motores de búsqueda. Por este motivo, es recomendable tener en cuenta hacer imágenes accesibles, tablas accesibles o formularios accesibles, entre otros aspectos que se pueden estudiar en detalle en el curso de accesibilidad web .
#13 Busca mejoras mediante una herramienta especializada
Hay muchos otros aspectos a tener en cuenta como por ejemplo: incluir enlaces a tus redes sociales, no utilizar frames, incluir la declaración <!DOCTYPE html>, especificar el lenguaje en la etiqueta html, etc. Todos estos aspectos varían según las actualizaciones de las arañas de los diferentes buscadores. Así que hay que mantenerse muy al día y utilizar herramientas especializadas que nos ayuden a detectar las mejoras que podemos realizar en nuestras webs.
Algunas de las herramientas más utilizadas para buscar mejoras en el SEO de un sitio web son Semrush, Ahrefs, Sistrix, Majestic, etc. Estas herramientas ofrecen mejoras relacionadas con HTML, pero también en otros aspectos como la velocidad de carga, seguridad y certificado SSL, cantidad de enlaces internos y externos, enlaces rotos, etc. En próximas unidades profundizaremos en este aspecto.