Etiquetas HTML para SEO: Lo que los usuarios de WordPress necesitan saber

¿Qué importancia tienen las etiquetas HTML para el SEO? ¿Cuáles necesitas conocer?

Las etiquetas HTML pueden alterar la forma en que tu contenido aparece en los resultados de búsqueda y cómo se clasifica.

Por lo tanto, las etiquetas HTML para SEO son esenciales, pero puedes hacer que se añadan automáticamente a tu contenido. Descubramos cómo.

¿Qué son las etiquetas HTML para SEO?

Aunque algunas etiquetas HTML que se enumeran a continuación tienen más de un uso, todas pueden influir en la forma en que tu contenido aparece en los resultados de los motores de búsqueda.

Por ejemplo, el marcado schema puede crear visualizaciones de búsqueda llamativas, lo que aumenta significativamente el tráfico.

Todas las etiquetas HTML ayudan a los motores de búsqueda a comprender tu contenido y a relacionarlo con las consultas de búsqueda.

Dado que un 68 % de todo el tráfico web se origina en los motores de búsqueda, el SEO es el canal de marketing que no puedes permitirte ignorar.

En cada sección de etiquetas a continuación, explicamos el impacto SEO relacionado.

¿Necesito aprender HTML?

No, no necesitas aprender HTML para usar el SEO de manera efectiva.

La mayoría de las plataformas web modernas como WordPress proporcionan campos de formulario para que escribas el título y la descripción de tu artículo. Luego, las etiquetas HTML se añaden automáticamente.

¿Pero qué pasa con las otras etiquetas HTML tratadas en este artículo?

Descarga el plugin All in One SEO (AIOSEO)

Recomendamos usar un plugin de SEO como All in One SEO (AIOSEO).

Este plugin, fácil de usar para principiantes, analiza el contenido de tu página web y proporciona una lista de verificación sencilla para mejorarlo.

Cómo funciona AIOSEO

Muchos de los elementos que AIOSEO comprueba tienen etiquetas HTML relacionadas. Y el plugin se asegurará de que estas etiquetas se añadan por ti.

Aquí tienes algunos elementos de página que AIOSEO te ayudará a optimizar y que están relacionados con el código HTML.

• Etiqueta de título: All in One SEO comprobará tu título para asegurarse de que has utilizado tu palabra clave objetivo. También verás si tu título ha superado los 60 caracteres, lo que significa que Google Search probablemente lo truncará.
• Etiqueta de meta descripción: AIOSEO también comprueba si has utilizado tu palabra clave objetivo en tu meta descripción. Te pedirá que la añadas si falta. También se te alertará si tu descripción supera los 160 caracteres.
• Subtítulos: Dado que los subtítulos pueden hacer que el contenido sea más fácil de escanear, AIOSEO comprueba los pasajes largos sin subtítulos. El plugin también comprueba si has utilizado tu palabra clave objetivo en algunos de tus subtítulos.
• SEO de imágenes: AIOSEO te permite crear configuraciones para todo el sitio para el SEO de imágenes, incluidas las etiquetas alt.
• Marcado schema: Para añadir marcado schema, harás clic en algunos botones y rellenarás algunos campos de formulario.
• Etiquetas de redes sociales: Optimiza tu contenido para compartirlo en Facebook y Twitter. Harás clic en algunos botones para hacerlo. All in One SEO añade las etiquetas OG y las etiquetas de tarjeta de Twitter necesarias.
• Etiquetas de robot Noindex: Puedes ocultar contenido de los motores de búsqueda utilizando un enfoque sencillo de clic de botón. AIOSEO añadirá automáticamente las metaetiquetas de robot noindex necesarias a tu HTML.

Si puedes hacer clic en botones y rellenar campos de formularios, puedes usar All in One SEO (AIOSEO).

All in One SEO (AIOSEO) es un plugin consolidado con miles de reseñas de 5 estrellas en WordPress.org. Y actualmente, más de 3 millones de personas lo están utilizando.

Ahora veamos las principales etiquetas HTML para SEO.

Etiqueta Título

El título de tu página web es una parte esencial de un fragmento de búsqueda. Junto con la descripción, puede dar a los usuarios una razón para hacer clic en tu sitio web.

¿Pero cómo sabe Google (u otros motores de búsqueda) cuál es tu título? Ahí es donde entran las etiquetas de título.

Las etiquetas de título son pequeños fragmentos de código que aparecen al principio y al final de los títulos de las páginas. Estas etiquetas le dicen a los motores de búsqueda: "Aquí está el título".

Etiqueta Título en Código HTML

Así es como se ve una etiqueta de título en HTML

<title></title>

Observa que hay una etiqueta de apertura y una etiqueta de cierre.

Entre esas dos etiquetas es donde va tu título.

<title>Your Title Goes Here</title>

Cuando escribes un título en la parte superior de una página web, la mayoría de las plataformas de sitios web añaden automáticamente la etiqueta de título. Así que ni siquiera necesitas pensar en ello.

Pero hay algunas buenas prácticas a tener en cuenta.

Mejores Prácticas para Etiquetas de Título

• Haz que tu título sea preciso e incluye tu palabra clave principal.
• Los motores de búsqueda cortan los títulos después de unos 60 caracteres. Así que, aprovecha bien esos 60 caracteres.
• Puedes pasarte de 60 caracteres, pero asegúrate de que la parte visible de tu título comunique de qué trata tu artículo.
• Si tu título no es claro o preciso, Google puede reescribirlo.

Aprende a usar All in One SEO para optimizar títulos.

Valor SEO de las Etiquetas de Título

Dado que tu título y descripción aparecen en las páginas de resultados de los motores de búsqueda (SERPs), estas son 2 oportunidades clave para persuadir a los buscadores a hacer clic.

Incluir tu palabra clave principal en tu título ayuda a Google a entender tu página, pero no es un factor de clasificación.

Sin embargo, un título bien elaborado es un aspecto del contenido de alta calidad. Y la calidad del contenido es el factor de clasificación más importante.

Etiqueta Meta Descripción

Hemos visto que los fragmentos de búsqueda incluyen una breve descripción de tu página web.

En SEO, esta descripción se llama meta descripción.

Al igual que los títulos, la mayoría de las plataformas de sitios web proporcionan un campo de formulario para que añadas una descripción, y añaden automáticamente la etiqueta meta descripción.

Etiqueta Meta Descripción en Código HTML

Así es como se ve una etiqueta meta descripción en HTML.

<meta name="description" content="Your description goes here." />

Esto se llama una etiqueta autocerrada. (A diferencia de la etiqueta de título, no hay una etiqueta de apertura y cierre.)

Mejores prácticas para meta descripciones

• Haz que tu descripción sea precisa y úsala para destacar lo que hace único a tu artículo.
• Dado que los motores de búsqueda limitan el espacio para las descripciones de páginas web, la práctica común es limitarlas a 160 caracteres.
• Incluye tu palabra clave objetivo y 1-2 palabras clave relacionadas.

Más información sobre meta descripciones.

Valor SEO de las meta descripciones

Si bien tu meta descripción original puede (o no) aparecer en las búsquedas de tu palabra clave objetivo, Google a menudo reescribe las descripciones para que coincidan con diferentes consultas de búsqueda.

Por "reescribir", nos referimos a que extrae texto diferente de tu página para mostrarlo como meta descripción.

En el siguiente ejemplo, Google está extrayendo una meta descripción diferente a la que escribimos. Pero la descripción coincide con la consulta de búsqueda: "¿Qué es el SEO multilingüe?"

Por lo tanto, aunque escribirás 1 meta descripción, tu artículo puede aparecer en búsquedas de varias palabras clave, cada una mostrando una descripción diferente extraída por Google.

Etiquetas de encabezado

Organizar tu contenido de forma lógica y usar encabezados (o subencabezados) para varias secciones ayuda a los motores de búsqueda y a los usuarios a comprender tu contenido rápidamente.

El panel de edición en WordPress proporciona opciones de encabezado de h1 a h6.

• El H1 se usa para los títulos de página y normalmente aparece en la fuente más grande.
• Los demás, h2-h6, son más pequeños y se usan para organizar el contenido en orden lógico y jerárquico.

Por ejemplo, un artículo puede tener varias secciones con encabezados h2, y usarías encabezados h3 o h4 dentro de esas secciones.

En segundo plano, WordPress agregará etiquetas de encabezado HTML, que ayudan a los motores de búsqueda a comprender el formato de tu contenido.

Etiquetas de encabezado en código HTML

En HTML, una etiqueta de encabezado se ve así:

<h1></h1>

La etiqueta h1 se reserva típicamente para tu título. Por lo tanto, en HTML, el título de tu página aparecería entre etiquetas h1.

<h1>This is My Page Title</h1>

Quizás te preguntes por qué la etiqueta title no está aquí. El título de tu página aparece 2 veces en el código HTML:

• Entre etiquetas title (Esto es estrictamente para los motores de búsqueda)
• Entre etiquetas h1. (Este es el título visible para tus lectores.)

Las otras etiquetas h usan la misma sintaxis. Por ejemplo, aquí hay una etiqueta h2 utilizada para una sección del artículo.

<h2>Introduction to Sales</h2>

Mejores prácticas para encabezados

• Haz que los encabezados sean útiles y concretos.
• Mantenlos concisos para que se puedan escanear.
• Pon los términos más importantes al principio.

Valor SEO de los encabezados

Las etiquetas de encabezado pueden ayudar a los motores de búsqueda a encontrar secciones de tu contenido y a relacionarlas con consultas relacionadas.

Por esta razón, pueden ayudar a que tu contenido se clasifique para más de un término de búsqueda.

Pero también son importantes para crear contenido escaneable.

Usar una estructura clara y lógica, junto con subtítulos para diferentes secciones, puede mantener a tus lectores interesados y haciendo que vuelvan a por más.

Etiquetas Alt de Imágenes

El texto alternativo es texto que describe una imagen. La mayoría de las plataformas web, incluido WordPress, proporcionan un campo de formulario para añadir texto alternativo.

Hay 2 propósitos para este texto alternativo:

• Los motores de búsqueda leen e indexan el texto alternativo de las imágenes, y esto les ayuda a comprender el contenido de la imagen.
• Los lectores de pantalla, dispositivos que utilizan las personas con discapacidad visual, leen el texto alternativo en voz alta.

Una vez que hayas añadido tu texto alternativo, WordPress lo envuelve automáticamente en una etiqueta alt de imagen.

Etiquetas Alt de Imágenes en Código HTML

Las etiquetas alt son atributos HTML que aparecen dentro de un elemento de imagen.

Las etiquetas de imagen ("img") apuntan a una fuente en línea ("src") para la imagen, en forma de URL.

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Yury_Pen_-_Portrait_of_Marc_Chagall.jpg" alt="marc chagall portrait">

Mejores Prácticas para Etiquetas Alt de Imágenes

• Incluye siempre texto alternativo para las imágenes, a menos que sean decorativas.
• Omite puntuación, guiones o símbolos especiales.
• Describe la imagen y su contexto.

Por ejemplo, si tu imagen es un gráfico de tendencias de tasas de criminalidad en Oslo, Noruega, explica qué les está mostrando a los lectores.

alt="crime trends in oslo norway"

Valor SEO de las Etiquetas Alt de Imágenes

Las etiquetas alt ayudan a que tus imágenes y diagramas aparezcan en la búsqueda de imágenes.

Y más allá del SEO, mejoran la accesibilidad de tu sitio web.

Marcado Schema (para Snippets Enriquecidos)

Añadir marcado schema a tus páginas web las hace elegibles para ser mostradas como snippets enriquecidos en los resultados de búsqueda.

Puedes pensar en los snippets enriquecidos como pantallas de motor de búsqueda súper-deluxe.

Aquí tienes un snippet de búsqueda *estándar*.

Y aquí tienes un snippet *enriquecido*.

Añadir este tipo de marcado es fácil. Con All in One SEO (AIOSEO), harás clic en algunos botones y rellenarás algunos campos de formulario.

Hay más de 30 tipos de snippets enriquecidos para elegir, incluyendo:

• Libro
• Cursos
• Preguntas frecuentes
• Evento
• Aplicación de software
• Persona.

Aunque el marcado de esquema es más complicado que las etiquetas, tiene algunas similitudes. Este código etiqueta partes de una página web para que Google pueda convertir esa página en un fragmento enriquecido.

Marcado de esquema en HTML

El código para el marcado de esquema puede ser extenso.

Si desea ver cómo se ve, le recomendamos que explore algunas de las muestras de código en Schema.org.

Mejores prácticas para el marcado de esquema

Siempre que sea posible, agregue marcado de esquema a sus páginas web.

Y explore los tipos de esquema que están disponibles en AIOSEO.

Valor SEO del marcado de esquema

Los fragmentos enriquecidos atraen más clics que los fragmentos estándar.

Aprenda más sobre fragmentos enriquecidos.

Etiquetas canónicas

Las etiquetas canónicas ayudan a Google a clasificar las páginas duplicadas indicando cuál desea que se muestre en los resultados de búsqueda.

Un uso común para las etiquetas canónicas es para las páginas de productos, cuando el mismo contenido puede aparecer en varias áreas de su sitio.

Mejores prácticas

Al enlazar internamente, enlace a la URL canónica. Eso comunica su preferencia a Google.

Etiquetas canónicas en el código HTML

La sintaxis para las etiquetas canónicas (o atributos) es:

rel="canonical"

Aquí hay un ejemplo de un enlace con la etiqueta canónica añadida.

<link rel="canonical" href="https://example.com/sneakers/green-sneakers" />

Este enlace se colocaría en la sección head del HTML.

Las etiquetas canónicas son un tema de SEO técnico. Consulte las directrices para desarrolladores de Google sobre métodos para especificar URLs canónicas.

Otras etiquetas HTML importantes

Hemos cubierto las principales etiquetas HTML para SEO. Pero aquí hay algunas etiquetas especializadas junto con sus usos.

Etiquetas Open Graph

¿Alguna vez se ha preguntado por qué algunas páginas web, cuando se comparten en Facebook, parecen que les falta algo?

Cuando un usuario comparte su página en Facebook, la plataforma de redes sociales examina su código en busca de etiquetas Open Graph.

Estas etiquetas HTML le dicen a Facebook qué imagen, título y descripción mostrar. Si su página no tiene estas etiquetas OG, se verá sosa cuando se comparta.

All in One SEO (AIOSEO) le ofrece una forma sencilla de controlar cómo aparece su contenido en Facebook. (Y no necesita preocuparse por el código).

Etiquetas de tarjeta de Twitter

Las etiquetas de Twitter Card funcionan como las etiquetas OG. Y aquí, también puede usar All in One SEO (AIOSEO) para controlar cómo aparece su página cuando se comparte en Twitter.

Puede hacer clic en 1 botón y tener su configuración de Facebook copiada para compartir en Twitter.

Atributos de enlace

Los backlinks son un factor de clasificación significativo. (Los backlinks son enlaces de otros sitios a los suyos).

Los enlaces de sitios web respetados y de calidad pueden mejorar la clasificación de tu sitio.

Pero los enlaces pueden incluir atributos, algunos de los cuales pueden anular ese valor SEO.

Por ejemplo, un atributo “nofollow” indica a los motores de búsqueda que ignoren el enlace.

Así es como se ve ese atributo en el código del enlace.

<a href="https://www.example.com" rel="nofollow">linked text</a>

Aprende sobre los atributos nofollow, ugc y sponsored y cómo evitarlos.

Etiqueta de robot Noindex

La etiqueta noindex impide que el contenido aparezca en los resultados de búsqueda.

Las páginas de inicio de sesión del personal o las páginas de "éxito" son ejemplos de contenido que podrías querer que los motores de búsqueda omitan.

Aquí tienes un atributo noindex contenido dentro de una etiqueta meta robots.

<meta name="robots" content="noindex" />

Anteriormente, las directivas noindex a veces se agregaban al archivo robots.txt de un sitio. Pero Google ha desaprobado este enfoque en 2019.

Etiquetas Semánticas HTML 5

Las etiquetas semánticas ayudan a los motores de búsqueda a comprender cómo se relacionan las partes de una página entre sí.

Fueron una característica importante en el lanzamiento de HTML 5 en 2008.

Aquí tienes algunos ejemplos de etiquetas semánticas.

• <main>
• <aside>
• <form>
• <time>

La base de código y los temas de WordPress incluyen etiquetas semánticas.

Preguntas y respuestas sobre etiquetas HTML para SEO

Ahora que conoces las principales etiquetas HTML para SEO, es posible que tengas algunas preguntas pendientes.

Después de las etiquetas HTML para SEO . . .

Esperamos que esta publicación te haya ayudado a identificar algunas de las principales etiquetas HTML para SEO y por qué no necesitas aprender código para aplicarlas.

All in One SEO garantiza que tu sitio esté utilizando metadatos correctamente.

A continuación, aprende a agregar un sitemap HTML a tu sitio web. Echa un vistazo a estas herramientas de SEO on-page. Y explora cómo crear un buen texto de anclaje.

Para obtener más información sobre la optimización de motores de búsqueda, suscríbase a nuestro Canal de YouTube. Encontrará excelentes tutoriales paso a paso allí. También puede seguirnos en X (Twitter), LinkedIn o Facebook para mantenerse informado.

Descargo de responsabilidad: Nuestro contenido es compatible con los lectores. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Solo recomendamos productos que creemos que añadirán valor a nuestros lectores.