GitHub

Una guía simple para elementos HTML <head>

Contribuidores CC0 Sígueme @joshbuchea en Mastodon

Tabla de Contenidos

Mínimo Recomendado

A continuación se muestran los elementos esenciales para cualquier documento web (sitios web/aplicaciones):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Las 2 etiquetas meta anteriores *deben* aparecer primero en el <head>
  para garantizar consistentemente el renderizado correcto del documento.
  Cualquier otro elemento head debe venir *después* de estas etiquetas.
 -->
<title>Título de la Página</title>

meta charset - define la codificación del sitio web, utf-8 es el estándar

meta name="viewport" - configuración de la ventana gráfica relacionada con la capacidad de respuesta móvil

width=device-width - usar el ancho físico del dispositivo (¡excelente para móviles!)

initial-scale=1 - el zoom inicial, 1 significa sin zoom

⬆ volver arriba

Elementos

Los elementos válidos para <head> incluyen meta, link, title, style, script, noscript, y base.

Estos elementos proporcionan información sobre cómo debe ser percibido y renderizado un documento por las tecnologías web. Por ejemplo: navegadores, motores de búsqueda, bots, etc.

<!--
  Establece la codificación de caracteres para este documento, para que
  todos los caracteres dentro del espacio UTF-8 (como los emojis)
  se rendericen correctamente.
-->
<meta charset="utf-8">
<!-- Establece el título del documento -->
<title>Título de la Página</title>
<!-- Establece la URL base para todas las URLs relativas dentro del documento -->
<base href="https://ejemplo.com/pagina.html">
<!-- Enlace a un archivo CSS externo -->
<link rel="stylesheet" href="estilos.css">
<!-- Usado para agregar CSS dentro del documento -->
<style>
  /* ... */
</style>
<!-- JavaScript y etiquetas No-JavaScript -->
<script src="script.js"></script>
<script>
  // función(es) aquí
</script>
<noscript>
  <!-- Alternativa sin JS -->
</noscript>

⬆ volver arriba

Meta

<!--
  Las siguientes 2 etiquetas meta *deben* aparecer primero en el <head>
  para garantizar consistentemente el renderizado correcto del documento.
  Cualquier otro elemento head debe venir *después* de estas etiquetas.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Permite controlar desde dónde se cargan los recursos.
  Colocar lo más temprano posible en el <head>, ya que la etiqueta
  solo se aplica a los recursos que se declaran después de ella.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Nombre de la aplicación web (solo debe usarse si el sitio web se usa como una aplicación) -->
<meta name="application-name" content="Nombre de la Aplicación">
<!-- Color del tema para Chrome, Firefox OS y Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Descripción corta del documento (límite de 150 caracteres) -->
<!-- Este contenido *puede* ser usado como parte de los resultados del motor de búsqueda. -->
<meta name="description" content="Una descripción de la página">
<!-- Control del comportamiento de rastreo e indexación del motor de búsqueda -->
<meta name="robots" content="index,follow"><!-- Todos los Motores de Búsqueda -->
<meta name="googlebot" content="index,follow"><!-- Específico de Google -->
<!-- Le dice a Google que no muestre el cuadro de búsqueda de enlaces del sitio -->
<meta name="google" content="nositelinkssearchbox">
<!-- Le dice a Google que no proporcione una traducción para este documento -->
<meta name="google" content="notranslate">
<!-- Verificar la propiedad del sitio web -->
<meta name="google-site-verification" content="token_de_verificacion"><!-- Google Search Console -->
<meta name="yandex-verification" content="token_de_verificacion"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="token_de_verificacion"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="token_de_verificacion"><!-- Alexa Console -->
<meta name="p:domain_verify" content="codigo_de_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="codigo_norton"><!-- Norton Safe Web -->
<!-- Identifica el software usado para construir el documento (ej. - WordPress, Dreamweaver) -->
<meta name="generator" content="programa">
<!-- Breve descripción del tema de tu documento -->
<meta name="subject" content="tema de tu documento">
<!-- Proporciona una calificación de edad general basada en el contenido del documento -->
<meta name="rating" content="General">
<!-- Permite controlar cómo se pasa la información del referente -->
<meta name="referrer" content="no-referrer">
<!-- Desactiva la detección y el formateo automático de posibles números de teléfono -->
<meta name="format-detection" content="telephone=no">
<!-- Desactiva completamente la búsqueda previa de DNS configurándola en "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Especifica que el documento aparezca en un marco específico -->
<meta http-equiv="Window-Target" content="_value">
<!-- Etiquetas Geo -->
<meta name="ICBM" content="latitud, longitud">
<meta name="geo.position" content="latitud;longitud">
<meta name="geo.region" content="pais[-estado]"><!-- Código de país (ISO 3166-1): obligatorio, código de estado (ISO 3166-2): opcional; ej. content="US" / content="US-NY" -->
<meta name="geo.placename" content="ciudad/pueblo"><!-- ej. content="Nueva York" -->
<!-- Monetización Web https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$indicador_de_pago.ejemplo">

⬆ volver arriba

Enlaces

<!-- Apunta a una hoja de estilo externa -->
<link rel="stylesheet" href="https://ejemplo.com/estilos.css">
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="https://ejemplo.com/articulo/?pagina=2">
<!-- Enlaza a una versión AMP HTML del documento actual -->
<link rel="amphtml" href="https://ejemplo.com/ruta/a/version-amp.html">
<!-- Enlaces a un archivo JSON que especifica credenciales de "instalación" para las aplicaciones web -->
<link rel="manifest" href="manifest.json">
<!-- Enlaces a información sobre el/los autor(es) del documento -->
<link rel="author" href="humans.txt">
<!-- Se refiere a una declaración de derechos de autor que se aplica al contexto del enlace -->
<link rel="license" href="copyright.html">
<!-- Da una referencia a una ubicación en tu documento que puede estar en otro idioma -->
<link rel="alternate" href="https://es.ejemplo.com/" hreflang="es">
<!-- Proporciona información sobre un autor u otra persona -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:nombre@ejemplo.com">
<link rel="me" href="sms:+15035550125">
<!-- Enlaces a un documento que describe una colección de registros, documentos u otros materiales de interés histórico -->
<link rel="archives" href="https://ejemplo.com/archivos/">
<!-- Enlaces al recurso de nivel superior en una estructura jerárquica -->
<link rel="index" href="https://ejemplo.com/articulo/">
<!-- Proporciona una auto-referencia - útil cuando el documento tiene múltiples referencias posibles -->
<link rel="self" type="application/atom+xml" href="https://ejemplo.com/atom.xml">
<!-- Los documentos primero, último, anterior y siguiente en una serie de documentos, respectivamente -->
<link rel="first" href="https://ejemplo.com/articulo/">
<link rel="last" href="https://ejemplo.com/articulo/?pagina=42">
<link rel="prev" href="https://ejemplo.com/articulo/?pagina=1">
<link rel="next" href="https://ejemplo.com/articulo/?pagina=3">
<!-- Usado cuando se utiliza un servicio de terceros para mantener un blog -->
<link rel="EditURI" href="https://ejemplo.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Forma un comentario automatizado cuando otro blog WordPress enlaza a tu blog o entrada de WordPress -->
<link rel="pingback" href="https://ejemplo.com/xmlrpc.php">
<!-- Notifica a una URL cuando enlazas a ella en tu documento -->
<link rel="webmention" href="https://ejemplo.com/webmention">
<!-- Permite publicar en tu propio dominio usando un cliente Micropub -->
<link rel="micropub" href="https://ejemplo.com/micropub">
<!-- Búsqueda Abierta -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Título de Búsqueda">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/ejemplo" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://ejemplo.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prebúsqueda, precarga, pre-navegación -->
<!-- Más información: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//ejemplo.com/">
<link rel="preconnect" href="https://www.ejemplo.com/">
<link rel="prefetch" href="https://www.ejemplo.com/">
<link rel="prerender" href="https://ejemplo.com/">
<link rel="preload" href="imagen.png" as="image">

⬆ volver arriba

Iconos

<!-- Para IE 10 y anteriores -->
<!-- Colocar favicon.ico en el directorio raíz - no se necesita etiqueta -->
<!-- Icono en la resolución más alta que necesitamos -->
<link rel="icon" sizes="192x192" href="/ruta/al/icono.png">
<!-- Icono de Apple Touch (reutilizar icono.png de 192px) -->
<link rel="apple-touch-icon" href="/ruta/al/apple-touch-icon.png">
<!-- Icono de Pestaña Fijada de Safari -->
<link rel="mask-icon" href="/ruta/al/icono.svg" color="blue">

⬆ volver arriba

Social

Facebook Open Graph

La mayoría del contenido se comparte en Facebook como una URL, por lo que es importante que marques tu sitio web con etiquetas Open Graph para controlar cómo aparece tu contenido en Facebook. Más sobre el Marcado Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://ejemplo.com/pagina.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Título del Contenido">
<meta property="og:image" content="https://ejemplo.com/imagen.jpg">
<meta property="og:image:alt" content="Una descripción de lo que hay en la imagen (no un pie de foto)">
<meta property="og:description" content="Descripción Aquí">
<meta property="og:site_name" content="Nombre del Sitio">
<meta property="og:locale" content="es_ES">
<meta property="article:author" content="">

X Card

Con las Tarjetas de X, puedes adjuntar fotos, videos y experiencias multimedia enriquecidas a los Tweets, ayudando a dirigir tráfico a tu sitio web. Más sobre las Tarjetas de X

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cuenta_del_sitio">
<meta name="twitter:creator" content="@cuenta_individual">
<meta name="twitter:url" content="https://ejemplo.com/pagina.html">
<meta name="twitter:title" content="Título del Contenido">
<meta name="twitter:description" content="Descripción del contenido menor a 200 caracteres">
<meta name="twitter:image" content="https://ejemplo.com/imagen.jpg">
<meta name="twitter:image:alt" content="Una descripción textual de la imagen que transmite la naturaleza esencial de una imagen a usuarios con discapacidad visual. Máximo 420 caracteres.">

Privacidad de X

Si incrustas tweets en tu sitio web, X puede usar información de tu sitio para personalizar contenido y sugerencias para usuarios de X. Más sobre las opciones de privacidad de X.

<!-- no permitir que X use la información de tu sitio para propósitos de personalización -->
<meta name="twitter:dnt" content="on">

Schema.org

"

Read the original on github.com ↗