El uso de la etiqueta H, especialmente el uso de H1, siempre ha sido un tema controvertido y también es una pregunta digna de nuestro estudio. Basado en la experiencia de mis predecesores, escribí este artículo basado en mi comprensión de las etiquetas H, con la esperanza de que sea útil para todos. ¿Qué es la etiqueta H ?
W3C señala que las etiquetas H1-H6 pueden definir títulos. H1 define el título más grande. H6 define el título más pequeño.
H1, H2, H3, H4, H5, H6, como etiquetas de título y disminuye según la importancia. Creo que es necesario seguir dichos principios, lo que puede hacer que las relaciones jerárquicas de la página sean más claras, y permitir que los motores de búsqueda se arrastren mejor y analicen el contenido del tema de la página, etc. Para obtener una mejor comprensión, consulte el siguiente código:
<body> <h1> título de primer nivel </h1> <p> párrafo </p> <div> <h2> título de segundo nivel </h2> <p> ... </p> <div> <h3> título de segundo nivel </h3> <p> ... </p> <hiv> <h4> título de segundo nivel </h4> <p> ... </p> </div> </div>
El estilo predeterminado del navegador también disminuye en función de la importancia, y el tamaño de la fuente cambia de gran a pequeño de H1 a H6. Hay algunas diferencias en los estilos en diferentes navegadores. Debido a esta diferencia, generalmente usamos CSS para unificarlos en el diseño.
¿Cómo lo usas?Hoy en día, a muchos sitios web (incluidos sitios web conocidos como Taobao, Sina, Sohu) les gusta usar H1 en el logotipo, como se muestra en la imagen:
No es sin razón para que todos usen esto, pero de hecho hay muchas ventajas: resume el contenido de toda la página, y el logotipo está muy cerca del cuerpo, lo que hace que sea conveniente que los motores de búsqueda tomen el tema más rápido y en términos de semántica, también es más preciso.
Por supuesto, no todos los sitios web usan H1 en el logotipo. El uso de NetEase es un ejemplo más especial:
NetEase establece la pantalla: Ninguno de los estilo para ocultarlo, que no solo resuelve la contradicción de no saber dónde poner H1, sino que también juega el papel de la optimización de SEO, que se puede decir que mata a dos pájaros de un solo piedra.
Y la página de inicio de Tencent H1 es la noticia principal, como se muestra en la imagen:
Del ejemplo anterior, podemos ver que el uso de H1 es diferente para los principales sitios web. ¿Dónde ponerlo en H1? Siempre ha sido un tema controvertido, pero no creo que haya una respuesta absoluta a dónde ponerlo. Creo que debe considerarse en función de factores como el posicionamiento, el tipo y los hábitos de búsqueda de usuarios de la página web. Por ejemplo, para los sitios web de noticias, puede poner H1 en las noticias principales; Para sitios web integrales del portal, puede poner H1 en el logotipo; Si el sitio web de la compañía también puede poner H1 en el logotipo, porque a los usuarios generalmente les gusta buscar el nombre de la compañía; Si hay lemas de sitios web, también puede poner H1 en el eslogan, lo cual también es una buena opción. En resumen, elegir el que mejor se adapte a los mejores.
Con respecto a H2, generalmente me gusta usarlo en la columna grande de la página de inicio, como se muestra en la imagen:
Para la página de contenido, estoy más acostumbrado a dar H2 al título del artículo, y el título de la columna está representado por H3, como se muestra en la figura:
H3 se usa principalmente para títulos de columnas, como se muestra en la figura:
La etiqueta H utilizada en la página de inicio de los productos R&F no solo tiene relaciones jerárquicas claras, sino que también destaca la importancia del contenido del producto, que también es muy beneficioso para los motores de búsqueda.
El siguiente ejemplo también es muy interesante, como se muestra en la figura:
El título de la columna usa H2, y el título de noticias usa H1. Si su orden se invierte de acuerdo con las relaciones jerárquicas, no está mal. Cuando realmente usamos etiquetas H, también podemos definirlo en función de la importancia del contenido. Por lo tanto, solo aplicando de manera flexible las teorías básicas se puede maximizar su efecto.
De los ejemplos anteriores, no es difícil ver que el uso de la etiqueta H sea muy flexible y no se limite a estos usos. En nuestra aplicación, solo necesitamos seguir el principio de disminución de la importancia y aprender de un ejemplo y aplicarlo a otros aspectos. Lo mismo es cierto para H4-H6.
Resumió algunosSegún la comprensión y aplicación de etiquetas H por materiales de referencia, expertos en producción front-end, sitios web conocidos, etc., he resumido las siguientes especificaciones, con la esperanza de brindarle algún valor de referencia.
Título de primer nivel H1
Representa la principal prioridad, y su posición es tan importante como la posición de las palabras clave en la página. Generalmente se usa en títulos o titulares del sitio web, y algunos sitios web grandes también se usan en logotipos. Aunque los códigos H1 se pueden escribir multiplicamente, en realidad son semánticamente únicos. Es mejor aparecer solo una vez o no en una página.
Título de H2 Nivel 2
Aparece principalmente en el título del artículo y el título de la columna del contenido principal de la página. La estructura de tres columnas generalmente está en el medio, y la estructura de dos columnas generalmente está en el lado importante. Se puede usar con H3.
Título de H3 Nivel tres
En general, la barra lateral de la página principal. H4 es su auxiliar y parece que no es muy frecuente.
La relación a nivel de página no puede ser demasiado profunda, por lo que H4, H5, H6 generalmente parece menos.