L'utilisation de H Tag, en particulier l'utilisation de H1, a toujours été une question controversée et est également une question digne de notre étude. Sur la base de l'expérience de mes prédécesseurs, j'ai écrit cet article en fonction de ma compréhension des balises H, en espérant que cela sera utile à tout le monde. Qu'est-ce que la balise H ?
W3C souligne que les balises H1-H6 peuvent définir des titres. H1 définit le plus grand titre. H6 définit le plus petit titre.
H1, H2, H3, H4, H5, H6, en tant que titre étiquette et diminue en fonction de l'importance. Je pense qu'il est nécessaire de suivre ces principes, ce qui peut rendre les relations hiérarchiques de la page plus claires, et permettre aux moteurs de recherche de mieux ramper et analyser le contenu du sujet de la page, etc. pour une meilleure compréhension, veuillez consulter le code suivant:
<body> <h1> Titre de premier niveau </h1> <p> Paragraphe </p> <div> <h2> Titre de deuxième niveau </h2> <p> ... </p> <v> <h3> Titre de deuxième niveau </h3> <p> ... </p> <v> <h4> Titre de deuxième niveau </h4> <p> ... </p>
Le style par défaut du navigateur diminue également en fonction de l'importance, et la taille de la police passe de grande à petite de H1 à H6. Il existe quelques différences dans les styles dans différents navigateurs. En raison de cette différence, nous utilisons généralement CSS pour les unifier en disposition.
Comment l'utilisez-vous?De nos jours, de nombreux sites Web (y compris des sites Web bien connus tels que Taobao, Sina, Sohu) aiment utiliser H1 sur le logo, comme indiqué dans l'image:
Ce n'est pas sans raison pour tout le monde de l'utiliser, mais en fait, il y a beaucoup d'avantages: il résume le contenu de toute la page, et le logo est très proche du corps, ce qui rend pratique pour les moteurs de recherche pour saisir le sujet le plus rapide, et en termes de sémantique, il est également plus précis.
Bien sûr, tous les sites Web n'utilisent pas H1 sur le logo. L'utilisation de NetEase est un exemple plus spécial:
NetEase définit l'affichage: aucun style pour le cacher, ce qui résout non seulement la contradiction de ne pas savoir où mettre H1, mais joue également le rôle de l'optimisation du référencement, qui peut être considéré comme tuer deux oiseaux avec une pierre.
Et la page d'accueil de Tencent H1 est les journaux, comme le montre l'image:
D'après l'exemple ci-dessus, nous pouvons voir que l'utilisation de H1 est différente pour les principaux sites Web. Où le mettre sur H1? Cela a toujours été un problème controversé, mais je ne pense pas qu'il y ait une réponse absolue à l'endroit où le mettre. Je pense qu'il doit être pris en compte sur la base de facteurs tels que les habitudes de positionnement, de type et de recherche d'utilisateurs de la page Web. Par exemple, pour les sites Web d'actualités, vous pouvez mettre H1 sur les journaux des journaux; Pour les sites Web de portail complet, vous pouvez mettre H1 sur le logo; Si le site Web de l'entreprise peut également mettre H1 sur le logo, car les utilisateurs aiment généralement rechercher le nom de l'entreprise; S'il y a des slogans de site Web, vous pouvez également mettre H1 sur le slogan, ce qui est également un bon choix. En bref, choisir celui qui convient le mieux est le meilleur.
En ce qui concerne H2, j'aime généralement l'utiliser sur la grande colonne de la page d'accueil, comme indiqué sur l'image:
Pour la page de contenu, je suis plus habitué à donner H2 au titre de l'article, et le titre de la colonne est représenté par H3, comme indiqué sur la figure:
H3 est principalement utilisé pour les titres de colonne, comme le montre la figure:
La balise H utilisée sur la page d'accueil des produits R&F a non seulement des relations hiérarchiques claires, mais souligne également l'importance du contenu des produits, ce qui est également très bénéfique pour les moteurs de recherche.
L'exemple suivant est également très intéressant, comme le montre la figure:
Le titre de la colonne utilise H2 et le titre d'information utilise H1. Si leur ordre est inversé en fonction des relations hiérarchiques, ce n'est pas faux. Lorsque nous utilisons réellement les balises H, nous pouvons également le définir en fonction de l'importance du contenu. Par conséquent, ce n'est qu'en appliquant de manière flexible les théories de base que son effet peut être maximisée.
D'après les exemples ci-dessus, il n'est pas difficile de voir que l'utilisation de la balise H est très flexible et ne se limite pas à ces usages. Dans notre application, nous n'avons qu'à suivre le principe de la diminution de l'importance et d'apprendre d'un exemple et de l'appliquer à d'autres aspects. Il en va de même pour H4-H6.
Résumé certainsSur la base de la compréhension et de l'application des balises H par matériel de référence, experts en production frontale, sites Web bien connus, etc., j'ai résumé les spécifications suivantes, dans l'espoir de vous apporter une valeur de référence.
Titre de premier niveau H1
Il représente la priorité absolue et sa position est aussi importante que la position des mots clés dans la page. Il est généralement utilisé dans les titres de site Web ou les titres, et certains grands sites Web sont également utilisés dans les logos. Bien que les codes H1 puissent être écrits multiples, ils sont en fait sémantiquement uniques. Il est préférable d'apparaître une seule fois ou non dans une page.
Titre de niveau 2 H2
Il apparaît principalement dans le titre de l'article et le titre de colonne du contenu principal de la page. La structure à trois colonnes est généralement au milieu et la structure à deux colonnes est généralement du côté important. Peut être utilisé avec H3.
Titre de niveau trois de H3
Généralement, la barre latérale de la page principale. H4 est son auxiliaire et n'apparaît pas très fréquemment.
La relation au niveau de la page ne peut pas être trop profonde, donc H4, H5, H6 apparaît généralement moins.