Titlurile și structura unei pagini

Modulul 3: Baza tehnică a unei pagini · Timp de citire: 11 minute

Obiectivul lecției: După această lecție puteți construi o pagină cu un titlu principal clar și subtitluri logice, puteți explica ce fac Google și cititoarele de ecran cu titlurile și puteți scrie texte alt și nume de fișiere bune pentru imagini.

Concepte cheie: titlu (<h1> până la <h6>), titlu principal, subtitlu, sărirea unui nivel, HTML semantic, cititor de ecran, text formatat care nu este titlu, text alt, alt="" gol pentru decorațiuni, nume de fișier, text în imagini

Titlurile sunt cuprinsul paginii dumneavoastră

Nimănui nu îi place să citească un text lung fără subtitluri. Pe internet, acest lucru este și mai pronunțat: vizitatorii parcurg mai întâi pagina din priviri și citesc abia când văd că răspunsul se află acolo. Titlurile ajută în acest sens. Dar titlurile sunt mai mult decât litere mari și îngroșate. În HTML, ele sunt elemente separate, cu un nivel:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

(Exemplul este în neerlandeză: buchete de mireasă la comandă, cum lucrăm, prima întâlnire, buchetul de probă, exemple, întrebări frecvente.) <h1> este titlul principal: despre ce este această pagină? Elementele <h2> sunt capitolele, elementele <h3> sunt secțiunile din interiorul lor și așa mai departe, până la <h6>. Indentarea de mai sus are doar rolul de a ilustra structura; în HTML-ul real nu contează.

Două grupuri citesc cu adevărat această structură:

1. Persoanele care folosesc un cititor de ecran. Un vizitator nevăzător sau cu deficiențe de vedere cere adesea cititorului de ecran să enumere mai întâi toate titlurile, apoi sare la secțiunea pe care o caută. Fără titluri reale, pagina este un singur bloc lung de text.
2. Motoarele de căutare. Google folosește titlurile pentru a înțelege despre ce sunt diferitele părți ale unei pagini.

Ce spune Google despre titluri

Circulă multe mituri despre titluri. Iată ce spune Google însuși:

• Ghidul SEO pentru începători al Google arată că ordinea titlurilor nu contează pentru Google Search și că nu există un număr magic de titluri pe care trebuie să îl aibă o pagină. Titlurile într-o ordine logică sunt însă foarte utile pentru cititoarele de ecran.
• John Mueller de la Google a spus într-un videoclip (2019) că sistemele Google nu au nicio problemă cu mai multe titluri <h1> pe o pagină. Google încearcă să lucreze cu HTML-ul așa cum este: un singur <h1>, mai multe sau doar text formatat fără titluri reale.
• În documentația despre linkurile de titlu (lecția 3.1), Google menționează totuși o situație care poate crea probleme: lipsa unui titlu principal clar. Dacă în partea de sus există mai multe titluri mari și vizibile și nu este clar care este titlul principal, Google poate avea dificultăți în alegerea unui link de titlu bun. Google recomandă ca titlul principal să fie clar diferențiat, de exemplu ca primul <h1> vizibil.

Concluzia acestui curs: un singur <h1> clar pe pagină este un obicei bun, nu pentru că altfel Google v-ar penaliza, ci pentru că astfel pagina spune clar tuturor despre ce este. Cititorii, cititoarele de ecran și Google nu o pot rata. De aceea, verificarea din exercițiul A3.2 afișează verde pentru exact un <h1> care nu este gol, portocaliu pentru mai mult de unul și roșu dacă nu există niciunul.

Ce merge adesea prost

Construirea unei pagini care oferă răspunsuri

O ordine bună pentru aproape orice pagină:

1. Titlul principal (<h1>), care spune ce găsește vizitatorul aici. Adesea seamănă cu titlul paginii din lecția 3.1, dar nu trebuie să fie identic. Titlul paginii apare în rezultatele căutării, titlul principal pe pagina însăși.
2. O scurtă introducere, care oferă imediat cel mai important răspuns.
3. Subtitluri (<h2>) pentru fiecare subiect, formulate ca ceva ce caută cititorul: "Cât costă un buchet de mireasă?" spune mai mult decât "Prețuri".
4. Unde este nevoie, <h3> sub un <h2>, nu separat.

Lecția 7.3 tratează mai pe larg scrierea propriu-zisă. Aici ne ocupăm de schelet.

Imagini: textul alt și numele fișierului

Un motor de căutare nu "vede" o fotografie așa cum o vedeți dumneavoastră. Google folosește viziunea computerizată, dar extrage multe informații din textul din jur. Google numește el însuși cea mai importantă sursă: textul alt.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Textul alt (text alternativ) are două roluri:

• Accesibilitate: un cititor de ecran îl citește cu voce tare celor care nu pot vedea imaginea. Dacă imaginea nu se poate încărca, browserul îl afișează în locul fotografiei.
• Înțelegere: Google folosește textul alt, împreună cu viziunea computerizată, pentru a înțelege ce apare în imagine. Acest lucru ajută mai ales în Google Images.

Iată cum scrieți un text alt bun:

• Descrieți ce se vede și de ce imaginea se află pe această pagină, într-o singură propoziție scurtă.
• Folosiți cuvinte cheie doar dacă se potrivesc în mod natural. Google avertizează că textele alt umplute cu cuvinte cheie oferă o experiență proastă și pot fi considerate spam.
• O imagine care este doar decorativă (o linie, un model de fundal) primește un alt gol: alt="". Astfel, cititorul de ecran o sare. Un atribut alt lipsă este altceva: în acest caz, un cititor de ecran citește uneori numele fișierului.
• Dacă imaginea conține text important (un program de funcționare, un preț, un pliant), puneți acel text și direct pe pagină. Textul dintr-o imagine este greu de citit pentru un cititor de ecran și pentru un motor de căutare.

Și numele fișierului ajută puțin. Google recomandă nume scurte și descriptive și dă ca exemplu de evitat image1.jpg sau pic.gif. bruidsboeket-pioenrozen-wit.jpg spune mai mult decât IMG_4032.jpg.

Viteza și dimensiunile imaginilor sunt tratate în lecția 4.3.

În practică: titlurile în constructoarele de site-uri

• În AI Builder de la WebOké, primul titlu al unei pagini devine automat <h1>, iar toate titlurile următoare devin <h2>. Astfel, fiecare pagină are exact un titlu principal. La fiecare fotografie puteți completa o descriere; aceasta devine textul alt. Verificarea SEO vă avertizează în cazul fotografiilor fără descriere.
• În WordPress, în editorul de blocuri alegeți nivelul (H1 până la H6) la blocul Titlu. De obicei, tema transformă deja titlul paginii în <h1>; în text folosiți atunci H2 și niveluri inferioare. Textul alt îl completați la imagine, în biblioteca media sau în bloc.

Alte constructoare de site-uri funcționează în mod similar. Dacă aveți dubii, uitați-vă în codul sursă (Ctrl+U) sau căutați cu Ctrl+F după <h1.

Rezumat

• Titlurile (<h1> până la <h6>) sunt cuprinsul paginii dumneavoastră, pentru cititori, cititoare de ecran și motoare de căutare.
• Google nu are nicio problemă cu mai multe <h1> sau cu o altă ordine, dar recomandă un titlu principal clar. Un singur <h1> clar este un obicei bun.
• Alegeți nivelul în funcție de structură, nu de mărimea literelor; de preferință, nu săriți niveluri.
• Un text alt bun descrie pe scurt ce se vede; decorațiunile primesc alt=""; fără înșiruiri de cuvinte cheie.
• Textul important trebuie să fie pe pagină, nu doar într-o imagine.

Test

Exercițiu

Exercițiul A3.2: Un singur titlu principal și o structură logică. Introduceți adresa unei pagini de pe propriul site. Programul descarcă pagina, numără titlurile <h1> și afișează structura titlurilor sub formă de cuprins. Vedeți dacă există exact un titlu principal care nu este gol, dacă sunt sărite niveluri și câte imagini nu au atribut alt. Completați în prealabil câte <h1> credeți că există. Nu aveți un site propriu? Folosiți www.rijksoverheid.nl.

Resurse suplimentare

• Google Search Central, Ghidul SEO pentru începători (titluri, text alt): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Cele mai bune practici pentru imagini: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (titluri accesibile): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Texte alt: https://www.w3.org/WAI/tutorials/images/