Ir al contenido principal

Cómo agregar metaetiquetas al código HTML de tu sitio web

Las metaetiquetas, también conocidas como metadatos, son fragmentos de código HTML utilizados en el desarrollo web para describir el contenido de una página web.

Las metaetiquetas no se muestran en las páginas, sino que están en el código fuente del sitio web, también llamado código HTML, que se encuentra en la cabecera del sitio web. Estas etiquetas proporcionan a los motores de búsqueda descripciones sobre el contenido de la página para ayudarles a determinar de qué trata la página y entregar las páginas más relevantes a los usuarios de los motores de búsqueda.

Las metaetiquetas se utilizan en código HTML en la cabecera de la página, lo que las hace visibles solo para los motores de búsqueda y quienes saben cómo ver el código fuente del sitio web. Los metadatos informan a los motores de búsqueda sobre los datos de un sitio web para que tu contenido se posicione en motores de búsqueda populares como Google. Desafortunadamente, agregar metaetiquetas puede ser difícil si no sabes cómo crear metadatos o código HTML para tu sitio web.

¿Qué es la etiqueta de código HTML head?

La etiqueta de código HTML head es el contenedor de metadatos. Se encuentra entre la etiqueta HTML y las etiquetas Body . Esta es la ubicación donde colocas todas tus metaetiquetas en código HTML para definir el título, los estilos, los scripts y otra información. Esta área de la página no se muestra en el navegador web.

En cambio, los motores de búsqueda utilizan la información para determinar de qué trata una página, incluyendo su título, contenido, palabras clave y más. Los navegadores usan la información en el encabezado para renderizar correctamente la página web. A diferencia del head, el elemento body se muestra en la página cuando se carga en un navegador, por lo que no debe contener ningún metadato.

¿Qué es la etiqueta de código HTML head?

El código HTML head se encuentra entre la etiqueta HTML y la etiqueta body. Por lo general, es mucho más pequeño que la etiqueta porque su función principal es contener metadatos. Puedes usar herramientas de desarrollo en tu navegador web para encontrar el código HTML head de cualquier página de un sitio web.

¿Qué son los metadatos del sitio web?

Las metaetiquetas en código HTML son partes de información importantes para los motores de búsqueda. Se utilizan para describir elementos de código HTML y comunicar el contenido de un sitio web a los motores de búsqueda.

Los metadatos del sitio web incluyen títulos de página, descripciones, palabras clave y más para ayudar a los motores de búsqueda a rastrear y clasificar las páginas web. Los motores de búsqueda interpretan los datos y la información de las páginas del sitio web para determinar su relevancia para la consulta de búsqueda de un usuario. Las palabras clave dentro del cuerpo y los backlinks a la página desempeñan funciones esenciales, pero los metadatos explican el propósito general de una página para permitir que se clasifique para palabras clave.

Las metaetiquetas pueden mejorar los esfuerzos de SEO para ayudar a los motores de búsqueda a entender el propósito de una página. Sin embargo, no todas las metaetiquetas están diseñadas para propósitos de SEO.

Puedes agregar metadatos al encabezado de un sitio web de varias maneras. Primero, necesitarás acceso a la sección del archivo HTML. Puedes descargarlo y editarlo con un editor de texto o crear un archivo nuevo. También puedes elegir agregar o editar el archivo en el Gestor de archivos de cPanel. Una vez que tengas el archivo de código HTML, localiza la sección de encabezado en la parte superior. Dependiendo de cómo se haya desarrollado la página, es posible que ya tengas una etiqueta de título y otros tipos de metaetiquetas.

Si no eres desarrollador de sitios web, puedes usar un plugin de WordPress como SEOPress o Yoast para agregar fácilmente metatags a tus páginas web.

Etiqueta de título

La etiqueta de título es lo que se muestra en las páginas de resultados de los motores de búsqueda (SERP) como el título de tu página web. Cada página de tu sitio web debe tener un título único. El título no debe confundirse con la etiqueta H1 que se encuentra dentro del cuerpo de la página y puede servir como título para el contenido en la página. Las etiquetas de título deben tener entre 50 y 60 caracteres para evitar que se corten en los motores de búsqueda.

Puedes añadir el título a una página web buscando la etiqueta dentro del código fuente e ingresando las palabras. Cuando termines de agregar tu etiqueta de título, debería verse algo así:

El título va aquí

Las etiquetas de título son importantes porque ayudan a los motores de búsqueda a determinar de qué trata una página web, lo que finalmente les ayuda a decidir si deben clasificar tu página para una consulta específica. Las etiquetas de título también aparecen en las pestañas del navegador para ayudarte a navegar por él.

Las etiquetas de título efectivas deben utilizar tus palabras clave objetivo para ayudar a los motores de búsqueda a posicionar la página. Sin embargo, también deben atraer a los usuarios para que hagan clic y lean tus artículos o páginas web. Las palabras clave de alta prioridad deben colocarse lo más cerca posible del inicio del título, ya que no tienes mucho espacio para trabajar. Además, cada página debe tener un título único para evitar confundir a los motores de búsqueda y a sus usuarios.

Etiqueta de metadescripción

Una metadescripción es el breve resumen de texto que aparece en las SERP debajo del título. Todas tus páginas deben tener descripciones únicas y precisas del contenido que contienen. Una metadescripción debe tener entre 150 y 160 caracteres para evitar que se trunque en los resultados de búsqueda.

Desafortunadamente, no siempre puedes decidir qué es tu metadescripción. Aunque la escriba tú mismo, los motores de búsqueda pueden decidir que la información que proporcionaste no es relevante y optar por reescribir tus metadescripciones o mostrar el contenido incorrecto de la página.

Para agregar la etiqueta de metadescripción a la página de tu sitio web, busca la sección del código HTML.

Una metadescripción es una información clave para los motores de búsqueda y los usuarios. Utilizar una metadescripción efectiva puede promover más clics a tu sitio web al establecer expectativas claras sobre lo que los usuarios pueden esperar encontrar.

Incluir palabras clave objetivo en tu metadescripción puede ayudar a las personas a descubrir tu contenido más fácilmente mientras les informas a los motores de búsqueda sobre qué trata la página. También puedes explicar el propósito de la página y lo que los clientes encontrarán una vez que hagan clic.

También puedes realizar pruebas A/B en tus metadescripciones para ver qué versiones obtienen más clics, te ayudan a posicionarte más alto y, en última instancia, atraen más tráfico a tu sitio web. Aprende a escribir una descripción eficaz consultando estos ejemplos de metadescripciones.

Metaetiqueta robots

La metaetiqueta robots indica a los motores de búsqueda cómo rastrear tu sitio web, informándoles qué páginas deseas posicionar y cuáles no. Existen muchos propósitos para estas etiquetas, por lo que debes usarlas correctamente si deseas clasificar ciertas páginas e ignorar otras.

Las etiquetas robots les dicen a los motores de búsqueda si deben indexar o seguir una página, etiquetándolas como INDEX y FOLLOW o NOINDEX y NOFOLLOW. Cuando etiquetas una página como INDEX, les dices a los motores de búsqueda que quieres que aparezca en las SERP. Mientras tanto, cuando les digas que SIGAN una página, significa que quieres transferir el PageRank a una página específica.

Una etiqueta NOFOLLOW no se sigue, por lo que no puedes transferir el rango de página a ningún otro tipo de página web. Estas páginas todavía pueden aparecer en el índice de Google si otro sitio las enlaza sin utilizar la etiqueta NOFOLLOW. Otros motores de búsqueda pueden tener reglas diferentes para estas etiquetas de robots.

Las etiquetas robot pueden verse de esta manera:

En última instancia, las etiquetas que utilices dependerán de tus objetivos para una página específica. La primera línea de nuestro ejemplo les indica a los motores de búsqueda que ignoren la página y los enlaces dentro de ella, lo que finalmente la hace inútil para el tráfico de referencia.

El segundo ejemplo les dice a los motores de búsqueda que ignoren la página, pero sigan todos los hipervínculos de esa página, y el tercer ejemplo les dice a los motores de búsqueda que indexen la página, pero que no sigan los hipervínculos de la página que pueden llevar a otras páginas.

Cada una de tus páginas debe tener una metaetiqueta robots, pero solo una etiqueta por página. No usarías tus tres opciones en la misma página.

Etiqueta de Open Graph

Las etiquetas de Open Graph se utilizan para compartir mensajes en plataformas de redes sociales como Facebook. Si quieres transferir información de un blog, como la imagen destacada y un fragmento, usarás la etiqueta Open Graph. Estas etiquetas comunican eficazmente a las plataformas de redes sociales el tipo de información que deseas mostrar al compartir un enlace desde tu sitio web.

Probablemente ya has visto algunas etiquetas de Open Graph en acción. Cada vez que compartes un enlace de un sitio web en las redes sociales, automáticamente se genera una vista previa. Esta vista previa se crea a través de la etiqueta Open Graph. Existen muchas etiquetas Open Graph que puedes seleccionar, pero se mostrarán en la sección head del código HTML como

Tus opciones para lo que puedes incluir en un open graph son:

El título define la página web y su contenido. Puedes hacer que el título de tu gráfico abierto sea el mismo que tu título meta o cambiarlo según tu público en las redes sociales. Mientras tanto, la descripción funciona de manera similar a una meta descripción, mientras que el tipo define el tipo de contenido. Por ejemplo, el tipo podría referirse a una canción, un PDF o una imagen.

Además, la etiqueta de imagen de Open Graph indica a las plataformas de redes sociales qué imagen quieres extraer de la página web para que sirva como imagen de la publicación, y la URL define la URL de la página que estás compartiendo. Si deseas mostrar el nombre de tu sitio web, puedes hacerlo utilizando la etiqueta de nombre del sitio, pero generalmente no es una propiedad importante para los usuarios de redes sociales.

Metaetiqueta de palabra clave

La metaetiqueta de palabras clave se utiliza para describir las palabras clave por las que quieres posicionarte. Sin embargo, la mayoría de los motores de búsqueda ignoran esta etiqueta, por lo que se está volviendo obsoleta cada año.

De hecho, si abusas de la metaetiqueta, podrías recibir una penalización que te impediría posicionarte para tus palabras clave objetivo. Cuando se usa correctamente, esta etiqueta puede informar a los motores de búsqueda sobre qué trata tu contenido al resaltar palabras clave importantes que se encuentran en tu página.

Desafortunadamente, Google no utiliza la metaetiqueta, pero otros motores de búsqueda podrían hacerlo, por lo que vale la pena considerarlo si deseas mejorar tu SEO utilizando motores de búsqueda distintos a Google.

Como mínimo, el uso de la etiqueta de palabra clave meta puede ayudarte a realizar un seguimiento de las palabras clave a las que te diriges en diferentes páginas del sitio web. La etiqueta se ve algo así: :

Dado que los principales motores de búsqueda ya no utilizan las metaetiquetas como factor de clasificación, no hay necesidad de perder tu tiempo ni agregar más código que pueda bajar la velocidad de tu sitio web. En su lugar, puedes omitir este y centrarte en las metaetiquetas que pueden ayudar a mejorar el posicionamiento y la experiencia del usuario.

Otras metaetiquetas de HTML

Hay muchos otros tipos de metaetiquetas que se pueden usar en el encabezado o el cuerpo de un sitio web. Estas otras metaetiquetas sirven para varios propósitos, desde evitar problemas de contenido duplicado hasta mejorar la accesibilidad y la experiencia del usuario. Echemos un vistazo a algunas de las metaetiquetas adicionales más útiles que podrías usar en tu sitio web.

  • Etiqueta canónica: la etiqueta canónica se utiliza para indicar si hay una versión original de una página web, informando a los motores de búsqueda que una versión es la principal y que las otras no deben indexarse. Esto puede evitar que compitas contigo mismo por las clasificaciones y que el contenido duplicado se convierta en un problema.
  • Etiqueta de texto alternativo: la etiqueta de texto alternativo ayuda a los motores de búsqueda a leer imágenes a través del texto, ya que no pueden saber cómo se ve una imagen. Cuando escribas texto alternativo, usa siempre descripciones relevantes sin exagerar con las palabras clave. El texto alternativo también es importante para que los lectores de pantalla mejoren la accesibilidad del sitio web, por lo que debe tener sentido para la gente.
  • Etiquetas de encabezado: las etiquetas de encabezado se utilizan para cambiar los tamaños de tipografía y estructurar tu contenido. Estas etiquetas van desde H1 (la más grande) hasta H6 (la más pequeña) y pueden ayudar a los lectores a escanear el contenido.
  • Etiquetas de idioma: las metaetiquetas de idioma les indica a los motores de búsqueda en qué idioma está el contenido y qué país se identifica para mejorar los resultados de búsqueda según el idioma y la ubicación.
  • Etiquetas de autor: las etiquetas de autor muestran quién es el autor del contenido, lo que puede ayudar a cumplir con los requisitos de experiencia, autoridad y confiabilidad (EAT) de Google para clasificar el contenido.
  • Fecha de publicación: la fecha de publicación se puede usar en blogs para ayudar a los usuarios a entender qué tan relevante y reciente es la información. Obtén más información sobre los metadatos para publicaciones de blog.
  • Estilo: la etiqueta contiene código CSS para definir cómo deben aparecer los elementos HTML en los navegadores.

Debes sopesar los pros y los contras de cada uno al considerar qué etiquetas usar. Más código en tu sitio web puede afectar negativamente la velocidad de carga, impidiendo que tu sitio web se cargue tan rápido como sea posible.

La velocidad de carga de la página define el tiempo que tarda en cargarse una página de tu sitio web. Cuanto más tiempo tarde en cargarse una página, más probable es que los usuarios la abandonen, perdiendo así tu tráfico web y la oportunidad de realizar una venta.

Al evaluar la velocidad de tu página, debes considerar a los usuarios de computadoras de escritorio y dispositivos móviles. Las personas que usan sus dispositivos móviles para visitar sitios web son aún menos pacientes, por lo que la velocidad de tu página móvil debe ser una prioridad principal para mantener a los usuarios interesados en leer tu contenido.

La velocidad de la página también es un factor importante para el posicionamiento porque mejora la experiencia del usuario. Cuanto más rápido cargue una página web, más probable es que un usuario tenga una buena experiencia, lo que permite a los motores de búsqueda ofrecer mejores resultados a los usuarios. La velocidad de carga de la página también influye en tus ingresos, ya que una página debe cargar rápidamente para mantener a tus clientes potenciales comprometidos en el sitio web, permitiéndoles informarse completamente antes de convertir.

Aunque las metaetiquetas también son esenciales para los motores de búsqueda, siempre es mejor considerar las que más necesitas. Hemos analizado las principales metaetiquetas que debes usar en tu sitio web para mejorar el SEO, pero agregar más código que eso a tu sitio web puede afectar la velocidad de la página y tener un impacto directo en tus clasificaciones.

Por qué es importante agregar metadatos de código HTML en el encabezado del sitio web

Los metadatos solo pueden usarse en la cabecera del sitio web. Si los colocas en la sección del cuerpo de la página, aparecerán cuando se rendericen en un navegador, afectando en última instancia la experiencia del usuario y evitando que los motores de búsqueda usen los datos eficazmente para clasificar las páginas de tu sitio web.

Si tu marcado es inválido, los navegadores podrían no renderizar tus páginas correctamente, por lo que siempre es mejor mantener las etiquetas en el encabezado, donde se supone que deben estar, ya que ese es el único lugar donde los motores de búsqueda las buscarán.

Cómo las metaetiquetas afectan el SEO y la experiencia del usuario

Las metaetiquetas hacen mucho más que simplemente describir tu contenido a los motores de búsqueda; influyen directamente en cómo los usuarios interactúan con tu sitio incluso antes de visitarlo. Cuando se usan correctamente, estos elementos detrás de escena pueden aumentar tu visibilidad, atraer más tráfico y crear una mejor primera impresión.

Tasas de clic en los resultados de búsqueda

Las etiquetas de título y las metadescripciones son oportunidades para causar una buena impresión cuando alguien realiza una búsqueda en Google. Un título atractivo y lleno de palabras clave, junto con una descripción clara y enfocada en los beneficios, puede aumentar la cantidad de personas que hacen clic en tu sitio.

Incluso cuando tu página tiene un buen posicionamiento, las metaetiquetas deficientes pueden llevar a tasas de clics más bajas, ya que los usuarios eligen a competidores con descripciones más atractivas. Cada clic es un cliente potencial, así que vale la pena el esfuerzo de crear metaetiquetas que capten la atención.

Rastreabilidad e indexación

Las metaetiquetas robots les dicen directamente a los motores de búsqueda qué páginas deben incluir en los resultados de búsqueda y cuáles deben ignorar. Sin las instrucciones adecuadas, los motores de búsqueda podrían perder tiempo rastreando páginas irrelevantes o pasar por alto por completo tu contenido más importante.

Las etiquetas canónicas previenen problemas de contenido duplicado al identificar tu versión preferida de páginas similares, concentrando tu poder de clasificación en lugar de dispersarlo en múltiples URL.

Estas metaetiquetas técnicas aseguran que los motores de búsqueda puedan procesar eficientemente tu sitio y clasificar tu mejor contenido.

Apariencia de la vista previa social

Las etiquetas Open Graph determinan cómo se muestra tu contenido al compartirse en plataformas sociales. Sin estas etiquetas, los sitios sociales podrían seleccionar texto o imágenes al azar que no representen bien tu contenido.

Las metaetiquetas sociales configuradas correctamente te permiten controlar qué imágenes, títulos y descripciones acompañan tus enlaces en las redes sociales, haciendo que tu contenido sea más atractivo visualmente y fácil de hacer clic.

Errores comunes que debes evitar con las meta etiquetas

Muchos propietarios de sitios web se apresuran a implementar metaetiquetas o dependen de prácticas anticuadas que pueden perjudicar sus resultados de SEO. Estos errores técnicos pueden afectar significativamente la manera en que los motores de búsqueda interpretan tu sitio y si los visitantes hacen clic en tu contenido. Antes de finalizar tu estrategia de metaetiquetas, ten cuidado con estos tres errores comunes:

Usar títulos o metadescripciones duplicados

Cada página de tu sitio web tiene un propósito único, por lo que usar metaetiquetas idénticas en varias páginas confunde tanto a los usuarios como a los motores de búsqueda. Los títulos y descripciones duplicados dificultan que los motores de búsqueda entiendan qué diferencia tus páginas y pueden hacer que elijan por sí mismos qué página clasificar.

Tómate el tiempo para redactar información meta única y descriptiva para cada página, resaltando lo que hace que cada una sea valiosa y diferente de las demás en tu sitio.

Introducir palabras clave en las metaetiquetas

Sobrecargar tus metaetiquetas con demasiadas palabras clave con la expectativa de mejorar tu clasificación en los motores de búsqueda en realidad produce el efecto contrario. Los motores de búsqueda reconocen esta táctica obsoleta y pueden penalizar tu sitio por ello.

Más importante aún, los títulos y descripciones llenos de palabras clave se leen de manera poco natural para los usuarios, disminuyendo las tasas de clics. En su lugar, escribe metaetiquetas claras y atractivas que usen tus palabras clave principales de manera natural y describan con precisión el contenido de tu página.

Descuidar los metadatos móviles y de redes sociales

Muchos propietarios de sitios web optimizan sus metaetiquetas para los resultados de búsqueda tradicionales, pero se olvidan de cómo aparece su contenido en dispositivos móviles o cuando se comparte en redes sociales.

Los resultados de búsqueda móvil a menudo muestran menos caracteres, por lo que es esencial que las metaetiquetas sean concisas y estén cargadas al inicio. De manera similar, no implementar las metaetiquetas de Open Graph y Twitter Card implica perder oportunidades para controlar cómo se ve tu contenido al ser compartido.

Siempre revisa cómo se muestran tus metaetiquetas en distintas plataformas para asegurarte de que sean efectivas en todos los lugares donde tu público pueda encontrarte.

Qué recordar sobre las metaetiquetas

Los metadatos pueden ayudarte a llevar tu SEO al siguiente nivel al permitirte escribir tus propios títulos y descripciones, y decirles a los motores de búsqueda cómo interactuar con y comprender tu sitio web. Desafortunadamente, trabajar con código HTML puede ser complicado si no eres desarrollador web. Por suerte, esa no es tu única opción.

Si tienes un sitio web de WordPress, puedes usar complementos de SEO para facilitar la adición de etiquetas o puedes usar los servicios de marketing de Mailchimp. Cuando creas un sitio web con Mailchimp, puedes escribir tus propias metaetiquetas para tu sitio web, incluidos metatítulos y metadescripciones, para ayudarte a posicionarte en los motores de búsqueda y obtener más tráfico del sitio web.


Conclusiones clave

  • Las metaetiquetas son fragmentos de código HTML que los motores de búsqueda utilizan para clasificar tus páginas web.
  • Las metaetiquetas correctamente implementadas pueden mejorar la visibilidad de tu sitio en los resultados de búsqueda, aumentar la tasa de clics y controlar cómo aparece tu contenido en las redes sociales.
  • Aunque agregar metaetiquetas requiere conocimientos básicos de código HTML, herramientas como los plugins hacen que la implementación sea accesible incluso sin experiencia técnica.

Comparte este artículo