Las etiquetas meta son la columna vertebral invisible de cada página web. Indican a los motores de búsqueda de qué trata tu página, controlan cómo aparece tu contenido en redes sociales e influyen en el comportamiento del navegador. Esta guía completa de etiquetas meta HTML cubre todas las etiquetas que tu sitio web necesita en 2026.
Genera etiquetas meta perfectas con nuestro generador gratuito →
Etiquetas Meta Esenciales para Cada Página
Estas son las etiquetas meta mínimas que toda página HTML debe incluir.
charset
The charset meta tag declares the character encoding for the HTML document. UTF-8 is the universal standard that supports all languages and special characters.
<meta charset="UTF-8">Always place this tag as the first element inside <head>. If the browser encounters content before knowing the encoding, it may re-parse the entire page, causing a flash of garbled text.
viewport
The viewport meta tag is essential for responsive design. It tells mobile browsers how to scale and size the page.
<meta name="viewport" content="width=device-width, initial-scale=1">Without this tag, mobile browsers render the page at a desktop width (typically 980px) and then shrink it to fit the screen. This makes text unreadable and buttons untappable. Google uses mobile-first indexing, so a missing viewport tag directly hurts your search rankings.
title
While technically not a meta tag, the <title> element is the single most important tag for SEO. It appears in browser tabs, search results, and social shares.
<title>Your Page Title — Brand Name</title>Best practices for title tags:
- Keep it under 60 characters to avoid truncation in search results
- Put the primary keyword near the beginning
- Make each page title unique across your entire site
- Use a separator (—, |, or :) between the page title and brand name
description
The meta description provides a summary of the page content. Search engines display it below the title in search results.
<meta name="description" content="A concise, compelling summary of your page content. Include your target keyword naturally. Keep between 120-160 characters.">A well-written meta description can significantly improve your click-through rate (CTR) from search results, even though Google has confirmed it is not a direct ranking factor. Think of it as your page's advertisement in the search results.
Etiquetas Meta SEO
Las etiquetas meta SEO ayudan a Google, Bing y otros motores de búsqueda a comprender e indexar correctamente tu contenido.
robots
The robots meta tag controls how search engines crawl and index your page. It is one of the most powerful — and most dangerous — meta tags if misconfigured.
<!-- Allow indexing and following (default behavior) -->
<meta name="robots" content="index, follow">
<!-- Block indexing but allow link following -->
<meta name="robots" content="noindex, follow">
<!-- Block everything -->
<meta name="robots" content="noindex, nofollow">
<!-- Prevent caching of the page -->
<meta name="robots" content="noarchive">
<!-- Prevent snippet in search results -->
<meta name="robots" content="nosnippet">
<!-- Specific to Google -->
<meta name="googlebot" content="index, follow">Common robots directives include: index / noindex (whether to include in search results), follow / nofollow (whether to follow links on the page), noarchive (prevent cached copies), nosnippet (prevent text snippets), and max-snippet:[number] (limit snippet length).
canonical
The canonical link element tells search engines which URL is the "master" version of a page. This is critical for avoiding duplicate content penalties.
<link rel="canonical" href="https://example.com/blog/meta-tags-guide">Use canonical tags when: the same content is accessible via multiple URLs (with/without trailing slash, with/without www, HTTP vs HTTPS), you have paginated content, or URL parameters create duplicate pages (e.g., ?sort=price).
hreflang
If your site serves content in multiple languages or targets different regions, hreflang tags tell search engines which version to show to which audience.
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="de" href="https://example.com/de/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">The x-default value specifies the fallback URL for users whose language is not explicitly listed. Always include it as a best practice.
Etiquetas Meta Open Graph
Las etiquetas Open Graph controlan cómo aparece tu contenido al compartirlo en Facebook, LinkedIn, Discord y Slack.
<!-- Required Open Graph Tags -->
<meta property="og:title" content="Meta Tags Every Website Needs">
<meta property="og:description" content="A complete guide to HTML meta tags for SEO, social sharing, security, and performance.">
<meta property="og:image" content="https://example.com/images/meta-tags-guide.jpg">
<meta property="og:url" content="https://example.com/blog/meta-tags-guide">
<meta property="og:type" content="article">
<!-- Recommended Open Graph Tags -->
<meta property="og:site_name" content="DevToolBox">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Meta tags guide cover image">Key points about Open Graph tags:
og:imageshould be at least 1200 x 630 pixels for high-resolution displays- Use an absolute URL for
og:image, not a relative path og:typeshould bewebsitefor homepages andarticlefor blog postsog:urlshould match your canonical URL- Facebook caches Open Graph data aggressively — use the Sharing Debugger to refresh it after changes
Etiquetas Meta Twitter Card
Twitter (X) usa su propio conjunto de etiquetas meta para vistas previas enriquecidas.
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags Every Website Needs">
<meta name="twitter:description" content="A complete guide to HTML meta tags for SEO, social sharing, and performance.">
<meta name="twitter:image" content="https://example.com/images/meta-tags-guide.jpg">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:creator" content="@authorhandle">Twitter Card types:
summary— Small square image with title and description (default)summary_large_image— Large rectangular image above the title (recommended for articles)player— For video or audio content with an inline playerapp— For mobile app deep links with install buttons
For most websites, summary_large_image is the best choice as it provides the most visual impact in the Twitter timeline. The recommended image size is 1200 x 600 pixels with a 2:1 aspect ratio.
Etiquetas Meta de Seguridad
Las etiquetas meta de seguridad ayudan a proteger tu sitio y usuarios contra vulnerabilidades web comunes.
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'">
<!-- Prevent clickjacking (X-Frame-Options equivalent) -->
<meta http-equiv="X-Frame-Options" content="DENY">
<!-- Control referrer information -->
<meta name="referrer" content="strict-origin-when-cross-origin">
<!-- Prevent MIME type sniffing -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<!-- Prevent DNS prefetching (privacy) -->
<meta http-equiv="x-dns-prefetch-control" content="off">Important notes about security meta tags:
- Content-Security-Policy (CSP) — Prevents XSS attacks by restricting where resources can be loaded from. While HTTP headers are preferred, the meta tag version works for static sites without server control.
- referrer — The
strict-origin-when-cross-originvalue is the best balance between privacy and functionality. It sends the full URL for same-origin requests but only the origin for cross-origin requests. - X-Frame-Options — Prevents your page from being embedded in iframes on other sites (clickjacking protection). Use
DENYto block all framing orSAMEORIGINto allow same-domain framing only.
Etiquetas Meta de Rendimiento
Las etiquetas meta de rendimiento ayudan a los navegadores a cargar tu página más rápido proporcionando indicaciones tempranas sobre los recursos necesarios.
<!-- DNS Prefetch: resolve DNS for external domains early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<!-- Preconnect: establish full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<!-- Preload: fetch critical resources immediately -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/images/hero.webp" as="image">
<!-- Prefetch: fetch resources for likely next navigation -->
<link rel="prefetch" href="/next-page.html">
<!-- Module preload for ES modules -->
<link rel="modulepreload" href="/js/app.js">Performance hint priority guide:
- dns-prefetch — Cheapest hint. Use for any third-party domain you will reference. Saves 20–120ms per domain.
- preconnect — More expensive but faster. Use for critical third-party resources (fonts, CDN). Limit to 2–4 domains to avoid connection contention.
- preload — Forces immediate download. Use sparingly for above-the-fold critical resources (hero image, critical CSS, web fonts). Overuse can actually hurt performance by competing for bandwidth.
- prefetch — Low-priority download during idle time. Use for resources needed on the next likely page navigation.
Etiquetas Meta Móvil y Aplicaciones
Estas etiquetas controlan cómo se comporta tu sitio en dispositivos móviles.
<!-- Theme color for browser chrome (address bar, task switcher) -->
<meta name="theme-color" content="#1a1a2e">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
<!-- Apple iOS Web App -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyApp">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Disable auto-detection (prevent phone numbers from becoming links) -->
<meta name="format-detection" content="telephone=no">The theme-color meta tag is particularly impactful on mobile. It colors the browser's address bar and UI elements to match your brand. With the media attribute, you can set different colors for light and dark mode, creating a polished native-app feel.
Etiquetas Meta para Datos Estructurados
Estas etiquetas meta proporcionan contexto adicional sobre tu contenido para datos estructurados y atribución de autoría.
<!-- Author information -->
<meta name="author" content="John Doe">
<link rel="author" href="https://example.com/about/john-doe">
<!-- Article metadata (for blog posts) -->
<meta property="article:published_time" content="2026-02-10T08:00:00Z">
<meta property="article:modified_time" content="2026-02-10T12:00:00Z">
<meta property="article:author" content="https://example.com/about/john-doe">
<meta property="article:section" content="Web Development">
<meta property="article:tag" content="meta tags">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="HTML">
<!-- Generator (if using a CMS or framework) -->
<meta name="generator" content="Next.js 16">The article:published_time and article:modified_time tags use the ISO 8601 date format. Search engines use these dates to display "Published on" and "Updated on" labels in search results, which can improve click-through rates for fresh content.
Errores Comunes a Evitar
- Descripciones meta duplicadas — Cada página debe tener una descripción única.
- Etiqueta viewport faltante — Sin ella, tu sitio no será compatible con móviles.
- Usar meta keywords — Google las ignora desde 2009.
- Título demasiado largo — Mantén los títulos bajo 60 caracteres.
- Descripción demasiado larga — Mantén entre 120–160 caracteres.
- Imagen Open Graph faltante — Los enlaces compartidos sin imagen obtienen menos interacción.
- Dimensiones de imagen incorrectas — Usa 1200×630 px para Open Graph.
- Olvidar URLs canónicas — Sin ellas, el contenido duplicado divide tu autoridad SEO.
- Bloquear indexación accidentalmente — Verifica tu etiqueta
robots. - No probar vistas previas sociales — Siempre prueba con el depurador de Facebook y el validador de Twitter.
Plantilla Completa de Etiquetas Meta
Aquí tienes una plantilla HTML head lista para producción. Cópiala y reemplaza los valores:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Brand Name</title>
<meta name="description" content="A compelling description of this page (120-160 characters).">
<!-- SEO -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/current-page">
<link rel="alternate" hreflang="en" href="https://example.com/en/current-page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/current-page">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/current-page">
<!-- Open Graph -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="A compelling description of this page.">
<meta property="og:image" content="https://example.com/images/page-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">
<meta property="og:url" content="https://example.com/current-page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="A compelling description of this page.">
<meta name="twitter:image" content="https://example.com/images/page-image.jpg">
<meta name="twitter:site" content="@brandhandle">
<!-- Security -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta name="referrer" content="strict-origin-when-cross-origin">
<!-- Performance -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Mobile & App -->
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<!-- Structured Data -->
<meta name="author" content="Author Name">
<meta property="article:published_time" content="2026-01-15T08:00:00Z">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
</head>
<body>
<!-- Your content here -->
</body>
</html>Preguntas Frecuentes
¿Cuál es la longitud óptima de la meta description?
La longitud óptima es entre 120 y 160 caracteres. Google muestra hasta 155–160 caracteres en escritorio y alrededor de 120 en móvil.
¿Las meta keywords todavía importan para el SEO?
No, Google confirmó en 2009 que no usa las meta keywords como factor de posicionamiento. Enfócate en contenido de calidad.
¿Cuál es la diferencia entre Open Graph y Twitter Cards?
Open Graph fue creado por Facebook y es usado por la mayoría de plataformas sociales. Twitter Cards es el sistema propietario de Twitter. Twitter usa las etiquetas OG como respaldo si no hay etiquetas Twitter específicas.
¿Cómo pruebo si mis etiquetas meta funcionan correctamente?
Usa el Depurador de Compartir de Facebook, el Validador de Twitter Card y la Prueba de Resultados Enriquecidos de Google.
¿Debo usar las mismas etiquetas meta en cada página?
No. Las etiquetas estructurales como charset y viewport deben ser consistentes, pero las de contenido como title, description y og:image deben ser únicas por página.