¿Qué importancia tienen las etiquetas HTML para el SEO? ¿Cuáles necesita aprender?
Las etiquetas HTML pueden alterar la forma en que su contenido aparece en los resultados de búsqueda y cómo se clasifica.
Así que las etiquetas HTML para SEO son esenciales, pero puedes conseguir que se añadan automáticamente a tu contenido. Averigüemos cómo.
En este artículo
- ¿Cómo estructuro el HTML para obtener mejores resultados SEO?
- ¿Qué son las etiquetas HTML para SEO?
- ¿Necesito aprender HTML?
- Etiqueta del título
- Etiqueta Meta Description
- Etiquetas de encabezamiento
- Etiquetas Alt de imagen
- Schema Markup (para Rich Snippets)
- Etiquetas canónicas
- Otras etiquetas HTML importantes
¿Qué son las etiquetas HTML para SEO?
Aunque algunas de las etiquetas HTML enumeradas a continuación tienen más de un uso, todas ellas pueden influir en la forma en que su 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 su contenido y a adecuarlo a las consultas de búsqueda.
Con un 68% de todo el tráfico web que comienza en los motores de búsqueda, el SEO es el canal de marketing que no puede permitirse ignorar.
A continuación, en la sección de cada etiqueta, explicamos el impacto SEO relacionado.
¿Necesito aprender HTML?
No, no es necesario aprender HTML para utilizar el SEO de forma eficaz.
La mayoría de las plataformas web modernas, como WordPress, ofrecen campos de formulario para introducir el título y la descripción del artículo. A continuación, las etiquetas HTML se añaden automáticamente.
Pero, ¿qué ocurre con las demás etiquetas HTML de las que se habla en este artículo?
Descargar el plugin All in One SEO (AIOSEO)
Recomendamos utilizar un plugin SEO como All in One SEO (AIOSEO).
Este sencillo complemento para principiantes analiza el contenido de su página web y proporciona una sencilla lista de comprobación 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.
Estos son algunos elementos de la página que AIOSEO le ayudará a optimizar, y que están relacionados con el código HTML.
- Etiqueta del título: All in One SEO comprobará tu título para asegurarse de que has utilizado tu palabra clave objetivo. También verá si tu título supera los 60 caracteres, lo que significa que la Búsqueda de Google probablemente lo truncará.
- Etiqueta meta descripción: AIOSEO también comprueba si has utilizado tu palabra clave objetivo en la meta descripción. Le pedirá que la añada si falta. También te avisará si tu descripción supera los 160 caracteres.
- Subtítulos: Dado que los subtítulos pueden facilitar la lectura del contenido, AIOSEO comprueba si hay pasajes largos sin subtítulos. El plugin también comprueba si has utilizado tu palabra clave objetivo en algunos de tus subtítulos.
- Imagen SEO: AIOSEO le permite crear ajustes en todo el sitio para el SEO de imágenes, incluidas las etiquetas alt.
- Marcado de esquema: Para añadir el marcado Schema, deberá hacer clic en algunos botones y rellenar algunos campos de formulario.
- Etiquetas para redes sociales: Optimiza tus contenidos para compartirlos en Facebook y Twitter. Para ello, haga clic en algunos botones. All in One SEO añade las etiquetas OG y Twitter Card necesarias.
- Etiquetas robot noindex: Puede ocultar el contenido de los motores de búsqueda con un simple clic. AIOSEO añadirá automáticamente las metaetiquetas noindex robots necesarias a su HTML.
Si puede hacer clic en botones y rellenar campos de formularios, puede utilizar All in One SEO (AIOSEO).
All in One SEO (AIOSEO) es un plugin establecido con miles de reseñas de 5 estrellas en WordPress.org. Y actualmente, más de 3 millones de personas lo utilizan.
Veamos ahora las principales etiquetas HTML para SEO.
Etiqueta del título
El título de su 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 su sitio web.
Pero, ¿cómo sabe Google (u otros motores de búsqueda) cuál es tu título? Ahí es donde entran en juego las etiquetas de título.
Título etiquetas son pequeños fragmentos de código que aparecen al principio y al final de los títulos de las páginas. Estas etiquetas dicen a los motores de búsqueda: "Aquí está el título".
Etiqueta de título en código HTML
Este es el aspecto de una etiqueta de título en HTML
<title></title>Fíjate en que hay una etiqueta de apertura y otra de cierre.
Entre estas dos etiquetas se sitúa el 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 web añaden automáticamente la etiqueta del título. Así que ni siquiera tienes que pensar en ello.
Pero hay algunas buenas prácticas que conviene tener en cuenta.
Buenas prácticas para las etiquetas de título
- Haga que su título sea preciso e incluya su 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.
- Puede superar los 60 caracteres, pero asegúrese de que la parte visible del título comunica de qué trata el artículo.
- Si su título no es claro o preciso, Google puede reescribirlo.
Aprenda a utilizar All in One SEO para optimizar los títulos.
Valor SEO de las etiquetas de título
Dado que el título y la descripción aparecen en las páginas de resultados de los motores de búsqueda (SERP), son dos oportunidades clave para persuadir a los buscadores de que hagan clic.
Incluir la palabra clave principal en el título ayuda a Google a comprender la página, pero no es un factor de clasificación.
Sin embargo, un título bien elaborado es un aspecto de un contenido de alta calidad. Y la calidad del contenido es el factor de clasificación más importante.
Etiqueta Meta Description
Hemos visto que los fragmentos de búsqueda incluyen una breve descripción de su página web.
En SEO, esta descripción se denomina meta descripción.
Al igual que los títulos, la mayoría de las plataformas web ofrecen un campo de formulario para que añada una descripción, y añaden automáticamente la etiqueta meta description.
Etiqueta Meta Description en código HTML
Este es el aspecto de una etiqueta meta description en HTML.
<meta name="description" content="Your description goes here." />Esto es lo que se llama una etiqueta de cierre automático. (A diferencia de la etiqueta title, no tiene etiqueta de apertura y cierre).
Buenas prácticas para las meta descripciones
- Haga que su descripción sea precisa y utilícela para destacar lo que es único en su artículo.
- Dado que los motores de búsqueda limitan el espacio para las descripciones de las páginas web, la práctica común es limitarlas a 160 caracteres.
- Incluya su palabra clave objetivo y 1-2 palabras clave relacionadas.
Más información sobre las meta descripciones.
Valor SEO de las meta descripciones
Aunque su meta descripción original puede aparecer (o no) en las búsquedas de su palabra clave objetivo, Google suele reescribir las descripciones para adaptarlas a diferentes consultas de búsqueda.
Al decir "reescribir", nos referimos a que extrae texto diferente de su página para mostrarlo como meta descripción.
En el ejemplo siguiente, Google extrae una meta descripción distinta de la que hemos escrito. Pero la descripción coincide con la consulta de búsqueda: "¿Qué es el SEO multilingüe?"
Así, aunque escriba una meta descripción, su artículo puede aparecer en las búsquedas de varias palabras clave, cada una de ellas con una descripción diferente extraída por Google.
Etiquetas de encabezamiento
Organizar el contenido de forma lógica y utilizar títulos (o subtítulos) para las distintas secciones ayuda a los motores de búsqueda y a los usuarios a captar el contenido rápidamente.
El panel de edición de WordPress ofrece opciones de encabezado desde h1- h6.
- H1 se utiliza para los títulos de las páginas y suele aparecer en la fuente más grande.
- Los otros, h2-h6, son más pequeños y se utilizan para organizar el contenido en orden lógico y jerárquico.
Por ejemplo, un artículo puede tener varias secciones con encabezados h2, y usted utilizaría encabezados h3 o h4 dentro de esas secciones.
En segundo plano, WordPress añadirá etiquetas de encabezado HTML, que ayudan a los motores de búsqueda a entender el formato de su contenido.
Etiquetas de encabezado en código HTML
En HTML, una etiqueta de encabezado tiene el siguiente aspecto:
<h1></h1>La etiqueta h1 suele reservarse para el título. Así, en HTML, el título de su página aparecería envuelto en etiquetas h1.
<h1>This is My Page Title</h1>Tal vez se pregunte por qué la etiqueta del título no está aquí. El título de tu página aparece en el código HTML 2 veces:
- Envuelto en una etiqueta de título (Esto es estrictamente para los motores de búsqueda)
- Envuelto en una etiqueta h1. (Este es el título visible para sus lectores).
Las demás etiquetas h utilizan la misma sintaxis. Por ejemplo, esta etiqueta h2 se utiliza para la sección de un artículo.
<h2>Introduction to Sales</h2>Buenas prácticas para los títulos
- Haga que los títulos sean útiles y concretos.
- Que sean concisos para que se puedan escanear.
- Ponga los términos más importantes al principio.
Valor SEO de los títulos
Las etiquetas de encabezamiento pueden ayudar a los motores de búsqueda a encontrar secciones de su contenido y relacionarlas con consultas relacionadas.
Por esta razón, pueden ayudar a que su contenido se clasifique para más de un término de búsqueda.
Pero también son importantes para crear contenidos escaneables.
El uso de una estructura clara y lógica y de subtítulos para las distintas secciones puede mantener a los lectores interesados y dispuestos a seguir leyendo.
Etiquetas Alt de imagen
El texto alternativo es un texto que describe una imagen. La mayoría de las plataformas web, incluida WordPress, ofrecen un campo de formulario para añadir texto alternativo.
Este texto alternativo tiene dos finalidades:
- Los motores de búsqueda leen e indexan el texto alternativo de las imágenes, lo que les ayuda a comprender su contenido.
- Los lectores de pantalla, dispositivos que utilizan las personas con discapacidad visual, leen el texto alternativo en voz alta.
Una vez que haya añadido el texto alternativo, WordPress lo incluirá automáticamente en una etiqueta alternativa de la imagen.
Alt text es la abreviatura de texto alternativo. Las etiquetas alt también se denominan atributos alt
Etiquetas Alt de imagen 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">Prácticas recomendadas para las etiquetas Alt de las imágenes
- Incluya siempre texto alternativo en las imágenes, a menos que sean decorativas.
- Omita los signos de puntuación, guiones o símbolos especiales.
- Describe la imagen y su contexto.
Por ejemplo, si su imagen es un gráfico de las tendencias de la tasa de criminalidad en Oslo (Noruega), explique lo que muestra a los lectores.
alt="crime trends in oslo norway"Valor SEO de las etiquetas Alt de las 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 su sitio web.
Schema Markup (para Rich Snippets)
Si añade el marcado schema a sus páginas web, podrá mostrarlas como fragmentos enriquecidos en los resultados de búsqueda.
Puedes pensar en los fragmentos enriquecidos como visualizaciones de superlujo del motor de búsqueda.
Este es un fragmento de búsqueda estándar.
Y aquí hay un fragmento 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 fragmentos enriquecidos entre los que elegir:
- Reserve
- Cursos
- PREGUNTAS FRECUENTES
- Evento
- Aplicación informática
- Persona.
Aunque el marcado schema 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 esquemas en HTML
El código para el marcado de esquemas puede ser largo.
Si desea ver qué aspecto tiene, le recomendamos que consulte algunos ejemplos de código en Schema.org.
Google, Bing, Yahoo! y Yandex han aportado etiquetas al proyecto Schema.org.
Buenas prácticas para el marcado de esquemas
Siempre que sea posible, añada el marcado schema a sus páginas web.
Y explore los tipos de esquemas disponibles en AIOSEO.
Valor SEO de Schema Markup
Los fragmentos enriquecidos atraen más clics que los fragmentos estándar.
Más información sobre los fragmentos enriquecidos.
Etiquetas canónicas
Las etiquetas canónicas ayudan a Google a clasificar las páginas duplicadas indicando cuál de ellas desea que aparezca en los resultados de búsqueda.
Un uso común de las etiquetas canónicas es para las páginas de productos, cuando el mismo contenido puede aparecer en varias áreas de su sitio.
Buenas prácticas
Al enlazar internamente, enlace a la URL canónica. Eso comunica su preferencia a Google.
Etiquetas canónicas en código HTML
La sintaxis de las etiquetas canónicas (o atributos) es:
rel="canonical"He aquí un ejemplo de 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 técnico de SEO. Consulte las directrices para desarrolladores de Google sobre los métodos para especificar URL canónicas.
Otras etiquetas HTML importantes
Ya hemos hablado de las principales etiquetas HTML para SEO. Pero aquí hay algunas etiquetas especiales junto con sus usos.
Etiquetas Open Graph
¿Te has preguntado alguna vez por qué algunas páginas web, cuando se comparten en Facebook, parece que falta algo?
Cuando un usuario comparte tu página en Facebook, la plataforma de redes sociales busca etiquetas Open Graph en tu código.
Estas etiquetas HTML indican a Facebook qué imagen, título y descripción debe mostrar. Si tu página no tiene estas etiquetas OG, tendrá un aspecto soso cuando se comparta.
All in One SEO (AIOSEO) te ofrece una forma sencilla de controlar cómo aparece tu contenido en Facebook. (Y no hay necesidad de molestarse con el código).
Etiquetas de Twitter Card
Las etiquetas Twitter Card funcionan como las etiquetas OG. Y aquí también puedes utilizar All in One SEO (AIOSEO) para controlar cómo aparece tu página cuando se comparte en Twitter.
Puedes hacer clic en un botón y copiar tu configuración de Facebook para compartirla en Twitter.
Atributos de los enlaces
Los backlinks son un importante factor de clasificación. (Los backlinks son enlaces de otros sitios hacia el suyo).
Los enlaces de sitios web respetados y de calidad pueden elevar la clasificación de su 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.
Este es el aspecto del atributo en el código del enlace.
<a href="https://www.example.com" rel="nofollow">linked text</a>Conozca los atributos nofollow, ugc y sponsored y cómo evitarlos.
Noindex Etiqueta Robots
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 quizá desee que los motores de búsqueda omitan.
"Página de éxito" o "mensaje de éxito" es un término de marketing para una página de agradecimiento que se muestra después de que un usuario se inscriba en algo, como un boletín o un seminario web.
Este es un atributo noindex contenido en una etiqueta meta robots.
<meta name="robots" content="noindex" />Anteriormente, a veces se añadían directivas noindex al archivo robots.txt de un sitio. Sin embargo, Google dejó de utilizar este método en 2019.
Etiquetas semánticas HTML 5
Las etiquetas semánticas ayudan a los motores de búsqueda a entender cómo se relacionan entre sí las partes de una página.
Fueron una característica importante en el lanzamiento de HTML 5 en 2008.
He aquí algunos ejemplos de etiquetas semánticas.
- <main>
- <aside>
- <form>
- <table>
- <time>
El código base y los temas de WordPress incluyen etiquetas semánticas.
Preguntas y respuestas sobre etiquetas HTML para SEO
Ahora que ya conoce las principales etiquetas HTML para SEO, es posible que le queden algunas preguntas.
¿Necesito saber HTML para el SEO?
No, no hace falta saber HTML para hacer un buen SEO. Gracias a los avances en sistemas de gestión de contenidos como WordPress y plugins relacionados como All in One SEO (AIOSEO), es posible hacer SEO eficaz sin saber nada de código.
¿Cómo estructuro el HTML para obtener mejores resultados SEO?
HTML proporciona a los navegadores y motores de búsqueda información sobre el formato de su página. Para obtener mejores resultados, estructure su página de forma lógica, de modo que el contenido esté bien organizado y sea claro.
Puede hacerlo en un editor WYSIWIG, como los que ofrecen las mejores plataformas como WordPress y Drupal.
Además, aprenda a dar formato a sus páginas para facilitar el escaneado. Y, cuando proceda, aplique el marcado schema a la página.
Después de Etiquetas HTML para SEO . . .
Esperamos que este post 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 se asegura de que su sitio utiliza los metadatos correctamente.
A continuación, aprenda a añadir un mapa del sitio HTML a su sitio web. Echa un vistazo a estas herramientas 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. Allí encontrarás magníficos tutoriales paso a paso. También puedes seguirnos en X (Twitter), LinkedIn o Facebook para mantenerte informado.
¿Quieres probar AIOSEO gratis?
Introduzca la URL de su sitio web WordPress para instalar AIOSEO Lite.
Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.
