Skip to content

Latest commit

 

History

History
571 lines (409 loc) · 23.3 KB

README.md

File metadata and controls

571 lines (409 loc) · 23.3 KB
Raw

🤯 HEAD

Una guía simple para elementos HTML <head>

Contribuidores CC0 Sígueme @joshbuchea en Mastodon

Tabla de Contenidos

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

Meta

<!--
  Las siguientes 2 etiquetas meta *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.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--
  Permite controlar desde dónde se cargan los recursos.
  Colocar lo más temprano posible en el <head>, ya que la etiqueta
  solo se aplica a los recursos que se declaran después de ella.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Nombre de la aplicación web (solo debe usarse si el sitio web se usa como una aplicación) -->
<meta name="application-name" content="Nombre de la Aplicación">

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

<!-- Descripción corta del documento (límite de 150 caracteres) -->
<!-- Este contenido *puede* ser usado como parte de los resultados del motor de búsqueda. -->
<meta name="description" content="Una descripción de la página">

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

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

<!-- Verificar la propiedad del sitio web -->
<meta name="google-site-verification" content="token_de_verificacion"><!-- Google Search Console -->
<meta name="yandex-verification" content="token_de_verificacion"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="token_de_verificacion"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="token_de_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 usado para construir el documento (ej. - WordPress, Dreamweaver) -->
<meta name="generator" content="programa">

<!-- Breve descripción del tema de tu documento -->
<meta name="subject" content="tema de tu documento">

<!-- Proporciona una calificación de edad general basada en el contenido del documento -->
<meta name="rating" content="General">

<!-- Permite controlar cómo se pasa la información del referente -->
<meta name="referrer" content="no-referrer">

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

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

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

<!-- Etiquetas Geo -->
<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; ej. content="US" / content="US-NY" -->
<meta name="geo.placename" content="ciudad/pueblo"><!-- ej. content="Nueva York" -->

<!-- Monetización Web https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$indicador_de_pago.ejemplo">

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

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

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

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

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

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

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

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

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

⬆ volver arriba

Otros Recursos

⬆ volver arriba

Proyectos Relacionados

⬆ volver arriba

Otros Formatos

⬆ volver arriba

🌐 Traducciones

⬆ 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

👤 Autor de la traducción

Alvaro Araoz

💛 Apoyo por la traducción

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

¡Toda ayuda cuenta, gracias! 🙏

— Josh

📝 Licencia

CC0

⬆ volver arriba