Un HTML bien estructurado es esencial para que los rastreadores de los motores de búsqueda puedan entender y renderizar el contenido de tu sitio web de manera eficiente. Los rastreadores analizan el código de cada página para identificar su estructura, interpretar la relevancia del contenido y determinar cómo debe mostrarse en los resultados de búsqueda.
Si el HTML de tu sitio está desorganizado o no sigue las mejores prácticas, esto puede afectar negativamente al posicionamiento de tus páginas, limitando su visibilidad y, por ende, el tráfico orgánico que recibes.
¿Qué es HTML?
El HTML es un lenguaje de programación para la creación de páginas web. Todas las páginas web están escritos este código pero no es el único ya que existen otros como CSS (marca los estilos), JavaScript o PHP (aplicar funciones).
Está formado por una serie de elementos y se considera un lenguaje de marcas ya que incluyen el texto dentro de limitadores los cuales son identificados por los navegadores para manipularlos.
Como verás en este ejemplo de código HTML, los elementos del código HTML tienen la siguiente estructura y estos elementos a su vez pueden contener uno o varios atributos siguiendo la siguiente sintaxis.
Estructura HTML
El lenguaje HTML dispone de unos elementos estructurales fundamentales para que los navegadores interpreten de forma correcta el contenido de las páginas. Es importante facilitar la lectura de las páginas a navegadores y robots para conseguir un buen posicionamiento.
Para crear y editar una página HTML únicamente necesitaremos un editor de texto como VS Code y guardar el archivo de la siguiente manera: nombrearchivo.html
A nivel HTML existen dos tipos de elementos dentro del código HTML:
- Elementos no semánticos: No dicen nada sobre su contenido. Se utilizan para facilitar la programación y la aplicación de estilos. Ej: <div>, <span>, etc.
- Elementos semánticos: Definen su contenido. Ej: <header>,<nav>,<form>, <table>, <article>, etc.
Algunas páginas web podemos encontrar códigos HTML como los siguientes: <div id=”nav”>, <div class=”header”>, etc. A nivel visual es idéntico a utilizar las etiquetas correspondientes pero es una mala práctica que dificulta la lectura del contenido de la página a navegadores y robots.
Principales Elementos Semánticos
Los elementos semánticos en HTML ayudan a estructurar el contenido de cada sección de una página. A continuación, te muestro los principales elementos que definen la estructura básica y lógica de un sitio web:
<HTML>
<head> Esta etiqueta encierra elementos que no son directamente visibles en la página web pero son esenciales para su funcionamiento, presentación o indexación por motores de búsqueda como pueden ser las metaetiquetas o contenedores de GTM, GA4, píxeles, etc. </head>
<body> Contiene todo el contenido visible de una página web que se visualiza y el usuario puede interactuar una vez el navegador carga la página. En el encontramos las diferentes etiquetas HTML que estructuran la página:
<header> Es la cabecera que se encuentra en la parte superior de la página. Contiene el Logo, buscador, login y otros elementos. Normalmente se replica en todas las URLs de la web.
<nav> Es el menú de navegación de la web. Se suele encontrar dentro del <header> aunque hay webs que utilizan menús en la zona izquierda de la página. Normalmente se replica en todas las URLs de la web. </nav> </header>
<main> Es el contenido principal de la página que se encuentra entre el <header> y el <footer>. Es importante que aparezca solamente una por página. Es la parte de la web que cambia entre las diferentes URLs del dominio en la que encontramos el resto de elementos semánticos como puede ser <section> o <article>. Existen otras etiquetas como <aside>, <form>, <table>, etc. menos comunes que se utilizan para ciertas funciones que queramos realizar </main>
<footer> Es el pie de página. Contiene información legal como la política de privacidad, aviso legal, cookies y otros enlaces de interés. Normalmente se replica en todas las URLs de la web. </footer>
</body>
</HTML>
Otros elementos semánticos
Además de la estructura básica, existen otros elementos semánticos en HTML que ayudan a definir partes específicas del contenido.
<article> Contenido específico, independiente y autónomo. Debe tener sentido por sí solo y ha de ser posible mostrarlo de forma independiente en cualquier parte de la web. Por ejemplo un post de un foro, artículo de blog, etc.</article>
<section> Define una sección dentro de una página. Definimos sección como grupo de elementos de una misma temática </section>
⚠️ Un elemento <section> puede contener varios <article> y <article> puede contener varios <section> ⚠️
<aside> Normalmente se posiciona en una barra lateral de la página. Se utiliza para añadir información adicional relacionada con el contenido principal de la página. El ejemplo más sencillo es la barra lateral de un blog o una barra lateral con anuncios de adsense </aside>
<details> Incluye detalles adicionales que el Usuario puede abrir o cerrar. Por defecto, se muestra cerrado. Por ejemplo una pregunta frecuente
<summary>: Define el título o cabecera de un elemento <details></summary>
<p> Define un texto simple en formato párrafo </p>
</details>
<figure> Contiene contenido como imágenes, ilustraciones, fotos, diagramas, etc.
<img> Define una imagen. El enlace de la imagen s añade como un atributo del elemento </img>
<figcaption> Contiene el subtítulo de un elemento <figure></figcaption>
</figure>
<mark>: Contiene elementos resaltados
<time>: Contiene hora o fecha. Con el atributo “datetime” los navegadores permiten agregar el elemento al calendario, mostrar recordatorios y los motores de búsqueda pueden mostrar resultados inteligentes.
Etiquetas
Las etiquetas HTML son comandos que se utilizan para definir la estructura y el contenido de una página web. Están formadas por elementos rodeados de corchetes angulares “<>” que indican a los navegadores cómo deben mostrarse los diferentes tipos de contenido.
Encabezados Hn
Uno de los tipos de etiquetas más importantes de cara a un buen posicionamiento web son los encabezados. Estas etiquetas son muy simples de utilizar pero es importante que contengan palabras clave de la página y que estén bien organizadas.
Enlaces
Crear un enlace en HTML es simple pero es necesario conocer todos los atributos que les podemos asignar.
Además de crear los enlaces con HTML también se pueden crear con Javascript. Esto nos permite crear enlaces ofuscados: Google no los detectará ni podrá rastrearlos. Para el usuario estos enlaces serán iguales pero el código que los genera es diferente:
Atributos de enlaces
href: URL destino del enlace
hreflang: Idioma de la página enlazada, si la página enlazada se encuentra en otro idioma
rel: especifica la relación entre la página actual y la vinculada. Puede tener uno o varios atributos:
-
- alternate: Representación alternativa del documento (versión impresa, traducción, etc.)
- author: Enlace al autor del documento
- external: Enlaces a sitios externos
- help: Enlace a documento de ayuda
- license: Enlace a páginas de información de licencia
- next: Enlace al siguiente documento dentro de una serie
- prev: Enlace documento previo dentro de una serie
- nofollow: Especifica a la araña de Google que no siga este enlace.
- noreferrer: Evita enviar información a la web destino eliminando información de referencia. No afecta al SEO.
- noopener: Atributo para añadir seguridad y evitar que el enlace destino pueda acceder a la web de origen. No penaliza al SEO.
- search: Enlaces a herramientas de búsqueda dentro del documento.
- tag: Enlaces a palabras clave dentro del mismo contenido (puntos de ancla)
Target: Especifica donde se abrirá el enlace. Al contrario que la etiqueta “rel”, este no puede tener varios atributos
-
- _blank: Abrir en nueva pestaña
- _self: Abrir en el mismo iframe*
- _parent: Abrir en el iframe* padre
- _top: Abrir a pantalla completa
- Framename: Abrir en un iframe* específico
Imagen:
La etiqueta de imagen se utiliza para insertar imágenes en una página web. Incluye atributos como source “src”, que define la URL de la imagen. El atributo Alt es especialmente importante para el SEO, ya que ayuda a los motores de búsqueda a entender el contenido visual y mejora la accesibilidad para usuarios con discapacidades visuales. Tambien debes añadir los atributos de tamaño para optimizar la carga de la web y otras etiquetas como lo son title para que el usuario visualice un contenido emergente cuando pasa el ratón por la propia imagen. Aquí te muestro un ejemplo:
Párrafo y Salto de línea
Produce un salto de línea en el texto
Span + Atributo idioma:
Se utiliza cuando incluimos un contenido en otro idioma para que Google lo tenga en cuenta.
Div:
Nos genera un contenedor para incluir contenido HTML. Se podrá modificar su estilo con CSS
Tabla:
Las tablas se utilizan para organizar datos en filas y columnas, permitiendo una presentación clara y estructurada de la información en la web. Son útiles para mostrar datos comparativos o estructurados.
Listas:
Las listas permiten organizar elementos en un formato ordenado o desordenado. Las listas no ordenadas <ul> muestran elementos sin un orden específico, mientras que las listas ordenadas <ol> numeran cada elemento.
Formularios:
Los formularios permiten a los usuarios interactuar con una página web enviando información, como datos de contacto o comentarios. Incluyen elementos como campos de texto, botones de envío, casillas de verificación y más.
Strong:
La etiqueta <strong> se utiliza para enfatizar texto, indicándole a los motores de búsqueda que el contenido dentro de esta etiqueta tiene una mayor importancia. También se muestra en negrita para destacar visualmente el texto.
Meta Etiquetas
Las meta etiquetas son fragmentos de código HTML que proporcionan información adicional sobre una página web a los motores de búsqueda y navegadores. Se colocan dentro del <head> del documento HTML y no son visibles para los usuarios. Las meta etiquetas ayudan a definir aspectos importantes como:
Metadatos
Uno de los elementos que se encuentran dentro del elemento <head> de las páginas de HTML son los metadatos. Los principales son los siguientes:
Aquí tienes toda la documentación si te interesa profundizar más: https://www.w3schools.com/tags/tag_meta.asp
Atributos meta robots
El atributo robots hace referencia a todos los rastreadores. Se puede especificar rastreador
(Ej: googlebot). Los principales valores para el atributo “content” son los siguientes:
Aquí tienes toda la documentación de Google si te interesa profundizar más: https://developers.google.com/search/docs/advanced/robots/robots_meta_tag?hl=es
Idiomas (hreflang)
La etiqueta hreflang se utiliza para indicar a los motores de búsqueda el idioma y la región a la que está dirigida una página web. Es especialmente útil para sitios que tienen versiones en varios idiomas, ya que ayuda a mostrar la versión correcta a los usuarios según su ubicación e idioma preferido.
Canonical
La etiqueta canonical se utiliza para indicar la versión preferida de una página cuando existen varias URLs que muestran contenido similar o idéntico. Esto ayuda a evitar problemas de contenido duplicado, asegurando que los motores de búsqueda sepan cuál es la página principal que deben indexar y posicionar.
Favicon
El favicon es un pequeño icono que aparece en la pestaña del navegador, junto al título de la página.
Contenedores, script y píxeles
Tambien puedes añadir información mediante scripts, estos nos permiten añadir herramientas de seguimiento y traqueo de información necesitan insertar una serie de códigos específicos en nuestra página. Cada herramienta proporciona instrucciones específicas de cómo realizar esta inserción pero es muy común que muchos de estos códigos se inserten en el <head>.
Google Tag Manager es una herramienta muy potente que nos permite la inserción de todos estos códigos desde una interfaz web sin la necesidad de modificar el código fuente de la web. Por lo que no hace falta estar pidiéndole a IT hacer cambios o añadir estas etiquetas.
A modo de ejemplo, un script de implementación de Google tag manager que se insertaría en el <head> de todas las páginas de una web para funcionar correctamente.
Optimizar el HTML de tu sitio web no solo mejora la forma en que los motores de búsqueda interpretan y posicionan tu contenido, sino que también contribuye a una experiencia de usuario más fluida y clara. Un código HTML bien estructurado asegura que los rastreadores puedan indexar correctamente tus páginas, entender la relevancia de cada sección y destacar tus contenidos en los resultados de búsqueda. Además, facilita la accesibilidad y mejora la velocidad de carga, dos factores clave vitales para el SEO.
Cualquier duda que te surja no dudes en seguirme y contactarme en LinkedIn. ¡Estaré encantado de ayudarte!
