Közösségi csatornáim:

+36 20 802 2623

Telefonálj

Hétköznap 7.00 – 17.00

Rendelkezésedre állok

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.