Home html webdev El poder de HEAD

El poder de HEAD

Read
#HEAD



Una lista de todo lo que *podría* entrar en el <head> de tu documento </head>


A continuación veremos una entrada muy interesante de cómo podemos ocupar un poco más  HEAD.


Mínimos Recomendados

A continuación se muestran los elementos esenciales para cualquier página web (páginas web / aplicaciones):
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
  Las 2 meta etiquetas anteriores *deben* ser lo primero en el <head>
  para garantizar de manera consistente la representación adecuada de documentos.
  Cualquier otro elemento principal debe venir *después* de estas etiquetas.
 -->
<title>Título de la Página</title>


Elementos

Los elementos válidos en el <head> son: meta, link, title, style, script, noscript, y base.

Estos elementos proporcionan información sobre cómo un documento debe ser interpretado y representado por las tecnologías web. p.ej. navegadores, motores de búsqueda, bots, etc.
<!--
  Establezca la codificación de caracteres para este documento, de modo que
  todos los caracteres dentro del espacio UTF-8 (como los emoji)
  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 URL relativas dentro del documento -->
<base href="http://example.com/page.html">

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

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

<!-- Etiquetas JavaScript y No-JavaScript -->
<script src="script.js"></script>
<script>
  // La(s) función(es) van aquí
</script>
<noscript>
  <!-- No se puede usar JS -->
</noscript>


Meta


<!--
  Las 2 siguientes meta etiquetas *deben* ser lo primero en el <head>
  para garantizar de manera consistente la representación adecuada de documentos.
  Cualquier otro elemento principal debe venir *después* de estas etiquetas.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--
  Permite el control sobre dónde se cargan los recursos.
  Colócalo lo más arriba posible en el <head>, ya que la etiqueta solo se aplica a los recursos declarados después.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Nombre de la aplicación web (solo debe usarse si la página web se usa como una aplicación) -->
<meta name="application-name" content="Application Name">

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

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

<!-- Controla el comportamiento del 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 de sitio -->
<meta name="google" content="nositelinkssearchbox">

<!-- Le dice a Google que no proporcione una traducción para este documento -->
<meta name="google" content="notranslate">

<!-- Verifica la propiedad del sitio web -->
<meta name="google-site-verification" content="token_verificacion"><!-- Google Search Console -->
<meta name="yandex-verification" content="token_verificacion"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="token_verificacion"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="token_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 utilizado para compilar el documento (p. ej.: WordPress, Dreamweaver) -->
<meta name="generator" content="programa">

<!-- Breve descripción del asunto de su documento -->
<meta name="subject" content="el asunto de su documento">

<!-- Da una clasificación general de edad basada en el contenido del documento -->
<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 configurandolo como "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 etiquetas -->
<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; p. ej. content = "ES" / content = "ES-MAD" -->
<meta name="geo.placename" content="ciudad/distrito"><!-- p. ej. content="Madrid" -->

Para más información:

Enlaces


<!-- 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://ejemplo.com/articulo/?page=2">

<!-- Enlaces a una versión AMP HTML del documento actual -->
<link rel="amphtml" href="http://ejemplo.com/enlace/a/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 autor (es) del documento-->
<link rel="author" href="humans.txt">

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

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

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

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

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

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

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

<!-- Permite publicar en su propio dominio usando un cliente Micropub -->
<link rel="micropub" href="http://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="http://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- Más info: 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="http://ejemplo.com/">
<link rel="preload" href="imagen.png" as="image">

Iconos


<!-- Para IE 10 y versiones inferiores -->
<!-- Coloca el 'favicon.ico' en el directorio raíz; no es necesario etiquetar -->

<!-- Ícono en la más alta resolución que necesitemos -->
<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 en Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

Social


Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://ejemplo.com/pagina.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Título del Contenido">
<meta property="og:image" content="http://ejemplo.com/imagen.jpg">
<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="">
Para más información:

Tarjetas de Twitter

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cuenta_de_la_web">
<meta name="twitter:creator" content="@cuenta_individual">
<meta name="twitter:url" content="http://ejemplo.com/pagina.html">
<meta name="twitter:title" content="Título del Contenido">
<meta name="twitter:description" content="Descripción del contenido (menos de 200 caracteres)">
<meta name="twitter:image" content="http://ejemplo.com/imagen.jpg">
Para más información:

Privacidad de Twitter

Si incorpora los 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. Más sobre las opciones de privacidad de Twitter.
<!-- no permitir que Twitter use la información de su sitio para fines de personalización -->
<meta name="twitter:dnt" content="on">

Pinterest

Pinterest te permite evitar que las personas guarden cosas de su sitio web, de acuerdo a su centro de ayuda. El atributo description es opcional.
<meta name="pinterest" content="nopin" description="Lo siento, ¡no puedes guardar desde mi sitio web!">

Artículos Instantáneos de Facebook

<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://ejemplo.com/articulo.html">

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

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">
Para más información:
FIN :)
Etiquetas :

No hay comentarios.:

Suscribirse a: Comentarios de la entrada ( Atom )
Con tecnología de Blogger.