25 Meta tags más importantes en HTML: Og, SEO, PWA y más

jac ADesarrollo Web, HTML, SEO1 years ago2.2K Views

Las meta tags (meta etiquetas) en HTML son fragmentos de código en la cabecera de tu documento HTML que proporcionan información sobre la página web a los motores de búsqueda y navegadores. Aunque no son visibles para los usuarios, son cruciales para el SEO y la funcionalidad de tu sitio web. En este artículo, exploraremos qué son las meta etiquetas, por qué son importantes y cómo puedes usarlas para optimizar tu sitio web.

¿Qué son las meta tags en HTML?
Tipos comunes de meta tags
Importancia de las Meta tags para el SEO
Mejores Prácticas para el Uso de Meta tags
Función de las Meta tags

¿Qué son las meta tags en HTML?

Meta tags más importantes en HTML: qué son y cómo usarlas correctamente

Las meta tags son elementos HTML ubicados dentro de la etiqueta <head> de tu página web. A continuación, se muestran algunos ejemplos básicos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Una descripción breve de la página">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Tu Nombre">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la Página</title>
</head>
<body>
    <!-- Contenido de la página -->
</body>
</html>

Tipos comunes de meta tags

1. Meta etiqueta charset:

Esta etiqueta especifica la codificación de caracteres para la página HTML. UTF-8 es la codificación más común y recomendada.

Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO- 8859-1, que se corresponden con la codificación Unicode y el juego de caracteres para el alfabeto Latín.

Ejemplo:

<meta charset="UTF-8">

2. Meta etiqueta name="description":

Proporciona una descripción breve de la página. Los motores de búsqueda suelen mostrar esta descripción en los resultados de búsqueda, por lo que debe ser informativa y atractiva.

Ejemplo:

<meta name="description" content="Una descripción breve de la página">

3. Meta etiqueta name="keywords":

Incluye palabras clave relevantes para el contenido de tu página. Aunque su importancia para el SEO ha disminuido, sigue siendo útil en algunos casos.

Ejemplo:

<meta name="keywords" content="HTML, CSS, JavaScript">

4. Meta etiqueta name="author":

Especifica el autor del documento.

Ejemplo:

<meta name="author" content="Tu Nombre">

5. Meta etiqueta name="viewport":

Esta etiqueta es esencial para la compatibilidad con dispositivos móviles. Controla el diseño de la página en función del tamaño de la pantalla del dispositivo.

Ejemplo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta tags de Open Graph (para redes sociales)

1. Título del Open Graph:

Define el título que se muestra cuando se comparte la página en redes sociales.

<meta property="og:title" content="Título de la Página">

2. Descripción del Open Graph:

Proporciona una descripción que se muestra en las publicaciones en redes sociales.

<meta property="og:description" content="Descripción de la Página para Redes Sociales">

3. URL del Open Graph:

Especifica la URL de la página.

Copy Code

<meta property="og:url" content="https://www.ejemplo.com/pagina">

4. Tipo de Open Graph:

Define el tipo de objeto que representa la página (e.g., website, article).

Copy Code

<meta property="og:type" content="website">

5. Imagen del Open Graph

Especifica la URL de una imagen que se muestra cuando se comparte la página en redes sociales.

Copy Code

<meta property="og:image" content="https://www.ejemplo.com/imagen.jpg">

6. Meta etiqueta de Recuento de Compartir

Permite mostrar el recuento de veces que se ha compartido la página en redes sociales.

<meta property="og:share_count" content="true">

Meta tags de Twitter Cards

Comparte tus artículos en X y personaliza la tarjeta a través de las distintas metaetiquetas

1. Tipo de Twitter Card:

Define el tipo de tarjeta que se muestra (e.g., summary, summary_large_image, app, player).

<meta name="twitter:card" content="summary_large_image">

2. Título de Twitter Card:

<meta name="twitter:title" content="Título de la Página para Twitter">

3. Descripción de Twitter Card:

Proporciona una descripción que se muestra en Twitter.

<meta name="twitter:description" content="Descripción de la Página para Twitter">

4. Imagen de Twitter Card:

Especifica la URL de una imagen para la tarjeta de Twitter.

<meta name="twitter:image" content="https://www.ejemplo.com/imagen-twitter.jpg">

Meta tags para Seguridad y Privacidad

1. Meta etiqueta de Control de Cache

Indica a los navegadores que no deben almacenar en caché la página.

<meta http-equiv="cache-control" content="no-cache">

2. Meta etiqueta de Política de Contenido (CSP)

Indica a los navegadores que no deben almacenar en caché la página.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

3. Meta etiqueta de X-UA-Compatible

Indica a Internet Explorer usar el modo de renderizado más reciente.

Copy Code

<meta http-equiv="X-UA-Compatible" content="IE=edge">

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Meta tag para SEO Avanzado

1. Meta etiqueta de Robots

Instruye a los motores de búsqueda a no indexar la página ni seguir los enlaces.

Copy Code

<meta name="robots" content="noindex, nofollow">

2. Meta etiqueta de Googlebot

Similar a la metaetiqueta de robots, pero específica para el bot de Google.

Copy Code

<meta name="googlebot" content="noindex, nofollow">

3. Meta etiqueta de Verificación de Google

Verifica la propiedad del sitio para las Herramientas para webmasters de Google.

Copy Code

<meta name="google-site-verification" content="codigo_de_verificacion">

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Meta tags para Dispositivos Móviles

1. Meta etiqueta de Viewport

Ajusta el tamaño y la escala de la página para dispositivos móviles.

Copy Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Meta etiqueta de Tema de Color

Define el color del tema del navegador en dispositivos móviles.

Copy Code

<meta name="theme-color" content="#ffffff">

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Meta tags para Aplicaciones Web Progresivas (PWA)

1. Meta etiqueta de Manifest

Vincula un archivo de manifiesto que proporciona información sobre la aplicación web.

Copy Code

<link rel="manifest" href="/manifest.json">

2. Meta etiqueta de Aplicación Web

Especifica el nombre de la aplicación web.

Copy Code

<meta name="application-name" content="Nombre de la Aplicación">

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Importancia de las Meta tags para el SEO

Las meta etiquetas juegan un papel crucial en la optimización de motores de búsqueda (SEO). Aquí hay algunas razones por las cuales son importantes:

Mejorar la Visibilidad en los Motores de Búsqueda: Las descripciones bien escritas pueden aumentar la tasa de clics (CTR) en los resultados de búsqueda.
Controlar la Apariencia en los Resultados de Búsqueda: Las meta tags permiten controlar cómo se muestra tu página en los resultados de búsqueda.
Optimización para Móviles: La meta tags viewport asegura que tu sitio sea amigable para dispositivos móviles, lo cual es crucial para el SEO.

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Mejores Prácticas para el Uso de Meta tags

Sé Conciso y Preciso: Escribe descripciones claras y precisas que reflejen el contenido de tu página.
Evita el Relleno de Palabras Clave: No abuses de la metaetiqueta keywords. Concéntrate en palabras clave relevantes y de alta calidad.
Usa Meta etiquetas Específicas para Cada Página: Cada página de tu sitio debe tener meta etiquetas únicas y específicas.
Mantén el Tamaño Adecuado: La descripción debe tener entre 150 y 160 caracteres para asegurar que no se corte en los resultados de búsqueda.

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9935700656150688 (adsbygoogle = window.adsbygoogle || []).push({});

Función de las Meta tags

Las meta etiquetas tienen varias funciones importantes, entre las que se incluyen:

Mejorar la indexación en motores de búsqueda: Ayudan a los motores de búsqueda a entender de qué trata tu página, lo que puede influir en cómo se clasifica en los resultados de búsqueda.
Proporcionar información a los navegadores: Pueden incluir directivas para los navegadores, como la codificación de caracteres que deben usar o instrucciones sobre cómo ajustar la vista para dispositivos móviles.
Facilitar el intercambio en redes sociales: Algunas metaetiquetas están diseñadas específicamente para mejorar la apariencia de los enlaces compartidos en redes sociales, como las etiquetas de Open Graph de Facebook o las tarjetas de Twitter.
Controlar el comportamiento del motor de búsqueda: Algunas etiquetas permiten a los propietarios del sitio web dar instrucciones específicas a los motores de búsqueda sobre cómo deben manejar ciertas páginas, como si deben indexarlas o seguir los enlaces en ellas.

Artículos que tal vez te puedan interesar