Címsorok és az oldal felépítése

Modul 3: Egy oldal technikai alapjai · Olvasási idő: 11 perc

Tanulási cél: A lecke végére Ön fel tud építeni egy oldalt egyértelmű főcímmel és logikus alcímekkel, el tudja magyarázni, mit kezd a Google és a képernyőolvasó a címsorokkal, és jó alt szövegeket és fájlneveket tud írni a képekhez.

Kulcsfogalmak: címsor (<h1>-től <h6>-ig), főcím, alcím, szint kihagyása, szemantikus HTML, képernyőolvasó, formázott szöveg, amely nem címsor, alt szöveg, üres alt="" díszítéshez, fájlnév, szöveg a képekben

A címsorok az oldal tartalomjegyzéke

Egy hosszú, alcímek nélküli szöveget senki sem olvas szívesen. Az interneten ez még inkább így van: a látogatók először átfutják az oldalt, és csak akkor olvasnak, ha látják, hogy benne van a válasz. Ebben segítenek a címsorok. A címsorok azonban többet jelentenek nagy, félkövér betűknél. A HTML-ben külön elemek, amelyeknek szintjük van:

<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>

A <h1> a főcím: miről szól ez az oldal? A <h2> elemek a fejezetek, a <h3> elemek az azokon belüli szakaszok, és így tovább egészen a <h6>-ig. A fenti behúzás csak a szemléltetést szolgálja; a valódi HTML-ben nincs jelentősége.

Két csoport valóban olvassa ezt a szerkezetet:

1. A képernyőolvasót használó emberek. Egy vak vagy gyengénlátó látogató gyakran először felolvastatja a képernyőolvasóval az összes címsort, majd ahhoz a részhez ugrik, amelyet keres. Valódi címsorok nélkül az oldal egyetlen hosszú szövegtömb.
2. A keresőmotorok. A Google a címsorok segítségével érti meg, miről szólnak az oldal egyes részei.

Mit mond a Google a címsorokról

A címsorokról sok tévhit kering. Ezt mondja maga a Google:

• A Google SEO kezdő útmutatója szerint a címsorok sorrendje nem számít a Google Keresés szempontjából, és nincs olyan bűvös szám, ahány címsornak egy oldalon lennie kell. A logikus sorrendben következő címsorok viszont nagyon jók a képernyőolvasóknak.
• John Mueller a Google-tól egy videóban (2019) azt mondta, hogy a Google rendszereinek nem okoz gondot, ha egy oldalon több <h1> címsor van. A Google igyekszik a HTML-lel úgy dolgozni, ahogy van: egy <h1>, több, vagy csak formázott szöveg valódi címsorok nélkül.
• A címlinkekről szóló dokumentációban (3.1. lecke) a Google megemlít egy helyzetet, amely gondot okozhat: ha nincs egyértelmű főcím. Ha az oldal tetején több nagy, feltűnő címsor áll, és nem egyértelmű, melyik a főcím, a Google nehezen választhat jó címlinket. A Google azt javasolja, hogy a főcím legyen jól megkülönböztethető, például első látható <h1>-ként.

A tanfolyam következtetése: oldalanként egy egyértelmű <h1> jó szokás, nem azért, mert a Google különben büntetne, hanem mert így az oldal mindenki számára egyértelműen megmondja, miről szól. Az olvasók, a képernyőolvasók és a Google így nem téveszthetik szem elől. Az A3.2 feladat ellenőrzése ezért zöldet mutat pontosan egy nem üres <h1> esetén, narancssárgát egynél több esetén, és pirosat, ha egy sincs.

Ami gyakran félremegy

Válaszadó oldal felépítése

Jó sorrend szinte minden oldalhoz:

1. Főcím (<h1>), amely megmondja, mit talál itt a látogató. Gyakran hasonlít a 3.1. leckében tárgyalt címre, de nem kell megegyeznie vele. A cím a keresési találatok között jelenik meg, a főcím magán az oldalon.
2. Rövid bevezetés, rögtön a legfontosabb válasszal.
3. Alcímek (<h2>) minden altémához, úgy megfogalmazva, ahogy az olvasó keres: a "Mennyibe kerül egy menyasszonyi csokor?" többet mond, mint az "Árak".
4. Ahol szükséges, <h3> egy <h2> alatt, nem önállóan.

A 7.3. lecke magával az írással foglalkozik részletesebben. Itt a vázról van szó.

Képek: alt szöveg és fájlnév

A keresőmotor nem úgy "látja" a fényképet, mint Ön. A Google gépi látást használ, de sokat merít a kép körüli szövegből. A legfontosabb forrást maga a Google nevezi meg: az alt szöveget.

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

Az alt szövegnek (alternatív szövegnek) két feladata van:

• Akadálymentesség: a képernyőolvasó felolvassa annak, aki nem látja a képet. Ha a kép nem töltődik be, a böngésző a fénykép helyett ezt jeleníti meg.
• Megértés: a Google az alt szöveget a gépi látással együtt arra használja, hogy megértse, mi látható a képen. Ez főleg a Google Képek találatai között segít.

Így ír jó alt szöveget:

• Egy rövid mondatban írja le, mi látható a képen, és miért szerepel ezen az oldalon.
• Kulcsszavakat csak akkor használjon, ha természetesen illeszkednek. A Google figyelmeztet, hogy a kulcsszavakkal teletömött alt szövegek rossz élményt nyújtanak, és spamnek minősülhetnek.
• A pusztán díszítő képek (egy vonal, egy háttérminta) üres altot kapnak: alt="". Ilyenkor a képernyőolvasó átugorja őket. A hiányzó alt attribútum más eset: ilyenkor a képernyőolvasó néha a fájlnevet olvassa fel.
• Ha a képen fontos szöveg szerepel (nyitvatartás, ár, szórólap), azt a szöveget egyszerű szövegként is tegye ki az oldalra. A képben lévő szöveget a képernyőolvasó és a keresőmotor is nehezen olvassa.

A fájlnév is segít egy kicsit. A Google rövid, leíró neveket javasol, és az image1.jpg vagy a pic.gif nevet hozza fel példaként arra, amit jobb elkerülni. A bruidsboeket-pioenrozen-wit.jpg többet mond, mint az IMG_4032.jpg.

A képek sebességéről és méretéről a 4.3. lecke szól.

A gyakorlatban: címsorok a webhelyépítőkben

• A WebOké AI Builder eszközében az oldal első címsora automatikusan <h1> lesz, az összes további pedig <h2>. Így minden oldalnak pontosan egy főcíme van. Minden fényképhez megadhat egy leírást; ez lesz az alt szöveg. A SEO-ellenőrzés figyelmeztet a leírás nélküli fényképekre.
• A WordPressben a blokkszerkesztőben a Címsor blokknál választja ki a szintet (H1-től H6-ig). A sablon általában már magát az oldal címét teszi <h1>-gyé; a szövegben ezért H2-t és alacsonyabb szintet használjon. Az alt szöveget a képnél adhatja meg a Médiatárban vagy a blokkban.

Más webhelyépítők hasonlóan működnek. Kétség esetén nézze meg a forráskódot (Ctrl+U), vagy keressen rá Ctrl+F-fel erre: <h1.

Összefoglalás

• A címsorok (<h1>-től <h6>-ig) az oldal tartalomjegyzékét alkotják az olvasók, a képernyőolvasók és a keresőmotorok számára.
• A Google-nak nem okoz gondot több <h1> vagy más sorrend, de egyértelmű főcímet javasol. Egy egyértelmű <h1> jó szokás.
• A szintet a felépítés alapján válassza, ne a betűméret szerint; lehetőleg ne hagyjon ki szinteket.
• A jó alt szöveg röviden leírja, mi látható; a díszítés alt="" értéket kap; ne halmozzon kulcsszavakat.
• A fontos szöveg az oldalra tartozik, nem csak egy képbe.

Kvíz

Feladat

A3.2 feladat: Egyetlen főcím és logikus felépítés. Adja meg a saját webhelye egyik oldalának címét. A program letölti az oldalt, megszámolja a <h1> címsorokat, és tartalomjegyzékként megmutatja a címsorszerkezetet. Láthatja, hogy pontosan egy nem üres főcím van-e, kimaradnak-e szintek, és hány képnek nincs alt attribútuma. Előre adja meg, Ön szerint hány <h1> van az oldalon. Nincs saját webhelye? Használja a www.rijksoverheid.nl címet.

További olvasnivaló

• Google Search Central, SEO kezdő útmutató (címsorok, alt szöveg): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Bevált gyakorlatok képekhez: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (akadálymentes címsorok): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Alt szövegek: https://www.w3.org/WAI/tutorials/images/