lang attribútum (nyelvi jelölés)

Keresőoptimalizálás

A Google nyelvfelismerése elsősorban tartalomalapú, a lang értékét nem tekinti rangsorolási jelnek. Többnyelvű oldalon viszont a lang és a hreflang együtt ad ellentmondásmentes képet. Ha a kettő mást mond, az egész nyelvi struktúra gyanússá válik.

Akadálymentesség

A WCAG 3.1.1 (Language of Page) A szintű, tehát a legalapvetőbb megfelelési szint. Enélkül egy akadálymentességi audit azonnal elbukik. Az európai akadálymentesítési irányelv miatt ez már jogi kockázat is, erről bővebben a akadálymentesség (WCAG, EAA) cikkben.

AI-értelmezhetőség

A modellek nyelvi besorolása dönti el, milyen nyelven idéznek vissza. Rossz jelölés mellett előfordul, hogy egy magyar cég angol nyelvű összefoglalót kap egy magyar kérdésre. A riportokban ezt leggyakrabban olyan oldalakon látjuk, ahol a sablon en-US alapértéke bennmaradt.

Mit néz ebből a riport

A riport azt vizsgálja, van-e lang attribútum a html elemen, és értelmes nyelvkód-e az értéke. Alacsony hatású, kód hatókörű szabály. Mivel egyetlen sorból javítható, általában a gyors győzelmek közé kerül.

Vonatkozik

• Minden HTML-oldalra, mérettől és típustól függetlenül
• Kiemelten a többnyelvű oldalakra és webshopokra
• Közszolgáltatóknak, oktatási és egészségügyi oldalaknak, ahol az akadálymentesség kötelező
• Landing page-ekre és kampányoldalakra is, ezek sablonja gyakran külön él

Nem vonatkozik

• PDF- és dokumentumfájlokra, ott más metaadat jelöli a nyelvet
• API-válaszokra, JSON- és XML-végpontokra
• Képekre, videókra, ott a felirat és az alt szöveg (képek leírása) a nyelvi hordozó

Staging környezeten sem kritikus önmagában. Ott mégis érdemes javítani, mert ugyanaz a sablon megy élesbe.

Lépések

1. Nyisd meg az oldalt, majd nézd meg a forrást (Ctrl+U vagy Cmd+Option+U).
2. Keresd meg az első <html> sort, általában a doctype után áll.
3. Ellenőrizd, hogy szerepel-e rajta lang attribútum, és mi az értéke.
4. Devtools Elements panelen ugyanez a legfelső csomóponton látszik.
5. Parancssorból is gyors: curl -s https://pelda.hu | grep -i -m1 "<html".
6. Futtass Lighthouse auditot, az Accessibility kategória külön szabályként jelzi a hiányt.
7. Többnyelvű oldalnál minden nyelvi verzió URL-jét nézd meg külön.
8. Ellenőrizz aloldalakat is, nem csak a főoldalt. A blog és a kosár gyakran más sablonból jön.

Jó jel

• <html lang="hu"> vagy <html lang="hu-HU"> minden oldalon
• Az érték egyezik a látható szöveg nyelvével
• Az angol verzió lang="en" értéket kap
• Az idegen nyelvű bekezdéseken saját lang van

Rossz jel

• Egyáltalán nincs lang az elemen
• lang="en-US" egy teljesen magyar oldalon
• Üres érték: lang=""
• Alulvonásos vagy kiírt forma: hu_HU, magyar
• Minden nyelvi verzió ugyanazt az értéket kapja

A W3C validátor az érvénytelen nyelvkódot is kiírja, nem csak a hiányt.

WordPress

1. Nyisd meg a Beállítások > Általános menüpontot.
2. Állítsd a Webhely nyelvét magyarra, ha még nem az.
3. Ellenőrizd, hogy a sablon header.php fájljában a language_attributes() függvény fut-e.
4. Ha valaki fixen beírta a lang="en-US" értéket, cseréld a függvényhívásra.
5. Polylang vagy WPML használata esetén a bővítmény automatikusan a megfelelő értéket adja vissza.

Shopify

1. Online Store > Themes > Edit code, majd a theme.liquid fájl.
2. Az első sorokban állítsd be: <html lang="{{ request.locale.iso_code }}">.
3. Fix értéket ne írj be, mert a Markets nyelvi verziói akkor elromlanak.

Unas

1. Az adminban ellenőrizd a bolt nyelvi beállítását.
2. Alapsablonnál a rendszer helyesen tölti ki az értéket.
3. Egyedi fejléc-sablonrész esetén a HTML-részletben javítsd kézzel.
4. Ha a fejléc nem szerkeszthető, kérd a support segítségét.

Shoprenter

1. Nyisd meg a Sablonszerkesztőt.
2. Keresd a head blokkot tartalmazó sablonfájlt.
3. Több nyelv esetén a nyelvi változót add meg fix kód helyett.

Egyedi fejlesztés

1. A layout sablonban egyetlen helyen add ki az attribútumot.
2. Az értéket az alkalmazás aktuális locale-jából származtasd.
3. Laravel Bladeben: <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">.
4. Cseréld az alulvonást kötőjelre, mert a BCP 47 azt írja elő.
5. Írj egy egyszerű tesztet, ami minden nyelvi route-on ellenőrzi az értéket.

A javítást érdemes a Doctype, charset, viewport ellenőrzésével együtt elvégezni, mert ugyanabban a néhány sorban dőlnek el.

• Hiányzó attribútum - a gépek találgatnak, rövid oldalon gyakran rosszul.
• A sablon bennmaradt en-US alapértéke - magyar szöveg angol jelöléssel, a képernyőolvasó félreolvassa.
• Alulvonásos kód (hu_HU) - érvénytelen, a szabvány kötőjelet ír elő.
• Nyelv neve kód helyett (lang="magyar") - egyetlen feldolgozó sem ismeri fel.
• Egyetlen érték minden nyelvi verzión - ellentmondás a hreflang jelölésekkel szemben.
• A lang a body elemen a html helyett - az ellenőrzők a gyökérelemen keresik, így hiánynak számít.
• Jelöletlen idegen nyelvű blokkok - a hosszú angol idézetet magyar kiejtéssel mondja fel a felolvasó.

Helyes fejléc magyar oldalon, angol nyelvű idézettel:

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Szolgáltatásaink</title>
  <link rel="alternate" hreflang="hu" href="https://pelda.hu/szolgaltatasok">
  <link rel="alternate" hreflang="en" href="https://pelda.hu/en/services">
</head>
<body>
  <p>A mérnökeink szerint <span lang="en">fail fast, learn faster</span> a helyes hozzáállás.</p>
</body>
</html>

A hreflang az alternatív verziókra mutat, a lang pedig az aktuális oldal nyelvét mondja meg. A kettőnek egyeznie kell.

Gyors ellenőrzés parancssorból, átirányítást követve:

curl -sL https://pelda.hu | grep -i -m1 "<html"
# elvárt kimenet: <html lang="hu">

Ha a kimenet üres, vagy nincs benne lang, az attribútum hiányzik a kiszolgált HTML-ből.