El contenido de las páginas web se define a través del llamado lenguaje HTML, y este consiste en una serie de etiquetas de marcado. Aquí te explicamos qué es HTML y las etiquetas HTML más importantes que debes conocer para el SEO. Aprende a utilizarlas correctamente siguiendo nuestros consejos de buenas prácticas.

Pero primero, empecemos por ver la definición de HTML.

¿Qué es HTML?

El código HTML es el lenguaje utilizado para definir el contenido de los sitios web. Consiste en una serie de etiquetas que definen tanto el texto como otros elementos de la página (imágenes, vídeos, etc.).

Debes tener en cuenta que HTML no es un lenguaje de programación, sino marcas de hipertexto (Hypertext Markup Language, de ahí las iniciales HTML). Se escribe enteramente a través de etiquetas, contenido y atributos.

Etiquetas HTML importantes para SEO

Las etiquetas más importantes para la optimización de motores de búsqueda son las siguientes:

Title tag

Esta etiqueta se usa para configurar el titular en azul que aparece al hacer clic en las páginas de resultados del motor de búsqueda. Aunque el título que aparecerá depende en última instancia de Google, el bot comprueba primero esta etiqueta y, en la mayoría de los casos, la convierte en el título principal.

La recomendación es incluir las keywords por las que quieres posicionarte en los resultados de búsqueda y hacer que el título sea tan llamativo que los usuarios no puedan resistirse a entrar en la página.

Ten en cuenta que Google solo muestra los primeros 50-60 caracteres. Por lo tanto, deberías optimizar la title tag para que no exceda esa longitud o para que contenga la información más relevante en esa primera parte. También es fundamental ser creativo y escribir títulos originales.

Meta descripción tag

Puedes usar las meta description tags para crear una descripción dentro del fragmento que aparece en los resultados de búsqueda. Lo cierto es que Google no siempre usa la meta descripción para crear estos fragmentos, pero si las usas, aumentarás las posibilidades de obtener el texto deseado en la SERP.

A veces, Google muestra un fragmento de texto de la página porque considera que coincide mejor con una consulta. Aunque no existen reglas estrictas para la meta descripción, en general, tienes que pensar que el motor de búsqueda solo muestra entre 150 y 160 caracteres. Es crucial poner en ella la información más relevante e interesante para tu público objetivo.

Texto alternativo de la imagen

El texto alternativo de la imagen permite a los usuarios comprender mejor el contenido de la imagen, especialmente a aquellos con discapacidad visual. También es vital para permitir que los bots de los motores de búsqueda identifiquen la imagen, ya que no pueden verla.

En algún momento, puede incluso haber un problema técnico que impida que la imagen se muestre, en cuyo caso el texto alternativo debería describir lo que hay en ella.

Un buen texto alternativo será breve pero descriptivo. Debe contener el mínimo número de palabras necesarias para dejar claro de qué trata la imagen. Sin embargo, no debes ser demasiado conciso, ya que es difícil describir una imagen correctamente con solo una o dos palabras.

Y, por supuesto, no debes usar las etiquetas de texto alternativo para hacer keyword stuffing, ya que esta es una práctica que ya no funciona para el SEO.

<a> element

The HTML <a> element, also called the anchor element, creates links to other web pages, files, or locations within the same page, email addresses, or any different URL. In SEO, it is fundamental to work on the internal links apart from having good quality backlinks.

The hyperlink created by an anchor element is applied to a text, image, or other HTML content placed between the opening and closing <a> tags. Considering that the search engines cannot see the images, it is advisable to link the URLs with text instead of pictures. This leads us to talk about anchor text optimization.

El anchor text son las palabras visibles y en las que se puede hacer clic en un hipervínculo HTML. Este texto debe informar al usuario (y al motor de búsqueda) sobre el contenido de la página enlazada. Una buena práctica es incluir keywords relevantes en el anchor text para dar a Google más pistas sobre el tema de la página.

On the other hand, by adding the right attributes in the <a> element, you can optimize your crawl budget. To this end, you can use the rel=nofollow. This attribute is used to tell search engines to ignore the link and not pass authority to nofollow links. This practice is especially beneficial when linking to external sites, although Google stated that it only works as a hint and it does not prevent GoogleBot from crawling the linked page. The Nofollow Update began on March 1st, 2020.

<a href="https://www.fandangoseo.com" rel="nofollow">SEO Crawler</a>

Marcado de esquema

Son una serie de etiquetas desarrolladas conjuntamente por Google, Yahoo!, Bing y Yandex para dar información adicional a los motores de búsqueda sobre diferentes tipos de páginas. Los motores de búsqueda las utilizan para mejorar la información proporcionada en la página de resultados de búsqueda con rich snippets.

Estas etiquetas no garantizan la indexación en las SERP, pero sin duda hacen que los fragmentos sean mucho más atractivos, lo que mejora tu CTR orgánico.

Por lo tanto, te sugerimos que visites schema.org para ver si hay etiquetas aplicables a los tipos de páginas que quieres destacar en los resultados de búsqueda.

Meta robots tag

La meta robots tag influye en cómo interactúa el motor de búsqueda en un sitio web. Aquí es donde los propietarios del sitio pueden dar directivas a los bots para que rastreen e indexen sus páginas de una manera particular. Las etiquetas más utilizadas son follow, nofollow, index, noindex.

Algunas de estas reglas son “mandatorias” y otras son solo sugerencias. No todos los crawlers respetan las meta robot tags, pero los motores de búsqueda suelen hacerlo. Además, si no añades ninguna directiva, el crawler actuará libremente. Esto, entre otras cosas, complicará un buen uso de tu crawl budget.

Es fundamental colocar la meta robots tag en la sección del encabezado del código de la página, indicando las instrucciones que deben aplicarse.

Etiqueta canónica

La canonical tag ayuda a evitar problemas de duplicate content. Cualquier página puede tener múltiples URLs, incluso cuando el propietario del sitio no lo pretende.

Google no penaliza directamente por esto, pero afecta al rendimiento SEO de la página. Cuando se tiene contenido muy similar en varias URLs, los motores de búsqueda tienen dificultades para gastar tu crawl budget y asignar la autoridad de página adecuada.

Por lo tanto, deberías colocar la etiqueta canonical en las siguientes páginas:

• Aquellas con contenido muy similar
• Páginas a las que se puede acceder a través de diferentes URLs
• Páginas dinámicas que crean sus parámetros de URL

De H1 a H6

Estas etiquetas indican diferentes niveles de títulos, que van del 1 al 6, tanto para el lector como para el motor de búsqueda. Dan la posibilidad de destacar la importancia de los encabezados dentro del texto y estructurar su contenido.

En lo que respecta al lector, casi nadie lee ya un artículo completo, sino que busca directamente la sección para encontrar la información exacta que busca. Y las header tags son de gran ayuda en este sentido.

Es recomendable dividir el artículo en secciones pequeñas y mantener un formato consistente. Tampoco deberías usar más de un encabezado H1, ya que es el que el motor de búsqueda considera como el título principal.

Generalmente, la estructura de un artículo no debería ser demasiado profunda; de hecho, rara vez es necesario ir más allá de H3. Por último, vale la pena formular encabezados similares a las consultas, para que los usuarios entiendan que encontrarán la respuesta a la pregunta a continuación.

Etiquetas Open Graph

Las etiquetas Open Graph les indican a las redes sociales los elementos principales que deben mostrarse cuando se comparte un artículo externo en ellas.

Se añaden a redes sociales (Facebook, Twitter y LinkedIn) y aplicaciones de mensajería populares (WhatsApp, Telegram y Slack).

En este caso, siempre es necesario añadir al menos las siguientes propiedades de Open Graph:

•   og:url
•   og:title (55-60 caracteres)
•   og:description (60-65 caracteres)
•   og:image (al menos 1200 x 630 píxeles, y un máximo de 8 MB)

Y es importante asegurarse de que el título y la descripción en las redes sociales coincidan con el contenido.