El poder de HEAD
#HEAD
Una lista de todo lo que *podría* entrar en el <head> de tu documento </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:
📖 Meta etiquetas que Google entiende📖 WHATWG Wiki: MetaExtensiones📖 ICBM en Wikipedia📖 Geotagging en Wikipedia
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">
- Para más información:
📖 Relaciones de Enlace
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">
Para más información:
📖 Todo Sobre los Favicons (Y los Iconos Táctiles)
📖 Cómo Crear Iconos de Pestañas Fijas
📖 Favicon Cheat Sheet
📖 Iconos y Colores del Navegador
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:
📖 Markup de Facebook Open Graph📖 Protocolo Open Graph🛠 Pon a prueba tu página con el Facebook Sharing Debugger
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:
📖 Introducción a las tarjetas — Twitter Developers🛠 Pon a prueba tu página con el Twitter Card Validator
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 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&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&format=xml" title="oEmbed Profile: XML">Para más información:
FIN :)
No hay comentarios.: