Miről lesz szó ebben a bejegyzésben?

Mivel már megismerkedtünk az alapokkal és ki is kutattuk a célközönségünket, ideje egy kicsit a technikai vonalra terelni a hangsúlyt. A cikksorozat harmadik részében megnézzük, hogy a keresőoptimalizálás szempontjából egy honlap felépítése miképpen is néz ki.

Bár ez a téma általában a foglalkozó szakemberek feladata, de mivel a SEO és a weboldal technikai kivitelezése párhuzamosan zajlik, így annak, aki keresőoptimalizálással foglalkozik, behatóan kell ismernie a weboldalak felépítését és kötelező elemeit is.

A weboldal felépítésénél kiemelt figyelmet kell szentelni a technikai keresőoptimalizálásraA keresőoptimalizálás kiemelkedően fontos része a technikai SEO, ahol lényegében megalapozzuk weboldalunk sikerét. Amennyiben ezt jól végezzük, úgy a későbbiekben nagyon sok fejfájástól kímélhetjük meg magunkat és ügyfelünket is. Ez a téma nagyon sokrétű, így jelen bejegyzésben csak az alapvető elemekkel fogok foglalkozni.

Természetesen a későbbiekben részletesen is ki fogom fejteni az egyes elemek pontos szerepét, de az már haladó szint lesz. Egyelőre maradjunk a kezdő szintnél, hogy folyamatában ismerhessük meg a keresőoptimalizálást. Vágjunk is bele…

Tartalomjegyzék:

  • Leíró, script és programozási nyelvek SEO vonatkozása; Elkezdem
  • A weboldal felépítése (SEO szempontból); Itt kezdem
  • Egyéb kötelező elemek és azok szerepe. Inkább itt

Leíró, script és programozási nyelvek SEO vonatkozása

Igen. A keresőoptimalizálás nem csak a tartalom építéséről szól. Behatóan ismerni kell a leíró nyelveket is, amelyekre a weboldal alapjai épülnek. Mindegyiknek meg van a maga helye és szerepe a weboldal szerkezetének felépítése során. Sokszor fontos elemekkel kell összekapcsolni őket, melyeknek meghatározó szerepük van a keresőoptimalizálás során.

Csak a legfontosabbakat említve:

A HTML jelölőnyelv

A HTML(angolul: HyperText Markup Language = hiperszöveges jelölőnyelv) az internetes megjelenés alapja. Ezt a nyelvet kifejezetten weboldalak készítéséhez fejlesztették ki. Egyben internetes szabvánnyá is vált, melynek minden profi honlapnak meg kell felelnie.

Azonban ez nem jelenti azt, hogy meg is felel. Az oldal megjelenik akkor is, ha vannak benne HTML hibák. és mindjárt kiderül, hogy mennyire igényes munkával van dolgod.

A HTML a webes megjelenés alapjA jelenlegi honlapok többsége már HTML 5 jelölőnyelvvel készül (Remélhetőleg). Ez egy olyan leírás, melyet a böngészők és egyéb programok egységesen olvasnak és értelmeznek. Ezt követően jelenítik meg a tartalmat úgy, hogy számunkra is értelmezhető legyen (látható és/vagy hallható). Azért be kell vallani, nagy vizuális élményt önmagában ez még nem nyújt számunkra, de erre a részre még kitérek később.

Mégis miképpen kapcsolódik ez a keresőoptimalizáláshoz?

Egyrészről technikai szempontból egy weboldalnak nagyon sok szabványnak kell megfelelnie. A szabványokat tekintve nem ez lesz az első és utolsó, amivel dolgunk lesz, úgyhogy igenis venni kell a fáradságot és ennek megfelelően kell a weboldal felépítése során dolgozni.

Másrészről a keresőoptimalizálás tekintetében számos meta elem kapcsolódik a HTML jelölőnyelvhez, amelyeknek kiemelt szerepe van a keresőrobotokkal való kommunikáció során. Itt tudjuk meghatározni, hogy a robotoknak hogyan, mit és miképpen kell értelmezniük. A keresőmotoroknak (Böngésző programoknak) pedig megjeleníteniük.

A PHP szerveroldali szkriptnyelv

A PHP volt az első szkriptnyelv, amely a HTML szabványba illeszthető anélkül, hogy külső forrást használnánk. A PHP a dinamikus weboldalak működésének alapja.

A PHP szerveroldali szkripnyelv elsajátítása hasznos lehet a SEO szakembereknekEgyszerűen fogalmazva a honlap látogatójaként ez egy nem látható kódrészlet, amely a programozásnak megfelelő helyen és funkcióval HTML részletet jelenít meg a weboldalon. Ezen felül számos funkciót is kiszolgál. Kommunikál a szerverrel, illetve külső alkalmazásokkal. Fájlokat hoz létre, olvas, ír és adatbázis lekérdezéseket hajt végre.

Számunkra azért fontos, mert hatványoz bizonyos elemeket. Ezek nem feltétlenül rossz dolgok, de félrevezető lehet első ránézésre.

és el kell, hogy mondjam, bizony sokan elhanyagolják a képek ALT tagjainak kitöltését. A szoftver, amivel dolgozom, kilistázza nekem az összes létező képet az elemzett weboldalon, melynek nincs kitöltve az ALT tagja.

A PHP szkripteknek köszönhetően számos lehetőség van képek dinamikus beillesztésére a weboldal bármely pontján. Mi több Wordpress weboldalak esetében a „thumbnail” képek több helyen és méretben jelennek meg, de ugyanarra a hivatkozásra mutatnak. Tehát, ha mondjuk 120 üres ALT taggal rendelkező képet találok egy honlapon, akkor lehet, hogy csak 30 képnek kell kitölteni az ALT tagját, mert mindegyik kép 4 alkalommal jelenik meg különböző oldalakon.

Ezen felül, még sok egyéb esetben is befolyásolhatja a PHP a keresőoptimalizálás eredményességét, de erről majd a technikai SEO cikksorozatban bővebben ki fogok térni. Egyelőre az a fontos, hogy szánjunk rá időt és ismerkedjünk a PHP-vel, mert szükségünk lesz ilyen jellegű ismeretekre is. az ismerkedést.

A Javascript programozási nyelv

A JS szintén egy szabvány, amely a HTML-be van ágyazva, de külön is futtatható. Amit fontos tudni róla, hogy jellemzően a böngésző program motorja futtatja a felprogramozott Javascript parancsokat. Tehát, ha a felhasználó letiltja a futtatását, akkor nem fog megjelenni számára az, amit szeretnénk. Szerencsére jellemzően nem tiltják le.

Nézzük, milyen SEO vonatkozása van...

A legfontosabb része a keresőoptimalizálásnak az elemzés és a , melyekhez pontos adatokra van szükségünk. Ebben van segítségünkre a Google Analytics, amely egy JS követőkód integrálását követően gyűjti az adatokat a látogatók oldalon végzett tevékenyégéről.

Továbbá a javascript kódok mennyisége, mérete és beágyazásának helye nagyban befolyásolja a weboldal betöltési idejét, ami – bárki, bármit is mondjon – nagyon fontos tényező.

A CSS(Cascading Style Sheets) stílusleíró nyelv.

Nagyon egyszerűen megfogalmazva, ez a leíró nyelv felelős a weboldalon megjelenő elemek vizuális formázásáért. Segítségével vizuálisan is strukturálhatjuk tartalmunkat és egyedi megjelenést biztosíthatunk weboldalunk számára.

Mivel a mobiltelefonok korát éljük, nem csak a felhasználók, hanem a keresőmotorok is kiemelt figyelmet szentelnek a mobilra optimalizált oldalak minőségére. Így az, aki keresőoptimalizálással foglalkozik, nem hunyhat szemet a reszponzív követelmények felett sem.

A CSS stílusleíró nyelv segítségével dinamikusan változtathatjuk az oldal egyes elemeinek megjelenését. Mindezt eltérő eszköz és képernyőméret függvényében. Ezen felül, - hasonlóan a JS kódokhoz - integrálásának módja szintén hatással van a betöltési időre. Amennyiben meg szeretnél ismerkedni a stílusleíró nyelv rejtelmeivel, .

A weboldal felépítése (SEO nézőpontból)

Most, hogy már ezt is tudjuk, itt az ideje kódokat nézegetni. Leegyszerűsítve a dolgot, nem ágyazok be kódrészleteket, helyette arra kérlek, hogy a ctrl+u billentyű kombinációval nyisd meg jelen oldal forráskódját.

A weboldal szerkezeti felépítése meghatározó SEO szempontHa jól ment a dolog, egy új ablakban láthatod ezt az oldalt HTML-ben. Ezen a struktúrán fogok végig haladni és itt nézzük majd meg, hogy miképpen is néz ki egy honlap felépítése.

Számos oldalnál ennél jóval sűrűbben lesznek a kódok (nagyjából egy tömbben). Nálam azért látod rendezettebbnek, mert én nem használok tartalomkezelő rendszert (mondjuk Wordpress-t).

Ettől függetlenül a weboldalam mindent tartalmaz, amiről fent említést tettem. A weboldal nem egy egyszerű HTML oldal. PHP scripteket tartalmaz, ami a szükséges mértékben dinamikussá teszi azt és megkönnyíti számomra a tartalom kezelését. De mint már említettem, a PHP a forráskódban csak HTML-t jelenít meg.

Ok. Mára eleget fényeztem magam, úgyhogy rátérek a lényegre.

A weboldal szerkezeti felosztása

Egy weboldal szerkezetileg több részre osztható, annak függvényében, hogy milyen szintre akarjuk lebontani. Mivel a bejegyzés nem a HTML szabványról, hanem annak SEO vonatkozásáról szól, így kevésbé akarok elmélyülni a részletekben. Ennek ellenére kezdjük az elején és nézzük meg, hogy melyek egy oldal alapvető szerkezeti egységei, majd szépen tovább fogjuk bontani a számunkra szükséges mértékig.

A forráskódot tekintve egy weboldal alapvetően 2 szerkezeti egységre bontható. Ezek az úgynevezett head és body. Lássuk őket:

A fej, vagyis a head

A keresőoptimalizálás szempontjából a head tartalmazza a legfontosabb elemeket. Itt tudunk kommunikálni a keresőrobotokkal, amelyek meta adatokat gyűjtenek az oldalról.

Számukra az a fontos, hogy felhasználóik részére a legjobb élményt nyújtsák, így mindent megtesznek annak érdekében, hogy a lehető legtöbb információhoz hozzájussanak. Fontos tudni, hogy az itt megadott adatok egy része meg fog jelenni a keresési találatok listáján is.

Ezzel kapcsolatban nekünk mindösszesen annyi a dolgunk, hogy megadjuk az adatokat és biztosítjuk a lehetőséget számukra az oldal akadálymentes bejárására. Amennyiben ezt jól csináljuk, máris nagyot léptünk előre. No, de nézzük a részleteket:

Alapvető meta elemek:
<!DOCTYPE HTML>

Itt egyszerűen csak arról van szó, hogy a HTML melyik változatával készült a weboldal. Az én oldalamon látható jelölés azt jelenti, hogy a weboldalam HTML5 szabvány szerint van kódolva.

<html lang="hu">

Mi más lehetne, mint egy nyelvi címke. Természetesen ez is meghatározó szerepet tölt be.

<meta charset="utf-8" />

Magyarul karakterkódolás. Az ékezetes betűk miatt tudatjuk a böngészőkkel, hogy milyen karaktereket használ az oldal.

<link rel="stylesheet” />

Segítségével a stílusfájl elérési útját adjuk meg a böngészőknek. Amennyiben ez hiányzik, vagy rosszul van megadva, úgy nagyon puritán látvány fog minket fogadni, ha megnyitjuk az oldalt.

Biztosan feltűnt, hogy úgynevezett „feltételes kommenttel” ellátott stíluslapok is szerepelnek az oldalon (9. és 10. sorok). Az ő szerepük az, hogy egy adott böngészővel történő megnyitás alkalmával töltődjenek be. Ez azért van, mert az elavult böngészők nem ismerik fel a legújabb (CSS 3) stílusokat.

A SEO részéről fontos meta elemek
<title>

Vagyis az oldalon megjelenített tartalom címe. Ez is meg fog jelenni a keresési találatok listáján. Erről a következő bejegyzésben több szót ejtek majd.

<meta name="viewport” />

A reszponzív weboldalak kezelésére való utasítás eltérő képernyőméretek esetén, ahol több beállítás is alkalmazható.

<meta name="robots">

Nos. Ő az egyik, ha nem a legfontosabb meta tag számunkra. Itt állíthatjuk be az oldal indexelésére és követésére vonatkozó elképzeléseinket, amelyeket nagyon fontos instrukciók a robotok részére egy – egy feltérképezés során.

<meta name="description">

Az oldal tartalmának rövid összefoglalása. Szintén megjelenik a keresési találatok listáján. Erről több szó esik majd a cikksorozat következő részében.

<meta property="og:>

Ők lesznek az Open Graph meta adatok. A közzöségi oldalak robotjai használják egy - egy megosztás alkalmával. Lényegében innen nyerik a megosztás adatait (Kép, cím, leírás stb.) Ezekben a sorokban az érdekesség az, hogy a fejlesztése a Facebook-hoz köthető, de ettől függetlenül ezeket az adatokat mindegyik közösségi oldal felhasználja. Ez egy külön bejegyzést érdemel, amelyet hamarosan el is készítek…

<meta name="twitter:>

No, azért a Twitter-nek szüksége van még pár adathoz a tweet-ek küldéséhez, de az Open Graph tekintetében ennél több meta adat megadása felesleges.

Google Analytics

Végül egy script, amely egyetlen weboldalról sem hiányozhat. Ez a Google Analytics követőkódja. Amennyiben követni és elemezni akarjuk a látogatók oldalon végzett tevékenységének rendjét, folyamatát, idejét és még sok minden mást, akkor nélkülözhetetlen integrálni a weboldal felépítése során.

Ezzel végére is értünk a „head” legfontosabb elemeinek. Azért extraként, had említsek meg pár hasznos kiegészítőt:

Egy kis extra
<link rel="icon">

Egy ikon, ami megjelenik a böngésző könyvjelző sávjában. Manapság alap felszereltség. Ezen felül az Apple (Iphone, stb) termékeire is megtalálhatod a meta adatokat négy sorral lejjebb.

<meta name="theme-color">

Mobil nézetben átszínezi a megadott színre a böngésző fejlécét. A következő kettő hasonló a sorban pedig bebiztosít minket, hogy minden eszközön megtörténjen a váltás. Stílusos kis extra.

Ezzel meg is volnánk a weboldal első szerkezeti egységével.

A fentieket összefoglalva

Mint látjuk, a tartalom elkészítésén kívül nagyon sok mindenre kell figyelmet szentelnünk. Mivel a fent említett meta elemek összetettek, szinte kivétel nélkül külön – külön bejegyzésben fogom kifejteni a részleteiket. Amennyiben szeretnél értesülni róla, amint elkészültem velük, iratkozz fel az oldalsávban a hírlevelemre és azonnal értesítelek.

Most viszont lépjünk tovább és nézzük a tartalmi részt:

A test, azaz a body

Eljött a pillanat, amikor a tartalom felépítésének szakaszához érkeztünk. Nagyjából elmondható, miszerint a „body” az úgynevezett On-Page SEO része. Bár számos esetben a technikai SEO vonalán is bele kell nyúlni és a forráskódban is változtatni kell.

Tulajdonképpen a két területet nem lehet élesen szétválasztani, de ezt majd a későbbiekben látni fogjuk. Minden attól függ, hogy mennyire szeretnénk elmélyülni a keresőoptimalizálásban.

A body három fő egységre osztható, melyek a következőek:

  • Header;
  • Sidebar;
  • Footer.

Mindegyikből több is lehet egy oldalon. Kicsit nehéz, de megpróbálok szigorúan csak a keresőoptimalizálás területére összpontosítani. Amennyiben felmerül benned a kérdés, hogy miért lehet több egy oldalon? . Itt meg tudod tanulni az alapokat. Nézzük most szimplán a SEO vonatkozását a kérdéskörnek.

A fejléc (Header)

A header lényegében az egyes részegységek fő tartalmi elemeit jelenítik meg. Menü, címek, alcímek, logó, stb. Igen sokrétűen lehet használni.

Az oldalsáv (Sidebar)

Szintén sok mindenre lehet használni, de általában navigációra (menü, kategóriák), keresésre és a látogató elkötelezésére (feliratkozás, kedvelés) használjuk.

A lábléc (Footer)

Általában kiegészítő információkra mutató hivatkozásokat tartalmaz.

Keresőoptimalizálás szempontjából miért fontosak ezek nekünk?

Egyrészről egy weboldal tartalmát ésszerűen és strukturáltan kell felépíteni. Mindennek meg van a maga helye és szerepe. Mindent meg kell tenni annak érdekében, hogy a weboldal strukturája egyértelmű legyen és felhasználók eligazodjanak rajta.

A strukurált adatokat szeretik a robotokMásrészről a strukturált adatoknak (schema.org) manapság óriási szerepük van a keresőoptimalizálásban. Tulajdonképpen ez egy jelölés részünkről a robotok irányában.

Bár úgynevezett is integrálhatóak a jelölések, de vannak olyan esetek (Mint például az én oldalam) ahol ezek a strukturált adatok közvetlenül a HTML forrásba vannak integrálva. Az ok egyszerű: HTML-ben sokkal több adatot lehet biztosítani a tartalomról, mint JSON-LD használatával.

A strukturált adatok segítik a keresőrobotokat megérteni és értelmezni a tartalmat. Lényegében fejlesztésével arra törekszik a Google, hogy az emberhez hasonlóan, a robotjaik is megértsék az oldal mondani valóját. Nevezzük ezt a gépi tanulás egyfajta módszerének.

A fentieket összefoglalva

A tartalmi részt apró, részegységekre bontjuk, melyben csak a képzelet szabhat határt. Strukturáljuk, majd megjelöljük a szükséges mértékben, annak érdekében, hogy egyértelművé tegyük annak tartalmát az emberek és a robotok számára egyaránt.

Egyéb, weboldal szintű kötelező elem

Ezzel végére is értünk az oldal szintű felépítésnek. Azonban weboldal szinten van még pár kötelező elem, amire szükségünk lesz. A weboldal elkészítése során van pár keresőoptimalizálás tekintetében nagyon fontos kiegészítő, melyekre kiemelt figyelmet kell szentelni. Lássuk, melyek ezek:

A robots.txt fájl

Ez az első fájl, amit egy keresőrobot fel fog keresni. Legalábbis azok, amelyek jó szándékkal érkeznek a weboldalra. Fontos tudni, miszerint az ebben a fájlban lévő utasításokat figyelmen kívül hagyhatják a robotok, ha úgy ítélik meg.

Lényegében le lehet tiltani vele oldalakat a keresőrobotok elöl. Természetesen a tiltásnak vannak előnyei, illetve hátrányai egyaránt. SEO nézőpontból az a dolgunk, hogy ezt megfelelően állítsuk be, illetve kezeljük. Nagy szerepe van honlap bejárhatósága szempontjából is.

sitemap.xml

Vagyis oldaltérkép. Időről időre visszajárnak ide a BOT-ok annak érdekében, hogy friss információkat kapjanak a weboldal egyes oldalainak frissítésére vonatkozóan. Ez az egyik legjobb módja annak, hogy kommunikáljunk a keresőmotorokkal és jelezzük számukra az újonnan közzétett, vagy frissített tartalmat.

404-es oldal

Nagyon fontos oldal. Egy hiba esetén kevésbé csökkenti a felhasználói élményt, mintha egy átlagos, szerver által generált hibaoldalra kerülne a felhasználó. Sajnos számos hiba eredményeként kerülhet ide valaki. Viszonylag gyakran előfordulhat ez az eset.

A jó oldalát tekintve adott egy lehetőség számunkra, hogy megfelelő irányba tereljük a látogatót, kerüljön ide bármilyen okból is. Minden esetre a 404-es hibákat meg kell szüntetni, mert nem vet jó fényt a weboldalra sem a felhasználók, sem pedig a keresőrobotok tekintetében.

Mindent összevetve

Elmondható, miszerint a programozási nyelvek és a hozzájuk kapcsolódó szabványok ismerete alapvető elvárás azzal szemben, aki keresőoptimalizálással szeretne foglalkozni.

Nagyon sok időbe és energiába kerül mindezt megtanulni és elsajátítani. Azonban egy SEO szakember nem engedheti meg magának azt a luxust, hogy ne értse az összefüggéseket.

A keresőoptimalizálás nagyon összetett dolog és a szakterületek számos esetben összemosódnak. Itt olvashatsz tőlem , amely tartalmazza a Google rangsorolási tényezőit is. A bejegyzés által láthatod a SEO komplexitását és területeit egyaránt.

TIPP: A legegyszerűbben a tudsz megbizonyosodni arról, hogy egy weboldal megfelelően van-e felépítve, vagy sem.

Útravaló

A cikksorozat következő részében már keveredni fog a technikai SEO és az On-Page SEO. A hangsúly viszont a tartalom felépítésére és a tartalommal szemben támasztott követelményekre kerül.

Megnézzük, milyen szempontokat érdemes követni egy szöveg elkészítése során…

Hogyan tovább?

Érdekel a cikksorozat előző, vagy a következő része? Az alábbi gobok segítségedre lesznek:

Értékelés és hozzászólás

Patak Péter |

Szeretnél hozzászólni a fentiekhez? Az alábbi gombra kattintva a facebookon értékelheted, valamint megoszthatod észrevételeidet az olvasottakkal kapcsolatban...