¿Qué pertenece al head en HTML?

El encabezado HTML es un componente importante de cada documento HTML. Es donde se define el título y donde se integran los archivos JavaScript y CSS. Sin embargo, el elemento «» ha cobrado aún más importancia en los últimos años. Aquí también tiene lugar la integración de otros servicios web como motores de búsqueda y redes sociales.

El sitio web gethead.info le brinda una descripción general muy extensa de todos los elementos necesarios e importantes del encabezado HTML.

Las cosas más importantes primero

Primero, el sitio web le dice qué debe tener cada elemento «». Esto incluye el elemento «<título>», así como un par de elementos «». HTML5 siempre requiere la designación del conjunto de caracteres a través de metaetiquetas. Hoy en día, eso no debería ser otra cosa que UTF-8. Además, gethead.info recomienda algunas otras etiquetas meta que generalmente son importantes para una visualización optimizada de su sitio web. Por ejemplo, la ventana gráfica de su sitio debe designarse con un elemento «». También debe elegirse para que el ancho de visualización siempre muestre el ancho de su sitio web, en lugar de escalar el sitio. Aparentemente, esta configuración requiere que su sitio web sea receptivo y esté diseñado para dispositivos móviles. Aunque esto debería ser estándar por ahora. Además de eso, la integración de hojas de estilo y JavaScripts pertenecen al encabezado de HTML, siempre que desee que se carguen antes que el cuerpo de HTML. En muchos casos, tiene sentido cargar archivos CSS y JavaScript al final del elemento «». Eso es porque todo lo que se carga en la cabeza ralentiza la carga del contenido real.

Etiquetas meta para motores de búsqueda

¿Quiere que un motor de búsqueda considere un documento HTML y las páginas vinculadas durante la indexación? La respuesta a esta pregunta también debe estar en el encabezado HTML y está definida por la metaetiqueta «robots» y los valores «index», «noindex», «follow» y «nofollow».

Etiquetas meta para motores de búsqueda

Sin embargo, gethead.info también enumera otros elementos «», lo que le permite verificar diferentes motores de búsqueda, por ejemplo. Esto podría ser útil para poder usar la consola de búsqueda de Google, pero también se aplica a otros motores de búsqueda como Bing o servicios como Pinterest.

Definición de referencias en el encabezado HTML

Aparte de las hojas de estilo, el elemento «» también se usa para integrar muchas otras referencias en el encabezado HTML. Para evitar contenido duplicado, por ejemplo, utilice la etiqueta «» «canónica» para definir un enlace que haga referencia a un documento con contenido idéntico, al que se puede acceder a través de una URL diferente. RSS feeds, y la integración de Open Search ocurre a través de la configuración de enlaces en el elemento «». Las referencias a archivos, autor y páginas de índice también se realizan de esta manera. Esto le permite vincular a las páginas anteriores y siguientes en sitios con paginación también. Esto es tan interesante para los motores de búsqueda como para algunos navegadores que pueden comprender mejor la estructura de su sitio web de esta manera.

Integrando Redes Sociales para Compartir

Las redes sociales son un factor significativo. Si desea compartir publicaciones u otros documentos de su sitio web en Facebook o Twitter, se recomienda colocar etiquetas adecuadas en el encabezado, lo que permite mostrar correctamente el título, la imagen y la descripción del documento.

Aparte del estándar Open Graph, soportado por Facebook e interpretado por otros servicios como Google+ y LinkedIn, Twitter tiene sus propias etiquetas de integración llamadas Twitter Cards.

Peculiaridades de los Navegadores y Sistemas Operativos

Cuando se trata de guardar un sitio web como favorito, los navegadores y los sistemas operativos tienen sus propias peculiaridades. Por ejemplo, Windows 10 le permite definir íconos y colores individuales, creando un mosaico para el favorito. Apple guarda una referencia al favorito con iconos especiales, integrados con diferentes tamaños. ¿Hay una aplicación para su sitio web? Si es así, esa es otra cosa que puede agregar al encabezado HTML usando etiquetas. Tanto Apple como Android proporcionan enlaces a sus respectivas tiendas de aplicaciones. Acceder a su sitio web con un teléfono inteligente o tableta adecuado notifica al visitante que hay una aplicación disponible.

Conclusión

El sitio web gethead.info no solo es un punto de partida interesante para los novatos, sino también para los usuarios avanzados. La lista es bastante extensa y proporciona mucha información en forma breve. Además de las etiquetas presentadas brevemente, encontrará muchas más, algunas de ellas muy específicas. También hay etiquetas meta para navegadores bastante desconocidos. Además, obtendrá algunos consejos sobre cómo mejorar el rendimiento de su sitio web con el marcado adecuado, así como enlaces a proyectos relacionados. El sitio web gethead.info se distribuye bajo la licencia de dominio público y se aloja en GitHub. Allí, puede descargar diferentes fragmentos como plantilla para sus propios proyectos web.