Las meta etiquetas son fragmentos de código que se encuentran en el encabezado (header) de un documento HTML y que proporcionan información sobre el contenido de la página. Estas etiquetas no se muestran en la página web visible para los usuarios, pero pueden ser leídas por los navegadores y los motores de búsqueda.
En el contexto del SEO, las meta etiquetas ofrecen información a los motores de búsqueda sobre el contenido de la página, ayudando a determinar la relevancia de una página para determinadas consultas de búsqueda.
Estas meta etiquetas se colocan dentro del encabezado del sitio web, específicamente en la sección del header, es decir dentro de (<head>) y (</head>).
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
<meta name="description" content="Descripción breve de la página...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>Es vital mantenerse actualizado con las prácticas recomendadas en el mundo del SEO, ya que las directrices y los algoritmos de los motores de búsqueda evolucionan con el tiempo. Las meta etiquetas son solo una parte del extenso universo del SEO, pero desempeñan un papel crucial en la optimización de un sitio web.
Algunas de las meta etiquetas más importantes son:
META CHARSET
El Meta Charset es una etiqueta meta utilizada para especificar la codificación de caracteres de un documento HTML. La codificación de caracteres determina cómo se interpretan y se muestran los caracteres en un documento. Si un sitio web no especifica correctamente su codificación de caracteres, puede dar lugar a problemas de visualización, especialmente cuando se usan caracteres no estándar o especiales, como acentos, tildes o símbolos de monedas.
En el contexto del SEO, aunque meta charset no es una etiqueta que influya directamente en el ranking de un sitio web, es fundamental para la correcta presentación y visualización del contenido. Si el contenido no se muestra correctamente debido a problemas de codificación, puede afectar negativamente la experiencia del usuario, y la experiencia del usuario es un factor que los motores de búsqueda consideran al clasificar sitios web.
Ejemplo de uso:
El estándar actual y más ampliamente adoptado para la codificación de caracteres es UTF-8, que soporta muchos caracteres y símbolos de diferentes idiomas y scripts. Para especificar que un documento HTML utiliza UTF-8, agregarías la siguiente etiqueta meta en el encabezado (<head>) de tu documento.
Ejemplo:
<meta charset="UTF-8">META TITLE
El «Meta Title», también conocido simplemente como «Title» o «Title Tag», es una de las etiquetas más importantes en el SEO. Se utiliza para definir el título de una página web y se muestra en la pestaña del navegador y, lo que es más importante, como el título del enlace en los resultados de búsqueda de los motores de búsqueda.
El título es fundamental por varias razones:
Relevancia: Ayuda a los motores de búsqueda a comprender de qué trata la página.
Tasa de clics (CTR): Un buen título puede influir en si los usuarios deciden hacer clic en tu resultado en lugar de otros en la página de resultados del motor de búsqueda.
Branding: Puedes incluir el nombre de tu marca o sitio web en el título para mejorar el reconocimiento de marca.
Al escribir un título, es importante que sea relevante para el contenido de la página, que incluya palabras clave (sin hacer «keyword stuffing») y que no exceda la longitud recomendada (generalmente se recomienda mantenerlo por debajo de los 60 caracteres para evitar que sea truncado en los resultados de búsqueda).
Ejemplo de uso:
Supongamos que tienes una tienda en línea de bicicletas y estás creando una página para una nueva bicicleta de montaña que has añadido a tu catálogo. Un posible título podría ser:
<title>Bicicleta de Montaña XYZ 2023 - TuTiendaDeBicis</title>En este ejemplo:
- Se ha incluido el producto específico («Bicicleta de Montaña XYZ 2023»).
- Se ha añadido el nombre de la tienda («TuTiendaDeBicis») para branding.
Es claro y directo, lo que facilita a los usuarios y a los motores de búsqueda comprender de qué trata la página.
El título es una de las primeras cosas que tanto los motores de búsqueda como los usuarios ven, por lo que es esencial optimizarlo correctamente para obtener los mejores resultados en términos de SEO y CTR.
META DECRIPTION
La «Meta Description» es una etiqueta HTML que describe brevemente el contenido de una página web. Aunque Google ha confirmado que la meta description no es un factor directo de clasificación en sus algoritmos de búsqueda, es esencial para el marketing digital y el SEO porque puede influir en la tasa de clics (CTR) de un sitio web en los resultados de búsqueda. Una buena meta description puede persuadir a los usuarios para que hagan clic en tu enlace en lugar de en el de la competencia.
La meta description debe ser relevante, atractiva y de aproximadamente 150-160 caracteres. Es vital que sea concisa, que contenga palabras clave relevantes (sin abusar) y que refleje con precisión el contenido de la página.
Ejemplo:
Supongamos que tienes una tienda en línea que vende zapatillas ecológicas. Una posible meta description para la página principal podría ser:
<meta name="description" content="Descubre nuestra amplia gama de zapatillas ecológicas hechas con materiales sostenibles. Compra con conciencia y camina con estilo. ¡Visítanos ahora!">Algunas cosas para tener en cuenta:
- Relevancia: La descripción debe reflejar con precisión el contenido de la página.
- Llamada a la acción: Frases como «¡Visítanos ahora!» pueden animar a los usuarios a hacer clic.
- Longitud: Aunque no hay un límite estricto, es probable que los motores de búsqueda truncen las meta descriptions que superen los 160 caracteres.
Si bien la meta description no afecta directamente el ranking, una tasa de clics más alta puede indicar a los motores de búsqueda que tu sitio es relevante para una determinada consulta, lo que puede tener un impacto indirecto en el SEO. Por lo tanto, es crucial tomarse el tiempo para escribir meta descriptions atractivas y relevantes.
META KEYWORDS
El atributo «Meta Keywords» es una etiqueta meta que solía ser muy popular en los primeros días del SEO. Permitía a los webmasters especificar palabras clave para una página web. Estas palabras clave se suponía que ayudaban a los motores de búsqueda a entender de qué trataba la página y, por lo tanto, a indexarla correctamente.
Sin embargo, con el tiempo, esta etiqueta fue abusada por muchos sitios que intentaban «spammeando» con listados de palabras clave irrelevantes o sobre optimizadas con el objetivo de mejorar su clasificación.
Debido a esto, y al avance en la capacidad de los motores de búsqueda para analizar el contenido de una página sin depender de esta etiqueta, la mayoría de los principales motores de búsqueda, incluido Google, dejaron de considerarla como un factor de ranking. En la actualidad, incluir la etiqueta meta keywords no tiene impacto en el SEO y puede ser innecesaria.
Ejemplo de uso (aunque es innecesario en el contexto actual):
Supongamos que tienes un blog sobre jardinería y tienes una entrada específica sobre cómo plantar rosas. Una etiqueta meta keywords podría verse así:
<meta name="keywords" content="jardinería, rosas, plantar rosas, cuidado de rosas, consejos para rosas">A pesar de que esta etiqueta ya no tiene relevancia para SEO, si decides usarla, es crucial asegurarte de que las palabras clave sean relevantes para el contenido de la página. Sin embargo, es más recomendable centrar tus esfuerzos en otros aspectos del SEO, como el contenido de calidad, la optimización on-page, la construcción de enlaces y la experiencia del usuario.
VIEWPORT META TAG
El viewport meta tag es una etiqueta esencial utilizada para controlar cómo se muestra una página web en dispositivos móviles. No afecta directamente a la clasificación de un sitio en los motores de búsqueda, pero tiene un impacto indirecto en el SEO debido a su influencia en la experiencia del usuario en dispositivos móviles.
El algoritmo de Google, por ejemplo, otorga importancia a la adaptabilidad de un sitio web a dispositivos móviles (móvil amigable) al determinar su clasificación en los resultados de búsqueda. Una página que no esté optimizada para dispositivos móviles puede no ofrecer una buena experiencia a los usuarios, lo que puede afectar negativamente su clasificación en los resultados de búsqueda móvil.
El viewport meta tag permite a los webmasters controlar el ancho y el escalamiento del área visible (o «viewport») para dispositivos móviles. Esto asegura que el contenido se redimensione y se muestre adecuadamente en función del dispositivo que se esté utilizando.
Ejemplo de uso:
La configuración más común y recomendada del viewport meta tag para diseño responsive es:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Explicación:
- width=device-width: Establece el ancho del viewport al ancho del dispositivo.
- initial-scale=1.0: Establece el nivel inicial de zoom al 100% (sin zoom).
Al incluir esta etiqueta en el <head> de tu documento HTML, te aseguras de que tu sitio web se adapte y se muestre adecuadamente en una variedad de dispositivos, desde smartphones hasta tabletas y ordenadores de escritorio. Es esencial para proporcionar una buena experiencia de usuario en todos los dispositivos y, por lo tanto, es crucial para el SEO moderno.
META REFRESH
El meta refresh es una etiqueta que permite a las páginas web redirigir automáticamente a otra URL o recargar la página después de un tiempo especificado. Aunque puede ser útil en ciertos escenarios, su uso generalmente no es recomendado desde una perspectiva de SEO.
Problemas asociados con meta refresh en SEO
Experiencia del Usuario: La redirección automática puede ser confusa para los usuarios, especialmente si no esperaban ser llevados a una página diferente.
Redirección Ineficiente: Los motores de búsqueda, como Google, prefieren redirecciones HTTP (como 301 y 302) sobre meta refresh porque son más directas y claras en su intención.
Pérdida de Valor de Enlace: A diferencia de una redirección 301, que pasa la mayor parte del valor de un enlace a la nueva URL, el meta refresh puede no pasar este valor de la misma manera.
Potencial para Uso Malicioso: Esta etiqueta ha sido utilizada en el pasado para técnicas de «cloaking» y otros trucos de SEO no éticos.
Ejemplo de uso:
Si, a pesar de las advertencias, todavía necesitas usar meta refresh (por ejemplo, en una página de «Estamos redirigiendo tu solicitud» o para recargar contenido dinámico), aquí tienes cómo hacerlo:
Para redirigir a una nueva página después de 5 segundos:
<meta http-equiv="refresh" content="5;url=https://ejemplo.com/nueva-pagina/">Para recargar la página actual cada 10 segundos:
<meta http-equiv="refresh" content="10">Donde el número antes del ;url= es el tiempo en segundos antes de que se realice la acción.
Sin embargo, si estás considerando utilizar meta refresh para fines de SEO, como redirigir a los usuarios de una página antigua a una nueva, es mucho mejor optar por una redirección 301, que es la forma recomendada y más eficiente de hacerlo.
CANONICAL TAG
El canonical tag (etiqueta canónica) es una etiqueta HTML que se utiliza para indicar a los motores de búsqueda cuál es la versión «preferida» o «canónica» de una página cuando existen múltiples páginas con contenido similar o duplicado.
Esta etiqueta ayuda a resolver problemas de contenido duplicado al decirle a los motores de búsqueda cuál versión de una página deben considerar como la principal o «autoritaria». Al hacerlo, ayuda a consolidar la señal de ranking en una sola versión y evita la dilución que podría ocurrir si los motores de búsqueda trataran todas las versiones como contenido separado.
¿Por qué es importante?
El contenido duplicado puede surgir por diversas razones, como:
- Versiones de URL con y sin ‘www’.
- Páginas de productos que se pueden acceder a través de múltiples categorías o rutas.
- Versiones imprimibles de páginas web.
- Parámetros de seguimiento en URLs que generan el mismo contenido.
El canonical tag ayuda a clarificar la confusión al mostrar a los motores de búsqueda cuál página es la versión «original» o preferida, lo que puede ayudar a mejorar la precisión de los resultados de búsqueda y a mantener una estrategia de SEO sólida.
Ejemplo de uso:
Supongamos que tienes tres URLs que muestran el mismo producto pero con diferentes parámetros:
- https://ejemplo.com/producto?color=rojo
- https://ejemplo.com/producto?color=azul
- https://ejemplo.com/producto
Si deseas que los motores de búsqueda consideren la tercera URL (sin parámetros) como la versión canónica y la principal, agregarías la siguiente etiqueta en el <head> de las tres páginas:
<link rel="canonical" href="https://ejemplo.com/producto">Al hacerlo, estás indicando que, aunque hay múltiples versiones de la página, la versión canónica que debe ser considerada por los motores de búsqueda es https://ejemplo.com/producto.
Es crucial asegurarse de que la URL especificada en el atributo “href “de la etiqueta canónica sea accesible y no redirija a otra ubicación, ya que esto podría causar problemas de rastreo e indexación.
ALTERNATE TAG
El alternate tag (etiqueta alternativa) es una etiqueta utilizada para señalar versiones alternativas de una página. En el contexto del SEO, esta etiqueta es esencialmente útil para dos propósitos principales:
- Diseño Adaptable (Responsive Design): Indicar una versión específica para dispositivos móviles.
- Contenido Multilingüe: Mostrar a los motores de búsqueda las diferentes versiones lingüísticas de una página.
Vamos a detallar un poco más y proporcionar ejemplos para cada caso:
Diseño Adaptable (Responsive Design)
Aunque la mayoría de los sitios modernos usan diseño adaptable que automáticamente ajusta el contenido según el tamaño del dispositivo, en algunos casos, puede haber una versión separada del sitio para móviles (por ejemplo, m.ejemplo.com). En tales situaciones, se puede usar la etiqueta alternativa para señalar la versión para móviles.
Ejemplo:
Supongamos que tienes una página y también una versión móvil de esa página. Puedes usar la etiqueta alternativa así:
En la página principal (versión de escritorio):
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.ejemplo.com/pagina/">Y en la versión móvil:
<link rel="canonical" href="https://ejemplo.com/pagina/">Contenido Multilingüe
Si tu sitio tiene contenido en varios idiomas, puedes usar la etiqueta alternativa junto con el atributo hreflang para indicar las diferentes versiones lingüísticas de una página.
Ejemplo:
Supongamos que tienes una página en inglés, español y francés. Las URL son:
- Inglés: https://ejemplo.com/en/page/
- Español: https://ejemplo.com/es/pagina/
- Francés: https://ejemplo.com/fr/page/
En la versión en inglés, agregarías:
<link rel="alternate" hreflang="es" href="https://ejemplo.com/es/pagina/">
<link rel="alternate" hreflang="fr" href="https://ejemplo.com/fr/page/">En la versión en español:
<link rel="alternate" hreflang="en" href="https://ejemplo.com/en/page/">
<link rel="alternate" hreflang="fr" href="https://ejemplo.com/fr/page/">Y en la versión en francés:
<link rel="alternate" hreflang="en" href="https://ejemplo.com/en/page/">
<link rel="alternate" hreflang="es" href="https://ejemplo.com/es/pagina/">Estas etiquetas informan a los motores de búsqueda sobre las versiones lingüísticas de la página, lo que puede ayudar a servir el contenido correcto a los usuarios según su ubicación y preferencias de idioma.
SOCIAL MEDIA META TAGS
Los Social Media Meta Tags son etiquetas específicas que se pueden agregar al código HTML de una página para controlar cómo se muestra el contenido cuando se comparte en plataformas de redes sociales. Aunque estos meta tags no impactan directamente en el ranking de búsqueda tradicional, tienen un efecto indirecto en el SEO ya que pueden mejorar la visibilidad y compartir en redes sociales, lo que puede conducir a un mayor tráfico y reconocimiento de la marca.
Los dos conjuntos más comunes de meta tags para redes sociales son Open Graph (OG), utilizado principalmente por Facebook y otras plataformas que adoptan su estándar, y Twitter Cards para Twitter.
Open Graph Tags (OG Tags):
Estas etiquetas permiten controlar cómo se presentará tu contenido en Facebook, LinkedIn y otras plataformas que adoptan el estándar OG. Algunas de las etiquetas OG más comunes incluyen:
- og:title: El título del contenido.
- og:description: Una breve descripción.
- og:image: La URL de la imagen que deseas mostrar.
- og:url: La URL canónica del contenido.
- og:type: El tipo de contenido (ej. website, article, video).
Ejemplo:
<meta property="og:title" content="Título del Artículo">
<meta property="og:description" content="Descripción breve del artículo.">
<meta property="og:image" content="https://ejemplo.com/imagen.jpg">
<meta property="og:url" content="https://ejemplo.com/pagina-del-articulo">
<meta property="og:type" content="article">Twitter Cards:
Las Twitter Cards permiten presentar de manera rica y atractiva el contenido compartido en Twitter. Hay varios tipos de Twitter Cards, como «Summary Card», «Summary Card with Large Image», «App Card» y «Player Card». Algunas etiquetas comunes incluyen:
- twitter:card: El tipo de tarjeta (ej. «summary», «summary_large_image»).
- twitter:title: Título del contenido.
- twitter:description: Descripción breve.
- twitter:image: URL de la imagen.
Ejemplo:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título del Artículo">
<meta name="twitter:description" content="Descripción breve del artículo.">
<meta name="twitter:image" content="https://ejemplo.com/imagen.jpg">¿Cómo afecta el SEO?
Aunque estas etiquetas no afectan directamente el SEO en términos de rankings, tienen varios beneficios:
Mejor Presentación en Redes Sociales: Al controlar cómo se muestra tu contenido, puedes hacer que sea más atractivo para los usuarios, lo que puede llevar a más clics y compartir.
Más Tráfico: Al mejorar la tasa de clics y compartir, puedes generar más tráfico hacia tu sitio.
Reconocimiento de Marca: Una presentación consistente y atractiva en las redes sociales puede mejorar el reconocimiento de tu marca.
En resumen, mientras que los social media meta tags no tienen un impacto directo en el ranking de los motores de búsqueda, pueden jugar un papel en la generación de tráfico y la visibilidad, lo que puede tener un efecto indirecto en el SEO. Es una buena práctica implementar estos meta tags para asegurarte de que tu contenido se vea y se comparta de la mejor manera posible en las redes sociales.
