HTML
Elementos y relaciones dentro de head: title, meta description, robots, canonical, viewport, iconos, manifest, resource hints, CSP y datos estructurados.
contiene información sobre el documento y relaciones con recursos externos. Influye en parsing, presentación, descubrimiento, seguridad y carga.
head<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Proyectos | Nicolás Garzón</title>
<meta name="description" content="Proyectos de desarrollo web.">
<link rel="canonical" href="https://example.com/portfolio">
<link rel="stylesheet" href="/styles.css">
</head><title>Servicios de desarrollo web | Nicolás Garzón</title>Debe ser específico, comprensible fuera del sitio y distinguir pestañas similares.
<meta
name="description"
content="Desarrollo aplicaciones web, sistemas de gestión y MVPs."
>Describe el documento y puede usarse en resultados de búsqueda. No garantiza el snippet ni reemplaza contenido visible.
<meta name="viewport" content="width=device-width, initial-scale=1">Configura el viewport móvil. Evita bloquear zoom.
<meta name="robots" content="index, follow">Comunica directivas a crawlers que deciden respetarlas.
<meta name="robots" content="noindex, nofollow">El crawler debe poder acceder a la página para leer noindex. Robots.txt resuelve otro problema.
<link rel="canonical" href="https://example.com/portfolio">Sugiere la URL preferida para contenido duplicado o muy parecido. Debe ser coherente con redirects, sitemap e internal links.
<link rel="stylesheet" href="/styles.css">Puede bloquear renderizado mientras se procesa.
<style>
html { color-scheme: light dark; }
</style>CSS inline puede estar restringido por CSP.
<base href="https://cdn.example.com/app/">Cambia cómo se resuelven URLs relativas y el target predeterminado de links.
Afecta enlaces, forms, imágenes, scripts y fragmentos. Úsalo solo con una necesidad clara.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">El manifest aporta metadata de instalación; no hace offline una aplicación por sí solo.
<link
rel="alternate"
hreflang="en"
href="https://example.com/en/portfolio"
>También puede señalar feeds:
<link
rel="alternate"
type="application/rss+xml"
title="Artículos"
href="/feed.xml"
><link rel="preconnect" href="https://fonts.example.com">
<link rel="preload" href="/hero.webp" as="image">Adelantan trabajo, pero consumen conexiones y ancho de banda. Úsalos con medición.
<meta name="referrer" content="strict-origin-when-cross-origin">Controla cuánta información de URL se envía como referrer.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'"
>CSP por header es más completa y se aplica antes. Meta tiene limitaciones y solo afecta contenido posterior.
<meta http-equiv="refresh" content="5; url=/new-page">Puede perjudicar accesibilidad y control. Prefiere redirects HTTP para navegación permanente.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Nicolás Garzón"
}
</script>Debe reflejar contenido real y visible.
<head>
<h1>Mi portfolio</h1>
</head>El contenido visible normal no pertenece a head; el parser puede moverlo de forma inesperada.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DomiSys | Nicolás Garzón</title>
<meta
name="description"
content="Sistema de gestión para inventario, pedidos y operación."
>
<link rel="canonical" href="https://nicoo.dev/portfolio/domisys">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/styles.css">
<script type="module" src="/app.js"></script>
</head>¿Por qué base puede romper enlaces que parecían correctos?
Porque cambia la URL base utilizada para resolver todos los specifiers relativos del documento.
HTML semántico inicia el bloque de estructura y significado.