🤯 HEAD

Una guía simple para elementos HTML <head>

Tabla de Contenidos

Mínimo Recomendado
Elementos
Meta
Enlaces
Iconos
Social
Navegadores / Plataformas
Navegadores (Chinos)
Enlaces de Aplicaciones
Otros Recursos
Proyectos Relacionados
Otros Formatos
Traducciones
Contribuir
Autor
Autor de la traducción
Licencia

Mínimo Recomendado

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 etiquetas meta anteriores *deben* aparecer primero en el <head>
  para garantizar consistentemente el renderizado correcto del documento.
  Cualquier otro elemento head debe venir *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 ventana gráfica relacionada con la capacidad de respuesta móvil

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

initial-scale=1 - el zoom inicial, 1 significa sin zoom

⬆ volver arriba

Elementos

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

Estos elementos proporcionan información sobre cómo debe ser percibido y renderizado un documento por las tecnologías web. Por ejemplo: navegadores, motores de búsqueda, bots, etc.

<!--
  Establece la codificación de caracteres para este documento, para que
  todos los caracteres dentro del espacio UTF-8 (como los emojis)
  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 URLs relativas dentro del documento -->
<base href="https://ejemplo.com/pagina.html">

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

<!-- Usado para agregar CSS dentro del documento -->
<style>
  /* ... */
</style>

<!-- JavaScript y etiquetas No-JavaScript -->
<script src="script.js"></script>
<script>
  // función(es) aquí
</script>
<noscript>
  <!-- Alternativa sin 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">

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

<!-- Enlaces a un archivo JSON que especifica 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="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 tu documento que puede estar en otro idioma -->
<link rel="alternate" href="https://es.ejemplo.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:nombre@ejemplo.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="https://ejemplo.com/archivos/">

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

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

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

<!-- Usado 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 automatizado cuando otro blog WordPress enlaza a tu blog o entrada de WordPress -->
<link rel="pingback" href="https://ejemplo.com/xmlrpc.php">

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

<!-- Permite publicar en tu propio dominio usando un cliente Micropub -->
<link rel="micropub" href="https://ejemplo.com/micropub">

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

<!-- Prebúsqueda, precarga, pre-navegació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">

📖 Relaciones de Enlaces

⬆ volver arriba

Iconos

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

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

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

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

📖 Todo sobre Favicons (Y los Iconos Touch)
📖 Crear Iconos de Pestañas Fijadas
📖 Hoja de Trucos 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 marques tu sitio web con etiquetas Open Graph para controlar cómo aparece tu contenido en Facebook. Más sobre el Marcado Facebook Open Graph

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

📖 Protocolo Open Graph
🛠 Prueba tu página con el Depurador de Compartidos de Facebook

Twitter Card

Con las Tarjetas de Twitter, puedes adjuntar fotos, videos y experiencias multimedia enriquecidas a los Tweets, ayudando a dirigir tráfico a tu sitio web. Más sobre las Tarjetas de Twitter

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

📖 Comenzando con las tarjetas — Desarrolladores de Twitter
🛠 Prueba tu página con el Validador de Tarjetas de Twitter

Privacidad de Twitter

Si incrustas tweets en tu sitio web, Twitter puede usar información de tu sitio para personalizar contenido y sugerencias para usuarios de Twitter. Más sobre las opciones de privacidad de Twitter.

<!-- no permitir que Twitter use la información de tu sitio para propósitos 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 menor a 200 caracteres">
      <meta itemprop="image" content="https://ejemplo.com/imagen.jpg">

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

📖 Comenzando - schema.org
🛠 Prueba tu página con la Prueba de Resultados Enriquecidos

Pinterest

Pinterest te permite evitar que las personas guarden 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">

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

<!-- El estilo a usar para este artículo -->
<meta property="fb:article_style" content="miestilodearticulo">

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="Perfil oEmbed: 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="Perfil oEmbed: XML">

📖 Formato oEmbed

QQ/Wechat

Los usuarios que comparten páginas web en qq wechat tendrán un mensaje formateado

<meta itemprop="name" content="título compartido">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="contenido compartido">

📖 Documentación del Formato de Código

⬆ volver arriba

Navegadores (Chinos)

Navegador 360

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

Navegador Móvil QQ

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

Navegador Móvil UC

<!-- 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 en "modo texto" -->
<meta name="imagemode" content="force">

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

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

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

📖 Documentación del Navegador UC

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

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

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

📖 Enlaces de App

⬆ volver arriba

Otros Recursos

⬆ volver arriba

Proyectos Relacionados

Fragmentos de HEAD para Atom - Paquete de Atom para fragmentos de HEAD
Fragmentos de HEAD para Sublime Text - Paquete de Sublime Text para fragmentos de HEAD
head-it - Interfaz CLI para fragmentos de HEAD
vue-head - Manipulación de la información meta de la etiqueta HEAD para Vue.js

⬆ volver arriba

Otros Formatos

📄 PDF

⬆ volver arriba

🌐 Traducciones

🇮🇩 Bahasa
🇧🇷 Portugués Brasileño
🇨🇳 Chino (Simplificado)
🇩🇪 Alemán
🇮🇹 Italiano
🇯🇵 Japonés
🇰🇷 Coreano
🇷🇺 Ruso/Русский
🇪🇸 Español
🇹🇷 Turco/Türkçe

⬆ volver arriba

🤝 Contribuir

Abre un issue o una solicitud de extracción para sugerir cambios o adiciones.

Guía

El repositorio HEAD consiste en dos ramas:

1. `master`

Esta rama consiste en el archivo README.md que se refleja en el sitio web htmlhead.dev. Todos los cambios al contenido de la guía deben hacerse en este archivo.

Por favor, sigue estos pasos para las solicitudes de extracción:

{:.list-style-default}

Modifica solo una etiqueta, o un conjunto relacionado de etiquetas a la vez
Usa comillas dobles en los atributos
No incluyas una barra diagonal al final en elementos de cierre automático — la especificación HTML5 dice que son opcionales
Considera incluir un enlace a la documentación que respalde tu cambio

2. `gh-pages`

Esta rama es responsable del sitio web htmlhead.dev. Usamos Jekyll para desplegar el archivo README.md markdown a GitHub Pages. Todas las modificaciones relacionadas con el sitio web deben hacerse en esta rama.

Puede ser útil revisar la Documentación de Jekyll y entender cómo funciona Jekyll antes de trabajar en esta rama.

🌟 Contribuidores

Revisa todos los increíbles contribuidores 🤩

👤 Autor del proyecto

Josh Buchea

GitHub: @joshbuchea
Mastodon: @joshbuchea@hachyderm.io

👤 Autor de la traducción

Alvaro Araoz

GitHub: @alvaroadlf

💛 Apoyo por la traducción

Si este proyecto fue útil para ti o tu organización, considera apoyar mi trabajo directamente:

☕️ Buy me a Ko-Fi

¡Toda ayuda cuenta, gracias! 🙏

— Josh

📝 Licencia

⬆ volver arriba

Name		Name	Last commit message	Last commit date
Latest commit History 370 Commits
.github		.github
README.md		README.md

alvaroadlf/HEAD

Folders and files

Latest commit

History

Repository files navigation

🤯 HEAD

Tabla de Contenidos

Mínimo Recomendado

Elementos

Meta

Enlaces

Iconos

Social

Facebook Open Graph

Twitter Card

Privacidad de Twitter

Schema.org

Pinterest

Facebook Instant Articles

OEmbed

QQ/Wechat

Navegadores (Chinos)

Navegador 360

Navegador Móvil QQ

Navegador Móvil UC

Enlaces de Aplicaciones

Otros Recursos

Proyectos Relacionados

Otros Formatos

🌐 Traducciones

🤝 Contribuir

Guía

1. master

2. gh-pages

🌟 Contribuidores

👤 Autor del proyecto

👤 Autor de la traducción

💛 Apoyo por la traducción

📝 Licencia

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

1. `master`

2. `gh-pages`

Packages