A technikai SEO: checklist és SEO-beállítások a Drupalban

A SEO-nak három területét szokás megkülönböztetni:

  1. a tartalom optimalizálását, azaz írását, szerkesztését, gondozását (on-page SEO),
  2. a weboldal népszerűsítését linkszerzéssel vagy más csatornákon keresztül (off-page SEO) és
  3. a technikai SEO-t.

Az informatív tartalom a legfontosabb ahhoz, hogy egy-egy keresőkifejezésre előkelő helyen szerepeljen egy-egy oldalunk a találati listákon, de két, hasonlóan informatív és jól megírt tartalmú oldal helyezési sorrendjében az lehet a döntő, hogy a másik két aspektusban hogyan teljesítenek.

Mi a technikai seo?

A technikai SEO, vagyis technikai keresőoptimalizálás olyan tevékenységeket jelent, amelyekkel a weboldalunkat és website-unkat technikai szempontból javítjuk és karbantartjuk. 

A cél:

  • egyrészt az, hogy lehetővé tegyük a robotok számára a tartalmunk feltérképezését és értelmezését, hogy egyáltalán megjelenhessenek az oldalaink a keresőkben, 
  • másrészt az, hogy a humán felhasználók számára a megkönnyítsük és élvezetessé tegyük az oldalaink felfedezését és használatát.

Technikai SEO ellenőrzőlista (checklist)

Oldalbetöltődési sebesség

Nyilvánvaló, hogy az oldalak betöltődési sebességének óriási hatása van a felhasználói élményre és egyáltalán arra, hogy használják-e a webhelyünket az emberek. A javaslat régóta az, hogy tartsuk a betöltődési időt 3 másodperc alatt.

A Google 2017-es kutatása szerint ha 1 másodpercről 3 másodpercre nő a betöltődési idő, az 32%-kal növeli a visszafordulási arányt!  

2020-ban a Google rangsorolási tényezői közé bekerült alapvető webes vitals-mutatók (Core Web Vitals) kézzelfoghatóbbá teszi, hogy melyik oldalélménnyel kapcsolatos sebességértékekre kell figyelnünk. 

A Google PageSpeed Insights eszközével egy adott URL-t megadva ellenőrizhetjük a webes vitals-mutatókat desktopon és mobilon, és itt a konkrét javítanivalók listáját is megkapjuk. Ha már van elegendő forgalmunk, akkor a Google Search Console-ban (a Felhasználói élmény > Alapvető webes vitals-mutatók fülön) is ellenőrizhetjük, hogyan teljesítenek az oldalaink.

Szemantikus HTML

Míg a weboldalak felépítése, elemeinek hierarchiája és jelentése a humán látogatók számára egyértelmű és intuitív lehet anélkül is, hogy látnánk magát a kódot, a HTML címkék a gépek számára könnyítik meg ugyanezeknek a megértését.

A gépeket a HTML címkék informálják, hogy egy adott szövegrész H1–H6 címsor, bekezdés vagy épp képaláírás, vagy hogy egy oldalelem funkciója a navigáció, a lábléc része-e, vagy a fő tartalmi rész szerves eleme, esetleg ahhoz lazán kapcsolódó, kiegészítő információ. 

Ha a megfelelő HTML5-elemeket használjuk az oldalaink egyes részeihez, az segít a keresőmotoroknak és a képernyőolvasóknak az oldalvázlat megértésében. 

A HTML segít abban, hogy egyértelművé tegyük a gépek számára, hogy mi is az oldalunk valódi témája, melyek a legrelevánsabb és legfontosabb elemei, és az egyes elemek hogyan viszonyulnak egymáshoz.

Amit általában könnyű az admin felületen, kódolási tudás nélkül javítani, az a címsorszerkezet. Gondoskodjunk róla, hogy a tartalom címe <h1> elem legyen (Heading 1, címsor 1), az alcímek pedig sorrendben kövessék egymást, logikusan tagolva a szöveget, vagyis az első szintű címsor második szintű címsorok kövessék; ha a második szintű címsorok alatti tartalomnak további alcímekre tagolására van szükség, akkor azok harmadik szintű címsorok legyenek stb.

Feltérképezhetőség és indexelési állapot

Meg tudják találni a robotok az oldalainkat? Hány oldal található meg a Google indexében, és melyek ezek? Köztük vannak a fontos oldalak? Ezt ellenőrizhetjük a Google Search Console-ban az Index > Lefedettség fülön, vagy akár egy site:domain.hu Google-kereséssel (ahol a domain.hu rész helyére a saját domainnevünk kerül). 

Ha azt tapasztaljuk, hogy egyáltalán nincs indexelve a site-unk vagy egyes részei, érdemes a robots.txt fájlban ellenőrizni, hogy nincsenek-e letiltva a keresőrobotok. A robots fájlt a domain.hu/robots.txt címen érjük el. 

Tökéletesen bejárhatók a website-unk linkjei? Ennek a vizsgálatára a Screaming Frog alkalmazás tökéletes választás, amelynek az ingyenes verziójával 500 URL-ig feltérképezhetjük a webhelyünket: többek között megnézhetjük, melyik oldalunkra hány link mutat és melyik oldalakról, milyen linkszöveggel; felderíthetjük a törött linkeket (amelyek nemlétező oldalakra mutatnak), illetve az átirányításokat; egyetlen jelentésben láthatjuk az oldalakhoz tartozó 1. és 2. szintű címsorokat, page title-öket, metaleírásokat, stb. A fizetős verzióban rengeteg konfigurációs lehetőséget találunk, a bot típusának meghatározásától a javascriptes renderelés beállításáig.

XML és HTML oldaltérkép

Az XML oldaltérkép a domain.hu/sitemap.xml címen található. Ez egy XML fájl, amivel jelezhetjük a robotoknak, hogy mely oldalainkat tartjuk jó minőségű keresési landingoldalaknak, és amely hozzájárulhat ahhoz is, hogy gyorsabban feltérképezzék és indexeljék az oldalainkat a robotok.

Az XML oldaltérkép különösen nagy (több ezer oldalt tartalmazó), és/vagy mély linkszerkezetű, és/vagy gyakran bővített, frissített tartalmú, és/vagy árvaoldalakat tartalmazó website-ok esetén fontos, de egyéb esetekben sem árt. Az XML oldaltérképet érdemes a Google Search Console-ba is feltölteni.

A HTML oldaltérkép inkább a felhasználóknak szól: ez egy olyan oldal a honlapon, ahol az összes aloldal linkje megtalálható, általában vizuálisan, az elrendezéssel, pl. többszintű felsorolásos formával is segítve a szerkezet áttekintését.

Hreflang attribútum

Ha ugyanaz a tartalom több nyelven is megtalálható a site-on, akkor a hreflang HTML attribútummal jelezhetjük a Google számára, hogy milyen nyelveken létezik az adott tartalom, melyik tartalomnak melyik más oldalak milyen nyelvű fordításai.

A hreflang attribútum ellenőrzéséhez kattintsunk az oldalon jobb egérgombbal, válasszuk a „View page source” menüpontot, majd keressünk rá a „hreflang” szóra. Egy olyan tartalomnak a kódjában, amelynek van magyar és spanyol verziója, kell találnunk egy ilyen részletet:

<link rel="alternate" hreflang="hu"
       href="https://domain.hu/oldal" />
<link rel="alternate" hreflang="es"
       href="https://domain.hu/es/pagina" />

A képek alt attribútuma

Ha valamilyen okból egy képet nem lehet megjeleníteni, akkor az alternatív szöveg jelenik meg helyette, illetve a képernyőolvasó programok is az alternatív szövegeket olvassák fel ott, ahol kép van a tartalomban. Nem mindig kell kitölteni (például díszítő funkciójú képekhez nem kell írni alternatív szöveget), de minden képnek kell hogy legyen alt attribútuma.

Annak az ellenőrzéséhez, hogy van-e a képeknek alt attribútumuk, kattintsunk az oldalon jobb egérgombbal, válasszuk a „View page source” menüpontot, majd keressünk rá: alt=. Legalább ennyinek: alt="" minden képnél szerepelnie kell – és bizonyos képeknél jó, ha ez ki is van töltve, ám ez már túlmutat a technikai SEO-n.

Mobilbarát megjelenítés (reszponzív oldalak)

Ma már felhasználói alapelvárás (és rangsorolási tényező is), hogy minden oldalnak minden kijelzőméreten tökéletesen használhatónak kell lennie.

A Prompt.hu egyik oldalának desktopos és mobilos megjelenítése

A Google kínál erre egy tesztelőeszközt, a Mobilbarát teszt oldalt, de a Search Console-ban is van szekciója a mobilos használhatóságnak (Felhasználói élmény > Mobilos használhatóság).

Szerkeszthető oldalcím

A page title, azaz az oldalcím egy HTML elem, amelynek az értéke lesz a Google találati listán a nagy, kék, kattintható szöveg, illetve ez jelenik meg a böngészőben a fülön is:

Az oldalcím HTML elem a Google találati listán

 

A page title HTML elem megjelenése a böngészőfülön

A page title közvetlen Google-rangsorolási tényező is (bár újabban gyakran lecseréli a Google a címsor 1-re, vagyis a <h1>-re), ezért fontos, hogy az oldal kezelői hozzáférjenek és tudják szerkeszteni.

Szerkeszthető metaleírás (meta description)

Ez az az ízelítőszöveg, amely a Google találati listán a nagy, kék, kattintható szöveg alatt megjelenik.

A meta description HTML elem megjelenése a Google találati listán

Közvetlen rangsorolási szerepe nincs, ám nagyban befolyásolhatja, hogy az oldalunkra kattintanak-e a felhasználók, ezért fontos, hogy az oldal kezelői tudják szerkeszteni.

Technikai SEO beállítások a Drupal honlapjainkon

Honlapjainkat úgy építjük meg, hogy gondoskodunk 

  • az optimalizált kódról, amiben nem lesz semmi, ami felesleges vagy nem oda való,
  • arról, hogy a keresőrobotok fel tudják térképezni a honlapot, minden link bejárható legyen,
  • a reszponzivitásról, vagyis arról, hogy az oldalak minden népszerű képernyőméreten jól mutassanak és kiválóan használhatók legyenek,
  • a gyors oldalbetöltődésről, hogy a sebesség se legyen akadálya a minél jobb pozíció elérésének a Google találati listáján.

Minden esetben telepítjük az alapvető technikai SEO-beállításokat lehetővé tevő modulokat is, hogy a honlap tulajdonosainak és kezelőinek minél könnyebb dolguk legyen a részletek igények szerinti beállításával és a tartalmi optimalizálással.

A forgalom alapvető méréséhez telepítjük

  • a Google Címkekezelőt, 
  • a Google Analyticset és 
  • a Google Search Console-t.

A többnyelvű oldalak kódjába automatikusan bekerül a hreflang attribútum, ezzel nincs külön teendő.

Egy alap robots.txt fájlt is hozzáadunk minden site-hoz – ezt kérésre bármikor módosítjuk, bővítjük a honlap tulajdonosainak igényei szerint.

A többi SEO-beállítási, illetve a finomhangolási lehetőséget az adott oldalt szerkesztésre megnyitva, a jobb oldali oldalsávban találjuk. 

A menübeállítások, a metacímkék, az URL átirányítások, az XML oldaltérkép és az URL alias szerkesztését alapértelmezetten elérhetővé tesszük minden átadott website-unkon: 

SEO beállítási lehetőségek a Drupalban az oldalsávban: menübeállítások, metacímkék, átirányítások, XML sitemap, URL alias

Menübeállítások

A „Menüpontot hoz létre” jelölőnégyzet bepipálásával, a menüpont nevének megadásával és – ha egy már létező menüpont almenüpontjának szánjuk – a szülő elem kiválasztásával hozzáadhatjuk az oldalt a főmenühöz.

Menübeállítások a Drupalban

XML webhelytérkép (sitemap)

Az átadáskor lesz egy működő XML oldaltérkép a domain.hu/sitemap.xml címen.

Az alapértelmezett beállítású oldaltérképen minden oldal szerepelni fog (az XML oldaltérkép optimalizálásában is tudunk segíteni), és automatikusan frissül, azaz minden, újonnan hozzáadott oldal fel fog kerülni rá.

Az alapbeállítást felülbírálhatják és módosíthatják a honlap kezelői az egyes oldalak szerkesztőfelületén, az oldalsávban található XML sitemap lenyílóban.

Itt ellenőrizhető, hogy az adott oldal megjelenik-e az XML sitemapen, és akár ki is zárhatják belőle.

Egy adott oldal XML oldaltérképen való megjelenésének módosítása a Drupalban

Metacímkék

Itt tudjuk megadni az oldalakhoz például a <title> elem tartalmát, azaz az oldalcímet (ami majd a böngészőben a fülön, illetve a Google találati listáján kék linkként megjelenik), illetve a metaleírást (amiből a Google találati listáján az ízelítőszöveg lesz). Ezekhez a mezőkhöz karakterszámlálót is adunk:

Oldalcím és metaleírás hozzáadása oldalakhoz a Drupalban

Alapértelmezett <title> minden oldalhoz generálódik automatikusan, az adott oldal első szintű címsorából (címsor 1, Heading 1, a HTML-ben a <h1> elem) és a honlap nevéből, és ilyen felépítésű lesz:

Oldalcím | Honlapnév

 – ezt az automatikusan létrehozott oldalcímet felül lehet írni az oldal szerkesztésekor.

Egyszerű jelölőnégyzetekkel szintén a Metacímkék lenyílóban állíthatjuk be a noindex és a nofollow meta robots címkéket:

Noindex, nofollow beállítása a Drupalban

Ugyancsak a Metacímkék részben adhatjuk meg az Open Graph metacímkéket, vagyis azt, hogy hogyan szeretnénk megjeleníteni az oldalt a Facebookon és a Twitteren posztként megosztva: meghatározhatunk például egy alternatív honlapnevet, oldalcímet, leírást, és azt is megadhatjuk, melyik képet szeretnénk a poszthoz megjeleníteni.

Webcímálnév

Az oldalak URL-jei (pontosabban az URL domainnév utáni része, a „slug”) alapértelmezetten automatikusan generálódik az oldalcím mezőbe beírt címből.

Ha az automatikusan generált címet valamilyen szempontból nem tartjuk optimálisnak, akkor megváltoztathatjuk az oldal szerkesztésekor, szintén a jobb oldali oldalsávban, a Webcímálnév lenyílóban.

Egyszerűen kivesszük a pipát a jelölőnégyzetből, és megadjuk az URL domainnév utáni részét.

Az automatikusan létrehozott URL átírása a Drupalban

Átirányítások

Ha vannak az oldalhoz köthető átirányítások, azok itt jelennek meg, és itt tudunk új átirányítást hozzáadni.

Átirányítás hozzáadása egy oldalhoz a Drupalban