Sur mes meilleurs projets d'information Tout d'abord, un spécialiste du sujet établit la structure de l'article (titres et sous-titres), puis les rédacteurs écrivent le texte sur cette base.
La structure est en fait très importante si vous vous souciez de la qualité. Et pour créer une structure normale, vous devez comprendre comment fonctionnent les balises h.
h1 est le sous-titre principal d'un article, généralement placé au-dessus du texte.
Le premier titre doit être visuellement plus grand que les autres titres de la page.
h2-h6 sont de petits sous-titres placés selon le principe d'imbrication.
À quoi servent les en-têtes ?
Pour ceux qui ne connaissent pas très bien le sujet, voici, en principe, une bonne vidéo sur les bases de la composition des sous-titres h1-h6. Si vous ne vous considérez pas comme un expert, jetez un œil :
Et pour consolider le matériel, une vidéo un peu plus faible :
Les titres sont conçus pour mettre en évidence dans une phrase ou même un mot l'essence principale, l'idée du texte suivant. Habituellement, une personne tourne d'abord son attention vers eux, décidant de lire ou non le reste du matériel. Les titres sont particulièrement importants dans les textes et lettres publicitaires et constituent le principal outil pour attirer l'attention du public cible.
Dans le code, la balise ressemble à ceci :
, où la lettre h vient du mot « en-tête », qui signifie « titre ». Chaque niveau est indiqué par un numéro correspondant.
Les tags H à travers les yeux des gens
Le texte divisé en sous-titres semble plus soigné et plus facile à lire. L'utilisateur moderne a appris depuis longtemps à numériser des articles en quelques secondes et à tirer rapidement des conclusions quant à savoir s'il vaut la peine de lire l'intégralité du texte, s'il contient cela. information utile qu'il recherche. Les titres attirent l'attention, mettent en évidence l'essentiel et donnent à l'utilisateur la possibilité d'analyser le matériel.
Les balises h1, h2, h3, h4, h5, h6 permettent de créer une sorte de carte pour le lecteur, à l'aide de laquelle il peut naviguer rapidement dans le texte. Et si ces points forts parviennent à attirer l’attention, alors la personne s’attardera sur la page et lira probablement l’intégralité de l’article. Vous pouvez vérifier le résultat en facteurs comportementaux. Si les gens restent sur la page et prennent des mesures, cela signifie que le travail de référencement n'a pas été fait en vain.
Les balises H à travers les yeux des moteurs de recherche
Les robots de recherche collectent des informations à des fins d'analyse sémantique. Les niveaux de titres h1, h2, h3 sont particulièrement importants pour les robots. Leur incohérence ou non application correcte peut affecter négativement le classement de la page. S'il n'y a aucune balise h dans le code HTML, le site aura des difficultés à promouvoir. Les niveaux h4, h5, h6 sont moins significatifs.
Hiérarchie des balises H
La règle principale dans l'organisation des titres est leur hiérarchie. Il n'est pas nécessaire que les balises se suivent en taille, mais il est inacceptable d'utiliser, par exemple, h3 dans le texte si vous n'avez la méta h2 nulle part, ou d'utiliser h6 sans h5.
Voici à quoi ressemble la hiérarchie avec une imbrication correcte :
Qu'est-ce qu'une balise h1 ?
La balise h1 est la table des matières du texte (comme le titre d'un livre ou le titre d'un article de journal).
Chaque page doit avoir une et une seule balise h1.
En termes d’attractivité pour l’utilisateur, c’est primordial. Mais pour la promotion SEO, .
Le titre est aussi un titre, mais il est écrit non seulement pour les personnes, mais aussi pour les robots. Il n'est pas affiché sur la page elle-même, mais uniquement dans l'onglet du navigateur et dans l'extrait en tant que lien actif vers le site. En fait, le titre est une alternative, mais le titre principal d'un document HTML. S'il manque, alors le moteur de recherche prend h1 comme base et l'utilise dans la faucille.
Pourquoi h1 devrait-il être différent de Title ?
Il est très important de comprendre que h1 et Title sont des titres différents. Et par conséquent, ils doivent être habilement combinés. Voici les bases sur ce sujet :
Négliger les règles d'unicité et de pertinence des titres peut entraîner le passage du site sous le filtre. Récemment, les moteurs de recherche ont commencé à accorder une attention particulière à la qualité du contenu et à ses paramètres de référencement. Les doublons, le spam excessif, le placement chaotique des titres et leur incohérence avec le contenu sont punissables.
Exigences de longueur H1
Il est recommandé de rendre H1 plus concis que le titre, sans dépasser le nombre de caractères supérieur à 50. Mais ce ne sera pas un désastre si le titre s'avère plus long, lorsqu'il n'est pas possible d'en presser toute l'essence dans le sens indiqué. nombre.
Des plugins spéciaux pour WordPress vous permettent d'analyser le remplissage correct de toutes les métas directement dans l'éditeur.
Règles pour écrire correctement h1
- Doit être unique pour l’ensemble du site et absolument lisible ;
- Ne se répète pas balise de titre, mais ne le contredit pas non plus ;
- Il ne faut pas le rendre trop long (vous pouvez rendre le titre plus volumineux) ;
- Utilisé une seule fois par page ;
- Pertinent par rapport au texte et reflète l'essence sémantique du matériel ;
- Intéressant et attractif pour l’utilisateur ;
- Vous ne pouvez pas mettre de point à la fin et il est recommandé d'utiliser au minimum les signes de ponctuation.
Application des clés
Principal Expressions-clés, tout d’abord, doit contenir un titre. Mais ils doivent aussi être écrits en h1. Dans les deux cas, il est préférable de le faire dès le début. Mais il vaudrait mieux que les mots-clés ne se dupliquent pas dans ces deux balises. Vous devez utiliser différentes formes de mots ou des occurrences diluées dans h1 et des occurrences directes dans le titre.
Certains prennent toutes les clés de la page et les utilisent pour créer une structure d'article. Notez tout de suite que sans PF sympas, une telle dispersion de clés dans les sous-titres sera punie par le filtre pour surspam.
Techniques psychologiques pour rédiger un titre attrayant
Le titre doit être accrocheur. Voici une vidéo de Maxim Ilyakhov, spécialiste dans le domaine des médias, recteur de l'École des rédacteurs et créateur du service Glavred :
Voici quelques « astuces » supplémentaires qui sont utilisées lors de la rédaction des titres.
Solution
N'oubliez pas qu'une personne ne recherche toujours pas d'informations ou de biens, mais avant tout une solution à ses problèmes, ses désirs, ses besoins. Abordez exactement le problème visé par le public cible
Un exemple de bon titre : « Vos cheveux tombent ? Stoppez votre chute de cheveux en une semaine."
Un exemple de mauvais titre : « Peut-on arrêter la chute des cheveux ? »
Dans le premier cas, nous identifions clairement le problème et proposons une solution spécifique. Dans le second cas, le problème est indirectement affecté et les options pour le résoudre sont floues.
Intrigue
Un exemple de bon titre : « Révéler le secret de la recette la plus efficace contre la chute des cheveux ».
Un exemple de mauvais titre : « La meilleure recette pour perdre les cheveux ».
Réception "examen"
Une phrase écrite sous cette forme interpelle le lecteur, l'invitant à se tester.
Un exemple de bon titre : « Êtes-vous sûr de lutter correctement contre la chute des cheveux ? »
Un exemple de mauvais titre : « Savez-vous tout sur la chute des cheveux ? »
Bien entendu, ce ne sont pas toutes les méthodes qui contribuent à influencer la perception d’une personne et à susciter son intérêt. Lisez des livres sur le marketing pour en savoir plus si ce sujet vous intéresse. D’ailleurs, le titre peut aussi être « tentant ». De plus, c'est très probablement lui qui est mis en évidence dans Résultats de recherche. Vous pouvez vérifier son affichage une fois la page indexée.
Pourquoi les sous-titres h2-h6 sont-ils nécessaires ?
Les balises de h2 à h6 sont situées dans le corps de l'article lui-même, le divisant structurellement en paragraphes thématiques, et dans le code du document HTML, mettant en évidence ses éléments significatifs. Ils sont également identifiés par des robots de recherche pour une analyse sémantique de la page.
Nécessaire pour désigner hiérarchiquement tout ce qui est important et ça vaut le coup d'oeil utilisateur sur la page. Cette structure aide une personne à naviguer rapidement dans les informations et à évaluer sa conformité à ses besoins.
h2 – concentre l’attention des utilisateurs et moteurs de recherche sur le contenu principal de l'article. Montre les éléments les plus significatifs du texte.
h3 est un sous-élément d'information relevant de H2, le révélant encore plus profondément.
h4, h5, h6 – sont définis comme des sous-titres imbriqués (révèlent en détail l’essence de H2 ou H3) et sont utilisés dans le texte pour mettre en évidence de petits points et des mots significatifs, ainsi que dans le menu, la barre latérale et d'autres composants du document Web.
Toutes les balises h doivent comporter moins de 50 caractères.
Comment écrire correctement les sous-titres h2-h6
- Il est impossible que le plus petit sous-titre soit présent sans un plus grand. Autrement dit, si le texte contient une balise méta h4, il doit alors être précédé de h2 et h3.
- Plus le niveau du titre est élevé, plus la police doit être grande. Dans WordPress, les paramètres par défaut sont généralement définis de manière à ce que les balises soient automatiquement formatées correctement.
- Toutes les balises h doivent correspondre au contenu du contenu et refléter l'essence de l'information.
- Il est inacceptable d'utiliser h1-h6 comme ancres ou liens actifs.
- Vous ne pouvez pas écrire d'autres balises à l'intérieur de la balise h.
- Seuls le texte et la ponctuation sont autorisés dans les balises h.
- Il ne devrait y avoir aucun spam dans les sous-titres mots clés. Il est préférable d'utiliser des mots-clés dans le titre, h1, h2, et dans les plus petits, tels que h3, h5, h6, de se concentrer sur une discussion détaillée du sujet.
Si la mise en page contient le titre et le titre principal H1, mais que le texte de l'article lui-même n'est pas trop volumineux et ne contient pas de sous-titres, ce n'est pas une erreur. Il y a un certain nombre de pages dans le TOP dont le contenu est presque une bande continue, peut-être divisée en paragraphes. Vous pouvez accéder à une position de leader sans « sorcellerie » sur le balisage du texte, en mettant davantage l'accent. Les sites WordPress sont facilement indexés par les moteurs de recherche. Néanmoins, l'utilisation de ces balises facilite non seulement la tâche, mais rend également le contenu plus facile et plus agréable pour la perception visuelle.
Comment remplir les balises h dans WordPress
h1 est généralement renseigné dans le champ au-dessus du texte du message :
Pour créer des sous-titres h2-h6, vous devez sélectionner l'élément souhaité et, en passant le curseur sur l'onglet « titres », sélectionner celui dont vous avez besoin en cliquant dessus. Faites de même pour chacun des sous-titres, en les incluant dans le format souhaité.
Il existe un moyen encore plus simple : vous pouvez saisir le texte dans Word en utilisant les balises nécessaires et simplement copier-coller l'article dans l'éditeur WordPress. Présenté dans Titres de mots apparaîtra automatiquement dans les bonnes tailles. Si nécessaire, vous pouvez les corriger grâce aux outils de l’éditeur du CMS WordPress.
Igor. Mise à jour : 6 octobre 2012.
Bonjour, chers lecteurs ! Je continue de publier dans la section et le post d'aujourd'hui sera consacré à la formation des titres html (balises h1-h6), ainsi qu'aux méthodes de formatage texte HTML en mettant en évidence les mots ou expressions nécessaires (balises strong, b; em, i) et les fragments de texte (blockquote, balises pre).
Je dois dire que ces outils sont très souvent demandés dans le travail d'un webmaster, j'ai donc jugé nécessaire d'en parler, d'autant plus que l'utilisation correcte de ce qui précède balises html contribue à la réussite de la promotion du projet. D'une manière générale, toutes les informations que je propose sont très importantes, leur volume est pensé, alors essayez de vous y familiariser au plus près, j'essaie de ne rien donner de superflu.
Cela s'applique à la fois à cette section sur les bases du HTML, ainsi que d'autres sections. Dans le cadre de cette section, nous avons déjà examiné le concept, ainsi que la définition. Permettez-moi de vous rappeler beaucoup règle importante: les balises de bloc peuvent en contenir d'autres éléments de bloc, cependant, il est fortement déconseillé de placer des balises de bloc dans des balises en ligne.
Balises de titre h1-h6
Je suis sûr que beaucoup d'entre vous ont déjà rencontré à plusieurs reprises les balises d'en-tête h1-h6, mais peut-être que certains sous-estiment leur importance d'un point de vue SEO. Le fait est que ces balises jouent un rôle important en la matière et j'essaierai également d'aborder cet aspect. Les éléments h1-h6 tirent leur nom de lettre capitale mot anglais"Entête" Syntaxe d'en-tête dans Code HTML comme suit:
Contenu de l'en-tête H1
Contenu de l'en-tête H2
Contenu de l'en-tête H3
contenu de l'en-tête h4
contenu de l'en-tête h5
contenu de l'en-tête h6
En écrivant ce morceau de code html lorsqu'il est affiché dans le navigateur, on obtient :
La plupart haut niveau 1, le plus bas - 6. Ainsi, n'importe quel texte peut être classé en fonction de son importance. Les balises h1-h6 sont des balises de bloc, donc le titre qu'elles définissent occupe tout l'espace de largeur possible. Cependant, même si ces éléments sont des éléments de bloc, ils ne doivent pas contenir d'autres balises de bloc, uniquement des balises en ligne. Lorsqu'il s'agit d'optimiser les articles et l'ensemble de la ressource dans son ensemble, il existe plusieurs recommandations :
- sont les plus importants du point de vue du classement par les moteurs de recherche, ils sont donc les plus demandés et les plus fréquemment utilisés. Il est recommandé d'utiliser le titre de la balise h1 une fois sur la page (généralement il se trouve sur la page avec l'article comme titre du post, sur mon blog c'est un peu faux jusqu'à présent, mais je vais arranger la situation ). Le titre h2 est utilisé pour les sous-titres, si le matériel est volumineux et doit être divisé en parties logiques, h3 - pour les sous-titres des fragments logiques de ces parties ; de plus, h2 et h3 peuvent être utilisés sur la page principale et les pages de catégories.
- Les balises h4, h5, h6 sont rarement utilisées, car mal prises en compte lors du classement. Cependant, si l'article est volumineux et qu'il est nécessaire de mettre en évidence certains fragments pour la commodité des lecteurs, alors ils viennent également à la rescousse (par exemple, dans un manuel volumineux, dans chacune des parties définies par l'élément h3, il est nécessaire de mettre en valeur les pièces logiques avec le sous-titre h4). De plus, les balises h4, h5, h6 peuvent être utilisées pour les noms de n'importe quel bloc dans la barre latérale, le pied de page (pied de page), etc.
- Il est conseillé d'utiliser impérativement les rubriques h1, h2, h3. Bien entendu, je n'ai pas analysé la sévérité des moteurs de recherche lorsque cette règle n'est pas respectée, mais il est logique de supposer que cela est pris en compte lors du classement.
- Il faut ajouter que le contenu des rubriques, notamment h1-h3, doit nécessairement comporter des mots-clés définis par , puisque les moteurs de recherche attachent une grande importance aux mots-clés et expressions.
Eh bien, bien sûr, l'utilisation de balises d'en-tête HTML, et c'est l'essentiel, rend le matériel plus pratique à comprendre pour les utilisateurs. Quant à l'attribut align des balises h1-h6, je n'en parlerai pas maintenant, car son utilisation n'est pas recommandée selon les règles de la spécification html. Nous parlerons de la façon de diversifier l'apparence des sous-titres en utilisant des méthodes acceptables qui n'enfreindront pas les règles lorsque nous commencerons à étudier.
Formatage du texte à l'aide de balises HTML spéciales
Formatage du texte- c'est le choix des moyens pour le modifier, comme éditer la police ou utiliser divers effets. Dans de nombreux cas, leur utilisation correcte contribue à la promotion du site Web.
Formatage logique et physique - caractéristiques d'utilisation de chacun d'eux
Permettez-moi de noter la différence entre les balises de formatage logique et physique (visuel). Physical est destiné principalement aux utilisateurs, ce qui leur permet de mettre en évidence pour eux des sections importantes du texte. Booléen met l'accent sur le texte sélectionné moteurs de recherche, qui prennent en compte cette zone lors du classement.
La plupart un exemple brillant serve strong et em, qui sont des balises de formatage logique, et respectivement b et i - formatage physique. Lors de l'affichage du texte encadré par les balises strong et b (gras), em et i (italique) dans le navigateur, il n'y a aucune différence visuelle :
Texte en gras pour les moteurs de recherche
Texte en gras pour les utilisateurs
Mettre le texte en italique pour les moteurs de recherche
Mettre le texte en italique pour les utilisateurs
La rumeur veut que la signification des balises strong et em soit Dernièrement est tombé sérieusement et moteurs de recherche on leur prête peu d'attention maintenant. Cependant, je ne recommanderais toujours pas de se laisser emporter par leur utilisation, en marquant des mots-clés avec eux, d'autant plus qu'il existe une alternative raisonnable sous la forme des éléments em et i.
Quelles autres balises existe-t-il qui vous permettent de formater le contenu du texte ?
Maintenant, quelques mots supplémentaires sur les autres balises de formatage de texte, qui sont extrêmement rarement utilisées, mais qui sont toujours nécessaires puisqu'elles existent. Peut-être que quelqu'un trouvera cette information utile. Comme d'habitude, je ne noterai que les balises conformes à la spécification HTML 5. Commençons par les balises de formatage physique (visuel) (les balises b et i sont évoquées ci-dessus).
- Petit - sert à réduire la taille de la police de un par rapport au texte normal.
Référencement
optimisation sites Web, blogs, portails.
Le sous-texte est affiché sous forme d'indice H
2 O - formule chimique de l'eau
Sup - afficher le texte en exposant X
2=Y - formule mathématique
Bien sûr, ce ne sont là que quelques-uns des éléments de formatage physique, mais j'ai choisi uniquement ceux qui sont valables par rapport à html 5, il est recommandé de remplacer le reste par des styles css, que je vous présenterai prochainement. Vous trouverez ci-dessous des exemples de balises de formatage logique.
- Abbr - indique que la séquence de caractères donnée est une abréviation. L'abréviation est déchiffrée à l'aide de l'attribut titre et apparaît lorsque vous déplacez le curseur sur le texte.
HTML - Langage Signalétique Hyper Text 
Citer - utilisé pour mettre en évidence des citations Tommy Dewar
Parfois, un pas en avant nécessite un pas en arrière.
Code - utilisé pour afficher divers codes, par exemple un code de script
(function() ( var request, b = document.body, c = "className", cs = "customize-support", rcs =new RegExp("(^|\\s+)(no-)?"+cs+" (\\s+|$)"); request = true; b = b.replace(rcs, ""); b += (window.postMessage && request ? " " : " no-") + cs; )() );
Suppr - sélectionne le texte en le supprimant. Très utile lorsque vous devez marquer du texte qui a été supprimé d'une nouvelle version d'un document. L'utilisation de cette balise vous permet de suivre les modifications apportées au texte. Toujours il n'y a pas eu de mises à jour Blog Ins - sélectionne le texte en le soulignant. Cela indique que ce morceau de texte a été inséré après la publication du document. Toujours il n'y a pas eu de mises à jour Blog, mais maintenant ce défaut va être corrigé
1 élément de liste à puces
2 éléments de liste à puces
3 éléments de liste à puces
Les balises de formatage logique et physique présentées ci-dessus ne sont souvent pas rencontrées lors de l'écriture de code HTML, mais leur connaissance est nécessaire au moins pour clarifier leur rôle dans la promotion de sites Web modernes. Ensuite, nous examinerons deux autres balises de formatage de texte HTML qui jouent un rôle important.
Comment insérer une citation à l'aide de blockquote et mettre en surbrillance un fragment de texte à l'aide de pre
La balise HTML blockquote est utilisée pour formater le texte, en mettant en évidence les citations dans un document. Il est assez courant et est souvent utilisé lors de la rédaction d’articles sur des sites Web et des blogs sur certains sujets. Voici un exemple :
La balise blockquote est une balise appariée et peut inclure à la fois des éléments de bloc (par exemple des balises de paragraphe p) et des éléments en ligne.
Un paragraphe de texte entouré d'une balise p
Un paragraphe de texte entouré d’une balise de formatage blockquote.
Il ne possède pas un ensemble d'attributs uniques, mais . Dans chaque thème, la conception de la citation dans le texte peut être différente, cela dépend du style et de la conception du modèle, qui sont déterminés par les styles CSS, que j'ai déjà mentionnés à plusieurs reprises et que nous aborderons certainement dans le futur proche.
Eh bien, et enfin, à propos d'un autre élément de formatage souvent demandé - tag pré. Cet élément permet d'afficher un morceau de texte pré-formaté directement dans le code HTML. La fonctionnalité d'affichage par défaut dans le navigateur est que n'importe quel nombre d'espaces qui apparaissent dans l'ordre sont rendus comme un seul sur la page Web. La balise pre permet de contourner cette fonctionnalité spécifique. Autrement dit, ce que vous avez écrit et comment sera reproduit avec précision sur la page si une section de texte est placée entre les balises pré d'ouverture et de fermeture.
Formatage du texte HTML à l'aide de la balise pré - éléments appariés et bloqués
Le texte apparaîtra exactement sous la même forme dans le navigateur :
Formatage du texte HTML à l'aide de la balise pré - éléments appariés et bloqués
Eh bien, c'est probablement tout ce dont je voulais parler aujourd'hui en ce qui concerne les balises de titre h1-h6, ainsi que les principaux éléments du formatage du texte HTML. Il y aura certainement une suite, alors assurez-vous de vous abonner aux mises à jour du blog afin de ne pas manquer les derniers documents. Bon, en conclusion, après un long article difficile, souriez en regardant nos petits frères :
Souhaitez-vous recevoir des articles frais, pertinents et utiles en temps opportun ? Ensuite vous pouvez vous abonner :
Plus d'articles sur ce sujet :
34 avis
- Sergueï
Merci pour l'article détaillé sur sujet actuel, mais des questions se posent immédiatement.
Tout d'abord, les titres, ou plutôt leur utilisation directe. Je suis tombé sur deux opinions.
1. Le code doit contenir le nom du site, - le titre de l'article, - les sous-titres. La balise doit être la seule sur la page.
2. - le titre de l'article et le nom du site, - les sous-titres.
Vous utilisez la première option, j’utilise la seconde, mais je ne peux pas justifier mon choix par moi-même, puisque c’est ce qu’ils ont conseillé.
Une autre question sur l'étiquette forte - encore une fois, il y a des rumeurs selon lesquelles les PS commencent à la traiter non seulement avec indifférence, mais avec hostilité, plus précisément en ce qui concerne la mise en évidence d'un mot ou d'une phrase clé. Une alternative consiste à mettre en évidence la phrase contenant la clé dans son intégralité.
À un moment donné, j'ai complètement abandonné cette balise, mais il est trop tôt pour parler des résultats.
- Sergueï
Je suis désolé, j'ai oublié que le moteur découpe les tags :
1. Le code h1 doit contenir le nom du site, h2 - le titre de l'article, h3 - les sous-titres. La balise doit être la seule sur la page.
2. - h1 est le titre de l'article et le nom du site, h2 est les sous-titres.
- Basilic
Igor, je n'arrive tout simplement pas à comprendre où se trouve la balise H1. Vous et moi avons une image dans l'en-tête. Vous avez cette balise là. Lors de l’analyse de mon site Web avec un service, on m’a finalement dit que je n’avais pas du tout de balise H1 sur mon site Web. Comment même l’insérer dans l’en-tête du site ?
- Igor
Sergey, une grande partie de ce qui concerne le référencement s'apprend dans la pratique grâce à des expériences. Je ne peux pas répondre définitivement ce moment Quoi de mieux, personne ne peut le faire. Il n’existe pas de solution universelle, tout dépend du thème de la ressource et de sa promotion. Mais je comprends votre inquiétude et votre désir de comprendre la vérité. Dès que j'aurai certaines données sur chaque article, je les publierai immédiatement. Quant à la balise forte, à mon avis, mettre en évidence des mots-clés ou des expressions une fois dans un article ne devrait pas faire de mal, tout cela est un battage médiatique inutile.
- Igor
Exactement. 🙂
- Igor
Vasily, j'ai écrit le titre dans les fonctions du thème directement dans le panneau d'administration. Apparence- Sujets, pour mon sujet il existe de nombreuses options avec lesquelles vous pouvez modifier telle ou telle zone de mon sujet, y compris la saisie d'un titre. Et si je comprends bien, vous avez modifié le titre initial de votre sujet, n'est-ce pas ? De plus, ils ont complètement changé l'image, et l'image portait déjà le nom de votre ressource. Vous n’avez pas écrit h1 dans l’en-tête, d’où ça vient ? Examinez de plus près les fonctions de votre thème, il existe peut-être également une fonction similaire. Là où se trouve « Gestion du thème », il devrait y avoir des liens, quelque chose comme « Personnaliser », « Options du thème » et déjà là, recherchez un lien comme « Nom et description du site ». Dans mon thème, par exemple, vous pouvez modifier beaucoup de choses, même les couleurs et l'en-tête du site Web, en téléchargeant une nouvelle image. Faites-moi savoir dans les commentaires comment cela s'est passé.
- Basilic
Oui, j'ai changé l'image dans l'en-tête. Retour sur le site de test image originale. Je n'ai toujours trouvé H1 nulle part. J'ai installé un thème twin très similaire, cette balise n'est pas là non plus, seulement H2. Peut-il y avoir des sujets sans balise H1 ? Ensuite j'ai installé un thème standard, je n'ai pas trouvé cette balise sur la page principale, mais sur la page il y a une balise H1 dans le titre de l'article. Mais je ne sais pas comment l'ajouter à l'en-tête du site.
- Igor
Vasily, lis plus attentivement ma réponse précédente et essaie de saisir le nom du site via le panneau d'administration. Il devrait y avoir une fonction de contrôle de thème, vous avez des styles pour l'en-tête h1 dans votre CSS, j'ai regardé.
- Basilic
DANS thème standard tout est. Il n’existe pas de telles options dans les paramètres du thème lui-même. À travers
Panneau d'administration -> Thèmes -> Paramètres et description du site. Là j'ai écrit le nom du site et
Brève description. Mais il n'y a toujours pas de balise h1. Je l'ai réinstallé sur le site de test
sujet, voici l'adresse http://komp.vellisa.ru/. Vous pouvez vous connecter via Yandex, car il est fermé
de l’indexation. Auparavant, lorsque j'écrivais le nom du site dans le panneau d'administration, il était ajouté à l'en-tête, mais cela n'avait pas l'air joli. Maintenant, pour une raison quelconque, les inscriptions ne sont pas ajoutées.
- Igor
Vasily, j'ai enquêté sur ton problème. Le fait est que, selon styles CSS Le titre de votre thème, entouré de balises h1, ne rentre tout simplement pas dans l'en-tête. Essayez ce qui suit. Si vous travaillez avec Navigateur Chrome, déplacez le curseur sur l'image dans l'en-tête et cliquez sur clic-droit des souris, de menu contextuel sélectionnez Afficher le code de l'article. Dans la moitié inférieure de la fenêtre, vous verrez le code HTML de cette image particulière ; cette ligne sera surlignée en bleu foncé. Ce lien renvoie à l'image d'en-tête de votre sujet. Sur la droite seront présentés les styles de cet élément particulier. Faites un clic droit sur ce lien et sélectionnez « Supprimer le nœud » dans le menu contextuel. Voyez-vous que l'élément a été supprimé ? J'espère que vous comprenez qu'après le redémarrage du navigateur, tout se mettra en place afin que vous puissiez expérimenter autant que vous le souhaitez. Cet élément est enfermé dans un conteneur<_div class="span-11">. Après avoir supprimé le lien vers les images, le lien vers page d'accueil. En guise d'ancre pour ce lien, écrivez n'importe quel mot entouré de balises h1, par exemple World. Autrement dit, cela ressemblera à ceci : un lien vers la page principale enfermé dans un conteneur span-11<_a_href vellisa.ru_=""><_h1>Monde<_><_>. Et immédiatement, vous verrez ce mot à la place de l'image (ce qui, d'ailleurs, n'est pas nécessaire, puisque le nom du sujet est là, si je comprends bien. Essayez de télécharger une image au lieu de cette image taille plus petite et essayez à nouveau de saisir le nom du site via le panneau d'administration. Si cela ne fonctionne pas, nous agirons de manière plus concrète.
- Basilic
Igor, merci beaucoup pour votre aide. J'ai supprimé l'élément, mais on ne sait pas très bien comment l'insérer. J’ai inséré ce mot au hasard, ça n’a pas vraiment marché, mais le mot était là. Je n'arrive pas à écrire des modifications sur le nom du site, je le change, mais rien ne s'affiche dans l'en-tête.
Est-il généralement possible de s'assurer que sur mon site principal j'ai toujours l'image qui s'y trouve actuellement et d'ajouter d'une manière ou d'une autre des balises h1 ?
- Igor
Vasily, un peu de patience, je suis trop occupé maintenant, dès que j'aurai résolu le problème, je ne le promets pas, mais j'essaierai d'aider, je posterai la réponse dans les commentaires.
- Basilic
Merci Igor. Bien sûr, j'attendrai, ce n'est pas urgent.
- Eugène
Je suis d’accord que les balises sont une chose nécessaire et que les ignorer coûte plus cher pour vous-même. Si H1 H2 apparaît presque automatiquement sur la page (le titre de l'article et du site), alors H3 doit être écrit vous-même dans le corps de l'article.
L'attribut align de ces balises est une option controversée. Je n’ai pas encore remarqué son influence sur la promotion, il est plus probable qu’elle n’existe pas. Il n’y a pas non plus de violation de la validité. Donc je suppose que c'est à la discrétion de chacun.
- Igor
Evgeniy, il n'y a pas encore vraiment d'influence sur la promotion de l'attribut align, mais quant à la validité, vous vous êtes laissé emporter. Son utilisation n'est pas recommandée non seulement selon la spécification HTML 5, mais même selon HTML 4.01. Au lieu de cet attribut, il est recommandé d'utiliser une propriété text-align similaire, écrite en CSS.
- Igor
Vasily, désolé d'avoir dû attendre si longtemps. Je viens de décharger un peu et maintenant j'ai résolu votre problème. Suivez mes instructions supplémentaires pour faire apparaître l'en-tête H1 dans l'en-tête. Vous devez d’abord modifier votre image d’en-tête. Vous pouvez le trouver ici : http://vellisa.ru/wp-content/themes/cooltext643525798.png, c'est-à-dire dans le dossier avec le thème actuel. Téléchargez-le sur votre ordinateur en utilisant, par exemple. Ouvrez-le dans n'importe quel éditeur graphique, même simple programme de peintureça ira. Là, effacez l'inscription « vellisa.ru » avec une simple gomme. Si cela n'est pas fait, il y aura une double inscription, ou l'inscription avec h1 la chevauchera et aura l'air moche. Ensuite, ouvrez le fichier header.php, qui est responsable de l'en-tête, à l'aide de notepad++, recherchez-y la ligne.
Balises de titre
...devrait être sur chaque page du site. L'importance de chaque rubrique dépend du numéro :
- les balises de titre les plus importantes
- moins significatif que le premier
...
- dernier en importance
Ces balises doivent être traitées avec prudence car elles ont un impact plus important sur le classement d'un site. Avec une utilisation appropriée des balises
...Il est souvent possible d’obtenir de bonnes positions sur un site Web grâce à des requêtes portant uniquement sur des facteurs internes. Et la situation inverse : en cas d'utilisation incorrecte, vous pouvez être sanctionné par les moteurs de recherche. Dans cet article, nous expliquerons comment utiliser correctement ces balises.
Syntaxe des balises ..
Le titre de l'article
Sous-titre1
...
Sous-titre2
Sous-titre3_1
...
Sous-titre3_N
Sous-titre3
etc.
Chaque titre a une taille différente par défaut. Par exemple, code
Rubrique h1
Cap h2
Titre h3
Rubrique h4
Cap h5
Rubrique h6
La page se transforme en ceci :
Signification des balises ..
En termes de poids et d'importance dans la promotion d'un site Web, les balises d'en-tête h1-h6 occupent la deuxième place après la balise
. À bien des égards, les règles de création d’un titre sont similaires à celles de h1.</p>
<h2>Règles d'utilisation de la balise <h1></h2>
<ul><li>Étiqueter <h1>doit être présent en un exemplaire sur chaque page du site. Cette règle ne devrait pas poser de questions, car chaque page du site ne doit avoir qu'un seul nom. Et s'il n'y a pas de nom du tout, alors pourquoi une telle page est-elle nécessaire ?</li>
<li>Titre <h1>devrait être quelque part en haut du code html de la page</li>
<li><h1>doit être unique au sein du site, c'est-à-dire Il ne devrait pas être possible que certaines pages portent le même nom</li>
<li>Le titre doit refléter l'essence de l'article et ne pas être très long.</li>
<li>Ne doit contenir aucun autre élément que le titre de la page (c'est-à-dire que vous ne pouvez pas utiliser de liens, de span, d'éléments de police, d'images, etc. à l'intérieur du h1)</li>
<li>Il est déconseillé d'utiliser des titres à d'autres fins. Par exemple, dans les modèles, les balises h3 sont souvent utilisées pour les titres « Balises » et « Commentaires » dans les barres latérales. Ce n'est pas correct. Les balises de titre doivent être utilisées dans l'article pour structurer correctement le contenu et aider à la fois les moteurs de recherche et <a href="https://rokwell.ru/fr/ustroistvo-kompyuternyh-blokov-pitaniya-i-metodika-ih-testirovaniya/">utilisateurs ordinaires</a> comprenez rapidement l'article.</li>
<li>Il est conseillé d'utiliser des en-têtes sans paramètres de classe et d'identifiant</li>
<li>Il est important de respecter la hiérarchie des balises de titre. Ce point doit être discuté plus en détail.</li>
</ul><h2>L'importance de la hiérarchie <h1>..<h6></h2>
<p>Dans le code html de la page, la première balise doit être <h1>. Vous ne pouvez pas créer un titre en premier <h2>, Alors <h1>. Idem avec les autres numéros d'étiquette. Voici la bonne utilisation des balises :</p>
<blockquote><h1
>Le titre de l'article</h1
>
...
<h2
></h2
>
<h3
></h3
>
<h4
></h4
>
...
<h4
></h4
>
<h3
></h3
>
...
<h3
></h3
>
<h2
></h2
>
...
<h2
></h2
>
<h3
></h3
>
</blockquote>
<p>Ceux. Chaque balise inférieure est toujours imbriquée dans une balise supérieure. C'est la bonne hiérarchie. Dans le même temps, des transitions brusques de <h1>sur <h4>, Avec <h2>sur <h5>et ainsi de suite.</p>
<p>En plus de cette hiérarchie, vous devez également respecter une hiérarchie en termes de tailles de police. Ceux. les titres les plus importants devraient avoir une police plus grande. Bien que personne n'ait encore annoncé de preuves confirmant que les moteurs de recherche analysent les styles contenus dans les fichiers .css, il existe une telle règle secrète parmi les webmasters et les optimiseurs.</p>
<p><b>Le titre peut-il <h1>Et <title>coïncider?</b>
<br>C’est une question qui fait actuellement débat. D'une part, il est logique que <title>Et <h1>coïncidé. Mais d’un autre côté, c’est comme dupliquer le titre de la page. En général, le plus souvent les titres seront différents, car dans <h1>Il n’est guère possible ni significatif d’écrire les mots « Acheter, prix, photo », mais dans le titre, ces mots sont utilisés au contraire. Pour répondre à la question, faites en sorte que tout soit clair pour l'utilisateur et paraisse naturel.</p>
<p><b>Combien de titres peut-il y avoir ? <h2>, <h3>?
</b>
<br>Balises de titre <h2>
-<h6>il peut y en avoir plusieurs sur la page, tout dépend de la taille du contenu. La quantité de contenu par rubrique doit être adéquate. En d’autres termes, il ne faudrait pas qu’après l’en-tête <h2>il y a 5 phrases, puis encore <h2>et encore un petit paragraphe. Dans de tels cas, il est probablement préférable de ne pas utiliser du tout les balises head.</p>
<p>Ne confondez pas les balises d'en-tête <head>et h1-h6. Certains sont nécessaires au robot de recherche, d'autres au robot de recherche et aux utilisateurs.</p>
<p>Bonjour à tous! <br>Il s’agit d’un travail complexe qui nécessite une attention particulière à chaque détail. Même une utilisation incorrecte des titres (balises H1, H2, H3) sur les pages d’un site Web peut interférer avec la promotion normale dans les moteurs de recherche. Aujourd'hui, nous allons parler de cela.</p>
<p>Tout ce qui est décrit dans les leçons ci-dessus vous sera utile aujourd'hui.</p>
<h2>Règles de titre</h2>
<p>Dans le monde du SEO, il existe certaines règles d'utilisation des balises H1, H2, H3 et inférieures, qu'il serait conseillé de suivre sur toutes les pages :</p>
<ul><li>Il ne doit y avoir qu'un seul titre de premier niveau (H1) sur la page ;</li>
<li>Le titre H1 ne doit pas coïncider avec le titre de la page ;</li>
<li>Les titres H2, H3, H4 ne doivent être utilisés que dans l'article ;</li>
<li>Les titres ne doivent utiliser que des expressions utiles, c'est-à-dire que les balises H1...H6 ne doivent pas contenir d'expressions dénuées de sens, telles que : avis, abonnement, commentaires, etc. ;</li>
<li>Maintenez une hiérarchie de titres. Le titre du deuxième niveau doit être inférieur à H1, le titre du troisième niveau doit être inférieur <b>d'abord</b> H2. Si c'est différent, alors <a href="https://rokwell.ru/fr/kak-rabotaet-poiskovyi-robot-poiskovyi-robot-poiskovye-roboty-google/">robot de recherche</a>, qui ne voit que le code HTML, n'interprétera pas la page correctement, ce qui n'est pas ce que nous souhaitons.</li>
</ul><p>J'ai déjà écrit brièvement sur ces règles dans une leçon dédiée à. Assurez-vous de le lire, il y a beaucoup d'informations utiles là-bas !</p>
<h2>Comment savoir si les en-têtes sont utilisés correctement ?</h2>
<p>Connaissez-vous le navigateur ? <a href="https://rokwell.ru/fr/the-home-page-of-mozilla-firefox-home-page-in-mozilla-firefox/">Mozilla Firefox</a>? Peut-être oui. Ainsi, ce navigateur, grâce à un plugin doté de bonnes fonctionnalités, offre d'excellentes opportunités d'analyse des pages. Le nom de ce plugin est <a href="https://rokwell.ru/fr/yandeks-elementy-skachat-i-ustanovit-bar-v-firefox-internet-explorer-opera-i-chrome/">Barre RDS</a>. Vous pouvez le télécharger à partir de ce lien, mais vous devez le faire dans Firefox, donc si <a href="https://rokwell.ru/fr/hameleon-vkontakte-dai-dostup-tor-brauzer-chto-eto-takoe-i-kakim/">ce navigateur</a> Vous ne l’avez pas installé, téléchargez-le rapidement et installez-le.</p>
<p>La barre RDS peut être installée sur d'autres navigateurs, mais dans Mozilla Firefox, ses fonctionnalités sont beaucoup plus larges.</p>
<p>Avant de passer à l'analyse des pages du site, nous devons faire <a href="https://rokwell.ru/fr/wlan---chto-takoe-i-kak-nim-polzovatsya-kak-podklyuchit-i-osushchestvit-nastroiku-wlan/">petits réglages</a> dans le plugin :</p>
<img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/nastrojki-rds.png' height="131" width="255" loading=lazy loading=lazy><p>Maintenant, nous pouvons facilement voir combien de balises H1, H2, H3 se trouvent sur la page, nous verrons les titres inutiles et nous saurons ce qui doit être modifié. Vous pouvez voir toute cette splendeur en cliquant sur le bouton Balises SEO dans la barre RDS, que vous venez d'activer : <img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/seo-tegi.png' height="181" width="244" loading=lazy loading=lazy></p>
<p>Dès que vous cliquerez sur ce bouton, un petit message apparaîtra sous vos yeux : <br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/meta-tegi-i-zagolovki.png' width="100%" loading=lazy loading=lazy></p>
<p>Cet article présente le titre H1 et plus encore. Comme vous pouvez le constater, sur les pages de mon blog, tout va bien, puisque j'ai résolu ce problème il y a une semaine, mais sur le site du client, tout est bien pire.</p>
<p>Je vais lister les erreurs :</p>
<ol><li>Duplication entre rubriques H2 et H5 ;</li>
<li>Pas de titres de troisième niveau ;</li>
<li>Il y a des déchets dans H4.</li>
</ol><p>Il y a beaucoup de travail à faire, je vais donc démontrer la correction des erreurs à l'aide d'un exemple. Je vais essayer de changer les balises H5 en H3 pour conserver la hiérarchie des titres.</p>
<h2>Comment corriger les erreurs ?</h2>
<p>Pour cela, j'aurai besoin des fichiers du site (), Notepad++ et Mozilla Firefox.</p>
<ol><li>Pour savoir exactement où se situe la balise problématique et sa <a href="https://rokwell.ru/fr/chto-takoe-stil-stilevoe-formatirovanie-abzacev-konspekt-po/">cours de style</a>, vous devez utiliser l'outil Explorer les éléments intégré au navigateur : <img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/issledovat-element.png' height="246" width="342" loading=lazy loading=lazy>Passez la souris sur un élément spécifique, cliquez dessus avec le bouton droit et sélectionnez Explorer l'élément. Une zone apparaîtra en bas de la fenêtre où vous pourrez voir à la fois la classe de style de l'élément HTML et ses styles CSS : <br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/kod-issledovat-element.png' align="center" width="100%" loading=lazy loading=lazy></li>
<li>Regardez la classe de style de l'élément dont vous avez besoin et copiez-la pour la retrouver plus tard dans le code de la page. Dans mon cas, la classe de titre H2 est page-box__title : je souhaite changer le niveau de titre H5 en H3 car H5 répertorie les mots-clés pertinents.</li>
<li>Ensuite, vous devez trouver un élément avec cette classe dans le dossier du site, pour ce faire, nous utiliserons les fonctions intégrées, à savoir la recherche de fichiers. Ouvrez Notepad++, dans <a href="https://rokwell.ru/fr/oformit-gruppu-v-kontakte-samostoyatelno-kak-oformit-gruppu-v-kontakte-s/">menu principal</a> Recherchez l'élément « Rechercher » et sélectionnez « Rechercher dans les fichiers » dans le menu déroulant : <img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/najti-v-fajlah.png' height="248" width="367" loading=lazy loading=lazy></li>
<li>Dans le champ « Rechercher » je saisis la classe de style du titre de cinquième niveau (page-box__title), et dans le champ « Dossier » j'indique le chemin d'accès au dossier avec le site : <br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/poisk-v-failah.png' width="100%" loading=lazy loading=lazy>Après avoir cliqué sur le bouton « Rechercher tout », le processus de recherche de fichiers commencera : <br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/process-poiska.png' width="100%" loading=lazy loading=lazy></li>
<li>Au bas de la fenêtre de travail de Notepad++, les résultats de la recherche seront présentés, parmi lesquels se trouve le même titre de cinquième niveau (H5) avec la classe « page-box__title » : <br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/zagolovok-v-poiske.png' width="100%" loading=lazy loading=lazy>Pour accéder directement au fichier qui contient <a href="https://rokwell.ru/fr/kak-otsortirovat-tablicu-v-excel-po-ubyvaniyu-sortirovka-v-excel-osnovnye-svedeniya/">ce titre</a>, assez à faire <a href="https://rokwell.ru/fr/mnogokratnoe-nazhatie-knopki-myshi-virus-odinarnyi-dvoinoi/">double-cliquez</a> par résultat de recherche ;</li>
<li>Ensuite, je change juste les balises <h5></h5>aux balises <h3></h3>:Assurez-vous de sauvegarder le fichier ;</li>
<li>Voyons le résultat sur le site : <br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/zagolovki-na-saite.png' width="100%" loading=lazy loading=lazy>Ça n'a pas l'air très bien.</li>
<li>Pour rendre les en-têtes normaux, vous devez apporter des modifications au fichier de style (style.css). Puisque les en-têtes donnés dans l'exemple sont enfermés dans une balise <a>, alors la règle dans style.css ressemblera probablement à ceci : .page-box__title > a (sélecteur enfant). Une recherche dans Notepad++ a également trouvé ceci : <br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/style-zagolovka.png' width="100%" loading=lazy loading=lazy>Vous devez ajouter la propriété font-size (taille de police) à la règle de style avec la valeur souhaitée. Dans mon cas, la taille de police optimale serait de 14 px : <br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/razmer-shrifta.png' width="100%" loading=lazy loading=lazy></li>
<li>Voyons le résultat : <br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/rezultat-izmenenj.png' width="100%" loading=lazy loading=lazy>Comme vous pouvez le constater, les en-têtes s'affichent désormais normalement.</li>
</ol><p>Nous travaillons de la même manière avec les autres en-têtes. Une fois que vous avez terminé, n'oubliez pas de pousser vos modifications sur le serveur. Cela peut être fait via FileZilla, dont j'ai parlé</p>
<p>Le titre dans le texte est un outil qui rend l'information pratique pour les lecteurs et la structure pour les moteurs de recherche. Avec une conception correcte des balises H1 à H6, il sera plus facile de placer la page de votre site en première position dans les résultats de recherche.</p>
<p>C'est par les rubriques SEO que Google et Yandex déterminent dans quelle mesure le sujet de votre page coïncide avec les requêtes saisies par les utilisateurs. En d’autres termes, quelle est la pertinence de cette page. La pertinence d’une page est l’un des principaux facteurs de la promotion SEO.</p>
<p>h1 est le sous-titre principal d'un article, qui est généralement placé au-dessus du texte.</p>
<p>h2-h6 - petits sous-titres placés selon le principe d'imbrication.</p>
<h2><span>Rubrique principale h1</span></h2>
<p>Le titre de la page le plus important est marqué de la balise h1. Cela peut être le titre d'une page, d'un article ou d'un produit. Il s'agit d'un en-tête obligatoire et doit être présent sur toutes les pages du site sans exception. Très souvent, je constate qu'il n'y a tout simplement pas de balise h1 ou qu'il y en a plusieurs. A la place du titre de la page, au lieu de h1, il y a une balise h2. C'est même dans le meilleur des cas - il arrive qu'il n'y ait aucun titre de type H sur la page. Et ce qui ressemble à un en-tête n'est qu'un bloc div ou span ordinaire avec des styles pré-écrits adaptés à l'en-tête.</p>
<p>Chaque page de votre site contient des informations spécifiques (du moins, cela devrait). Vous placerez l'essentiel de l'information dans le titre. Par exemple, si vous vendez des téléviseurs 3D, alors le titre de la page doit ressembler à la requête principale et ressortir dans le code html de la page avec la balise h1.</p>
<h3><span>Exigences de base pour h1</span></h3>
<ul><li>Doit être présent sur la page <b>seulement un</b> rubrique de premier ordre (rubrique 1, h1). Il s'agit du titre principal, visible par l'utilisateur et reflétant l'essence clé du message.</li>
<li>Le titre H1 apparaît toujours au début du texte.</li>
<li>La longueur du titre ne doit pas dépasser 65 caractères.</li>
<li>H1 doit être unique au sein de votre site.</li>
<li>La balise H1 ne doit pas être un lien, une image, etc. Le titre doit être un titre.</li>
<li>Essayez d'inclure le mot-clé le plus fréquent dans votre H1.</li>
</ul><h2>Cap h2</h2>
<p>Si beaucoup adhèrent encore aux règles et utilisent h1 sur les pages de leur site, alors beaucoup négligent la balise h2, mais en vain ! Cette balise marque généralement les sous-sections d’un article ou d’une page.</p>
<p>Même au stade de la collecte du noyau sémantique pour le site dans son ensemble ou pour un article séparé, vous devez comprendre approximativement de quelles sections sera composé l'article. Allons-nous décrire en détail les avantages, le coût ou tout autre détail sur le sujet de l'article ou du produit.</p>
<p>Par exemple, des pages de produits dans un magasin de télévision - si le titre h1 de la page ressemble à « TV Panasonic TX-75EXR780 », alors avec la balise h2, nous diviserons grossièrement la description du produit lui-même sur la page en parties (sous-sections) et ressemblent à « Caractéristiques du téléviseur Panasonic TX-75EXR780 » et « Avantages du téléviseur Panasonic TX-75EXR780 ».</p>
<p>Ainsi, en utilisant les en-têtes h2, nous capturerons des points importants qui peuvent également intéresser le visiteur du site en plus du titre lui-même. Désormais, le site sera en concurrence avec d'autres non seulement sur les demandes concernant le principal « Panasonic TX-75EXR780 », mais également sur des demandes supplémentaires concernant les avantages et les caractéristiques de ce modèle de téléviseur. Et couvrir davantage de demandes signifie à son tour une augmentation du trafic vers le site.</p>
<p>Parfois, un titre comme h2 se retrouvait dans l’extrait des résultats de recherche. En règle générale, h1 ou title y vont - ce sont tous deux les titres de page les plus importants et ils ont un avantage, mais l'influence de h2 sur l'extrait est également possible.</p>
<h3><span>Exigences de base pour h2</span></h3>
<ul><li>Il est conseillé d'avoir 2 à 4 titres H2 sur la page. Doit refléter l’essence du texte ultérieur.</li>
<li>La requête la plus fréquente se trouve dans l’en-tête H1, les moins fréquentes se trouvent de préférence dans H2.</li>
<li>La balise H2 ne doit pas être un lien, une image, etc. Le titre doit être un titre.</li>
</ul><h2>Rubriques h3-h6</h2>
<p>Tous les titres commençant par h3 et jusqu'à h6 ont un rôle de clarification et de division en sous-sections, mais cela est extrêmement rarement utilisé. Il suffit d'avoir un article très volumineux pour pouvoir construire une telle hiérarchie de sous-sections de page et utiliser tous les types de titres.</p>
<h3><span>Exigences de base pour h3-h6</span></h3>
<ul><li>Il est impossible que le plus petit sous-titre soit présent sans un plus grand. Autrement dit, si le texte contient une balise méta h4, il doit alors être précédé de h2 et h3.</li>
<li>Plus le niveau du titre est élevé, plus la police doit être grande. Dans WordPress, les paramètres par défaut sont généralement définis de manière à ce que les balises soient automatiquement formatées correctement.</li>
<li>Toutes les balises h doivent correspondre au contenu du contenu et refléter l'essence de l'information.</li>
<li>Il est inacceptable d'utiliser h1-h6 comme ancres ou liens actifs.</li>
<li>Vous ne pouvez pas écrire d'autres balises à l'intérieur de la balise h.</li>
<li>Seuls le texte et la ponctuation sont autorisés dans les balises h.</li>
<li>Les sous-titres ne doivent pas contenir de spam par mot clé. Il est préférable d'utiliser des mots-clés dans le titre, h1, h2, et dans les plus petits, tels que h3, h5, h6, de se concentrer sur une discussion détaillée du sujet.</li>
</ul><h2></h2>
<p>Tous les titres doivent être dans un ordre strict. Le premier titre de la page est toujours h1.</p>
<p>Si les sous-sections de chacun des titres h2 se révèlent être d'une taille impressionnante et qu'elles touchent plusieurs sous-thèmes encore plus petits, alors à l'intérieur de chaque ou d'une sous-section distincte avec la balise h2, vous créez des « mini » sous-sections pliées de la page et les marquez. avec h3.</p>
<p>Il n'est pas nécessaire que toutes les sous-sections portant la balise h2 soient volumineuses et elles doivent être divisées en plusieurs sous-sections supplémentaires.</p>
<p>Voici un exemple d’une bonne hiérarchie de titres tirée d’un article sur la promotion d’un site Web sur WordPress :</p>
<h2><span>Comment remplir les balises h dans WordPress</span></h2>
<p>h1 est par défaut renseigné dans le champ au dessus de l'article :</p>
<p>Pour créer des sous-titres h2-h6, vous devez sélectionner l'élément souhaité ou placer le curseur sur la ligne souhaitée et, en passant le curseur sur l'onglet « titres », sélectionner celui souhaité en cliquant dessus.</p>
<p>Il existe un moyen encore plus simple : vous pouvez saisir le texte dans Word en utilisant les balises nécessaires et simplement copier-coller l'article dans l'éditeur WordPress. Les titres sélectionnés dans Word apparaîtront automatiquement dans les tailles requises. Si nécessaire, vous pouvez les corriger grâce aux outils de l’éditeur du CMS WordPress.</p>
<p>Un placement correct des titres dans les balises h1, h2, h3, h4, h5, h6 peut donner d'excellents résultats pour le référencement du site. Ne perdez donc pas de temps à vous installer.</p>
<p>Les titres h1-h6 sont extrêmement importants. Il ne faut pas les négliger, mais il ne faut pas non plus en abuser. Les titres peuvent faire ou défaire un site.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<footer>
<div class="td-post-source-tags">
</div>
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/zagolovki-h1-h6-detalnyi-obzor-primery-sostavlyaem-pravilnyi-h1-i/" content="https://rokwell.ru/zagolovki-h1-h6-detalnyi-obzor-primery-sostavlyaem-pravilnyi-h1-i/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span>
<meta itemprop="name" content="Заголовки h1-h6: детальный обзор, примеры. Составляем правильный h1 и структуру подзаголовков">
</span>
<meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2012/10/zagolovki-html.jpg">
<meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer>
</article>
<style>
.ads-border {
overflow: hidden;
}
.ads-content {
width: 930px;
display: block;
}
@media(max-width: 1140px) {
.ads-content {
width: 910px;
}
}
@media(max-width: 1018px) {
.ads-content {
width: 970px;
}
}
@media (max-width: 767px) {
.ads-content {
width: 134%;
}
}
@media (max-width: 479px) {
.ads-content {
width: 100%;
height: 490px;
}
}
</style>
<div class="ads-block">
<h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">ARTICLES LIÉS</span></h4>
<div class="ads-border">
<div class="ads-content">
<div id="fofuny1" style="height:90px;width:690px;" align="center"></div>
</div>
</div>
</div>
<style>
#mc-container {
padding: 10px;
}
</style>
<dblock></dblock>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary">
<div class="td-ss-main-sidebar">
<aside class="widget widget_text" id="text-23">
<div class="block-title"><span>Utile</span></div>
<div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-24">
<div class="block-title"><span>Publicité</span></div>
<div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-25">
<div class="textwidget">
<p style="text-align: center;">
</p>
</div>
</aside>
<aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4">
<div class="block-title"><span>Nouveau</span></div>
<dblock></dblock>
<div class="rpwe-block ">
<ul class="rpwe-ul">
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kak-vklyuchit-rezhim-vosstanovleniya-na-android-kak-voiti-v-recovery-mode-rezhim/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/tablet-pro.ru/wp-content/uploads/2017/09/Kak-zayti-v-menyu-Recovery-na-Android.jpg" alt="Comment entrer en mode de récupération sur n'importe quel appareil Android" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-vklyuchit-rezhim-vosstanovleniya-na-android-kak-voiti-v-recovery-mode-rezhim/" title="Comment entrer en mode de récupération sur n'importe quel appareil Android" rel="bookmark">Comment entrer en mode de récupération sur n'importe quel appareil Android</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kak-pravilno-otklyuchat-paket-treh-uslug-u-operatora-bilain/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/mobiletarifs.com/wp-content/uploads/2017/05/111-1024x629.jpg" alt="Comment désactiver un package de trois services Beeline : méthodes simples Numéro de connexion d'un package de trois services Beeline" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-pravilno-otklyuchat-paket-treh-uslug-u-operatora-bilain/" title="Comment désactiver un package de trois services Beeline : méthodes simples Numéro de connexion d'un package de trois services Beeline" rel="bookmark">Comment désactiver un package de trois services Beeline : méthodes simples Numéro de connexion d'un package de trois services Beeline</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kakie-byvayut-arhivy-arhiv---chto-takoe-tipy-arhivov-vosstanovlenie/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/ok-t.ru/studopediaru/baza9/500693497209.files/image005.gif" alt="Quels types d’archives existe-t-il ? Archiver - qu'est-ce que c'est ? Types d'archives. Récupération de données à l'aide d'un assistant" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kakie-byvayut-arhivy-arhiv---chto-takoe-tipy-arhivov-vosstanovlenie/" title="Quels types d’archives existe-t-il ? Archiver - qu'est-ce que c'est ? Types d'archives. Récupération de données à l'aide d'un assistant" rel="bookmark">Quels types d’archives existe-t-il ? Archiver - qu'est-ce que c'est ? Types d'archives. Récupération de données à l'aide d'un assistant</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/pochemu-na-samsung-gt-s5230-ne-rabotaet-sensor-samsung-s5230-ne-rabotaet-sensor-ne-rabotaet/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/kazizilkree.com/wp-content/uploads/2017/10/op.jpg" alt="Le capteur Samsung S5230 ne fonctionne pas L'écran Samsung s5230 ne fonctionne pas" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/pochemu-na-samsung-gt-s5230-ne-rabotaet-sensor-samsung-s5230-ne-rabotaet-sensor-ne-rabotaet/" title="Le capteur Samsung S5230 ne fonctionne pas L'écran Samsung s5230 ne fonctionne pas" rel="bookmark">Le capteur Samsung S5230 ne fonctionne pas L'écran Samsung s5230 ne fonctionne pas</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/proverit-vse-blokirovki-na-samsung-s5230-razblokirovanie/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/kazizilkree.com/wp-content/uploads/2017/08/1499002711_33_how-to-bypass-androids-lock-screen-pattern-pin-or-password.jpg" alt="Déverrouiller votre téléphone Samsung Star GT-S5230" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/proverit-vse-blokirovki-na-samsung-s5230-razblokirovanie/" title="Déverrouiller votre téléphone Samsung Star GT-S5230" rel="bookmark">Déverrouiller votre téléphone Samsung Star GT-S5230</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/prilozheniya-dlya-java-telefonov-samsung-5610-programmy-dlya-telefona/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/solvusoft.com/update/images/logo-microsoft-silver-stacked.jpg" alt="Applications pour téléphones Java Samsung 5610" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/prilozheniya-dlya-java-telefonov-samsung-5610-programmy-dlya-telefona/" title="Applications pour téléphones Java Samsung 5610" rel="bookmark">Applications pour téléphones Java Samsung 5610</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/videonablyudenie-s-pomoshchyu-android-smartfona-kak-ispolzovat/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/strana-sovetov.com/wp-content/uploads/2015/04/kak-ispolzovat-telefon-kak-veb-kameru-4.jpg" alt="Comment utiliser un smartphone (téléphone) comme webcam Un smartphone comme webcam sur un ordinateur" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/videonablyudenie-s-pomoshchyu-android-smartfona-kak-ispolzovat/" title="Comment utiliser un smartphone (téléphone) comme webcam Un smartphone comme webcam sur un ordinateur" rel="bookmark">Comment utiliser un smartphone (téléphone) comme webcam Un smartphone comme webcam sur un ordinateur</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/skachat-odin-proshivka-smartfonov-samsung-proshivka-android-ustroistv-samsung-pri/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/vebtech.ru/wp-content/uploads/2017/03/Odin_1.jpg" alt="Firmware pour les appareils Samsung Android utilisant Odin Comment télécharger le firmware officiel Samsung Android" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/skachat-odin-proshivka-smartfonov-samsung-proshivka-android-ustroistv-samsung-pri/" title="Firmware pour les appareils Samsung Android utilisant Odin Comment télécharger le firmware officiel Samsung Android" rel="bookmark">Firmware pour les appareils Samsung Android utilisant Odin Comment télécharger le firmware officiel Samsung Android</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kak-proshit-android-samsung-s-pomoshchyu-odin-kak-proshit-telefon-samsung/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/lumpics.ru/wp-content/uploads/2017/04/Samsung-Kies-zagruzit-s-of.-sayta.png" alt="Comment flasher un téléphone Samsung - firmware du smartphone Télécharger Android 5" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-proshit-android-samsung-s-pomoshchyu-odin-kak-proshit-telefon-samsung/" title="Comment flasher un téléphone Samsung - firmware du smartphone Télécharger Android 5" rel="bookmark">Comment flasher un téléphone Samsung - firmware du smartphone Télécharger Android 5</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<div class="td-footer-wrapper td-footer-template-3">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12">
</div>
</div>
<div class="td-pb-row">
<div class="td-pb-span3 logo-footer">
<div class="td-footer-info">
<div class="footer-logo-wrap"><a href="https://rokwell.ru/fr/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Site sur l'informatique" title="Site sur l'informatique" / loading=lazy loading=lazy></a></div>
<div class="footer-text-wrap"></div>
<div class="footer-social-wrap td-social-style-2"></div>
</div>
<aside class="widget widget_text" id="text-16">
<div class="textwidget">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div>
</aside>
</div>
<div class="td-pb-span9 footer-discription">
<aside class="widget widget_text" id="text-5">
<div class="textwidget">
<p>
<font size="2" color="grey">
</font>
</p>© Site Web sur la technologie informatique, 2024</div>
</aside>
</div>
</div>
</div>
</div>
<div class="td-sub-footer-container">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12 td-sub-footer-menu">
<div class="td-sub-footer-main">
<div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/feedback/">Retour</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/sitemap.xml">Plan du site</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">À propos du site</a></li>
</ul></div> </div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("span.ancored").replaceWith(function () {
$this = jQuery(this);
href = $this.attr("title");
text = $this.html();
return '<a href="' + href + '">' + text + '</a>';
} )
} )
</script>
<link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' />
<link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' />
<script type='text/javascript' src='/assets/jquery.form.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript' src='/assets/front.min.js'></script>
<script type='text/javascript' src='/assets/imagesloaded.min.js'></script>
<script type='text/javascript' src='/assets/masonry.min.js'></script>
<script type='text/javascript' src='/assets/jquery.masonry.min.js'></script>
<script type='text/javascript' src='/assets/rsvp.js'></script>
<script type='text/javascript' src='/assets/tagdiv_theme.js'></script>
<script type='text/javascript' src='/assets/comment-reply.min.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ;
</script>
<script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<style type='text/css'>
/*** Shortcodes Ultimate - box elements ***/
/* Common styles
---------------------------------------------------------------*/
.su-clearfix:before,
.su-clearfix:after {
display: table;
content: " ";
}
.su-clearfix:after { clear: both; }
/* Tabs + Tab
---------------------------------------------------------------*/
.su-tabs {
margin: 0 0 1.5em 0;
padding: 3px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #eee;
}
.su-tabs-nav span {
display: inline-block;
margin-right: 3px;
padding: 10px 15px;
font-size: 13px;
min-height: 40px;
line-height: 20px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
color: #333;
cursor: pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.su-tabs-nav span:hover { background: #f5f5f5; }
.su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; }
.su-tabs-nav span.su-tabs-disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
.su-tabs-pane {
padding: 15px;
font-size: 13px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
background: #fff;
color: #333;
}
.su-tabs-vertical:before,
.su-tabs-vertical:after {
content: " ";
display: table;
}
.su-tabs-vertical:after { clear: both; }
.su-tabs-vertical .su-tabs-nav {
float: left;
width: 30%;
}
.su-tabs-vertical .su-tabs-nav span {
display: block;
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.su-tabs-vertical .su-tabs-panes {
float: left;
width: 70%;
}
.su-tabs-vertical .su-tabs-pane {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-tabs-nav span { display: block; }
.su-tabs-vertical .su-tabs-nav {
float: none;
width: auto;
}
.su-tabs-vertical .su-tabs-panes {
float: none;
width: auto;
}
}
/* Spoiler + Accordion
---------------------------------------------------------------*/
.su-spoiler { margin-bottom: 1.5em; }
.su-spoiler .su-spoiler:last-child { margin-bottom: 0; }
.su-accordion { margin-bottom: 1.5em; }
.su-accordion .su-spoiler { margin-bottom: 0.5em; }
.su-spoiler-title {
position: relative;
cursor: pointer;
min-height: 20px;
line-height: 20px;
padding: 7px 7px 7px 34px;
font-weight: bold;
font-size: 13px;
}
.su-spoiler-icon {
position: absolute;
left: 7px;
top: 7px;
display: block;
width: 20px;
height: 20px;
line-height: 21px;
text-align: center;
font-size: 14px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.su-spoiler-content {
padding: 14px;
-webkit-transition: padding-top .2s;
-moz-transition: padding-top .2s;
-o-transition: padding-top .2s;
transition: padding-top .2s;
-ie-transition: padding-top .2s;
}
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: none;
opacity: 0;
}
.su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; }
.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; }
.su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; }
.su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; }
.su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; }
.su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; }
.su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; }
.su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; }
.su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; }
.su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; }
.su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; }
.su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; }
.su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; }
.su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; }
.su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; }
.su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; }
.su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; }
.su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; }
.su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; }
.su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; }
.su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; }
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; }
.su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; }
.su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; }
.su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; }
.su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; }
.su-spoiler-style-default { }
.su-spoiler-style-default > .su-spoiler-title {
padding-left: 27px;
padding-right: 0;
}
.su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; }
.su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; }
.su-spoiler-style-fancy {
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
color: #333;
}
.su-spoiler-style-fancy > .su-spoiler-title {
border-bottom: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f0f0f0;
font-size: 0.9em;
}
.su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; }
.su-spoiler-style-fancy > .su-spoiler-content {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.su-spoiler-style-simple {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.su-spoiler-style-simple > .su-spoiler-title {
padding: 5px 10px;
background: #f0f0f0;
color: #333;
font-size: 0.9em;
}
.su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; }
.su-spoiler-style-simple > .su-spoiler-content {
padding: 1em 10px;
background: #fff;
color: #333;
}
/* Quote
---------------------------------------------------------------*/
.su-quote-style-default {
position: relative;
margin-bottom: 1.5em;
padding: 0.5em 3em;
font-style: italic;
}
/*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */
.su-quote-style-default:before,
.su-quote-style-default:after {
position: absolute;
display: block;
width: 20px;
height: 20px;
background-image: url('../images/quote.png');
content: '';
}
.su-quote-style-default:before {
top: 0;
left: 0;
background-position: 0 0;
}
.su-quote-style-default:after {
right: 0;
bottom: 0;
background-position: -20px 0;
}
.su-quote-style-default .su-quote-cite {
display: block;
text-align: right;
font-style: normal;
}
.su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; }
.su-quote-style-default .su-quote-cite a { text-decoration: underline; }
/* Pullquote
---------------------------------------------------------------*/
.su-pullquote {
display: block;
width: 30%;
padding: 0.5em 1em;
}
.su-pullquote-align-left {
margin: 0.5em 1.5em 1em 0;
padding-left: 0;
float: left;
border-right: 5px solid #eee;
}
.su-pullquote-align-right {
margin: 0.5em 0 1em 1.5em;
padding-right: 0;
float: right;
border-left: 5px solid #eee;
}
/* Row + Column
---------------------------------------------------------------*/
.su-row {
clear: both;
zoom: 1;
margin-bottom: 1.5em;
}
.su-row:before,
.su-row:after {
display: table;
content: "";
}
.su-row:after { clear: both; }
.su-column {
display: block;
margin: 0 4% 0 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.su-column-last { margin-right: 0; }
.su-row .su-column { margin: 0 0 0 4%; }
.su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; }
.su-row .su-column:first-child { margin-left: 0; }
.su-column-centered {
margin-right: auto !important;
margin-left: auto !important;
float: none !important;
}
.su-column img,
.su-column iframe,
.su-column object,
.su-column embed { max-width: 100%; }
@media only screen {
[class*="su-column"] + [class*="su-column"]:last-child { float: right; }
}
.su-column-size-1-1 { width: 100%; }
.su-column-size-1-2 { width: 48%; }
.su-column-size-1-3 { width: 30.66%; }
.su-column-size-2-3 { width: 65.33%; }
.su-column-size-1-4 { width: 22%; }
.su-column-size-3-4 { width: 74%; }
.su-column-size-1-5 { width: 16.8%; }
.su-column-size-2-5 { width: 37.6%; }
.su-column-size-3-5 { width: 58.4%; }
.su-column-size-4-5 { width: 79.2%; }
.su-column-size-1-6 { width: 13.33%; }
.su-column-size-5-6 { width: 82.66%; }
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-column {
width: 100% !important;
margin: 0 0 1.5em 0 !important;
float: none !important;
}
.su-row .su-column:last-child {
margin-bottom: 0 !important;
}
}
/* Service
---------------------------------------------------------------*/
.su-service {
position: relative;
margin: 0 0 1.5em 0;
}
.su-service-title {
display: block;
margin-bottom: 0.5em;
color: #333;
font-weight: bold;
font-size: 1.1em;
}
.su-service-title img {
position: absolute;
top: 0;
left: 0;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.su-service-title i {
position: absolute;
top: 0;
left: 0;
display: block !important;
width: 1em;
height: 1em;
text-align: center;
line-height: 1em;
}
.su-service-content { line-height: 1.4; }
/* Box
---------------------------------------------------------------*/
.su-box {
margin: 0 0 1.5em 0;
border-width: 2px;
border-style: solid;
}
.su-box-title {
display: block;
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.1em;
}
.su-box-content {
background-color: #fff;
color: #444;
padding: 1em;
}
.su-box-style-soft .su-box-title {
background-image: url('../images/styles/style-soft.png');
background-position: 0 0;
background-repeat: repeat-x;
}
.su-box-style-glass .su-box-title {
background-image: url('../images/styles/style-glass.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-bubbles .su-box-title {
background-image: url('../images/styles/style-bubbles.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-noise .su-box-title {
background-image: url('../images/styles/style-noise.png');
background-position: 0 0;
background-repeat: repeat-x;
}
/* Note
---------------------------------------------------------------*/
.su-note {
margin: 0 0 1.5em 0;
border-width: 0px;
border-style: solid;
}
.su-note-inner {
padding: 1em;
border-width: 0px;
border-style: solid;
box-shadow: 3px 3px 6px #d0d0d0;
}
/* Expand
---------------------------------------------------------------*/
.su-expand { margin: 0 0 1.5em 0; }
.su-expand-content { overflow: hidden; }
.su-expand-link {
margin-top: 0.5em;
cursor: pointer;
}
.su-expand-link:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.su-expand-link a,
.su-expand-link a:hover,
.su-expand-link a:active,
.su-expand-link a:visited,
.su-expand-link a:focus {
display: inline;
text-decoration: none;
background: transparent;
border: none;
}
.su-expand-link-style-default .su-expand-link a,
.su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; }
.su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; }
.su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; }
.su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; }
.su-expand-link-style-button .su-expand-link a {
display: inline-block;
margin-top: 0.2em;
padding: 0.2em 0.4em;
border: 2px solid #333;
}
.su-expand-link-more { display: none; }
.su-expand-link-less { display: block; }
.su-expand-collapsed .su-expand-link-more { display: block; }
.su-expand-collapsed .su-expand-link-less { display: none; }
.su-expand-link i {
display: inline-block;
margin: 0 0.3em 0 0;
vertical-align: middle;
color: inherit;
}
.su-expand-link img {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.3em 0 0;
vertical-align: middle;
}
/* Lightbox content
---------------------------------------------------------------*/
.su-lightbox-content {
position: relative;
margin: 0 auto;
}
.mfp-content .su-lightbox-content,
#su-generator .su-lightbox-content { display: block !important; }
.su-lightbox-content-preview {
width: 100%;
min-height: 300px;
background: #444;
overflow: hidden;
}
.su-lightbox-content h1,
.su-lightbox-content h2,
.su-lightbox-content h3,
.su-lightbox-content h4,
.su-lightbox-content h5,
.su-lightbox-content h6 { color: inherit; }
/* Common margin resets for box elements
---------------------------------------------------------------*/
.su-column-inner > *:first-child,
.su-accordion > *:first-child,
.su-spoiler-content > *:first-child,
.su-service-content > *:first-child,
.su-box-content > *:first-child,
.su-note-inner > *:first-child,
.su-expand-content > *:first-child,
.su-lightbox-content > *:first-child { margin-top: 0; }
.su-column-inner > *:last-child,
.su-tabs-pane > *:last-child,
.su-accordion > *:last-child,
.su-spoiler-content > *:last-child,
.su-service-content > *:last-child,
.su-box-content > *:last-child,
.su-note-inner > *:last-child,
.su-expand-content > *:last-child,
.su-lightbox-content > *:last-child { margin-bottom: 0; }
</style>
<script>
(function(){
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/assets/style2.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
} );
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
} );
}
} )();
</script>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
