Az alapvető HTML és CSS ismeretek elsajátítása szinte minden webes szakmában hasznos alapkészségnek számít. Azonban, ha a keresőoptimalizálás szempontjából vizsgáljuk meg a kérdést, akkor ez az alapkészség még fontosabbá válik, hiszen a HTML és a CSS ismeretével még inkább értékessé tehetjük az oldalunkat a keresőmotorok számára.
Tartalmi SEO
A tartalmi SEO magában foglal minden olyan feladatot, amelyet az általunk készített tartalmak (cikkek, oldalak) minőségének javítására, és ezáltal a keresőkben történő előrébb jutás érdekében végzünk el. A teljesség igénye nélkül a legfontosabb tartalmi SEO tényezők: kulcsszavak a szövegben, oldal címe (title), tartalom URL-je, címsorok, képek címe, helyettesítő szövege és a tartalom struktúrája, például paragrafusok, bekezdések, szöveg tagoltsága.
Alább kiemeljük azokat a tartalmi tényezőket, amelyeknél hasznos lehet a HTML és CSS ismeret.
Oldal címe (title)
Az oldal címe (title) az egyik legfontosabb SEO elem. A HTML title címkéje lehetővé teszi, hogy kulcsszavakat és releváns információkat helyezzünk el az oldal címében. Általában ez a cím jelenik meg a keresőmotorokban, ha azok önkényesen át nem írják azt. A weboldal címét a <title> elemmel adhatjuk meg, amelyet a <head> szekcióban kell elhelyeznünk. Példa: <title>Cím</title>
Címsorok (H1, H2, stb)
A HTML címsorok (headingek) segítik a tartalom strukturálását és a kulcsszavak erősítését. A H1 és H2 címsorok különösen fontosak, mert a H1 tartalmazza az adott tartalom címét, míg a H2-kben általában fontosabb fejezetcímeket helyezünk el. Természetesen, ha a tartalom igényli, akkor a tartalmat tovább tagolhatjuk H3, H4, H5 és H6 címkékbe is. A H1-H6 címkék megjelenési formája:<h1>Cím</h1>
Képek címe (image title) és alt text
Azzal, hogy a feltöltött képnek megadjuk a címét, illetve helyettesítő szövegét (alt text), elősegítjük, hogy a tartalmunk még relevánsabbnak tűnjön az adott kulcsszóra, illetve erősítjük a képkeresőkben való megjelenésünket. A kép címadásánál ugyanúgy gondolkodjunk, mint a cikkünk elnevezésénél, míg a helyettesítő szövegnél azt érdemes megadnunk, hogy miről szól az adott kép.
Az alábbi formában adhatjuk meg a kép címét és helyettesítő szövegét: <img src=”URL” alt=”LEÍRÁS” title=”CÍM”>
Meta leírás
A meta leírás az a szövegrész, amely a keresőmotorokban történő kereséskor az egyes találatok címei alatt jelenik meg leírásként. (Bár olykor a keresőmotorok ezt is átírhatják önkényesen.) A meta leírást (angolul meta description) HTML-lel adhatjuk meg, az alábbi szintaxis szerint: <meta name=”description” content=”LEÍRÁS”>
Tartalom
A tartalom formázása rendkívül fontos a SEO-ban, ide sorolhatjuk a korábban említett címsorokat is, de az ezeken túlmenő HTML és CSS formázásoknak is nagyon fontos szerepük van. Az adott szövegrészletek kiemelésével, félkövérré tételével vagy színváltoztatásával külön jelezhetjük a keresőmotorok felé, hogy az adott információ eltér a többitől, ezt a fontosságot leginkább a szöveg félkövérré tételével tehetjük meg.
Egy szöveget így állíthatunk félkövérre CSS segítségével:
.kiemelt {
font-weight: bold;
}
Technikai SEO
A technikai SEO során szintén az oldalhoz köthető beállításokat végzünk, de itt már nem egy adott tartalmat, hanem az oldal egészét optimalizáljuk. Egy weboldalnak úgy kell felépülnie, hogy a keresőmotorok minden egyes elemét egyszerűen fel tudják ismerni, be tudják azonosítani, ezt feltérképezésnek nevezzük. A teljesség igénye nélkül a legfontosabb technikai tényezők: weboldalstruktúra, felhasználói élmény, felhasználói felület (UX/UI), oldalsebesség, képoptimalizáltság, belső linkstruktúra.
Weboldalstruktúra
A weboldalstruktúra kialakítása során válik igazán fontossá a HTML és a CSS ismerete. Bár mára már a szemantikus HTML használata nélkül is képesek a keresőmotorok értelmezni egy weboldal felépítését, de érdemes megkönnyíteni a keresők dolgát azzal, hogy használjuk a szemantikus HTML alapelveit. Ha szemantikus HTML-t használsz, akkor a keresőmotorok gyorsabban, egyszerűbben fogják tudni értelmezni, hogy pontosan hogyan is épül fel a weboldalad.
Íme néhány szemantikus HTML elem, amelyet érdemes használni:
- <article>
- <aside>
- <details>
- <figure>
- <footer>
- <header>
- <main>
- <nav>
- <section>
- <summary>
Másik fontos aspektus a weboldalstruktúra kialakításánál, az URL-ek felépítése.Törekedjünk a minél egyszerűbb URL-struktúra kialakítására, az URL-jeink legyenek leíróak, beszédesek, tükrözzék, hogy miről szól a tartalom.
Megfelelő URL: ateweboldalad.hu/kategoria/cikk-cime
Nem megfelelő URL: ateweboldalad.hu/kategoria/alkategoria/4215.html
UX/UI
A felhasználói élmény (UX) során azt figyeljük, hogy az oldal használata egyszerű, hatékony és élvezetes legyen a látogatók számára, míg a felhasználói felület (UI) az oldalon azon terület, amellyel interakcióba léphetnek a látogatók, ez leginkább az esztétikai és funkcionális tervezést foglalja magában.
A tökéletes UX/UI élmény kialakításához elengedhetetlen, hogy az oldalunk funkcionalitása kifogástalan, míg megjelenése meggyőző legyen. A felhasználói élmény javításához általában már mélyebbre kell ásnunk, de az UI javítására használhatjuk a CSS-t.
Fontos, hogy az oldal dizájnja egységes és könnyen átlátható legyen, ezt harmonizáló színekkel, betűtípusokkal és elrendezésekkel érhetjük el. Azaz, ha az egyik gombunk lekerített, akkor valószínűleg az lesz a legjobb megoldás, ha az összes ugyanezt a kinézetet követi. (Persze, a kivétel olykor erősíti a szabályt.)
Az oldal sebessége
Az oldal betöltési sebessége kritikus tényező a látogatók megtartásában és a keresőmotorokban való előrelépésben. HTML és CSS szempontból törekedjünk a minél egyszerűbb kód elkészítésére, azaz, ha lehet, akkor ne ágyazzunk több tucat div-et egymásba, ne jelenítsünk meg egy weboldalon 100 képet 4K-s felbontásban, stb. Törekedjünk a minél egyszerűbb és kisebb méretű kódra.
Az eleve optimalizált kód írásán túl, még alávethetjük a kódunkat minimalizálásnak, tömörítésnek, amelynek hála kisebb méretű kódokat kapunk, így a betöltési idő is redukálódik.
Képoptimalizálás
A képek optimalizálását két irányból közelíthetjük meg, az egyik a tömörítés, amely rendkívül hatásos módszer, mert az eredeti méretnél sokkal kisebb méretű fájlt kapunk, alig észrevehető minőségromlással. Viszont érdekesebb számunkra a HTML és CSS szempontból való megközelítés.
Például ha van egy képünk különböző méretekben és felbontásokban, akkor az “srcset” attribútum segítségével megadhatjuk ezeket a változatokat, és a böngésző automatikusan kiválasztja a legmegfelelőbbet a jelenlegi eszközméret alapján. Ez azért nagyszerű, mert egy kisméretű kijelzőn fölösleges nagyobb méretű képeket betölteni, mint maga az eszköz.
De még ennél is nagyszerűbb a HTML beépített lazy loading funkciója. A loading=”lazy” attribútum lehetővé teszi a képek “lusta betöltését”. Ez azt jelenti, hogy egy kép csak akkor kerül betöltésre, amikor az a felhasználó látómezejébe került. Ezáltal gyorsabbá válik az oldalbetöltés, mert nem kell minden képet egyszerre betölteni, a lap alján lévő képeket ráér a böngésző csak akkor betölteni, ha a felhasználó legörgetett addig. Ha a felhasználó nem görget le addig, akkor az adott kép nem is kerül betöltésre.