Doctype, charset, viewport

Megjelenés és mérhető hatás

Viewport nélkül a mobilböngésző kicsinyített asztali nézetet mutat. Az olvashatatlan betűméret és a túl kicsi kattintható elemek rontják a konverziót. A Lighthouse SEO-audit külön pontot von le érte, a Lighthouse Best Practices (böngészős jó gyakorlatok) pedig a hiányzó doctype-ot és a késői charset-deklarációt is jelzi.

Tartalmi hitelesség

A rossz karakterkódolás a legfeltűnőbb hiba, amit egy látogató észrevesz. Az é és ű karakterek azonnal elavult, elhanyagolt oldal benyomását keltik.

Gépi értelmezés

A nyelvi modellek és az idézeteket gyűjtő keresők a nyers szöveget dolgozzák fel. Ha a szavak sérülten érkeznek, a márkanév és a szakkifejezések nem egyeznek a keresett alakkal. A quirks mode ritkábban okoz gondot a robotoknak, viszont elrendezés-eltolódást és layout shiftet hozhat a valódi látogatóknál.

Kikre vonatkozik

• Minden HTML-oldalra, kivétel nélkül: főoldal, aloldal, blogbejegyzés, terméklap.
• Egyedi landing oldalakra, amiket marketingesek raknak ki a CMS mellé. A riportokban itt találjuk a legtöbb hiányzó viewportot.
• Régi, kézzel épített oldalakra, ahol a sablon még XHTML-korszakból maradt.
• Webshopokra, ahol egy külső sablon vagy egy plugin saját HTML-vázat generál.

Kikre nem

• Nem HTML-válaszokra: JSON API, XML sitemap, PDF, kép.
• E-mail sablonokra. Ott más szabályok élnek, és a viewport meta tag sok kliensben hatástalan.
• Beágyazott iframe-tartalmakra, ha azok nem önálló oldalak.

Staging és fejlesztői környezetben is érdemes rendben tartani. Ami ott hiányzik, az élesben is hiányozni fog.

Lépések

1. Nyisd meg az oldalt, majd nézd meg a nyers forrást: view-source:https://pelda.hu. Ne a devtools Elements fülét használd, mert az már a javított DOM-ot mutatja.
2. Az első sorban keresd a <!doctype html> deklarációt. Előtte csak a BOM vagy semmi állhat.
3. A <head> első néhány sorában keresd a <meta charset="utf-8"> taget.
4. Ugyanitt keresd a <meta name="viewport" ...> sort.
5. Ellenőrizd a szerver fejlécét is: curl -sI https://pelda.hu | grep -i content-type.
6. Futtass egy Lighthouse auditot mobil módban, és nézd meg a Best Practices és SEO szekciót.
7. Kétes esetben küldd át az oldalt a W3C validátoron.

Jó jel

• A doctype a fájl legelső karaktereinél van.
• A charset-deklaráció az első 1024 byte-on belül szerepel, és utf-8.
• A HTTP Content-Type fejléc szintén charset=UTF-8 értéket ad.
• A viewport width=device-width és initial-scale=1 párost tartalmaz.

Rossz jel

• A forrás <html> taggel vagy egy PHP-figyelmeztetéssel kezdődik.
• A devtools konzolján quirks mode figyelmeztetés jelenik meg.
• A szövegben á, Å‘, „ karakterek láthatók.
• Mobilon az egész oldal kicsinyítve, oldalirányú görgetéssel jelenik meg.

WordPress

1. Nyisd meg a téma header.php fájlját, gyerektémában.
2. A fájl első sora legyen <!doctype html>.
3. A <head> elejére tedd: <meta charset="<?php bloginfo( 'charset' ); ?>">.
4. Utána jöjjön a viewport meta tag.
5. Ellenőrizd, hogy a wp_head() hívás a </head> előtt maradt.
6. Ha blokk-témát használsz, a fejlécet a WordPress generálja. Ilyenkor a hibát általában egy plugin vagy egy rossz functions.php okozza, ami kimenetet ír a HTML elé.

Shopify

1. Online Store > Themes > Edit code > layout/theme.liquid.
2. A fájl első sora <!doctype html> legyen.
3. A <head> elejére kerüljön a charset és a viewport.
4. A {{ content_for_header }} hívást hagyd a helyén.

Unas

1. A beépített sablonok tartalmazzák a három deklarációt. Itt ritkán van teendő.
2. Ha saját HTML-blokkot vagy egyedi aloldalt szerkesztesz, ne kezdd új <html> vagy <head> taggel.
3. A beszúrt kódrészletben ne legyen második doctype.

Shoprenter

1. A sablonszerkesztőben nyisd meg a fejléc-sablont.
2. Ellenőrizd a doctype, charset és viewport meglétét.
3. Egyedi fejlécbe illesztett kódnál ügyelj rá, hogy ne duplázd a meta tageket.

Egyedi fejlesztés

1. Javítsd a központi layout-sablont, ne oldalanként.
2. Állítsd a szervert UTF-8 kiszolgálásra: AddDefaultCharset UTF-8 Apache alatt, charset utf-8; Nginx alatt.
3. Ellenőrizd, hogy a sablonfájlok maguk is UTF-8 kódolásúak, BOM nélkül.
4. Tedd be egy smoke tesztbe: a válasz első 200 byte-ja tartalmazza a doctype-ot.

• Hiányzó doctype: az oldal quirks módba kerül, és a CSS máshogy számol dobozméretet.
• Régi, hosszú doctype: az XHTML 1.0 Transitional sor ma felesleges, és rendszerint elavult tagekkel jár együtt.
• Kimenet a doctype előtt: egy PHP notice vagy üres sor a fájl elején eltolja a deklarációt, és a böngésző már nem veszi figyelembe.
• Késői charset: ha a deklaráció az első 1024 byte után jön, a parser újraindul, és a szöveg egy pillanatra hibásan jelenik meg.
• Ütköző kódolás: a szerver ISO-8859-1 fejlécet küld, a HTML pedig UTF-8-at deklarál. A fejléc nyer, az ékezetek elromlanak.
• user-scalable=no a viewportban: megakadályozza a nagyítást, és akadálymentességi hibát okoz.
• Fix szélességű viewport: a width=1024 érték asztali méretre kényszeríti a mobilt, így a reszponzív CSS sosem lép életbe.

Helyes dokumentum-kezdet. A három deklaráció a lehető legelöl áll, a nyelvi jelöléssel együtt:

<!doctype html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Szőlőtermesztés és borászat</title>
</head>
<body>
  <h1>Árvíztűrő tükörfúrógép</h1>
</body>
</html>

Gyors ellenőrzés parancssorból. Az első parancs a szerver által küldött kódolást mutatja, a második a dokumentum elejét:

curl -sI https://pelda.hu | grep -i "content-type"
# Content-Type: text/html; charset=UTF-8

curl -s https://pelda.hu | head -c 300
# <!doctype html><html lang="hu"><head><meta charset="utf-8">...

Ha a head -c 300 kimenetében nincs charset, de a Content-Type fejléc UTF-8-at ad, az oldal még jól jelenik meg. A meta taget akkor is tedd be: a fejléc bármikor megváltozhat egy szerverköltözéskor.