HTML es un lenguaje de marcado que forma la base de la mayoría de las páginas web.
Podría decirse que es una de las partes más fundamentales del SEO técnico.
Utilizando elementos HTML, los profesionales de SEO pueden comunicar información sobre la página a los usuarios y a los robots de búsqueda.
Esto puede ayudar a aclarar la importancia, la naturaleza y el orden del contenido de una página, así como su relación con otras páginas web.
¿Qué son los atributos HTML?
Los atributos son información adicional agregada a los elementos HTML. Se encuentran dentro del elemento, como por ejemplo:
<link rel="canonical" href="https://www.example.com" />
Son valores que se utilizan para modificar el elemento, dando contexto adicional sobre el mismo.
En el caso de la etiqueta HTML anterior, el atributo rel=”canonical” modifica la etiqueta del enlace para decirles a los robots de búsqueda que esta URL debe considerarse canónica de un conjunto.
Formato de atributos HTML
Los atributos HTML constan de un nombre y un valor.
Por ejemplo, al definir una imagen, se utiliza el nombre “src” y el valor es el nombre del archivo de la imagen. El atributo “alt” especifica un texto alternativo para mostrar si la imagen no se puede mostrar.
<img src=”ginger-cat.jpg” alt="Ginger cat in a tree">
Tipos de atributos HTML
Los atributos suelen clasificarse de cuatro formas; requerido, opcional, estándar o evento.
Los atributos requeridos son aquellos cuya ausencia en una etiqueta significa que esa etiqueta no funcionaría correctamente.
Los opcionales, como sugiere el nombre, no son necesarios para que la etiqueta funcione, pero se pueden usar para especificar información o comportamiento adicional para esa etiqueta.
Hay atributos que se pueden utilizar con la mayoría de los elementos HTML y algunos que son muy específicos.
Por ejemplo, el atributo “estilo” se puede utilizar para definir el aspecto de un elemento, como el color o el tamaño de fuente. Estos atributos universales se conocen como atributos “estándar” o “globales”.
Hay otros atributos que sólo se pueden utilizar con determinados elementos. Normalmente, los que se utilizan para SEO modificarán una etiqueta de enlace. Estos son elementos como “rel” y “hreflang”.
Los atributos de evento se agregan a un elemento para definir cómo debe comportarse ese elemento en respuesta a ciertas acciones, como un usuario que pasa el mouse sobre un botón. Estos atributos definen cómo se debe ejecutar una función.
Por ejemplo, un atributo “onclick” definiría qué debe hacer una función de JavaScript cuando un usuario hace clic en un botón. Estos atributos permiten a los desarrolladores crear páginas más interactivas a partir de etiquetas HTML.
Por qué los atributos HTML son importantes
Los atributos HTML son importantes porque permiten a los desarrolladores agregar contexto y funcionalidad adicionales a los sitios web.
Son particularmente importantes para el SEO porque brindan un contexto muy necesario a las etiquetas. Son fundamentales en la forma en que guiamos a los robots de búsqueda en el rastreo y servicio de páginas web.
Los atributos nos permiten evitar fácilmente el seguimiento de ciertos enlaces o indicar qué páginas de un conjunto deben mostrarse a usuarios de diferentes países o que utilizan otros idiomas.
Nos permiten indicar fácilmente que una página no debe indexarse. Muchos de los elementos fundamentales del SEO técnico en realidad se controlan mediante atributos HTML.
Atributos comunes utilizados en SEO
1. Atributo de nombre
El atributo de nombre se utiliza con la etiqueta.
Es esencialmente una forma de especificar a los bots que puedan visitar la página si la siguiente información se aplica a ellos o no.
Por ejemplo, incluir significa que todos los bots deben tener en cuenta la directiva “noindex”.
A menudo escucharás que esto se llama “etiqueta metarobots”.
Si se utilizara lo siguiente, sólo el robot de Google necesitaría tener en cuenta la directiva “noindex”.
Esta es una buena forma de dar comandos a algunos robots de búsqueda que no son necesarios para todos.
2. Atributo sin índice
El atributo “noindex” se usa comúnmente en SEO.
A menudo escuchará que la llaman “etiqueta noindex”, pero más exactamente, es un atributo de la etiqueta.
Está formulado:
<meta name="robots" content="noindex" />
Este fragmento de código permite a los editores determinar qué contenido se puede incluir en el índice de un motor de búsqueda.
Al agregar el atributo “noindex”, básicamente le estás diciendo al motor de búsqueda que no puede usar esta página dentro de su índice.
Esto es útil si hay contenido confidencial que no desea que esté disponible en una búsqueda orgánica. Por ejemplo, si tiene áreas en su sitio a las que solo deberían tener acceso los miembros pagos, permitir que este contenido entre en los índices de búsqueda podría hacerlo accesible sin necesidad de iniciar sesión.
Es necesario leer la directiva “noindex” para seguirla. Es decir, los robots de búsqueda deben poder acceder a la página para leer el código HTML que contiene la directiva.
Como tal, tenga cuidado de no bloquear el acceso de los robots a la página en el archivo robots.txt.
3. Atributo de descripción
El atributo de descripción, más conocido como “meta descripción”, se utiliza con la etiqueta.
El contenido de esta etiqueta se utiliza en las SERP debajo del contenido de la etiqueta
Permite a los editores resumir el contenido de la página de una manera que ayude a los buscadores a determinar si la página satisface sus necesidades.
Esto no afecta la clasificación de una página, pero puede ayudar a fomentar los clics en la página desde las SERP.
Es importante darse cuenta de que en muchos casos, Google ignorará el contenido del atributo de descripción y utilizará su propia descripción en las SERP.
Puede leer más aquí sobre cómo optimizar los atributos de su descripción.
4. Atributo Href
Como profesionales de SEO, dedicamos mucho tiempo a buscar enlaces.
Pero, ¿sabes cómo está estructurado un enlace y, por tanto, por qué se percibe que algunos enlaces valen más que otros?
Un hipervínculo estándar es esencialmente una etiqueta .
Su formato es el siguiente:
<a href="www.example.com">anchor text of link goes here</a>.
La etiqueta indica que es un enlace.
El atributo href= dicta el destino del enlace (es decir, a qué página enlaza).
El texto que se encuentra entre la etiqueta de apertura y la etiqueta de cierre es el texto de anclaje.
Este es el texto que un usuario verá en la página en la que parece que se puede hacer clic.
Esto se utiliza para enlaces en los que se puede hacer clic y que aparecerán en el
La etiqueta se utiliza para vincular un recurso a otro y aparece en el
de la página.Estos enlaces no son hipervínculos y no se puede hacer clic en ellos. Muestran la relación entre documentos web.
5. Rel=”nofollow”, rel=”ugc” y rel=”atributos patrocinados”
El atributo rel=”nofollow” le dice a los bots que la URL dentro del atributo href no es una que puedan seguir.
El uso del atributo rel=”nofollow” no afectará la capacidad de un usuario humano de hacer clic en el enlace y ser llevado a otra página. Sólo afecta a los bots.
Esto se utiliza dentro del SEO para evitar que los motores de búsqueda visiten una página o atribuyan algún beneficio al enlace de una página a otra.
Podría decirse que esto hace que un enlace sea inútil desde la perspectiva tradicional de construcción de enlaces SEO, ya que la equidad del enlace no pasará a través del enlace.
Hay argumentos para decir que sigue siendo un enlace beneficioso si hace que los visitantes vean la página enlazada, ¡por supuesto!
Los editores pueden utilizar el atributo “nofollow” para ayudar a los motores de búsqueda a determinar cuándo una página vinculada es el resultado de un pago, como un anuncio.
Esto puede ayudar a evitar problemas con penalizaciones de enlaces, ya que el editor admite que el enlace es el resultado de un acuerdo legítimo y no un intento de manipular las clasificaciones.
El atributo rel=”nofollow” se puede utilizar en un enlace individual como el siguiente:
<a href=www.example.com rel="nofollow">anchor text of link goes here</a>
O puede usarse para representar todos los enlaces en una página como “nofollow” usándolo en el
como si se usara un atributo “noindex”:<meta name="robots" content="nofollow" />
Puede leer más aquí sobre cuándo utilizar el atributo rel=”nofollow”.
6. Cómo utiliza Google el atributo Rel=”nofollow”
En 2019, Google anunció algunos cambios en la forma en que utiliza el atributo “nofollow”.
Esto incluyó la introducción de algunos atributos adicionales que podrían usarse en lugar del “nofollow” para expresar mejor la relación del enlace con su página de destino.
Estos atributos más nuevos son rel=”ugc” y rel=”sponsored”.
Deben utilizarse para ayudar a Google a comprender cuándo un editor desea que se descuente la página de destino con fines de señal de clasificación.
El atributo rel=”sponsored” sirve para identificar cuándo un enlace es el resultado de un acuerdo pago, como un anuncio o un patrocinio. El atributo rel=”ugc” sirve para identificar cuándo se ha agregado un enlace a través de contenido generado por el usuario (UGC), como un foro.
Google anunció que estos y el atributo “nofollow” sólo se tratarían como sugerencias.
Mientras que anteriormente, el atributo “nofollow” provocaba que el robot de Google ignorara el enlace especificado, ahora toma en cuenta esa sugerencia, pero aún puede tratarla como si el “nofollow” no estuviera presente.
Lea más aquí sobre este anuncio y cómo cambia la implementación del atributo rel=”nofollow”.
7. Atributo Hreflang
El propósito del atributo hreflang es ayudar a los editores cuyos sitios muestran el mismo contenido en varios idiomas.
Indica a los motores de búsqueda qué versión de la página se debe mostrar a los usuarios para que puedan leerla en su idioma preferido.
El atributo hreflang se utiliza con la etiqueta. Este atributo especifica el idioma del contenido de la URL vinculada.
Se utiliza dentro del
de la página y tiene el siguiente formato:<link rel="alternate" href="https://example.com" hreflang="en-gb" />
Está dividido en varias partes:
- El rel=”alternate”, que sugiere que la página tiene una página alternativa relevante.
- El atributo href= indica a qué URL se está vinculando.
- El código de idioma es una designación de dos letras para indicar a los robots de búsqueda en qué idioma está escrita la página vinculada. Las dos letras se toman de una lista estandarizada conocida como códigos ISO 639-1.
El atributo hreflang también se puede utilizar en el encabezado HTTP para documentos que no están en HTML (como un PDF) o en el mapa del sitio XML del sitio web.
Lea más aquí sobre el uso correcto del atributo hreflang.
8. Atributo canónico
El atributo rel=”canonical” de la etiqueta de enlace permite a los profesionales de SEO especificar qué otra página de un sitio web u otro dominio debe contarse como canónica.
Que una página sea canónica significa esencialmente que es la página principal, de la cual otras pueden ser copias.
Para los fines de los motores de búsqueda, esto es una indicación de la página que un editor desea que se considere la principal para ser clasificada; las copias no deben clasificarse.
El atributo canónico se ve así:
<link rel="canonical" href="https://www.example.com/" />
El código debe ubicarse en el
de la página. La página web indicada después de “href=” debe ser la página que desea que los robots de búsqueda consideren la página canónica.Esta etiqueta es útil en situaciones en las que dos o más páginas pueden tener contenido idéntico o casi idéntico.
9. Usos del atributo canónico
El sitio web puede configurarse de tal manera que sea útil para los usuarios, como una página de listado de productos en un sitio de comercio electrónico.
Por ejemplo, la página de categoría principal de un conjunto de productos, como “zapatos”, puede tener textos, encabezados y un título de página escrito sobre “zapatos”.
Si un usuario hiciera clic en un filtro para mostrar solo zapatos marrones talla 8, la URL podría cambiar, pero la copia, los encabezados y el título de la página podrían seguir siendo los mismos que los de la página “zapatos”.
Esto daría como resultado dos páginas idénticas aparte de la lista de productos que se muestran.
En este caso, es posible que el propietario del sitio web desee colocar una etiqueta canónica en la página “zapatos marrones, talla 8” que apunte a la página “zapatos”.
Esto ayudaría a los motores de búsqueda a comprender que no es necesario clasificar la página “zapatos marrones, talla 8”, mientras que la página “zapatos” es la más importante de las dos y debe clasificarse.
Problemas con el atributo canónico
Es importante darse cuenta de que los motores de búsqueda sólo utilizan el atributo canónico como guía, no es algo que deba seguirse.
Hay muchos casos en los que se ignora el atributo canónico y se selecciona otra página como canónica del conjunto.
Lea más sobre cómo utilizar correctamente el atributo canónico.
10. Atributo Src
El atributo src= se utiliza para hacer referencia a la ubicación de la imagen que se muestra en la página.
Si la imagen está ubicada en el mismo dominio que…
Con información de Search Engine Journal.
Leer la nota Completa > 11 atributos HTML que necesitas saber para SEO