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.
