Guía de Etiquetas en <head> en HTML
La sección <head> de un documento HTML contiene metadatos y enlaces a recursos externos
que son esenciales para el correcto funcionamiento y apariencia de la página. A continuación,
se describen las etiquetas más importantes:
1. Metadatos (<meta>)
Estas etiquetas proporcionan información sobre la página web.
Definir la codificación del documento
<meta charset="UTF-8">
Permite el uso de caracteres especiales como tildes y ñ.
Control de compatibilidad con Internet Explorer
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Asegura la mejor compatibilidad con versiones antiguas de IE.
Escalado en dispositivos móviles
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Optimiza el diseño para dispositivos móviles.
Descripción de la página
<meta name="description" content="Esta es una página de ejemplo con HTML y CSS.">
Aparece en los resultados de búsqueda de Google.
Palabras clave para motores de búsqueda (SEO)
<meta name="keywords" content="HTML, CSS, tutorial, etiquetas">
Actualmente no es muy relevante para el SEO moderno.
Autor de la página
<meta name="author" content="Tu Nombre">
Define el autor del documento.
Evitar el indexado de la página por buscadores
<meta name="robots" content="noindex, nofollow">
Útil para páginas privadas o en desarrollo.
2. Título de la Página (<title>)
<title>Mi Página Web</title>
El título aparece en la pestaña del navegador y en los resultados de búsqueda.
3. Vinculación a Hojas de Estilo (<link>)
Enlace a CSS externo
<link rel="stylesheet" href="styles.css">
Aplica estilos a la página web.
Favicon (ícono de la pestaña)
<link rel="icon" type="image/png" href="favicon.png">
Aparece en la pestaña del navegador y en marcadores.
4. Carga de Scripts antes del <body>
<script src="script.js" defer></script>
Carga scripts de JavaScript sin bloquear la carga del HTML.
5. Otros Enlaces Útiles
Enlace a fuentes de Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
Carga tipografías externas.
Enlace a fuentes de iconos (ej. FontAwesome)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.0.0/css/all.min.css">
Permite el uso de iconos en la página.
6. Etiquetas para Redes Sociales y SEO Avanzado
Facebook Open Graph
<meta property="og:title" content="Mi Página Web">
<meta property="og:description" content="Una página increíble">
<meta property="og:image" content="imagen.jpg">
<meta property="og:url" content="https://www.miweb.com">
Optimiza la apariencia cuando se comparte en Facebook.
Twitter Cards
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Mi Página Web">
<meta name="twitter:description" content="Una página increíble">
<meta name="twitter:image" content="imagen.jpg">
Optimiza la vista en Twitter al compartir enlaces.
7. Manifest para Aplicaciones Web Progresivas (PWA)
<link rel="manifest" href="manifest.json">
Define configuraciones para una app web progresiva.
Ejemplo Completo de un <head>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ejemplo de un documento HTML con etiquetas en
<head>">
<meta name="author" content="Hugo Gallardo">
<meta property="og:title" content="Ejemplo de HTML">
<meta property="og:description" content="Una guía completa sobre el <head>">
<title>Guía del head en HTML</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="favicon.png">
<script src="script.js" defer></script>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
</body>
</html>
Conclusión
La sección <head> es crucial para la configuración de la página web. Define el título,
metadatos, enlaces a recursos externos y optimiza la experiencia del usuario y el SEO.
0
