Meta tags y SEO básico
Puedes tener la mejor web del mundo, pero si Google no la encuentra, nadie la va a ver. Las meta tags viven en el <head> y le dicen a los buscadores, redes sociales y navegadores qué es tu página, de qué trata y cómo mostrarla. No son visibles para el usuario, pero son críticas para el tráfico.
Meta tags esenciales
Estas son las meta tags que toda página debería tener:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NomadGear — Mochilas y equipo para nómadas digitales</title>
<meta name="description" content="Mochilas técnicas, organizadores de cables y accesorios diseñados para quienes trabajan desde cualquier parte del mundo. Envío gratis en pedidos +50€.">
<link rel="canonical" href="https://nomadgear.es/">
</head>Meta description
Es el texto que aparece debajo del título en los resultados de Google. No afecta directamente al ranking, pero un buen description aumenta el CTR (porcentaje de clics):
- Máximo 155-160 caracteres. Google trunca lo que sobra.
- Incluye la palabra clave principal de forma natural.
- Que sea un mini-anuncio: di qué ofrece la página y por qué el usuario debería hacer clic.
- Cada página debe tener un description único.
Link canonical
Le dice a Google cuál es la URL "oficial" de la página. Evita contenido duplicado cuando la misma página es accesible desde varias URLs:
<!-- Estas 3 URLs muestran el mismo contenido -->
<!-- https://nomadgear.es/mochilas -->
<!-- https://nomadgear.es/mochilas/ -->
<!-- https://nomadgear.es/mochilas?ref=instagram -->
<!-- Todas apuntan al canonical: -->
<link rel="canonical" href="https://nomadgear.es/mochilas">Open Graph: controla cómo se ve en redes sociales
Cuando alguien comparte tu URL en Twitter, LinkedIn, WhatsApp o Telegram, estas meta tags controlan la preview que se muestra:
<head>
<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Telegram) -->
<meta property="og:title" content="NomadGear — Equipo para nómadas digitales">
<meta property="og:description" content="Mochilas técnicas y accesorios para trabajar desde cualquier parte del mundo.">
<meta property="og:image" content="https://nomadgear.es/imagenes/og-cover.jpg">
<meta property="og:url" content="https://nomadgear.es/">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NomadGear — Equipo para nómadas digitales">
<meta name="twitter:description" content="Mochilas técnicas y accesorios para trabajar desde cualquier parte del mundo.">
<meta name="twitter:image" content="https://nomadgear.es/imagenes/og-cover.jpg">
</head>Consejos para la imagen OG:
- Tamaño recomendado: 1200 × 630 píxeles.
- Formato JPEG o PNG (no WebP, algunos servicios no lo soportan para previews).
- Usa una URL absoluta (con
https://). - Que sea descriptiva y atractiva: es lo primero que ve la gente.
Puedes verificar cómo se ve tu preview en las herramientas de debug de cada red social, o simplemente pegar la URL en un chat de WhatsApp o Telegram para verla en tiempo real.
Favicon: el icono de tu web
El favicon es el icono que aparece en la pestaña del navegador, en los favoritos y en la pantalla de inicio del móvil:
<head>
<!-- Favicon básico -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Favicon SVG (moderno, escala perfecto) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple Touch Icon (cuando alguien añade tu web a la home del iPhone) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest (para PWA) -->
<link rel="manifest" href="/manifest.json">
</head>En 2026, lo ideal es usar un SVG como favicon. Escala a cualquier tamaño sin perder calidad y pesa muy poco. El .ico se mantiene como fallback para navegadores antiguos.
Robots: controla qué indexa Google
<!-- Permitir indexación (es el valor por defecto, no necesitas ponerlo) -->
<meta name="robots" content="index, follow">
<!-- No indexar esta página (login, carrito, páginas privadas) -->
<meta name="robots" content="noindex, nofollow">
<!-- Indexar pero no seguir los enlaces de la página -->
<meta name="robots" content="index, nofollow">
<!-- No mostrar snippet en resultados de Google -->
<meta name="robots" content="nosnippet">| Valor | Qué hace |
|---|---|
index |
Permite que Google indexe la página |
noindex |
Prohíbe la indexación |
follow |
Google sigue los enlaces de la página |
nofollow |
Google no sigue los enlaces |
Otras meta tags útiles
<head>
<!-- Color de la barra de navegación en móviles -->
<meta name="theme-color" content="#1a1a2e">
<!-- Autor de la página -->
<meta name="author" content="NomadGear">
<!-- Prevenir que Chrome muestre la traducción automática -->
<meta name="google" content="notranslate">
<!-- Preconectar a dominios externos (mejora rendimiento) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.nomadgear.es">
<!-- DNS prefetch para dominios de terceros -->
<link rel="dns-prefetch" href="https://analytics.nomadgear.es">
</head>Ejemplo completo: head optimizado
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Básicos -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NomadGear — Mochilas y equipo para nómadas digitales</title>
<meta name="description" content="Mochilas técnicas, organizadores de cables y accesorios diseñados para quienes trabajan desde cualquier parte del mundo. Envío gratis en pedidos +50€.">
<!-- SEO -->
<link rel="canonical" href="https://nomadgear.es/">
<meta name="robots" content="index, follow">
<meta name="author" content="NomadGear">
<!-- Open Graph -->
<meta property="og:title" content="NomadGear — Equipo para nómadas digitales">
<meta property="og:description" content="Mochilas técnicas y accesorios para trabajar desde cualquier parte del mundo.">
<meta property="og:image" content="https://nomadgear.es/imagenes/og-cover.jpg">
<meta property="og:url" content="https://nomadgear.es/">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NomadGear — Equipo para nómadas digitales">
<meta name="twitter:description" content="Mochilas técnicas y accesorios para trabajar desde cualquier parte del mundo.">
<meta name="twitter:image" content="https://nomadgear.es/imagenes/og-cover.jpg">
<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Performance -->
<meta name="theme-color" content="#0d1117">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!-- contenido -->
</body>
</html>El orden dentro del
<head>importa para el rendimiento. Poncharsetyviewportprimero, luego las meta tags SEO, después los preconnect y al final los CSS. Así el navegador tiene la información crítica lo antes posible.
Optimiza el head de tu proyecto
Toma cualquiera de los archivos HTML que has creado en lecciones anteriores (portfolio, blog, precios...) y añádele un <head> completo con:
- Meta description de máximo 155 caracteres
- Tags Open Graph (title, description, image, url, type)
- Twitter Card (card, title, description, image)
- Link canonical
- Favicon (puedes usar una ruta ficticia)
theme-color
Verifica que el title tiene menos de 60 caracteres e incluye la palabra clave principal.
lightbulb Pistas
Para la imagen OG, usa una URL de Picsum como placeholder: https://picsum.photos/1200/630. Recuerda usar URLs absolutas (con https://) en los tags OG, no relativas.
