Contenido del Artículo
- ¿Qué es la sección <head>?
- Meta Tags Esenciales
- SEO Básico con Meta Tags
- Open Graph para Redes Sociales
- Twitter Cards
- Favicons y Recursos Asociados
- Otros Recursos en Head
- Buenas Prácticas y Errores Comunes
- Ejercicio Práctico
- Herramientas de Validación
- Aplicación en Proyectos Educativos
- Recursos para Profundizar
¿Qué es la sección <head>?
La etiqueta <head> contiene metainformación sobre el documento HTML que no se muestra directamente en la página. Es el cerebro oculto que comunica a navegadores y buscadores cómo interpretar y presentar tu contenido.
Metadatos
Información sobre el documento (autor, descripción)
Recursos externos
Enlaces a hojas de estilo, fuentes y scripts
Configuración SEO
Etiquetas para motores de búsqueda
El contenido dentro de
es crítico para SEO y rendimiento, pero invisible para usuarios finales.Meta Tags Esenciales
Estas etiquetas <meta> son fundamentales para cualquier página web:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción precisa de tu página">
<meta name="author" content="Nombre del autor">
</head>| Meta Tag | Propósito | Ejemplo |
|---|---|---|
| charset | Codificación caracteres | <meta charset="UTF-8"> |
| viewport | Responsive design | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| description | Resumen para resultados búsqueda | <meta name="description" content="Aprende HTML..."> |
| author | Atribución de autoría | <meta name="author" content="Ana Pérez"> |
| robots | Control indexación | <meta name="robots" content="index, follow"> |
SEO Básico con Meta Tags
Optimiza tu visibilidad en buscadores con estos elementos:
Title Tag
<title>El título más importante para SEO (50-60 caracteres)</title>
Meta Description
Resumen convincente (150-160 caracteres) que aparece en resultados
Keywords (obsoleto)
Ya no se usa - los buscadores lo ignoran
Canonical URL
<link rel="canonical" href="https://tudominio.com/pagina-original">
El title tag es el factor SEO más importante en la sección head - incluye palabras clave principales al inicio.
Open Graph para Redes Sociales
Meta tags especiales que controlan cómo se comparte tu contenido en redes sociales:
<meta property="og:title" content="Título para redes sociales">
<meta property="og:description" content="Descripción para compartir">
<meta property="og:image" content="https://ejemplo.com/imagen-social.jpg">
<meta property="og:url" content="https://ejemplo.com/pagina">
<meta property="og:type" content="website">
| Propiedad | Función |
|---|---|
| og:title | Título para la tarjeta social |
| og:description | Descripción bajo el título |
| og:image | URL de imagen destacada (1200x630px) |
| og:url | URL canónica del contenido |
| og:type | Tipo de contenido (article, website, etc.) |
Twitter Cards
Meta tags específicos para optimizar compartir en Twitter:
Tipos de tarjetas
summary (pequeña), summary_large_image (imagen grande)
Menciones
@usuario para atribución de autor
Hashtags
Incluir hashtags relevantes en el título/descripción
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tuusuario">
<meta name="twitter:title" content="Título para Twitter">
<meta name="twitter:description" content="Descripción para Twitter">
<meta name="twitter:image" content="https://ejemplo.com/imagen-twitter.jpg">Favicons y Recursos Asociados
Íconos que aparecen en pestañas del navegador, marcadores y pantallas de inicio:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
| Rel | Tamaños recomendados | Uso |
|---|---|---|
| icon | 32x32, 16x16 | Navegadores clásicos |
| apple-touch-icon | 180x180 | Dispositivos Apple |
| manifest | Varios tamaños | Aplicaciones web progresivas |
Otros Recursos en Head
Elementos clave para conectar recursos externos:
Hojas de estilo
<link rel="stylesheet" href="ruta.css">
Scripts
<script src="app.js" defer></script> (defer para no bloquear render)
Fuentes externas
Preconexión y precarga para mejor rendimiento
<link rel="stylesheet" href="estilos.css">
<script src="scripts.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="fuente.woff2" as="font" crossorigin>Buenas Prácticas y Errores Comunes
Consejos para implementación correcta:
Siempre incluir
charset y viewport en primeros elementos
Evitar
Keywords meta tag (obsoleto)
Descripciones únicas
No duplicar meta descriptions en diferentes páginas
Imágenes sociales
Usar formatos JPG/PNG y tamaños adecuados
Google puede reescribir meta titles y descriptions si considera que no son relevantes al contenido real.
Ejercicio Práctico
Crea una plantilla head completa con:
<!-- Requerimientos -->
1. Codificación UTF-8
2. Viewport responsive
3. Título SEO optimizado
4. Meta description persuasiva
5. Open Graph básico
6. Twitter Card
7. Favicon moderno
8. Preconexión a Google Fonts
Herramientas de Validación
Verifica tu implementación con estas herramientas:
Rich Results Test
Prueba cómo ve Google tu página
Twitter Card Validator
Previsualiza tus tarjetas Twitter
W3C Validator
Valida sintaxis HTML completa
SEO META in 1 CLICK
Extensión Chrome para inspeccionar meta tags
Realiza pruebas periódicas con estas herramientas para detectar problemas de indexación.
Aplicación en Proyectos Educativos
Implementaciones clave para entornos educativos:
Artículos académicos
Meta tags de autor y fecha de publicación
Cursos online
Open Graph específico para lecciones
Portafolios estudiantiles
Meta descriptions atractivas para proyectos
Instituciones educativas
Schema.org markup para organización educativa
Usa schema.org/EducationalOrganization para mejorar cómo se muestran instituciones en resultados de búsqueda.
Recursos para Profundizar
Lleva tus metadatos al siguiente nivel:
Schema.org
Marcado estructurado para rich snippets
Bing Webmaster Tools
Directrices específicas para Bing
hreflang
Para sitios multilingües
Performance
Preload, prefetch y resource hints
El marcado estructurado puede aumentar hasta un 30% el CTR en resultados de búsqueda (estudio Moz 2023).
