Web Designer 101: ¿Qué pertenece al encabezado HTML?

Web Designer 101: ¿Qué pertenece al encabezado HTML?

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

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

Las cosas más importantes primero

Primero, el sitio web le dice lo que debe tener cada elemento ««. Esto incluye el elemento ««, así como un par de elementos «<meta>«. HTML5 siempre requiere la designación del juego de caracteres mediante metaetiquetas. Hoy en día, eso no debería ser otra cosa que UTF-8.</p><p>Además, gethead.info recomienda algunas otras metaetiquetas que generalmente son importantes para una visualización optimizada de su sitio web. Por ejemplo, la ventana gráfica de su sitio debe designarse mediante un elemento «<meta>«. También debe elegirse de modo que el ancho de visualización siempre muestre el ancho de su sitio web, en lugar de escalar el sitio.</p><p>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.</p><p>Además de eso, la integración de las hojas de estilo y los JavaScripts pertenecen al encabezado HTML, siempre que desee que se carguen antes que el cuerpo HTML. En muchos casos, tiene sentido cargar archivos CSS y JavaScript al final del elemento «<body>«. Eso es porque todo lo que se carga en la cabeza ralentiza la carga del contenido real.</p><h3>Metaetiquetas para motores de búsqueda</h3><p>¿Quiere que un motor de búsqueda considere un documento HTML y las páginas enlazadas 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».</p><div id="attachment_103949" class="wp-caption aligncenter" style="width: 1024px"><noscript><img class="size-large wp-image-103949" src="http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/Web-Designer-101-¿Que-pertenece-al-encabezado-HTML.jpg" alt="" width="1024" height="472"></noscript></p><p class="wp-caption-text"><span class="fa fw fa-camera fa-1x"></span>Metaetiquetas para motores de búsqueda</p></div><p>Sin embargo, gethead.info también enumera otros elementos “<meta>”, 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.</p><h3>Definición de referencias en el encabezado HTML</h3><p>Aparte de las hojas de estilo, el elemento «<link>» también se utiliza para integrar muchas otras referencias en el encabezado HTML. Para evitar el contenido duplicado, por ejemplo, utilice la etiqueta “<link>” “canónico” para definir un enlace que se refiere a un documento con contenido idéntico, al que se puede acceder a través de una URL diferente.</p><p>Las fuentes RSS y la integración de Open Search se realizan mediante la configuración de enlaces en el elemento «<head>«.</p><p>Las referencias a archivos, autores y páginas de índice también se realizan de esta manera. Esto le permite enlazar 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.</p><h3>Integración de redes sociales para compartir</h3><p>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 la visualización correcta del título, la imagen y la descripción del documento.</p><div id="attachment_103948" class="wp-caption aligncenter" style="width: 1024px"><noscript><img alt="" width="1024" height="275" src="http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639116701_448_Web-Designer-101-¿Que-pertenece-al-encabezado-HTML.jpg" class="size-large wp-image-103948 lazyload"></noscript><img alt="" width="1024" height="275" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201024%20275%22%3E%3C/svg%3E' data-src="http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639116701_448_Web-Designer-101-¿Que-pertenece-al-encabezado-HTML.jpg" class="lazyload size-large wp-image-103948 lazyload"><noscript><img class="size-large wp-image-103948" src="http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639116701_448_Web-Designer-101-¿Que-pertenece-al-encabezado-HTML.jpg" alt="" width="1024" height="275"></noscript></p><p class="wp-caption-text"><span class="fa fw fa-camera fa-1x"></span>Integración de etiquetas Open Graph para Facebook</p></div><p>Además del estándar Open Graph, compatible con Facebook e interpretado por otros servicios como Google+ y LinkedIn, Twitter tiene sus propias etiquetas de integración llamadas Twitter Cards.</p><h3>Peculiaridades de los navegadores y los sistemas operativos</h3><p>Cuando se trata de guardar un sitio web como favorito, los navegadores y sistemas operativos tienen sus propias peculiaridades.</p><p>Por ejemplo, Windows 10 le permite definir iconos y colores individuales, creando un mosaico para el favorito. Apple guarda una referencia al favorito con iconos especiales, integrados con diferentes tamaños.</p><p>¿Existe una aplicación para su sitio web? Si es así, eso 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 adecuada notifica al visitante que hay una aplicación disponible.</p><h3>Conclusión</h3><p>El sitio web gethead.info no solo es un punto de partida interesante para los principiantes, sino también para los usuarios avanzados. La lista es bastante extensa y proporciona mucha información en forma breve.</p><p>Aparte de las etiquetas presentadas brevemente, encontrará muchas más, algunas de ellas muy específicas. También hay metaetiquetas para navegadores bastante desconocidos.</p><p>Además, obtendrá algunos consejos sobre cómo mejorar el rendimiento de su sitio web con el marcado correspondiente, así como enlaces a proyectos relacionados.</p><p>El sitio web <a rel="nofollow" href="https://gethead.info/">gethead.info</a> 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.</p></p></div></p></div><p>#Web #Designer #Qué #pertenece #encabezado #HTML</p></div><footer class="entry-footer"><div class="entry-tags"> <span class="tags-links"> <span class="tags-label screen-reader-text"> Etiquetas de la entrada: </span> <a href=https://xn--diseopaginaswebya-ixb.es/tag/designer/ title="Designer" class="tag-link tag-item-designer" rel="tag"><span class="tag-hash">#</span>Designer</a><a href=https://xn--diseopaginaswebya-ixb.es/tag/encabezado/ title="encabezado" class="tag-link tag-item-encabezado" rel="tag"><span class="tag-hash">#</span>encabezado</a><a href=https://xn--diseopaginaswebya-ixb.es/tag/html/ title="HTML" class="tag-link tag-item-html" rel="tag"><span class="tag-hash">#</span>HTML</a><a href=https://xn--diseopaginaswebya-ixb.es/tag/pertenece/ title="pertenece" class="tag-link tag-item-pertenece" rel="tag"><span class="tag-hash">#</span>pertenece</a><a href=https://xn--diseopaginaswebya-ixb.es/tag/que/ title="qué" class="tag-link tag-item-que" rel="tag"><span class="tag-hash">#</span>qué</a><a href=https://xn--diseopaginaswebya-ixb.es/tag/web/ title="web" class="tag-link tag-item-web" rel="tag"><span class="tag-hash">#</span>web</a> </span></div></footer></div></article><nav class="navigation post-navigation" aria-label="Entradas"><h2 class="screen-reader-text">Navegación de entradas</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--diseopaginaswebya-ixb.es/propeller-bootstrap-en-apariencia-de-material-design/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Anterior Anterior

Propeller: Bootstrap en apariencia de material design

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.