A keresőmotorok rangsorolási algoritmusai gyakran változnak, de 3 dolog biztos az életben, a halál, az adók és az hogy a keresők organikus találati listáján jó helyezést csak minőségi tartalommal lehet elérni.
A tartalom optimalizálás, angol kifejezéssel on-page SEO egy olyan folyamat, amely során beállítjuk a weboldal tartalmát, szerkezetét, címét, a meta-leírást, a címsorokat, média-elemeket, külső és belső linkeket, struktúrált adatokat. Ezek segítségével könnyen értelmezhetővé tesszük a tartalmakat a keresők és természetesen a látogatók számára is.
Ez a bejegyzés nem a tartalom írásra fókuszál, annak elkészítése egy külön művészeti ág, ami magába foglalja a keresési szándék meghatározásától kezdve a kulcsszó-kutatást, a versenytárs elemzést, a célközönség meghatározását, és így tovább.
A technikai SEO részben említettem, hogy a weboldal optimalizálás három fő részre bontható, amik nem mindig válnak szét egymástól élesen, és egymásra támaszkodnak, egymást erősítik.
Itt a második részre összpontosítunk, azokat a szerkezeti és egyéb tartalommal kapcsolatos szempontokat vesszük sorra, amelyek direkt vagy indirekt módon, de hatással vannak a weboldal találati listás helyezésére és a konverzióra, kis odafigyeléssel és ráfordítással nagy előnyt realizálhatunk.
Ennyi bevezető után muszáj egy bekezdést szólni a történelemről a kulcsszavak kapcsán, mivel ez a fogalom elég sokszor előfordul majd a továbbiakban.
Valamikor, a nem túl távoli múltban keresőmotorok a kulcsszó-sűrűség alapján -is- határozták meg egy oldal elhelyezkedését a találati listákon. Ezért működött az a tartalom optimalizálás technika, hogy a tartalmakat telenyomták kulcsszavakkal, és sokkal inkább a keresőknek szóltak azok, mintsem a felhasználóknak. Például olyan trükköktől sem visszariadva, hogy “láthatatlan”, de kulcsszavakkal telepakolt szövegeket helyeztek el a weboldalakon, ahol a szöveg színe megegyezett a háttér színével. Így a tartalom ezen részét a látogató nem látta, viszont a keresőmotorok igen.
Ma már, és régóta már ezek az elgondolások nem működnek, és a használatuk kifejezetten negatív hatással lehet a weboldal rangsorolására, agyoncsapják az on-page SEO-t.
A Google egzotikus nevű algoritmusai - Panda, Pingvin, Kolibri - elég kifinomultan kezelik ezeket a trükközéseket. Egyértelművé tették sokszor, legutóbb 2022-ben, a “hasznos tartalom rendszer”-rel hogy a találati listákon előnyben részesítik azokat a tartalmakat, amelyek emberek által készültek embereknek, és a céljuk a hasznos információ átadás, nem pedig pusztán csak a helyezések javítása SEO szöveggel. (Egy személyes közbevetést engedj meg nekem: Az, hogy emberek által készült, további elég érdekes kérdéseket vet fel ma, 2023-ban, ahol a csapból is a mesterséges intelligencia folyik, engem nagyon érdekel, ez hová fog kilyukadni)
Azért tettem ezt a V-betűt, hogy felhívjam a figyelmedet, amikor kulcsszavakról lesz szó, az nem azt jelenti, hogy irgalmatlan kegyetlenséggel kell teletömni velük a tartalmat és lenyomni a látogatók torkán, nem erről szól a weboldal tartalom optimalizálás. Nagyon is fontos a használatuk, de ésszel és természetes módon. Sokkal inkább a felhasználóknak szóljon a tartalom, mintsem valami magyartalan, ámde kulcsszavakkal elárasztott katyvaszt tolj a képükbe. Menekülni fognak az oldalról és vaskos büntetéseket is kockáztatsz a keresőmotorok részéről.
Adj értéket, azzal nem lősz mellé.
- A weboldal címének és meta leírásának optimalizálása
A weboldal címének és meta leírásának optimalizálása
Megint a meták. Volt szó róluk, a böngészőknek és a keresőmotoroknak szóló információkat adhatunk meg a segítségükkel, például egy rövid leírást az oldalról, a szerzőt, mi jelenjen meg egy közösségi média megosztáskor, és így tovább.
Ezek az információk nem jelennek meg az oldalon, fogalmazzunk úgy, hogy a metaadatok afféle vezérlő-információk. Amennyiben valamilyen tartalomkezelő rendszerrel készült az oldalad, ezeket aránylag könnyen tudod kezelni.
Ezek a weboldal <head> részébe kerülnek, ha egy oldalon a böngészőben nyomsz egy CTRL+U betűkombinációt, látni fogod te is őket.
A gyakorlatban így néz ki a weboldal címének és leírásának megadása:
<title>Minimalistweb — Bemutatkozás</title> <meta name="description" content=" Miért épp Minimalistweb? Mert szeretem a letisztult dolgokat. Szabadúszó weboldal készítőként segítek, hogy a honlapod a vállalkozásod hatékony arca legyen ">
És várhatóan így fog megjelenni a találati listában (a továbbiakban SERP, Search Engine Results Page):
Hogyan írhatsz jó weboldal címet?
Azt hiszem, sok magyarázatot nem igényel, hogy miért kell hangsúlyt fektetni az oldal címére az on-page SEO szempontjából. Ez fog először megjelenni és szemet szúrni a keresési listákon, a közösségi média megosztásokban, valamint a böngészőkben az oldal-fülön.
A felhasználóknak és a keresőmotoroknak gyakorlatilag ez az első tömör információ arról, hogy miről is szól az oldal.
Az oldal címének hossza
Ahogy a fenti példában láttad, az oldal címe a találati listában egy kék, kattintható hivatkozásként jelenik meg. A méretéből mindjárt azt is kitalálhatod, hogy a hossza nem közelíthet a végtelen felé, noha elméletben nincs szabályozva. Nagyon kevés hely áll rendelkezésre, hogy jó benyomást tegyél a keresőkre és a látogatókra. És mivel ez így van, néhány szempontot figyelembe kell vennünk, hogy hatékonyan tudjunk bánni ezzel a hellyel.
Az ajánlások 50 és 70 karakter közé teszik a maximális hosszt. Ezt a képet árnyalja, hogy a Google nem karakterben számol, hanem pixelben, méghozzá egy kb. 600 pixel széles sávban.
Mutatom, hogy néz ki ez a gyakorlatban:
Ezzel legyél tisztában: az ‘i’ is egy karakter és az ‘M’ is, az oldalcímben viszont nem ez számít. A 600 pixel feletti részt a Google levágja, és három pöttyel … helyettesíti.
Törekedj a figyelemfelkeltő címre
- Az oldalcím, ahogy a neve is sugallja, az adott oldal tartalmára utaló rövid kivonat. Van két egyforma tartalmú oldalad? Remélhetőleg nincs, tehát legyen minden oldalnak egyedi címe.
- Kerüld a semmitmondó, rövid címeket, mint “Rólunk” vagy “Főoldal”. Magadtól vonsz el lehetőséget ezzel, semmilyen információt nem adsz se a felhasználóknak, se a keresőknek az oldalról.
- Használd a fókusz kulcsszava(ka)t, lehetőség szerint a cím elején. De figyelj rá, hogy a nyelvezet természetes maradjon, embereknek írsz, ne halmozd őket.
- Ne legyél kattintásvadász, szenzációhajhász, ne nyomj öncélú süket marketing dumát, az oldal címe mindig legyen releváns a tartalomra. Ha nem azt kapja a látogató, amit a cím ígér, hamar nyomja a vissza-gombot, és a visszafordulási arányt bizony figyelik a keresők.
- Mindig tartsd szem előtt, hogy mi érdekli a látogatót. Próbáld megtalálni, hogy mi a keresési szándéka, győzd meg, hogy te tudod, neked válaszod van arra, amit ő szeretne megtalálni.
- Használhatod a márkanevedet a címben, bár ennek fontosságáról megoszlanak a vélemények.
Miért nem az általad írt cím jelenik meg a listákon?
Egészen egyszerűen nem veszi figyelembe a Google, amit te írtál, és lecseréli a SERP-ben. Miért állhat ez elő?
- Ahogy említettem feljebb, ha túl hosszú, vagy levágja a cím végét, vagy nemes egyszerűséggel lecseréli egy általa lényegesebbnek ítélt szövegrészre az oldal tartalmából.
- A fenti helyzet állhat elő akkor is, ha szerinte nem releváns a cím, nem egyezik meg a felhasználó keresési szándékával, vagy semmitmondó a cím, mint a “Rólunk”
- Kulcsszavakat halmozol a címben. erről is beszéltem feljebb, ne tedd
- Alternatív címmel is rendelkezik az oldal, például a Facebook megosztáshoz, amit megadtál:
<meta property="og:title" content="Oldalad címe a Facebookon" /> Amennyiben a keresőmotor úgy ítéli meg, hogy ez a cím lényegesebb, mint a title tag-ben megadott cím, itt is simán dönthet úgy, hogy cserél.
A weboldal meta leírásának szerepe az on-page SEO-ban
A meta description az oldal rövid tartalmi összefoglalója.
Szintén a weboldal <head> részébe kerül, és az oldalon nem jelenik meg ugyan, de ahogy láttad, a keresési listában megjelenhet, az oldalad címe és URL-je alatt.
Hogyan használja a Google a meta leírást?
És miért írtam, hogy “megjelenhet”? Azért, mert egy 2020-ban készült felmérés szerint a Google a meta leírások közel kétharmadát átírja, ha a keresési szándéknak jobban megfelelőnek ítéli, és úgy gondolja, hogy az általa megjelenített szöveg relevánsabb a keresésre.
Mutatok egy példát, ez egy várandós kismamák allergiás tüneteinek kezelésével foglalkozó oldal meta leírása:
<meta name="description" content="Várandósság alatt, ha csak lehet, inkább nem szedünk gyógyszereket, ám vannak olyan állapotok, amikor mérlegelni kell, hogy a gyógyszer szedése vagy mellőzése j" />
A keresési kifejezés az első esetben az 'allergia kezelése terhesség alatt', a másodikban az 'allergia kezelése várandósság alatt':
Nagyon jól látszik, hogy bár nincs jelentés-beli különbség a két keresési kifejezés között, a második esetben a mégsem az eredeti meta leírás jelenik meg a SERP-ben.
Van ezen kívül még egy nem túl jó hírem ezzel kapcsolatban, a Google a meta leírást nem tekinti rangsorolási faktornak.
Akkor ezek szerint meg sem éri vesződni vele?
De. A fenti példában is láttad, hogy nem feltétlenül írja át a kereső a találati listában, és ha a statisztikáknak hihetünk, az esetek nagyjából 40%-ában az a meta fog megjelenni, amit te írtál az oldalhoz. Ha figyelemfelkeltő, jó leírást készítesz, növelni fogod vele a kattintási arányt.
Valamint ha nem használsz Open Graph metaadatokat, a közösségi médiában ez a leírás fog megjelenni az oldalad tartalmi kivonataként.
Mire figyelj, amikor meta-leírást készítesz?
Nagyjából pont azok a szempontok érvényesek itt is, amik az oldal címére igazak.
- Figyelj a hosszára, amire max. 160 karaktert ajánlanak, de itt is inkább a pixelben mért hossz számít.
- Legyen benne a fókusz kulcsszavad, vagy kulcsszavaid, de itt is kerüld ezek halmozását.
- Minden oldaladnak egyedi meta leírása legyen
- Törekedj arra, hogy a keresési szándéknak megfelelő, figyelmet vonzó szöveget készíts
Eszközök, amikkel az oldal címét és leírását ellenőrizheted
A Google-hoz, és a népszerűbb közösségi oldalakhoz a tartalom optimalizálás során remekül használható eszköz a metatags.io, ahol egyből vizuálisan is tesztelheted, hogyan jelenik majd meg az oldalad.
A karakterszám - pixel hosszúság dilemmájának ellenőrzésére pedig a searchwilderness.com eszközét tudod segítségül hívni.
Két szó a meta keywords elemről
Röviden: felejtsd el.
A bevezetőben említettem a régmúlt idők kulcsszó-mizériáját. Lehetőség volt (és ez ma is nyitva áll még), hogy tudasd a világgal és a keresőkkel, mely szavakra szeretnéd az oldaladat optimalizálni. <meta name="keywords" content="És ide jöhetnének a kulcsszavaid, de felesleges" /> A keresők ezt nagyon rég óta figyelmen kívül hagyják, nem foglalkoznak vele.
Egyetlen előnye talán a konkurenciádnak származhat belőle, hogy megtudja, milyen szavakra szeretted volna az oldalt optimalizálni és ötleteket adj neki…
Nem vagy biztos benne, hogyan csináld a tartalom optimalizálást?
Kerüld el, hogy egy esetleges rossz on-page SEO miatt az oldalad visszaessen a keresőkben és látogatókat veszíts!
Segítek ebben is.
A címsorok szerepe a tartalom optimalizálás során
A címsorok (heading), ahogy a nevük is mutatja, arra szolgálnak, hogy a különböző tartalmi blokkokat címekkel, alcímekkel lássák el az oldalon belül. Hierarchikusan épülnek fel, 6 szintjük van, a h1-től a h6-ig. A számok a hierarchiában elfoglalt helyüket mutatja, a h1 az oldal címe, a legfontosabb.
A céljuk az, hogy a látogatók és a keresők is jobban megértsék, milyen tartalmi részekre tagolódik az oldal, hogyan épül fel.
Az online térben az emberek nem úgy olvasnak, mint egy könyvet. Nagyon kis részük az, aki egy blogbejegyzést, mint ez, szóról-szóra végigolvas, ehelyett szkennelő üzemmódban futják át a tartalmat, kulcsszavakat, fontos információt keresve. Ezért a címsoroknak több más vizuális elemmel együtt kiemelkedő szerepük a weboldal tartalom optimalizálás szempontjából, hogy irányítsák a látogatókat a tartalom számukra releváns részei felé. Ha könnyen megtalálják a keresett információt, jóval kisebb eséllyel hagyják el az oldaladat, mielőtt egy fél mondatot is elolvastak volna.
Miért kell figyelmet fordítani a címsorokra?
- Ahogy feljebb említettem, közvetlen hatással vannak a felhasználói élményre, ez nem igényel további magyarázatot
- Struktúrát adnak az oldalnak, tartalmilag összefüggő elemekre bontják, nem egy ömlesztett szöveghalmaz lesz az eredmény. Különösen igaz ez nagyobb terjedelmű tartalmak esetén
- Bár a Google nem erősítette meg, hogy rangsorolási faktor lenne, felmérések azt mutatják, hogy a h1 címsor mégis tényező. Segíti a keresőmotorokat megérteni azt, miről szól az oldal. Előfordulhat olyan eset is, amikor a SERP-ben az oldal címe helyett a h1 címsor jelenik meg
Tippek, amik segítenek jó címsorokat írni
Meglehetősen hasonló elgondolások mentén haladj itt is, mint az oldalcímnél.
- A címsorok hierarchiája tükrözze az oldal tartalmi szerkezetét.
- Legyél lényegre törő. Bár a címsorok hosszára nincs megkötés, csak ajánlások, a h1 címsor lehetőleg ne legyen hosszabb 70 karakternél.
- Ne feledd, embereknek írsz, nem a keresőmotoroknak. Segítsd a látogatót, hogy számára fontos információt mielőbb megtalálja.
- Legyél következetes a címsorok kinézetében. Ugyanazt a formázást és elrendezést alkalmazd egy-egy szinthez.
- Használd a releváns kulcsszavadat, lehetőleg a címsor elején. És itt is igaz, kerüld ezek halmozását.
- Legyen minden oldalnak egyedi h1 címsora, ugyanúgy, mint oldalcíme. Bár semmi nem tiltja több h1 használatát egy oldalon belül, ez nem szerencsés megoldás.
- Ajánlások szerint lehet-legyen ugyanaz a h1 címsor, mint az oldal címe, de ez nem kötelező. Ha nem egyeznek, nagy eltérés ekkor se legyen, ebben az esetben a h1 célozza ugyanazt a témát és tartalmazza ugyanazt a kulcsszót, mint az oldal címe.
- Ne ugorj át címsor szinteket, pl. ne következzen h3 a h1 után, ezt kerüld:
<h1>Oldal főcíme</h1>
<h3>Tartalmi blokk címe</h3> - És a végére egy tapasztalat. Láttam olyan weboldalt, ahol 35 db. h1-es HTML elem szerepelt. Mint kiderült, a weboldal készítője a szövegben bizonyos szövegrészek formázására használta ezt, teljesen félreértve a címsorok funkcióját.
Arra használd őket, amire valóak, formázásra pedig ott vannak a stíluslapok.
A képek optimalizálása
Kép, kép gondolhatná az ember, odateszem, mert illik a témába, vagy csak azért, mert jól néz ki, tetszik, és kész is vagyunk.
Ennél azonban kicsit árnyaltabb a helyzet, van néhány tényező, amit muszáj figyelembe venni.
Alapvetően a Google a képet önmagában nem tudja értelmezni, viszont az ahhoz tartozó szövegkörnyezetet igen. Ezt szem előtt kell tartani, része az on-page SEO-nak, foglalkozni kell vele, sok más szemponttal együtt, mint a képek mérete, a kép-fájl neve, fizikai mérete és formátuma. Utóbbiak nagyban hatással vannak a betöltés sebességére, ahogy a weboldal gyorsítással foglalkozó blogban kitárgyaltuk, és összességében hatással lesznek a felhasználói élményre és arra, hogy a keresők hogyan ítélik meg az oldalt.
Fontos itt az elején két dolgot megjegyezni.
Az egyik az, hogy a webes keresésekben a Google nem igazán foglalkozik a képekkel, a képkereső funkcióban természetesen annál inkább. És mivel a képkeresőben már jó ideje csak úgy tud a felhasználó egy képet megnyitni, hogy a teljes weboldalt megnyitja, nem csak a képet önmagában, ez egy újabb csatorna, ahonnan látogatót irányíthatsz az oldaladra.
A másik pedig az egyedi és a képgyűjteményekből származó fotók kérdése. Természetesen sokkal előnyösebb, ha saját, jó minőségű képeket használsz, de a Google nem tiltja vagy bünteti a stock-fotókat, viszont előfordulhat, hogy a képkeresőben ezek nem kerülnek előtérbe.
Összefoglalva a képek optimalizálására a felhasználói élmény növelése, a könnyebb érthetőség miatt van szükség, és azért, hogy segítsen további forgalmat irányítani az oldalra.
A képek paraméterei
A képek weboldalba illesztésére az <img> HTML címke szolgál: <img src="/images/2023/03/05/weboldal-gyorsitas.jpg" alt="Weboldal gyorsítás - betöltési sebesség optimalizálás" title="A képformátumok közötti különbségek magyarázata" width="1200" height="600"> Az src paraméter a kép URL-jét adja meg, azaz hogy hol találja a böngésző, az alt a kép alternatív leírása, a title a kép címe. A width és height a kép szélessége és magassága pixelben megadva.
Ez egy alapeset a legfontosabb paraméterekkel, nyilván jóval több létezik, említeni is fogok egy párat a későbbiekben.
Alternatív leírás, az alt paraméter
Valószínűleg te is találkoztál már weboldalakon azzal a kicsi ikonnal, ami egy törött képet ábrázol, mert a böngésző valamilyen okból nem tudott betölteni egy képet, és az ikon mellett egy rövid szöveg szerepelt.
Nos, ez az alternatív leírása a képnek, és alapvetően ez a fő funkciója, helyettesíteni a képet, ha az nem megjeleníthető.
Emellett nem elhanyagolható - ahogy említettem -, hogy a keresők is értelmezik ezt a szöveget, mivel a képet nem tudják.
Valamint akkor is fontos, ha egy csökkent látóképességű látogatód valamilyen felolvasó programot használ.
Hogy milyen alt szöveget írj, függ kép a céljától. Általános szabályként azt lehet megfogalmazni, hogy legyen hasznos a felhasználónak - és a keresőknek -, legyen összhangban a szövegkörnyezetével, tartalmazzon kulcsszót, természetesen itt is a józan ész határain belül.
Az ajánlások szerint ha csak dekorációs céllal teszel be egy képet, és nem hordoz kiegészítő információt, nincs szükség alt szövegre. De vigyázz, ne hagyd el, hanem hagyd üresen az alt attribútumot: alt=””. A felolvasó szoftverek ilyen esetben ignorálják a képet. Ha kihagyod, a képfájl nevét fogja a szoftver felolvasni.
A title paraméter, a kép címe
Azzal kezdem, hogy én nem használom, engem kifejezetten idegesít, de ez csak magánvélemény. Láttad ezt is talán, ez az a kicsi szöveg, ami akkor jelenik meg, ha a kép fölé húzod az egeret.
A Google, ahogy megszokhattuk, nem egyértelműen nyilatkozik ennek fontosságáról, leginkább a képkeresésnél van funkciója.
Azt tudnod kell, hogy mobil eszközökön ez nem fog megjelenni, mivel a megjelenéséhez kell egy kurzor, ami kép fölé kerül.
Ha úgy érzed, hogy plusz információt tudsz hozzáadni ezzel a képedhez, használd, de nagy erőfeszítést ne tégy bele.
A képfájlok neve
A technikai optimalizálás részben olvashatsz bővebben az URL struktúra kialakításának fontosságáról.
A Google saját bevallása szerint használja az URL-t és a fájl nevét is annak érdekében, hogy jobban megértse, miről szól a kép.
Habár nem túl nagy súllyal számít az optimalizálásnál, az ott elhangzottak érvényesek itt is, alkalmazd őket, legyen beszédes a fájl neve, és legyen rendezett az URL is.
Példaként, fényfüzéreket is árusítasz, és blogot is írsz ezekről, és teszel be egy képet egy háromszínű ledes füzérről.
Valljuk be, ez nem egy szerencsés megvalósítás:
https://sajatwebshop.om/blog/kategoria1/bejegyzes13/dsc0314.jpg
Alakítsd inkább így:
https://sajatwebshop.om/blog/fenyfuzerek/ledes-megoldasok-elonyei/harom-szinu-led-fenyfuzer.jpgHasználj kulcsszót a fájlnévben, de itt is igaz az alaptétel, ne halmozd.
A képek mérete
Két dologról beszélünk a képek méreténél, az egyik a dimenzióik, mint a szélesség és a magasság pixelben megadva, a másik pedig a képfájl fizikai mérete.
A weboldal sebességgel kapcsolatban szintén írtam erről a témáról, érdemes elolvasnod.
Pár szóval összefoglalva az ott leírtakat, fontos, hogy megfelelő képformátumot és tömörítést alkalmazz (pl. WEBP), hogy a lehető legkisebb legyen a fájl mérete látható minőségromlás nélkül. Ezen kívül a kép szélességét-magasságát is tartsd szem előtt, pl. egy kis felbontású mobilkijelzőn teljesen értelmetlen egy 4000x3000 pixeles képet megjeleníteni - ez utóbbit mindjárt megnézzük közelebbről kicsit.
Ha ezt a két szempontot figyelembe veszed, már nagyon nem lőttél mellé.
Nem nehéz kitalálni, hogy minél nagyobb egy kép fizikai mérete, annál tovább tart betölteni, romlik a felhasználói élmény. Célszerű lenne a látogató eszközének felbontásához igazítani a képek méretét, így megelőzvén azt, hogy pl. egy mobiltelefon kijelzőjén feleslegesen nagy képeket jelenítsünk meg.
A HTML5-ben specifikált srcset attribútum ad erre nekünk lehetőséget, illetve a böngésző programoknak, hogy több forrás-képet is használhassunk, és a böngésző dönthesse el azt, hogy adott kijelzőn ezek közül melyiket tölti be és jeleníti meg.
Ennek használatát két nagyon leegyszerűsített példán keresztül nézzük most meg.
<img src="/images/kep.jpg" srcset="
kicsi-kep.jpg 320w,
kozepes-kep.jpg 640w,
nagy-kep.jpg 960w"
alt="A kép alternatív leírása"> <img src="/images/kep.jpg" srcset="
kicsi-kep.jpg 1x,
kozepes-kep.jpg 2x,
nagy-kep.jpg 3x"
alt="A kép alternatív leírása"> Az alternatív leírást feljebb kitárgyaltuk.
Az src attribútumot kötelező megadni, ő jelöli az “alapértelmezett” képet, ha esetleg a böngésző nem támogatná az srcset -et, vagy valamilyen oknál fogva az ott felsorolt képeket nem tudná betölteni, ezt fogja használni.
A mi példánkban az srcset-ben 3 különböző méretű kép van felsorolva.
Az első esetben direkt mondjuk meg a böngészőnek a képek szélességét, pixelben megadva, 320, 640 és 960, talán ez nem kíván további magyarázatot.
A második esetben a kicsi-kep.jpg lesz a kiindulási alap (1x), és azt adjuk meg, hogy a többi kép szélessége ehhez hogyan viszonyul, 2x, 3x.
A látogatónk böngészőprogramja ezen iformációk alapján fogja eldönteni, hogy melyik képet tölti le és jeleníti meg.
Ízlések és pofonok különbözőek, de én az első megoldást preferálom, sokkal informatívabb nekem is és talán a böngészőnek is. Valamint kicsit rugalmasabb, nem csak viszonyszámokkal dolgozhatsz 1.5x, 2x, 3x, stb, hanem eltérhetsz ezektől, pl. 320w, 450w, 675w.
Sok más tényezőtől is függ, de természetesen minél nagyobb egy kép pixelben mért szélessége és magassága, a fizikai mérete is annál nagyobb lesz, tehát ezzel a megoldással elérheted, hogy alacsonyabb felbontású képernyőkön ne egy hatalmas méretű képet jelenítsen meg a böngésző, spórolva ezzel az átvitt adat mennyiségével és a betöltési idővel.
A belső- és az oldalról kifelé mutató linkek
Előre bocsátom, ennek a témának csak a héját fogjuk megkapargatni, néhány alapvető tudnivalót beszélünk át, mert ez is egy különálló, igencsak terjedelmes témakör.
A belső linkek
Belső linknek nevezzük azokat a linkeket, amik egy adott weboldalon belül egy másik oldalra, másik tartalomra mutatnak, tehát olyan oldalra, ami ugyanazon a domain-en helyezkedik el.
Az oldalon való navigációt segítik, illetve adott témaköröket kapcsolnak össze, és ez a mondat mindjárt rávilágít arra, hogy a funkcióik szerint is különbséget kell tennünk.
Navigációs linkek
Ezek azok, amelyek a menüpontokban vannak, az oldalsávban helyezkednek el, vagy a láblécben, de ebbe a körbe tartoznak a morzsamenük is. Ezek a típusú linkek általában a weboldal összes aloldalán jelen vannak. Fő feladatuk pont az, ami a nevükben is benne van, az oldalon való eligazodást segítik, mind a felhasználóknak, mind a keresőmotoroknak.
Azt tudni kell róluk, hogy a keresőmotorok szemszögéből ők nem olyan “értékesek”, mint a tartalmi linkek.
A tartalomban elhelyezett linkek
Szerkesztői linknek is nevezik őket. Nagyon fontos linkek ezek, összetartozó, egymást erősítő tartalmi csoportokat hozhatunk létre velük, amelyek mutatják a keresőknek, hogy jártas vagy az adott témában, értékes a tartalmad, ami előnyt jelenthet az oldalaid rangsorolásánál. Célzottan tudod velük szétosztani az oldaladra beáramló link-erőt, nagyobb az értékük, mint a navigációs linkeknek.
Segítenek abban, hogy a látogatód tovább kattintva többet olvassanak, azaz több időt töltsenek a weboldaladon, csökkentve ezzel a visszafordulási arányt.
A keresőrobotok szempontjából is előnyösek, hamarabb megtalálhatják az új tartalmaidat a belső linkeken keresztül.
Néhány tipp, amire figyelj
- A link horgonyszövege (a szöveg azon része, amire kattintva megnyílik az új oldal) legyen releváns a szövegkörnyezetre, és a linkelt oldal tartalmára, használj kulcsszót (természetesen itt is a kulcsszavakra vonatkozó intelmek figyelembevételével).
Kerüld a semmitmondó “Katt ide!”, “Tudj meg többet!” szövegeket. Maradjunk a kedvenc témámnál, a félhomálytizedelőnél, gondolom észreveszed a különbséget:
“több infóért katt ide”
“9 további tipp a félhomálytizedelő használatához” - Ha egy céloldalra több link is hivatkozik egy oldalról, akkor az első link horgonyszövege számít, a többivel már nem foglalkozik a Google
- Amennyiben képet használsz linkként, annak az alt szövege lesz a horgonyszöveg
- Belső linkeknél kerüld a nofollow attribútumot, mivel így nem adsz át link-erőt
- A landing oldalak kivételével ne legyen árva oldalad, amelyikre egyetlen link sem mutat, mert hiába találja meg a keresőrobot az oldaltérkép alapján, a látogatóid számára ez láthatatlan marad
- Állíts be korrekt és informatív 404-es oldalt, mert ha egy nem működő linkről ide kerül a látogatód, és ha csak annyit lát, hogy “404, az oldal nem található”, az átadott link-erő elveszik, és a felhasználói élmény szempontjából sem szerencsés ez, néz majd szerencsétlen, mint keszeg a tepsiben, hogy akkor most hogyan tovább…
- A linkek számával óvatosan gazdálkodj egy adott oldalon belül, mert ezek közt megoszlik a link-erő.
Az oldalról kifelé mutató linkek
Nem véletlenül nem írtam “külső linkek”-et. A kifelé mutató linkek te oldaladról egy másik domain-en elhelyezkedő oldalra mutatnak, a külső link (backlink) fogalma pedig pont ennek az ellenkezője, amikor egy másik weboldalon linkelik meg a te tartalmadat.
A Google vezető elemzője, John Mueller 2021-ben azt mondta a kimenő linkekről, ha van egy jó tartalmad a weboldaladon, amely más meglévő tartalmakra hivatkozik, és ez a struktúra további értéket ad az oldalhoz, akkor ez az oldalad szempontjából összességében egy hasznos dolog. Azonban csak bedobni egy hivatkozást egy mérvadó, tekintélyes oldalra (ettől remélvén jobb eredményeket, a szerk.) semmilyen változást nem eredményez a Google szempontjából.
Ha ez így van akkor miért érdemes mégis egy kicsit ezzel foglalkozni? Mueller egy korábbi videóban így fogalmazott: “Linking to other websites is a great way to provide value to your users.” Olyan linkeket elhelyezni, amelyek másik weboldalakra mutatnak, jó technika arra, hogy értéket adj a látogatóidnak.
Magyarán itt is a felhasználói élmény az elsődleges válasz, és egy, a Google számára fontos angol rövidítés, az EAT: Expertise, Authoritativeness, Trustworthiness, azaz a szakértelem, hitelesség és megbízhatóság.
A kimenő linkek tehát erősíthetik a weboldal hitelességét és a tartalom minőségét is alátámasztják, jelzik azt, hogy utánajártál a témának, amiről szól a tartalom és segítik a látogatókat további információkhoz jutni. Az ilyen linkek növelik a látogatóid elégedettségét, ami erős szignál lesz/lehet a keresőmotoroknak is.
És hogy mire figyelj?
- Itt is elmondható, ami a belső linkeknél, ne halmozd a kulcsszavakat a horgonyszövegben.
- Természetes legyél, embereknek írsz továbbra is, csak azért, hogy legyen külső link, ne erőltesd. Ha erőltetettnek érzed, akkor inkább ne tedd.
- Győződj meg arról, hogy az oldal, amit hivatkozol valóban hiteles forrás.
- Amennyiben komment-lehetőséget biztosítasz az oldalon, figyelj oda arra, hogy ne váljon egy spam-link gyűjtővé, ahová a felhasználók (vagy botok) szórják ész nélkül a linkeket, mintha nem lenne holnap.
A struktúrált adatok
Valószínűleg már te is láttál ilyet, de nézzük meg egy példán keresztül, hogy miről is szól ez az egész, legyen a kereső kifejezés a “babgulyás recept”, itt pedig egy találat rá:
Itt egy “sima” keresőbeli megjelenéshez képest plusz információkat is látsz, a recept értékelését, elkészítési idejét, és egy képet is az ételről. Ezek a struktúrált adatok segítségével jelentek meg a találati oldalon.
Természetesen nemcsak receptek, hanem emberek, könyvek, események, helyi üzletek, értékelések, és sok más adat bővebb leírására használhatóak.
A struktúrált adatokat a schema.org adatmodell alapján jelölik meg, amely létrehozásában a főbb keresőmotorok, mint a Google, Bing, Yahoo működtek együtt, és ezekkel az adatokkal a weboldalad tartalmáról bővebb információt tudsz adni a keresők számára.
Alapvetően 3 formátumban helyezhetőek el egy weboldalon, ezek a JSON-LD, a Microdata és az RDFa.
Nem akarok technikailag mélységeiben belemenni, csak pár mondatban, hogy melyik mégis micsoda.
- JSON-LD (JavaScript Object Notation for Linked Data):
Az adatokat JSON formátumban jelölik meg, ami egy JavaScriptből származó leírás, könnyen olvasható és értelmezhető a számítógépek és az emberek számára egyaránt.A <script> címkével adjuk meg, lehetőség szerint az oldal <head> részében, de kerülhet a <body> címke után is. - Microdata és RDFa:
A JSON-tól eltérően nem script-ként adjuk meg a jelöléseket a struktúrált adatokhoz, hanem közvetlenül a HTML kódba illesztjük be jelölő attribútumokat, speciális címkék segítségével.
Egyszerű példa mindegyikre, egy személy struktúrált adatai: neve, pozíciója, egy kép és a bemutatkozó oldalának URL-je:
<script type="application/ld+json">
{ "@context": "http://schema.org/",
"type": "Person",
"name": "János",
"jobTitle": "Igazgató",
"image": "http://wepshop.om/kepek/bemutatkozo-kep.jpg",
"url": "https://webshop.om/bemutatkozas" }
</script> <div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">János</span>
<img itemprop="image" src="http://wepshop.om/kepek/bemutatkozo-kep.jpg" alt=""/>
Rólam oldal: <a href="https://webshop.om/bemutatkozas" itemprop="url">Tudj meg többet Jánosról!</a>
</div> RDFa
<div vocab="http://schema.org/" typeof="Person">
<a property="image" href="http://wepshop.om/kepek/bemutatkozo-kep.jpg"> <span property="name">János</span> </a>,
<span property="jobTitle">Igazgató</span>
<div> Rólam oldal: <a property="url" href="https://webshop.om/bemutatkozas">Tudj meg többet Jánosról!</a>
</div>
</div> Használhatod bármelyiket, de a Goolge a JSON-LD-t ajánlja, és talán látszik, hogy előnyösebb is, mint a HTML kódokkal való zsonglőrködés. Szerintem jóval kisebb a hibalehetőség.
Oké. De miért jó ez nekünk? Habár nem nyert igazolást, hogy a találati listás helyezéseket közvetlenül befolyásolná a struktúrált adatok használata, ettől függetlenül kétségtelen előnyökkel jár az alkalmazásuk.
- A keresők jobban megértik, mitől szól az oldalad
- Felmérések szerint az átkattintási arányt egyértelműen növelik
- Előnyt szerezhetsz a versenytársaiddal szemben, akik nem alkalmazzák, és bizony hátrányt is, ha te nem alkalmazod a struktúrált adatokat.
Ahogy megszokhattuk, a Google itt sem garantálja, hogy meg is jeleníti őket a találati listákon. A babgulyás receptnél is jóval több adat van megadva, pl. hozzávalók, előkészítési idő, stb.
Figyelembe kell venned, hogy amennyiben pl. nem a megfelelő struktúrákat használod az oldalon, azok nem relevánsak az oldal tartalmára, hibásak, manipulatívak, nem teljesítik a a Google ide vonatkozó irányelveit, ezekért bizony büntetést is kaphat az oldalad.
A Google és a schema.org tesztelő-eszközt is a rendelkezésedre bocsát, amivel ellenőrizheted az oldaladon lévő struktúlrált adatokat. Viszont ezek az eszközök a kódok helyességét ellenőrzik, a feljebb említett problémákat nem, az a te felelősséged.
A favicon
Apróság a végére, vagy annak tűnő dolog.
Miről van szó?
Arról a kicsi ikonról, ami a weboldalam neve mellett látsz.
Néhány éve ezek az ikonok még nem jelentek meg a keresési listákban, ma már viszont igen.
Bár nincs közvetlen hatása a SERP-ben elfoglalt helyre, de a favicon részévé vált az on-page SEO-nak, és előnyökkel jár az alkalmazása:
- Megjelenítheted a logódat, a brandedet
- Hatással lehet az átkattintási arányra
- A böngésző programok megnyitott fülein és a könyvjelzők között is megjelennek ezek, segítve a könnyebb navigálást az oldalak közt.
Amennyiben nem használod, a Google egy általános ikont fog megjeleníteni, vagy a tartalomkezelőd alapértelmezett favicon-ját.
Ne ess ebbe a hibába, pár tipp a favicon használatához:
- Négyzet alapú ikont használj, pl. 48x48 vagy 96x96 pixel felbontással
- Legyen egyedi, a cégedre jellemző, például a logód
- Kerüld a fényképek és a 2-3 karakternél hosszabb szövegek használatát, ilyen kicsi képeknél nagyon rosszul fognak mutatni
- Természetesen legyen indexelhető
- Ne cserélgesd gyakran
A favicon-t a weboldalad <head> részébe tudod elhelyezni:
<link rel="icon" href="https://webshop.om/favicon.ico" type="image/x-icon" />
Összefoglaló
A felhasználói élmény növelése és a találati listás megjelenés miatt szükséges a tartalmat optimalizálni. Nem mindegyik elem hat közvetlenül a helyezésre, de közvetetten hatásuk van az átkattintási arányra, az oldalon eltöltött időre, ami nagyban befolyásolja a SERP eredményeket.
Az on-page SEO szemponjából figyelmet kell fordítani az oldal címére, a meta-leírására, a címsorokra és azok hierarchiájára, a média-elemekre, a külső és belső linkekre, struktúrált adatok használatára és a favicon beállítására.