Acomodame la Cabeza – Guía para los Elementos

Publicado by Angel Leonardo Biancoen

Existen muchos lenguajes de programación, uno de los más mal usados en HTML. Por eso hoy hacemos un repaso de un elemento que casi nadie le da pelota y al cual la mayoría soluciona con un copypaste.

Sin más dilaciones, veamos el elemento <head>

Mínimo Requerido

Existen un serie de elementos mínimos para la buena conformación de un elemento web:

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
  Los tres meta tags que aparecn arriba "deben" ir primeros en <head> para asegurar la correcta renderización del documento. Cualquier otro elemento deberá venir luego de estos tres tags.

  † Usen content="ie-edge" tag si el proyecto soportará también versiones anteriores a Internet Explorer 11.

 -->
<title>Page Title</title>

 

Elementos

Dentro de los elementos<head>válidos se incluyen meta, link, title, style, script, noscript, y base.

Estos elementos proporcionan información de cómo el documento debe ser percibido y renderizado por las tecnologías web, como son los navegadores, bots, etc.

<!--
  Seteemos el encoding de caracteres para este documento, para que todos los caracteres dentro del formato UTF-8 se renderizen bien.
-->
<meta charset="utf-8">

<!-- Pongamos el título de la página -->
<title>Page Title</title>

<!-- Definamos la URL base para todas las direcciones relativas -->
<base href="http://example.com/page.html">

<!-- Enlace al archivo CSS externo -->
<link rel="stylesheet" href="styles.css">

<!-- Agregando estilo dentro de la página -->
<style>
  /* ... */
</style>

<!-- Elementos JavaScript y No-JavaScript -->
<script src="script.js"></script>
<script>
  // acá van las funciones
</script>
<noscript>
  <!-- No JS -->
</noscript>

 

Meta

<!--
   Permiten el control sobre dónde se cargan los recursos.
   Hay que colocarlo lo más temprano posible, ya que la etiqueta
   solo se aplica a los recursos que se declaran después de él.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Nombre de la aplicación web (sólo debe usarse en el caso de que el sitio se use como app) -->
<meta name="application-name" content="Application Name">

<!-- Color de Tema para Chrome, Firefox OS y Opera -->
<meta name="theme-color" content="#4285f4">

<!-- Breve descripción del documento (limitado a 150 caracteres) -->
<!-- Este contenido * puede * usarse como parte de los resultados del motor de búsqueda. -->
<meta name="description" content="A description of the page">

<!-- Control del comportamiento del rastreo e indexación del motor de búsqueda -->
<meta name="robots" content="index,follow"><!-- Todas las Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Específico para Google  -->

<!-- Avisarle a Google para que no muestre los enlaces del sitio en el cuadro de búsqueda -->
<meta name="google" content="nositelinkssearchbox">

<!-- Avisarle a Google para que no provea traducción para este documento -->
<meta name="google" content="notranslate">

<!-- Verificar dueño del website  -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Identificar el Software usado para construir el documento -->
<meta name="generator" content="program">

<!-- Descripción corta del contenido del docuemento -->
<meta name="subject" content="your document's subject">

<!-- Rating del contenido acorde a las edades -->
<meta name="rating" content="General">

<!-- Permite el control sobre cómo se pasa la información de referencia -->
<meta name="referrer" content="no-referrer">

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

<!-- Desactiva completamente la búsqueda previa de DNS configurandola en "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Almacena una cookie en el navegador web del cliente con fines de identificación -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- Especifica el documento para que aparezca en un marco específico -->
<meta http-equiv="Window-Target" content="_value">

<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Código de país (ISO 3166-1): mandatory, state code (ISO 3166-2): opcional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

 

Referencias:

 

Links

<!-- Apunta a una hoja de estilo externa -->
<link rel="stylesheet" href="http://example.com/styles.css">

<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="http://example.com/article/?page=2">

<!-- Enlaces a una versión AMP HTML del documento actual -->
<link rel="amphtml" href="http://example.com/path/to/amp-version.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 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 su documento que puede estar en otro idioma -->
<link rel="alternate" href="https://es.example.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:name@example.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="http://example.com/archives/">

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

<!-- Proporciona una autorreferencia: útil cuando el documento tiene múltiples referencias posibles -->
<link rel="self" type="application/atom+xml" href="http://example.com/atom.xml">

<!-- Los documentos primero, último, anterior y siguiente en una serie de documentos, respectivamente -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

<!-- Se usa cuando se utiliza un servicio de terceros para mantener un blog -->
<link rel="EditURI" href="http://example.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="http://example.com/xmlrpc.php">

<!-- Notifica una URL cuando la vincula a su documento -->
<link rel="webmention" href="http://example.com/webmention">

<!-- Permite publicar en su propio dominio usando un cliente Micropub -->
<link rel="micropub" href="http://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="http://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Pre-captura, precarga, prebrowsing -->
<!-- Más información: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="http://example.com/">
<link rel="preload" href="image.png" as="image"

Referencia:

 

Iconos

<!-- Para IE 10 y menor -->
<!-- Coloque favicon.ico en el directorio raíz; no es necesario etiquetar -->

<!-- La máxima resolución de icono que necesitamos -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reutilizar 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Icono de la pestaña fijada de Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

 

Referencias:

 

Social

Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

 

Para saber más:

 

Twitter Card

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="http://example.com/image.jpg">

 

Urls:

 

Twitter Privacy

Si incorpora tweets en su sitio web, Twitter puede usar información de su sitio para adaptar el contenido y las sugerencias a los usuarios de Twitter.

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

 

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="http://example.com/image.jpg">

 

Pinterest

Pinterest le permite evitar que las personas guarden cosas de su sitio web, de acuerdo con su centro de ayuda. La descripción es opcional.

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

 

Facebook Instant Articles

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

<!-- La URL de la versión web de tu artículo -->
<link rel="canonical" href="http://example.com/article.html">

<!-- El estilo que se utilizará para este artículo -->
<meta property="fb:article_style" content="myarticlestyle">

 

 

OEmbed

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

 

Browsers / Platforms

Apple iOS

<! - Banner de aplicación inteligente ->
<meta name = "apple-itunes-app" content = "app-id = APP_ID, affiliate-data = AFFILIATE_ID, app-argument = SOME_TEXT">

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

<! - Icono de inicio (180x180px o más) ->
<link rel = "apple-touch-icon" href = "/ ruta / a / apple-touch-icon.png">

<! - Lanzar imagen de pantalla ->
<link rel = "apple-touch-startup-image" href = "/ path / to / launch.png">

<! - Lanzar título de icono ->
<meta name = "apple-mobile-web-app-title" content = "Título de la aplicación">

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

<! - Aspecto 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">

<! - Enlace profundo de la aplicación iOS ->
<meta name = "apple-itunes-app" content = "ID de aplicación = APP-ID, app-argument = http / url-sample.com">
<link rel = "alternate" href = "ios-app://APP-ID/http/url-sample.com">

 

Google Android

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

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

<! - Enlace profundo de aplicaciones de Android ->
<meta name = "google-play-app" content = "app-id = nombre-paquete">
<link rel = "alternate" href = "android-app://package-name/http/url-sample.com">

 

Google Chrome

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

<!-- Deshabilitar la tradumaquetación -->
<meta name="google" content="notranslate">

 

Microsoft Internet Explorer

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

<! - Desactiva 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">

<! - IE10: desactiva el resaltado del enlace al tocar (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) - ->
<meta name = "msapplication-tap-highlight" content = "no">

<! - Sitios fijados (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) ->
<meta name = "application-name" content = "Título de la muestra">
<meta name = "msapplication-tooltip" content = "Una descripción de lo que hace este sitio.">
<meta name = "msapplication-starturl" content = "http://example.com/index.html?pinned=true">
<meta name = "msapplication-navbutton-color" content = "# FF3300">
<meta name = "msapplication-window" content = "width = 800; height = 600">
<meta name = "msapplication-task" content = "name = Task 1; action-uri = http: //host/Page1.html; icon-uri = http: //host/icon1.ico">
<meta name = "msapplication-task" content = "name = Task 2; action-uri = http: //microsoft.com/Page2.html; icon-uri = http: //host/icon2.ico">
<meta name = "msapplication-badge" value = "frequency = NUMBER_IN_MINUTES; polling-uri = http: //example.com/path/to/file.xml">
<meta name = "msapplication-TileColor" content = "# FF3300">
<meta name = "msapplication-TileImage" content = "/ path / to / tileimage.jpg">

<meta name = "msapplication-config" content = "http://example.com/browserconfig.xml">
<meta name = "msapplication-notification" content = "frequency = 60; polling-uri = http: //example.com/livetile; polling-uri2 = http: //example.com/livetile2">
<meta name = "msapplication-task-separator" content = "1">

 

<!-- 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="App Links">

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

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

 

Existen también elementos específicos para los navegadores chinos, peroe sos vamos a dejarlos de lado.

Espero los haya iluminado.

Deja un comentario