Una lista de todo lo que *podría* ir en la cabecera (head) de tu página web
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 13 commits ahead, 9 commits behind joshbuchea:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

HEAD

CC0 Contributors Translated by Translated by

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

Tabla de Contenidos

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>

⬆ volver a arriba

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 caractéres 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) funcion(es) van aquí
</script>
<noscript>
  <!-- No se puede usar JS -->
</noscript>

⬆ volver a arriba

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.
  Colocalo 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 caractéres) -->
<!-- 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" -->

⬆ volver a arriba

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

⬆ volver a arriba

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

⬆ volver a arriba

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

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

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

Google+ / Schema.org

<html lang="" itemscope itemtype="http://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 (menos de 200 caracteres)">
      <meta itemprop="image" content="http://ejemplo.com/imagen.jpg">

Nota: Este marcado requiere que los atributos se agreguen a su etiqueta html superior

Pinterest

Pinterest le 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">

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

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

<!-- Deshabilita 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 largo) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

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

<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="App Title">

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

<!-- Apariencia de la barra de estado (no tiene efecto si el modo standalone no esta activado) -->
<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-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android

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

<!-- Añadir a la pantalla principal -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Más info: 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-sample.com">

Google Chrome

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

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

Microsoft Internet Explorer

<!-- Fuerza a IE 8/9/10 a utilizar la última versión del motor de renderizado -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Deshabilita la detección automática y el formateo de posibles números de teléfono mediante la extensión del navegador Skype Toolbar -->
<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="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

⬆ volver a arriba

Navegadores (Chino)

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 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 buscador UC mostrará imágenes incluso si está en "modo texto" -->
<meta name="imagemode" content="force">

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

<!-- Desactiva "modo nocturno" de UC Browser para este documento -->
<meta name="nightmode" content="disable">

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

<!-- Desactiva la función de UC Browser de "escalar la fuente cuando hay muchas palabras en este documento" -->
<meta name="wap-font-scale" content="no">

⬆ volver a arriba

Enlaces a una App

<!-- 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="Nombre de la App">

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

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

⬆ volver a arriba

Otros Recursos

⬆ volver a arriba

Proyectos Relacionados

⬆ volver a arriba

Otros Formatos

⬆ volver a arriba

Traducciones

⬆ volver a arriba

Contribuye

Abra un problema o una solicitud de extracción para sugerir cambios o adiciones.

Colaboradores

Echa un vistazo a todos los geniales colaboradores.

Autor

Josh Buchea

Traduccciones:

Licencia

CC0

⬆ volver a arriba