Scripts y Meta — BryanDocs

<script> Scripts

Incrusta o referencia JavaScript. Sin atributos, bloquea el parser HTML. defer descarga en paralelo y ejecuta en orden tras parsear el documento. async ejecuta en cuanto descarga, sin orden garantizado. type="module" activa módulos ES6 e implica defer. Regla general: pon los scripts al final del <body> o usa defer.

<!-- Inline -->
<script>
  console.log('Hola');
</script>

<!-- Externo con defer -->
<script src="app.js" defer></script>

<!-- Async (sin orden) -->
<script src="plugin.js" async></script>

<noscript> Scripts

Define contenido alternativo que se muestra cuando JavaScript está deshabilitado o no soportado. En el <head> solo puede contener <link>, <style> y <meta>. En el <body> puede incluir cualquier HTML. Es útil para mensajes de aviso, redirecciones de emergencia (<meta http-equiv="refresh"> dentro) y garantizar que el contenido crítico sea accesible en entornos sin JavaScript.

Aunque pocos usuarios desactivan JavaScript, algunos bots y crawlers no lo ejecutan. Un <noscript> con contenido alternativo mejora la indexación en motores de búsqueda menos avanzados y sirve como red de seguridad para progressive enhancement.

<noscript>
  <p>Por favor, activa JavaScript
  para usar este sitio.</p>
</noscript>

loading="lazy" Performance

Atributo para <img> e <iframe> que aplaza la carga hasta que el elemento está a punto de entrar al viewport (lazy loading nativo, sin JavaScript). Valores: lazy (carga diferida), eager (carga inmediata, por defecto), auto (decisión del navegador). Reduce significativamente el tiempo de carga inicial y el consumo de datos, especialmente en páginas con muchas imágenes.

Valores lazyenumCarga diferida: el recurso se descarga cuando entra en el viewport eagerenumCarga inmediata sin importar la posición (comportamiento por defecto)

Nunca uses loading="lazy" en imágenes que están en el viewport al cargar la página (above-the-fold). Retrasaría el LCP (Largest Contentful Paint) y perjudicaría los Core Web Vitals. Úsalo solo para imágenes por debajo del fold.

<img src="foto.jpg"
     alt="Foto"
     loading="lazy"
     width="800" height="600">

<iframe src="mapa.html"
        loading="lazy">
</iframe>

srcset / sizes Responsivo

srcset lista versiones de la imagen con su ancho (descriptor w) o densidad de píxeles (2x). sizes le dice al navegador cuánto espacio ocupará la imagen en diferentes viewports, para que pueda elegir la fuente óptima antes de descargar CSS. Siempre incluye un src como fallback para navegadores sin soporte.

<img
  srcset="img-320.jpg 320w,
          img-768.jpg 768w,
          img-1280.jpg 1280w"
  sizes="(max-width:600px) 320px,
         (max-width:1024px) 768px,
         1280px"
  src="img-1280.jpg"
  alt="Imagen responsiva">

Open Graph / Twitter Cards Social

Meta tags que controlan la presentación en redes sociales y aplicaciones de mensajería. Open Graph (Facebook, LinkedIn, WhatsApp): usa prefijo property="og:…". Twitter/X Cards: usa prefijo name="twitter:…". La imagen OG ideal: 1200×630 px, menos de 1 MB. Verifica tu resultado en las herramientas de depuración de cada red.

<!-- Open Graph -->
<meta property="og:title"
      content="Mi Página">
<meta property="og:image"
      content="thumb.jpg">
<meta property="og:description"
      content="Descripción">

<!-- Twitter Card -->
<meta name="twitter:card"
      content="summary_large_image">

Previsualizador Open Graph — Playground Interactivo

Edita los campos y observa en tiempo real cómo se vería tu página al compartirla en redes sociales. El contador indica si el texto supera los límites recomendados.

og:title og:description og:site_name

Vista previa (tarjeta social):

og:image — 1200×630 px

charset + viewport Esencial

Los dos <meta> más importantes de cualquier página. charset="UTF-8" debe ser el primero en el <head> (antes del <title>) para que el navegador codifique correctamente el título y todo el documento, incluyendo caracteres especiales. viewport controla el comportamiento en pantallas móviles: sin él, los móviles simulan una pantalla de escritorio y hacen zoom out, rompiendo cualquier diseño responsive.

No añadas user-scalable=no ni maximum-scale=1 al viewport. Deshabilitar el zoom del usuario viola las pautas de accesibilidad (WCAG 1.4.4) y perjudica a personas con baja visión que necesitan ampliar el contenido.

<!-- Siempre los primeros en head -->
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width,
           initial-scale=1.0">

Resource Hints — preload · prefetch · preconnect Performance

Instrucciones al navegador para optimizar la carga de recursos críticos o anticipar conexiones futuras.

<!-- preload: recurso crítico para el render actual -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- prefetch: recurso probable en la próxima navegación -->
<link rel="prefetch" href="/pagina-siguiente">

<!-- preconnect: abre conexión a un origen externo -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- dns-prefetch: solo resuelve DNS (fallback) -->
<link rel="dns-prefetch" href="//cdn.ejemplo.com">

<!-- modulepreload: módulo JS con sus dependencias -->
<link rel="modulepreload" href="/js/app.js">

JSON-LD · Datos estructurados SEO

Describe el contenido de tu página en un formato legible por máquinas. Google lo usa para Rich Snippets en los resultados de búsqueda.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Guía de HTML y CSS",
  "author": {
    "@type": "Person",
    "name": "Tu Nombre"
  },
  "datePublished": "2024-01-15",
  "image": "https://ejemplo.com/thumb.jpg"
}
</script>
<!-- Otros tipos: Product, Recipe, FAQ,
     HowTo, BreadcrumbList, Event... -->

Web App Manifest PWA

Archivo JSON que hace tu sitio instalable como app nativa. Controla nombre, iconos, colores y comportamiento al lanzarse.

<!-- En el <head> -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0f172a">

// manifest.json
{
  "name": "BryanDocs",
  "short_name": "Explorer",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f4f6fb",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192" },
    { "src": "/icon-512.png", "sizes": "512x512" }
  ]
}

defer · async · type="module" Scripts

Controlan cuándo se descarga y ejecuta el JavaScript respecto al parsing del HTML. La elección incorrecta puede bloquear el render.

normal

async

defer

■parse HTML ■descarga ■ejecuta

type="module"  → siempre defer + scope propio
defer          → ejecuta en orden tras parsear
async          → ejecuta al terminar descarga (sin orden)
(sin nada)     → bloquea el parser

Scripts, Estilos Avanzados y Meta