🤯 HEAD

Un guia simple sobre como usar el elemento <head> en HTML

Tabla de Contenidos

Mínimos recomendados
Elementos
Meta
Enlaces
Iconos
Social
Navegadores / Plataformas
Navegadores (Chinos)
Enlaces de aplicaciones
Otros recursos
Proyectos relacionados
Otros formatos
Traducciones
Colaboradores
Autor de la traducción
Autor
Soporte al proyecto original
Licencia

Mínimos recomendados

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 metaetiquetas anteriores *deben* aparecer primero en el <head> para asegurar consistentemente la representación adecuada del documento.
  Cualquier otro elemento principal debe ir *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 vista relacionada con la capacidad de respuesta móvil

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

initial-scale=1 - el zoom inicial, 1 significa que no hay zoom

⬆ volver arriba

Elementos

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

Estos elementos proporcionan información sobre cómo las tecnologías web deben percibir y representar un documento. p.ej. navegadores, motores de búsqueda, bots, etc.

<!--
  Configure la codificación de caracteres para este documento, de modo que todos los caracteres dentro del espacio UTF-8 (como emoji) se representan correctamente.
-->
<meta charset="utf-8">

<!-- Establece el título del documento. -->
<title>Page Title</title>

<!-- Establece la URL base para todas las URL relativas dentro del documento. -->
<base href="https://ejemplo.com/pagina.html">

<!-- Enlace a un archivo CSS externo -->
<link rel="stylesheet" href="estilos.css">

<!-- Se utiliza para agregar CSS en el documento -->
<style>
  /* ... */
</style>

<!-- Etiquetas de JavaScript y sin JavaScript -->
<script src="script.js"></script>
<script>
  // la(s) función(es) van aquí
</script>
<noscript>
  <!-- No hay alternativa JS -->
</noscript>

⬆ 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">

<!-- Enlaces a una versión AMP HTML del documento actual -->
<link rel="amphtml" href="https://ejemplo.com/ruta/a/la/version-amp.html">

<!-- Enlaces a un archivo JSON que especifica las 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="humanos.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 su documento que puede estar en otro idioma -->
<link rel="alternate" href="https://en.ejemplo.com/" hreflang="en">

<!-- 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:+34000000000">

<!-- 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://ejemoplo.com/archivos/">

<!-- Enlaces a recursos de nivel superior en una estructura jerárquica -->
<link rel="index" href="https://ejemplo.com/articulo/">

<!-- Proporciona una referencia propia: útil cuando el documento tiene varias referencias posibles. -->
<link rel="self" type="application/atom+xml" href="https://ejemplo.com/atom.xml">

<!-- Los documentos primero, último, anterior y siguiente de 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">

<!-- Se utiliza 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 automático cuando otro blog de WordPress se vincula a su blog o publicación de WordPress -->
<link rel="pingback" href="https://ejemplo.com/xmlrpc.php">

<!-- Notifica una URL cuando se vincula a ella en su documento -->
<link rel="webmention" href="https://ejemplo.com/webmention">

<!-- Habilita la publicación en su propio dominio usando un cliente Micropub -->
<link rel="micropub" href="https://ejemplo.com/micropub">

<!-- Open Search -->
<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/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://ejemplo.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Precarga, precarga, prenavegació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">

📖 Enlaces relacionados

⬆ volver arriba

Iconos

<!-- Para IE 10 y menos -->
<!-- Coloque favicon.ico en el directorio raíz; no se necesita etiqueta -->

<!-- Icono en la máxima resolución para lo que lo necesitamos -->
<link rel="icon" sizes="192x192" href="/ruta/al/icono.png">

<!-- Ícono Apple Touch (reutilizar 192px icono.png) -->
<link rel="apple-touch-icon" href="/ruta/al/icono-apple-touch.png">

<!-- Icono de pestaña anclada de Safari -->
<link rel="mask-icon" href="/ruta/al/icono.svg" color="blue">

📖 Todo sobre Favicons (e íconos táctiles)
📖 Creación de iconos de pestañas ancladas
📖 Hoja de referencia de Favicon
📖 Iconos y colores del navegador

⬆ volver arriba

Social

Facebook Open Graph

La mayoría del contenido se comparte en Facebook como una URL, por lo que es importante que marque su sitio web con etiquetas Open Graph para controlar cómo aparece su contenido en Facebook.. Más acerca del Facebook Open Graph Markup

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://ejemplo.com/page.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 está 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">
<meta property="article:author" content="">

📖 Protocolo Open Graph
🛠 Pon a prueba tu página con el Facebook Sharing Debugger

Twitter Card

Con Twitter Cards, puede adjuntar fotos, videos y experiencias multimedia enriquecidas a los Tweets, lo que ayuda a atraer tráfico a su sitio web. Más acerca de Twitter Cards

<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 de menos de 200 caracteres">
<meta name="twitter:image" content="https://ejemplo.com/imagen.jpg">
<meta name="twitter:image:alt" content="Una descripción de texto de la imagen que transmite la naturaleza esencial de una imagen a los usuarios con discapacidad visual. Máximo 420 caracteres.">

📖 Empezando con tarjetas — Twitter Developers
🛠 Pon a prueba tu página con el Twitter Card Validator

Twitter Privacy

Si inserta tweets en su sitio web, Twitter puede usar la información de su sitio para adaptar el contenido y las sugerencias a los usuarios de Twitter. Más sobre las opciones de Twitter privacy.

<!-- prohibir que Twitter use la información de su sitio para fines de personalización -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Título del contenido">
      <meta itemprop="description" content="Descripción del contenido de menos de 200 caracteres">
      <meta itemprop="image" content="https://ejemplo.com/imagen.jpg">

Nota: Estas etiquetas meta requieren que se agreguen los atributos itemscope y itemtype a la etiqueta <html>.

📖 Empezando con - schema.org
🛠 Pon a prueba tu página con el Rich Results Test

Pinterest te permite evitar que la gente guarde cosas de tu sitio web, según su centro de ayuda. La descripción es opcional.

<meta name="pinterest" content="nopin" description="¡Lo siento, no puedes guardar desde mi sitio web!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="https://ejemplo.com/articulo.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="https://ejemplo.com/servicios/oembed?url=http%3A%2F%2Fejemplo.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://ejemplo.com/servicios/oembed?url=http%3A%2F%2Fejemplo.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

📖 Formato oEmbed

QQ/Wechat

Los usuarios comparten páginas web para q wechat tenga un mensaje formateado

<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="share content">

📖 Documentos de formato de código

⬆ volver arriba

Navegadores / Plataformas

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Deshabilite la detección automática y el formateo de posibles números de teléfono -->
<meta name="format-detection" content="telephone=no">

<!-- Launch Icon (180x180px o más grande) -->
<link rel="apple-touch-icon" href="/ruta/al/icono-apple-touch.png">

<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/ruta/a/launch.png">

<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="Título de la aplicación">

<!-- Habilitar el modo independiente (pantalla completa) -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Apariencia de la barra de estado (no tiene efecto a menos que el modo independiente esté habilitado) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-de-ejemplo.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-de-ejemplo.com">

📖 Configuración de aplicaciones web

Google Android

<meta name="theme-color" content="#E64545">

<!-- Añadir a pantalla de inicio -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Más información: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-de-ejemplo.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Deshabilitar solicitud de traducción -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Forzar a IE 8/9/10 a usar su último motor de renderizado -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Deshabilite la detección automática y el formateo de posibles números de teléfono mediante la extensión del navegador de la barra de herramientas de Skype -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Windows Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml">

Marcado xml mínimo requerido para browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="pequeño.png"/>
        <square150x150logo src="mediano.png"/>
        <wide310x150logo src="ancho.png"/>
        <square310x310logo src="largo.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Referencia del esquema de configuración del navegador

⬆ volver arriba

Navegadores (Chinos)

360 Browser

<!-- Seleccione el orden del motor de renderizado -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Bloquea la pantalla en la orientación especificada -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Mostrar este documento en pantalla completa -->
<meta name="x5-fullscreen" content="true">

<!-- El documento se mostrará en "modo de aplicación" (pantalla completa, etc.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Bloquea la pantalla en la orientación especificada -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Mostrar este documento en pantalla completa -->
<meta name="full-screen" content="yes">

<!-- El navegador UC mostrará imágenes incluso si está en "modo de texto" -->
<meta name="imagemode" content="force">

<!-- El documento se mostrará en "modo de aplicación" (pantalla completa, gesto de prohibición, etc.) -->
<meta name="browsermode" content="application">

<!-- Se deshabilitó el "modo nocturno" del navegador UC para este documento -->
<meta name="nightmode" content="disable">

<!-- Simplificar el documento para reducir la transferencia de datos -->
<meta name="layoutmode" content="fitscreen">

<!-- Deshabilite la característica del navegador UC de "escalar la fuente cuando hay muchas palabras en este documento" -->
<meta name="wap-font-scale" content="no">

📖 Documentación de UC Browser

⬆ volver arriba

Enlaces de aplicaciones

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="Enlaces de aplicaciones">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="Enlaces de aplicaciones">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">