2021.12.12.

Minden, amit tudni akartál a keresőbarát kódolásról

minden-amit-tudni-akartal-a-keresobarat-kodolasrol

Ha komolyan gondolod, hogy pénzt akarsz keresni egy weboldallal (mindegy, hogy magadnak, vagy másnak csinálod az oldalt), akkor rendkívül fontos, hogy a webhelyed a keresőmotorok számára is optimalizáld. A keresőoptimalizálás (SEO) az a folyamat, amelynek során weboldalt “keresőmotor-barátabbá” tesszük. Amikor a potenciális ügyfelek keresőszavakkal keresnek, nem mindig az első webhelyre kattintanak, amelyik a találati listán megjelenik. Olykor lejjebb görgetnek a listán, és olyan oldalakat keresnek, amelyek jobban megfelelnek az igényeiknek. De szinte sosem mennek tovább az első találati oldalnál. Ez 10 db találat. Nagyon fontos, hogy ezek között legyen a weboldal. Hahaha, könnyű azt mondani. Az alapvető dolgokat már sokan ismerik, kezdő honlapkészítők és a weboldalmegrendelők is egyaránt.

Mit lehet tehát tenni, hogy előnyre tegyél szert?

Ebben a cikkben összeszedtem, hogy miket kell tenned azért, hogy már a kezdetek kezdetétől SEO szempontok szerint építs fel egy weboldalt.

Rögtön kezdem is a NULLADIK lépéssel! “Content is king.” vagyis a “A tartalom a király.” 25 éve, 1996-ban tette ezt a kijelentést nem más, mint Bill Gates, és az igazságtartalma azóta sem változott. Ha nem lesz gyakran frissülő releváns tartalom a weboldalon, akkor innen ne olvass tovább, mert felesleges. Ha nem jó a weboldalon a szöveges (és egyéb) tartalom, akkor mehet a kukába az egész, a világ legjobb weboldal készítője sem fogja tudni felhúzni a dobogóra. Önmagában a technikai SEO nem elég, akkor sem, ha a SEO pontszámok egyébként elég jók.

Mi az, amivel támogathatod a weboldalt, hogy elérje a dobogót?

  1. A weboldal forráskódja
  2. Meta címkék
  3. H1, H2, H3 címsorok
  4. Belső linkek és horgonyszövegek
  5. Nofollow linkek
  6. Kép alt szövegek
  7. Szerkezeti struktúra
  8. Open Graph Protokoll
  9. Sémajelölés (Schema Markup)
  10. SEO bővítmények és egyebek

A tartalom kialakítása

Ha egy weboldal tartalma 90%-ban kertészkedési tippekkel foglalkozik és csak 10%-ban a kertészkedéshez kapcsolódó építőanyagokkal, akkor nagyon nehéz dolgod lesz jó helyezést elérni az utóbbira, hiszen a keresőmotorok úgy értelmezik, hogy a weboldalon az csak másodlagos, ezért inkább olyan weboldalt sorolnak előre, amelynek az elsődleges tartalmai a kertészeti építőanyagokról szólnak. A tartalom gyártás abszolút nem webfejlesztői feladat, ezt biztosítsa az ügyfél, vagy az erre szakosodott marketingszövegíró / tartalomkészítő. Az ügyfelek 80%-a nem tud/akar írni és igazság szerint egy összeírt szöveg az még nem tartalom, tehát erre mindenképp olyan szakembert érdemes megbízni, aki ért a szövegíráshoz és tisztában van a SEO alapokkal is. Ha van content, akkor mehetünk tovább…

A weboldal forráskódja

A weboldal kódja első pillantásra félelmetesnek tűnhet (persze csak azoknak, akik még nem végezték el valamelyik képzésünket :D), de valójában csak olyan kódok halmaza, amelyeket a böngészők értelmeznek, ami alapján eldöntik, hogy hogyan jelenjen meg a weboldal. A Google és más keresőrobotok arra használják, hogy eldöntsék, hogy miről is szól a weboldal.

Hogyan néz ki egy SEO barát kód?

Először is “rövid”. A weboldal részeit HTML elemekből kell összerakni, de nem mindegy, hogy mennyiből és milyenekből. A böngésző akkor tudja gyorsan letölteni és értelmezni a weboldal tartalmát, ha nem használunk nagyon sok egybe ágyazott HTML elemet és nem pakoljuk teli különböző osztályokkal. A következő kód egy oldalépítős megoldás, amin jól látszik, hogy egy egyszerű “cím + bekezdés + gomb” tartalmi egységhez milyen sok elemet generál a weboldal.

<section class="elementor-section elementor-top-section elementor-element elementor-element-6e7dbba6 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="6e7dbba6" data-element_type="section">
    <div class="elementor-container elementor-column-gap-default">
        <div class="elementor-row">
            <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-989870d" data-id="989870d" data-element_type="column">
                <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-ee89acd elementor-widget elementor-widget-heading" data-id="ee89acd" data-element_type="widget" data-widget_type="heading.default">
                            <div class="elementor-widget-container">
                                <h1 class="elementor-heading-title elementor-size-default">Kertépítés bárhol, bármikor</h1>
                            </div>
                        </div>
                        <section class="elementor-section elementor-inner-section elementor-element elementor-element-fc991f5 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="fc991f5" data-element_type="section">
                            <div class="elementor-container elementor-column-gap-default">
                                <div class="elementor-row">
                                    <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ace2fcc" data-id="ace2fcc" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-2058ef2 elementor-widget elementor-widget-image" data-id="2058ef2" data-element_type="widget" data-widget_type="image.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="elementor-image">
                                                            <img width="841" height="596" src="kep.jpg" alt="Kertépítés bárhol, bármikor">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2d43c0f" data-id="2d43c0f" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-7e8a5a6 elementor-widget elementor-widget-heading" data-id="7e8a5a6" data-element_type="widget" data-widget_type="heading.default">
                                                    <div class="elementor-widget-container">
                                                        <h3 class="elementor-heading-title elementor-size-default">Borágófa (Carmona microphylla)</h3>
                                                    </div>
                                                </div>

                                                <div class="elementor-element elementor-element-95d4045 elementor-widget elementor-widget-text-editor" data-id="95d4045" data-element_type="widget" data-widget_type="text-editor.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="elementor-text-editor elementor-clearfix">
                                                            <p>Drótozás nélkül is könnyen bonsaiformára nyírható. Szobában könnyen tartható. Tavasszal nyár elején nyílnak fehér virágai. Fényes zöld puszpángszerű levelei teljesen elborítják. Két évente ültessük át.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="elementor-element elementor-element-e6fc503 elementor-mobile-align-justify elementor-widget elementor-widget-button" data-id="e6fc503" data-element_type="widget" data-widget_type="button.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="elementor-button-wrapper">
                                                            <a href="/mini/" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                                                                <span class="elementor-button-content-wrapper">
                                                                    <span class="elementor-button-text">További jellemzők</span>
                                                                </span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Ennek a letöltése és értelmezése a böngésző számára sokkal több idő és érőforrás, mint a következő kódrészlet, ami tartalmilag ugyanaz, de kereső- (és fejlesztő) barát megvalósításban.

<section class="green">
    <div class="container">
        <h1 class="heading-title">Kertépítés bárhol, bármikor</h1>
        <div class="row">
            <div class="col-1-2">
                <img width="841" height="596" src="kep.jpg" alt="Kertépítés bárhol, bármikor">
            </div>
            <div class="col-1-2">
                <h3>Borágófa (Carmona microphylla)</h3>
                <p>Drótozás nélkül is könnyen bonsaiformára nyírható. Szobában könnyen tartható. Tavasszal nyár elején nyílnak fehér virágai. Fényes zöld puszpángszerű levelei teljesen elborítják. Két évente ültessük át.</p>
                <a href="/tovabb" class="button" role="button">
                    További jellemzők
                </a>
            </div>
        </div>
    </div>
</section>

Ahhoz, hogy ilyen szép és átlátható legyen a kód, nem használok oldaléptő megoldásokat, sem semmilyen keretrendszert, (BootStrap, vagy JavaScript frameworkot sem) mindent kézzel írok, a pluginokat igyekszem kerülni.

Meta cím (Title)

Az oldal címe SEO szempontból az egyik legfontosabb eleme a weboldalnak. A Google tulajdonképpen ez alapján dönti el, hogy milyen kategóriába esik az adott oldal, vagyis, hogy mi fog megjelenni a találatok között. Egy kerek egész mondatba foglalva írd le az adott oldal lényegét. Ne a keresőrobotokat akard lenyűgözni, hanem az embereket, akiknek szól az oldal.

<title>Minden, amit tudni akartál a keresőbarát kódolásról</title>

Meta leírás (Meta description)

Ez a meta cím “folytatása”, ugyanazok a szabályok vonatkozik rá, csak itt már picit több karakterben tudod meggyőzni az embereket, hogy kattintsanak. Úgy tekints ezekre, mint a “Call to Action” elemekre a webdesignban, tehát kattintásra ösztönözzön.

<meta name="description" content="Részletes lista arról, hogy hogyan építs már a kezdetektől olyan oldalt, ami tetszik a keresőknek és az embereknek is.">

H1, H2, H3 címsorok (heading)

A szöveg tagolása és strukturálása kiemelten fontos. Mindenképp használd a H1, H2, H3 címsor elemeket. A H1 címsor mindig az adott oldal főcíme. Itt kell olyan szöveget írnod, amely meleg és hívogató, hogy az emberek azt gondolják: “Hű, nagyon szeretném elolvasni az oldal többi részét”. Sokan csak a meta címet másolják át a H1-be, ez sem feltétlenül baj. H2 címsorral szakaszokra lehet bontani a szöveges tartalmat, H3-al pedig tovább tagolni ezeket a szakaszokat.

<h1>A nagy karácsonyfa kalauz</h1>
<p>
    A karácsonyfa kiválasztása az ünnepi készülődés egyik legfontosabb eleme, hiszen a feldíszített fenyő az ünnep fő tárgyi szimbóluma! Természetesen mindenki a legszebb, legtartósabb, legideálisabb fenyőt szeretné megszerezni, azonban a teljes sikerhez türelem, kitartás, pár trükk, és persze olykor anyagi áldozat is szükséges, hiszen a fenyőárak néha igencsak borsosak.
</p>
<h2>A vágott fenyő</h2>
<p>
    Kedvezőbb árú, mint a konténeres fenyők. Természetesen a vágott fák ára is nagymértékben eltérő lehet, például a fa fajtája vagy mérete függvényében, de összességében a vágott karácsonyfa mindig pénztárcabarátabb megoldás.
</p>
<h2>Az élő, dézsás fenyők</h2>
<p>
    A vágott fenyővel kapcsolatos tudnivalóknak a végére is értünk, de ne hagyja abba az olvasást, mert hátra vannak még az élő, dézsás karácsonyfák! Ezeket évről-évre egyre több család választja, és mivel élő fákról van szó, a szállításuk, tárolásuk, és az ünnep utáni kezelésük is egészen eltér a vágott fákétól!</p>
<h3>A dézsás fenyő és a lakás</h3>
<p>
    Az élő fenyő hangsúlyosan hét, de legfeljebb tíz napig maradhat a fűtött lakásban, és ez idő alatt is gondoskodást igényel. Földjét praktikus mulcsolni, hogy a nedvességet jobban megőrizze, páratartalom-igényét pedig néha vízpermettel hasznos kielégíteni, amit az elektromos izzósorok miatt nehéz kivitelezni.
</p>

Belső linkek és horgonyszöveg

Fontos tisztában lenni a belső linkek és horgonyszövegek működésével, mivel minden weboldalon vannak linkek a legkülönfélébb tartalmakhoz. A szavak a horgonyszövegben rendkívül fontosak, mert ezeket nézi a keresőrobot. Ez segít nekik eldönteni, hogy miről szól az oldal és ezeket (is) használják az algoritmusokban, hogy érdemes-e a tartalma alapján megjeleníteni az oldalt.

A főmenün kívül számos hivatkozás van az oldalon. Címkék, gombok, képes hivatkozások, CTA-k, kapcsolódó linkek, stb. Minél jobb a honlap szerkezeti felépítése, annál könnyebb tudják a keresők indexálni a tartalmat. A megfelelő struktúra az egyik legfontosabb, de sajnos az egyik leginkább figyelmen kívül hagyott keresőoptimalizálási módszer.

Egy jó strukturált oldalon több a kattintás, több az oldalon töltött idő, alacsony a visszafordulási arány, és magasabb a konverzió.

<p>
    Az <a href="/elo-fenyo">élő fenyő</a> hangsúlyosan hét, de legfeljebb tíz napig maradhat a fűtött lakásban, és ez idő alatt is gondoskodást igényel. Földjét praktikus mulcsolni, hogy a nedvességet jobban megőrizze, páratartalom-igényét pedig néha vízpermettel hasznos kielégíteni, amit az elektromos izzósorok miatt nehéz kivitelezni.
</p>

Nofollow linkek

Ha mindenképpen le akarjuk fordítani magyarra ezt a szót, akkor a jelentése: “nem követhető linkek”. Tehát olyan linkek, amelyeket a robotok nem tudnak feltérképezni. Ez alapvetően a SPAM tartalmak elkerülésére jött létre. Érdemes például a blogbejegyzések komment szekciójába betenni, hogy ne kapj kéretlen üzeneteket. Ez egyébként egy érdekes téma, ha bővebben érdekel, akkor érdemes a nagyágyúhoz fordulni, itt egy angol nyelvű leírás a Google-től.

Kép alt címek (Image alt tags)

A képek alt attribútuma szintén egy fontos része a weboldal SEO baráttá tételének, főleg, ha e-kereskedelemben utazik a weboldal. Ez mondja meg a keresőnek, hogy miről szól a kép (mit ábrázol). Ez akkor jó, ha összefügg a szöveggel. Ennek a legnagyobb hatása a képkeresésre van. Minél pontosabban megadod, hogy miről szól a kép (összefüggésben a szöveges tartalommal), annál jobb helyre sorolja majd az oldalt a képkeresési találtok között.

A HubSpot idei felmérése szerint a Google keresések egyharmada képekre irányul. Ez egyébként nem annyira meglepő, ha belegondolunk, hogy a szemünk az elsődleges információfeldolgozó szervünk.

TIPP: Itt egy jó módszer a képek alt szövegének megírására: Ha le kellene írnod a képet egy olyan embernek, aki nem lát, akkor hogyan írnád le?

<img width="800" height="600" src="kep.jpg" alt="Kertépítés csodasövénnyel és kerti tóval" title="Kertépítés">

Szerkezeti struktúra

A keresők és felhasználók által is könnyen bejárható weboldalszerkezet gondos tervezést igényel. Egy jó weboldal szerkezet már önmagában felhasználói élmény. Ha a felhasználó azt látja, hogy az oldal jól strukturált és könnyen eligazodik, az egy óriási bizalmi faktor. A megfelelő struktúra nem más, az információk, képi- és szöveges tartalmak rendszerbe szedése, és rangsorolása. Fontos a logikus alá- és fölérendeltség, és a következetes menürendszer is.

Gondolj úgy a weboldalra, mint egy irattartó szekrényre, ahol a szekrény maga a weboldal, a fiók a magasabb szintű kategória, a mappák az alkategóriák és az iratok pedig a weboldal dokumentumai és lapjai.

De természetesen ez sem minden, ezeket a szerkezeti egységeket is úgy kell elrendezni, hogy azok összefüggjenek, logikusan következzenek egymásból. Ez szerencsére nem túl nehéz dolog, hiszen agyunk automatikusan így gondolkozik. Például, ha egy ruházati webshopról van szó, akkor a magasabb szintű kategória lehet a férfi/női/gyerek, az alkategróiák ezen belül lehetnek nadrágok/cipők/szoknyák/stb. a struktúra alsó szintjein pedig az egyes konkrét termékek.

Az URL szerkezet jelzi az adott aloldal kontextusát. Ha észszerűen nevezed el az aloldalakat, akkor az biztosítani fogja, hogy az emberek és a keresőmotorok is értsék a weboldalad felépítését.

  • meggyogyul.hu/noi-ruhak
  • meggyogyul.hu/noi-ruhak/szoknyak
  • meggyogyul.hu/noi-ruhak/szoknyak/alkalmi

Open Graph protokoll

Az Open Graph meta címkék olyan kódrészletek, amelyek szabályozzák a megosztott oldalak elölnézeti megjelenítését a közösségi médiában. A Facebook Open Graph protokoll részei, de más közösségi média oldalak is használják például a LinkedIn, vagy a Twitter. Értelemszerűen, ha ez nincs – vagy nincs megfelelően – beállítva, akkor nem jól fognak megjelenni a megosztásaid. Beállításuk hasonló a többi metacímke beállításához.

<meta property="og:title" content="Az oldal Címe"/>
<meta property="og:description" content="Ez itt az oldal leírása"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://web.hu/images/post-image.jpg"/>
<meta property="og:url" content="ez-itt-az-oldal-linkje" />
<meta property="og:locale" content="hu_HU" />

Schema markup

A sémajelölés olyan kód, amely segít a keresőmotoroknak megérteni a weboldal tartalmát, és jobban megjeleníteni azt a keresési eredményekben. Ez azért fontos SEO szempontból, mert a fent leírtaknál többet is tud. A sémajelölés felerősíti a snippeteket (keresési töredékeket), amelyek gyakran magasabb átkattintási arányt mutatnak, mint a “normál” keresési eredmények. Ez nagyobb forgalmat jelent a webhelynek, ami pedig előnyös SEO szempontból is. Kódszinten meg tudod jelölni az egyes oldalak tartalmát különböző “séma” alapján. Például, bejegyzés, termék, esemény, könyv stb. https://schema.org/docs/gs.html

<div itemscope itemtype="https://schema.org/Event">
    <div itemprop="name">Indul az idei Karácsonyi Vásár</div>
    <span itemprop="description">Közel száz vendéglátós és árus várja majd a karácsonyra készülőket</span>
    Nyitás: <time itemprop="startDate" datetime="2021-12-01">2021. december 01.</time>
</div>

SEO bővítmények és egyebek

Természetesen Dunát lehet rekeszteni a legkülönfélébb SEO bővítményekkel például a WP oldalakhoz és sok más nem beépülő alkalmazás is létezik, amik általában a SEO egy-egy részére fókuszálnak (például a megfelelő kulcskifejezések megtalálása).

Íme, néhány a legjobb (ingyenes) WP SEO plugin közül:

  • WordPress SEO by Yoast 
  • SEMrush SEO Writing Assistant
  • Google XML Sitemaps
  • SEO Ultimate
  • Rank Math 

És néhány egyéb hasznos program:

  • Ahrefs
  • Google Search Console
  • SEMRush
  • KWFinder
  • Moz Pro
  • Ubersuggest
  • Answer The Public
  • SpyFu

Érdemes leszögezni, hogy bár ezek a programok rendkívül hasznosak, rengeteg időt tudnak megspórolni a fejlesztőknek, de ha magának a weblapnak a felépítése nem SEO barát már a kezdetektől, akkor ezek sem fognak csodát tenni.

A betöltési sebességet külön nem emelem ki, ezt a weboldal teljesítmény optimalizálásával ki tudod maxolni.

Összegzés

Fontos, hogy ne különálló részekként kezeld ezeket a dolgokat, amikor a “keresőoptimalizálást akarod elvégezni”. A fentebb leírtak mind-mind valamilyen rész miatt fontosak, és együtt hozzák létre a nagyon ütős SEO eredményeket.

A keresőbarát weboldalkészítés még annak beregisztrációja előtt megtörténik a megfelelő hosting és domain kiválasztásával, majd folytatódik a strukturált tartalom és megfelelő weboldalszerkezet kialakításával. Onnantól valójában az algoritmus teszi a dolgát, nem kell különösebben ráfeszülni, mert “magától” bekerül a weboldal az előkelő helyekre.

Valójában az egész webfejlesztési módszeremet ennek megfelelően alakítottam ki, nem véletlen, hogy ez a weboldal – annak ellenére, hogy most volt csak 1 éves – már jópár fontos kulcsszóra első, vagy az első 3-5 találtat között van.



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.