Cum se utilizează corect etichetele de antet HTML

Fiecare site web este propriul său monstru unic, dezvoltatorii și designerii punându-și propriile voci de semnătură în cod. Dar un element pe care fiecare site web îl are în comun este etichetele de titlu HTML. Aceste titluri nu numai că împart conținutul în secțiuni mai lizibile, ci creează conturul semantic al site-ului dvs., astfel încât motoarele de căutare și software-ul de accesibilitate să poată spune exact ce conținut alcătuiește site-ul. Ocazional există o anumită confuzie cu privire la utilizarea și funcționarea corectă a etichetelor de titlu HTML, așa că dorim să parcurgem toate cele 6 niveluri și să discutăm cum și când să le folosim corect.

Abonați-vă la canalul nostru Youtube

De ce să folosiți etichete de titlu HTML?

Așa cum am spus mai sus, aceste etichete creează scheletul site-ului dvs. Fără ele, nu numai că titlul și scopul site-ului dvs. sunt mai puțin clare, dar conținutul arată utilizatorilor și roboților ca și cum ar fi un perete uriaș de text - chiar dacă îl separați folosind paragrafe.

În plus, cititoarele de ecran și software-ul de accesibilitate le folosesc pentru a naviga prin conținutul dvs. (uneori la propriu). Deci, dacă nu includeți etichete de titlu HTML, site-ul dvs. devine inaccesibil pentru mulți oameni, deoarece pur și simplu nu se pot deplasa în pagină și conținut.

În plus, motoarele de căutare și alte crawler-uri web care ajung la site-ul dvs. navighează și prin titlurile dvs. Recent, Google a luat în considerare semantica codului în clasamentul său, ceea ce înseamnă că intenția de căutare este cântărită foarte mult. Etichetele dvs. de titlu HTML reprezintă o parte importantă a acestui lucru, spunând Google și vizitatorilor unde se află pe pagină să găsească informații specifice, organizate în funcție de importanța ierarhică.

Și fiecare etichetă din pagina dvs. ajută toate acestea în felul său.

Ierarhia etichetelor este importantă

Contează moștenirea etichetei de titlu HTML. Ordinea în care utilizați aceste etichete poate face sau rupe SEO pentru site-ul dvs. În timp ce le puteți stiliza folosind CSS și puteți face o etichetă H6 mai mare, mai îndrăzneață și mai strălucitoare decât un H2, ar trebui totuși să încercați să le păstrați în ordine, astfel încât să nu confundați crawlerele (și cititorii).

Gândiți-vă la etichete în ordine crescătoare ca și cum ar fi titlurile pentru schița postării dvs. Ar trebui să puneți (în general) un număr mai mare sub predecesorul său imediat. Puteți să le cuibăriți cât de mult doriți, dar asigurați-vă că îl puneți pe următorul doar în ordine de fiecare dată.

Iată un exemplu:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

S-ar putea să apară cazuri specifice în care aveți un singur H6 peste un H4, dar în cea mai mare parte, Google și alte motoare de căutare determină prioritatea subiectului și evaluează eficiența conținutului pentru a căuta intenția, utilizând titluri pentru a naviga în conținutul dvs.

Etichete H1

Eticheta H1 poate fi cea mai simplă dintre etichetele de titlu HTML, fiind, de asemenea, una dintre cele mai neînțelese. În majoritatea cazurilor, veți vedea titlul H1 ca titlul unei anumite pagini sau postări. Este ceea ce vor afișa (probabil) motoarele de căutare în rezultate. Probabil că browserul dvs. va afișa acest lucru în bara de titlu, deși multe plugin-uri SEO și aplicații similare vă permit să îl schimbați pentru acestea. Din această cauză, deși este important să aveți fraza cheie țintă în eticheta H1, nu este 100% necesar. Scrieți titlurile și titlurile dvs. semantic pentru a acoperi intenția de căutare a vizitatorilor în loc de a completa cuvintele cheie cu etichetele de titlu HTML.

Imaginea de mai sus prezintă o etichetă H1 utilizată ca titlu de intrare pentru un articol de pe blogul Elegant Themes. Este și singura etichetă H1 de pe pagină. Acest lucru indică faptul că este subiectul conținutului de pe pagină.

De ani de zile, practica standard a fost să aibă o etichetă H1 (și numai una) pe pagină. În cea mai mare parte, acesta este încă un sfat bun. Google și alte motoare de căutare accesează cu crawlere pagina dvs. și caută eticheta H1. Apoi îl folosesc pentru a determina subiectul, titlul și structura.

Cu toate acestea, Google a spus în mod explicit că dacă aveți mai multe etichete de titlu HTML H1 pe site-ul dvs. nu se aplică nicio penalizare SEO. Asta nu înseamnă să le înnebunești folosindu-le peste tot pe site-ul tău, dar ceea ce înseamnă este că poți folosi mai mult de una pe pagină atunci când apare nevoia.

Când se utilizează mai multe titluri H1

Singurul scop al unui H1 este de a indica o secțiune completă pe un singur subiect. Asta înseamnă că, dacă aveți o singură pagină care are mai multe subiecte, ați dori să utilizați un H1 pentru fiecare subiect nou de pe pagina respectivă. Dacă faceți acest lucru, veți spune Google că pagina dvs. nu se referă doar la subiectul din titlu. Dar ar putea exista, de asemenea, o secțiune despre un subiect complet diferit (dar înrudit) mai jos.

Pe site-urile web cu o singură pagină, acest lucru este, de asemenea, important, deoarece este posibil să aveți o secțiune Despre, prețuri, contact și portofoliu pe acea pagină. Deci, cum să anunțați Google că conținutul conținut în fiecare secțiune este propria unitate autonomă?

Tag-uri H1, așa este. Tratați fiecare secțiune ca și cum ar fi propria sa mini-pagină web, folosind ierarhia pe care am discutat-o ​​mai sus în fiecare. În acest fel, Google vede titlurile pe măsură ce navighează pe pagină și poate determina apoi din care secțiuni să extragă fragmente prezentate (și așa mai departe) pentru a răspunde la întrebările căutătorilor.

De asemenea, puteți alege să utilizați o etichetă H1 de fiecare dată când utilizați o etichetă de secțiune pe site-ul dvs., dar vă sugerăm să faceți acest lucru numai atunci când este o secțiune de importanță paralelă cu titlul paginii, mai degrabă decât una subordonată.

Etichete H2

Etichetele H2, acum, vor fi cel mai probabil cea mai utilizată etichetă de titlu HTML pe paginile dvs. Și din motive întemeiate. Cele mai multe postări și pagini de pe internet constau dintr-un singur subiect, cu doar câteva subtitluri. Vă recomandăm ca fiecare conținut pe care îl creați să conțină cel puțin o etichetă H2. Yoast și alte pluginuri SEO sugerează un titlu aproximativ la fiecare 300 de cuvinte. În funcție de conținutul dvs., pentru asta sunt folosite etichetele H2.

Acestea separă subiectele (sau pașii) pentru a ușura citirea. De exemplu, majoritatea postărilor noastre constau în principal din titluri H2 (cu H3 când este cazul). Asta pentru că articolele noastre se referă la un singur subiect, în care încercăm să rezolvăm o singură problemă. Vom avea titlul, cum ar fi How to Use OBS Studio to Livestream as H1, dar subtitrările precum „Cum să începi cu OBS Studio” vor fi în H2.

Eticheta H2 reprezintă pași individuali care se referă direct la subiectul H1. În postarea respectivă am folosit următoarea structură:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Etichetele de titlu H2 din această postare trec peste ideile principale, cum ar fi pornirea și descărcarea acestuia, configurarea software-ului real și apoi ajustarea modului în care ecranul dvs. apare pentru spectatori. Deși există pași implicați și sub cei din H3, titlurile H2 indică imaginea pe scară largă a articolului. Sunt o imagine de nivel înalt pe care crawlerele și cititorii vor putea să o scaneze pentru a vedea dacă articolul conține informațiile pe care le caută.

În general, veți avea mai multe etichete H2 pe articol, în timp ce este posibil să nu aveți subpoziții imbricate sub ele. Dacă pagina sau postarea dvs. se referă la un singur subiect care nu este împărțit în secțiuni cu subsecțiuni precum exemplul de mai sus, ar fi mai bine să aveți mai multe etichete H2 decât H2 imbricate -> H3 -> H4, deoarece acestea vă indică crawlerele vă scufundați mai adânc pe un suptopic decât să vă extindeți pe subiectul principal al postării.

Etichete H3

Etichetele H3, pe de altă parte, sunt locul în care articolele dvs. pot să cuprindă detaliile subiectului dvs. Nu trebuie să utilizați niciodată aceste etichete H3 direct sub un H1. Googlebots și motoarele de căutare le văd absolut ca subpoziții. În timp ce H2 este acceptat ca fiind un titlu principal pentru secțiuni dintr-un singur articol (cu H1 declarând subiectul principal ca titlu, amintiți-vă).

Dacă vă uitați atent la imaginea de mai sus, veți vedea că stilul real și dimensiunea dintre etichetele noastre H2 și H3 nu sunt teribil de diferite. Din motive, nu vrem să presupunem prin scanare că orice punct pe care îl facem într-un H3 este mai puțin important decât un H2. Pentru că nu este.

Este doar de dimensiuni mai mici pentru a indica faptul că este un punct subordonat față de H2, mai degrabă decât o legătură directă cu subiectul general, care este cel mai important din punct de vedere structural în ceea ce privește SEO pentru articolul dvs. Pentru cititorii umani, mai degrabă decât roboții, distincția vizuală îi ajută pur și simplu să le mute pe pagină și să descompună informațiile pentru a analiza mai ușor.

Etichete H4, H5, H6

Le-am adunat împreună dintr-un motiv. În general, veți fi greu de găsit orice site-uri care să utilizeze pe deplin gama H1 la H6 de etichete de titlu HTML. De departe, cea mai populară structură este H1 până la H3. La fel cum rar vezi o schiță de conținut care depășește al doilea nivel imbricat.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

În cea mai mare parte, eticheta H4 va avea același scop ca H3. Le veți folosi pentru a intra în detalii pentru pași și exemple, dar întotdeauna cuibărite sub titlurile dvs. principale. În general, designerii le stilizează cu CSS mai mic decât H3. Ei tind să vadă o utilizare limitată în crearea de conținut obișnuit. Un subiect tinde să fie foarte aprofundat dacă ideile trebuie defalcate astfel încât să fie necesară o etichetă de titlu H4.

H5 și H6

Puteți utiliza titlurile H5 și H6, în câteva moduri diferite.

Prima cale

(Doar pentru un exemplu, am împărțit această secțiune specială în diferite părți prin rubrică și suntem acum sub H4, deoarece este un sub-subtopic al articolului principal.)

Aceste titluri sunt adesea folosite în cuprins și liste similare, deși funcția lor principală este, din punct de vedere tehnic, aceeași ca și celelalte, delimitând subiecte de importanță descendentă de-a lungul paginii. Va fi destul de rar să găsiți un document cu o gamă completă de titluri până la H6.

A doua cale

Unii oameni folosesc etichetele H5 și H6 ca titluri de formatare „de specialitate”. Vor aplica CSS speciale acestor două etichete de titlu HTML, care este complet diferit de la H1 la H4. Apoi le puteți folosi pentru a atrage atenția asupra subiectelor și ideilor care altfel ar putea fi trecute cu vederea.

Aceasta nu este cea mai bună practică din punct de vedere tehnic, deoarece titlurile sunt ierarhizate. Cu toate acestea, dacă site-ul dvs. este bine structurat în general și utilizați H5 și H6 cu moderație ca stiluri de specialitate pe anumite pagini sau postări individuale, aproape cu siguranță nu veți primi niciun rezultat SEO.

Amintiți-vă că, chiar și atunci când le utilizați pentru formatare specială, nu ieșiți din ierarhie. Păstrați-le în ordine. Deci, dacă utilizați H6 pentru a crea un titlu secundar, asigurați-vă că următorul pe care îl utilizați este un H1 sau H2 pentru a arăta că v-ați mutat înapoi la structura standard.

Ce nu trebuie făcut cu etichetele de antet HTML

Nu structurați o singură pagină cu întreaga ierarhie a titlurilor până la capăt. Sunteți mai bine cu un H1 pentru un titlu și pentru toate H2-urile, mai degrabă decât să fiți cuibărite fiecare titlu succesiv.

Da:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Nu:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

În plus, nu doriți să utilizați titlurile la întâmplare. Folosiți-le numai în ordine. În caz contrar, crawlerele nu vor avea nici o idee despre cum să navigheze pe pagina dvs. și nici software-ul de accesibilitate.

Nu:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

În general, puteți presupune că un crawler va ști că ați ieșit dintr-o subsecțiune când găsește următorul H1 sau H2. În fragmentul de cod de mai sus, crawlerelor și roboților le-ar fi greu să analizeze structura informațiilor.

Încheierea cu etichete de antet HTML

Si vezi? Ne-am întors la un titlu H2 pentru a încheia lucrurile. Etichetele de titlu sunt un element important al fiecărui site web. Folosirea lor corectă poate crește clasamentul motorului dvs. de căutare, precum și UX-ul site-ului dvs., deoarece vizitatorii vor putea găsi mai ușor informațiile pe care le caută în conținutul dvs. Nu uitați să nu fiți siguri că cuvintele cheie conțin prea multe titluri. Deși este o idee bună să includeți cuvintele cheie sau expresiile pe care le discutați pentru a vă asigura că ideile dvs. sunt clare, Googlebots și alții sunt destul de inteligenți și vă pot da seama când ați schimbat subiectele sau când sunteți pe același. În general, utilizarea etichetelor de titlu HTML este extrem de importantă, dar dacă aveți în vedere doar câteva lucruri, site-urile dvs. vor străluci în cel mai scurt timp.

Ați folosit corect etichetele de titlu HTML?

Imagine prezentată de articol de VectorV / shutterstock.com