SEO alapok: 2. rész: Szerkezet

1304

Az előző részben bemutattam a tartalommal kapcsolatos legfontosabb elvárásokat, a mostaniban pedig azt járom körbe, hogy az oldalt milyen szempontok alapján javasolt felépíteni és kialakítani. 

Legfontosabb szerkezeti elemek:

  • Weboldal feltérképezhetősége, morzsamenük – Mennyire könnyű a keresőknek navigálni az oldalon, elérik-e az összes aloldalt
  • Oldaltérképek használata – Általa gyorsabban és könnyebben feltérképezhetik az oldalt
  • Nem létező, hibás oldalak kezelése – Amennyiben az oldal hibás linkeket tartalmaz, az rontja minőséget
  • Duplikáció kezelése – A keresők az egyedi tartalmat szeretik, ezáltal, ha egy cikk több linken is elérhető, meg kell adnunk, melyik legyen az alapértelmezett.
  • Mobil megjelenés – Mobilos kereséseknél egyre hátrább kerülnek azok a weboldalak, amelyek nem rendelkeznek mobilra optimalizált oldallal.
  • Sebesség – A felhasználók nem szeretnek várni, ezért a lassan betöltődő oldalakat könnyebben elhagyják
  • URL felépítése – Akkor jó, ha a felhasználóknak is könnyen értelmezhető, rövid de informatív
  • Biztonság, titkosítás – A Facebook és a Google is komoly hangsúlyt fektet a biztonságra, ezért a feltört, vagy a titkosítással nem rendelkező oldalak hátrább sorolódhatnak.
  • Könyvtár struktúra – Azonos típusú fájlokat ugyanabba a könyvtárba helyezzük 

 

Weboldal feltérképezhetősége, morzsamenük

A weboldalon lévő navigáció nagyon fontos tényező abban, hogy a felhasználók könnyen megtalálják az oldalon azt, amit keresnek. A navigáció megtervezésénél a főoldalból indulunk ki, ezt követik az általánosabb témák, majd a specifikusabbak. Egy aloldalra érdemes készíteni morzsamenüt (breadcrumb) is, melynek célja, hogy a felhasználó könnyen vissza tudjon lépni egy-két szintet a hierarchiában.

morzsamenu

A képen látható morzsamenü segítségével a felhasználók visszaléphetnek a blog menüpontra, vagy akár a főoldalra is, ezzel segítve őket, hogy adott témában vagy kategóriában tovább tudjanak nézelődni.

A navigáció készítésénél a legjobb megoldás az, ha szöveges linkeket használunk. Ezt tudják a keresők és a különböző programok, mint a böngészők is a legkönnyebben értelmezni. Előfordul, hogy a linkeket dinamikusan, javascript-el állítják elő a weboldalak, azonban ezt nem minden kereső tudja értelmezni, illetve azon eszközökön, ahol a javascipt tiltva van, ott nem fog működni. Elsődlegesen a régi oldalak szerették használni a Flash-t, mert látványosan lehetett benne mozgatni a menüket, de jelenleg már nem javasolt a használata. A mobilok nem játsszák le, így amelyik weboldal Flash-ben készítette a menüsort, ott a mobilos felhasználók nem fogják tudni használni az oldalt. Továbbá a biztonsági kockázatok miatt már egyáltalán nem javasolt a használata, vannak modernebb megoldások, melyek kiváltják. 2016 június 30-tól már az Adwords-be sem tölthető fel FLASH alapú hirdetés, 2017 januárjában pedig végleg megszűnik a támogatottsága.

Sokan használnak olyan megoldásokat, amelyek első lépésként betöltik a weboldalt, majd az URL alapján megjelenítenek/előhoznak bizonyos tartalmakat:

pelda.hu/kampany#elso-kampanypelda.hu/kampany#masodik-kampany -> Ezeknél a példa oldalaknál először betöltődik a kampány oldal, majd az alábbi lehetőségek valamelyike történik:

  • A kampány oldalon belül az “első kampány” címhez ugrik, hogy a felhasználó közvetlenül a linkben jelzett címtől olvashasson.
  • Felugrik vagy kinyílik egy ablak, amelyben az első kampányról szóló tartalom van.

A # utáni részt horgonyank nevezzük, amely általában egy hosszabb cikken belüli helyre ugrik (pl. az első kampány címére). Ebből kifolyólag a Google ezt nem szokta figyelembe venni, és csak a “pelda.hu/kampany” oldalt térképezi fel. Az utána lévő horgonyok ennek az oldalnak egy adott pontjára mutatnak. (Ez alól természetesen vannak kivételek, például a Wix által használt !#horgonyok, amelyek ajax alapú betöltődést jeleznek).

 Kerülendő

  • Túlságosan komplex navigáció (pl. minden egyes oldalon belinkelni az összes többi aloldalt)
  • Nagyon apró részekre tördelni a cikket (pl. ahhoz, hogy egy cikket végigolvassunk, legalább 20-at keljen kattintani)
  • Flash vagy javascript alapon generálni a linkeket.

 

Oldaltérképek használata

Segíti az oldal feltérképezését, ha használjuk őket. Ez a fájl tartalmazhatja a weboldalon lévő oldalak linkjeit, legutóbbi frissítés időpontját, prioritását, és hogy milyen gyakran ellenőrizzék a keresők. Mikor érdemes használni:

  • Nagyszámú linkek esetén: Ezáltal segítve a keresőket a feltérképezésben
  • Nagyszámú archív tartalom esetén: Ezek ritkán vannak linkelve, nehezebben lehet rájuk találni
  • Új weboldal esetén: Ilyenkor még csak kevés helyről mutat link az oldalra, ezáltal a keresők sem biztos, hogy egyhamar rátalálnak és feltérképezik az oldal. Ilyenkor érdemes a keresőkonzolba is minél előbb feltölteni a térképet.
  • Többletinformációt ad a keresőknek: Legutóbbi frissítés dátuma, videó, kép, hírek adatai, stb.

Az oldaltérkép készítésével kapcsolatban további információt találhat a “Google webhelytérkép összeállítása és elküldése” részében. Amennyiben nagyszámú aloldallal rendelkezik a weboldal, úgy érdemes lehet szétbontani a térképeket (pl. külön térkép a képeknek, videóknak, blog bejegyzéseknek, stb). Emellett létrehozhatunk egy oldaltérkép indexet, amely ezeknek a térképeknek a linkjeit tartalmazza. 

Néhány példa az indexre: https://emegjelenes.hu/sitemap.xml http://index.hu/sitemap/sitemapindex.xml 
A blog oldal térképe: https://emegjelenes.hu/sitemap_blog.php

Ezeket az oldaltérképeket feltölthetjük a Google keresőkonzoljába is, ezáltal megkönnyítve az oldal feltérképezését. Ez egyben segít is a Google-nek, hogy meghatározza: tartalom duplikáció esetén melyik linket preferáljuk pl https://www.emegjelenes.hu/blog vagy https://emegjelenes.hu/blog

 

Nem létező, hibás oldalak kezelése

Amennyiben egy weboldalon számos olyan link található, amely nem létező, törölt helyre mutat, az a keresők részére azt sugallja, hogy az oldalt elhanyagolják, nem foglalkoznak vele, ezért a rangsorolásnál is hátrább sorolják. Előfordul, hogy megváltoztatjuk a weboldal struktúráját, és ezzel együtt változnak az URL címek is.  Ilyen esetben a régi cím már nem fog élni, emiatt az oda mutató linkek sem fognak működni.

Ha a blogom régi címe https://emegjelenes.hu/blog-hirek lenne, de ezt megváltoztatom https://emegjelenes.hu/blog címre, akkor mindenki, aki a régi címre érkezik, hibát kap (404 – nem létező oldal). Ahhoz, hogy a régi oldalra érkezve ne hibaüzenettel találkozzanak a felhasználók, alkalmazhatunk átirányítást is, miközben értesítjük a keresőket is, hogy a régi blog oldalunk új helyre költözött (Ezt nevezik 301-es átirányításnak).  Amennyiben Domain névváltás is történik, azt legkönnyebben a Google keresőkonzoljában lehet jelezni.

webhely-cimenek-modositasa

Természetesen előfordulhat az is, hogy bizonyos tartalmakat véglegesen törlünk az oldalról. Például egy kereskedelmi oldalnál, ha az adott termék már nem kapható, leveszik a kínálatból, és a termék linkje elérhetetlenné válik. De az is lehetséges, hogy egyszerűen csak elírja a linket a felhasználó, vagy rosszul linkelik az oldalunkat. Ezeket az eseteket is tudnunk kell kezelni. Egyrészről a szervernek 404-es választ kell adnia, amelyből tudják a keresők is, hogy az adott oldalt ne térképezzék fel. Másrészről a felhasználókat is javasolt informálni róla.

404-es oldallal kapcsolatban az alábbiakat javasolt fontolóra venni:

  • Derüljön ki világosan, hogy a keresett oldal nem található. Fogalmazzon barátságosan, ne legyen elutasító
  • Az oldal design-ja hasonlóan nézzen ki, mint a többi oldal
  • Érdemes ide is elhelyezni a menüsort, vagy legalább a főoldalra mutató linket, amerre a látogató tovább mehet

prog.hu 404-es oldala:

404-proghu

port.hu 404-es oldala:

404-porthu

 

Duplikáció kezelése

A keresők az egyedi, máshol meg nem található tartalmakat preferálják, emiatt előnyös, ha egy cikk csak egy linken érhető el. A keresők megkülönböztetik a https://emegjelenes.hu és https://www.emegjelenes.hu linkeket, tehát ha nincs beállítva az oldalon, hogy csak az egyik formátumot használja, akkor ez már duplikálást jelent, és az adott oldal minőségi értéke is megoszlik a 2 különböző link között. Sok esetben a tárhely admin felületén is be lehet állítani, hogy melyik formátumot preferáljuk, és az elvégzi helyettünk az átirányítást.

redirect

Emellett lehetőségünk van a Google részére is jelezni, hogy melyik változatot használjuk, méghozzá a Google kereső konzoljában:

webhelybeallitas

Amennyiben egy weboldalon ugyanaz a tartalom több URL alatt is elérhető, úgy megadható a keresőknek, hogy melyik az alapértelmezett, és a keresők csak azt fogják betérképezni. Ezek a canonical url címek.

 

Mobil megjelenés

2015 április 21-től a Google a mobilkereséseknél már figyelembe veszi, hogy a céloldal mobil-optimalizált-e, majd idén májusban újabb frissítés jött, amely azt a célt szolgálja, hogy mobilkereséseknél azok a weboldalak jelenjenek meg elől a találatban, amelyek mobilra lettek optimalizálva.

Amennyiben nem biztos benne, hogy a Google mobilbarátnak látja-e az oldalát, itt leellenőrizheti: 
https://search.google.com/search-console/mobile-friendly

 

seo-mobil

A weboldalak mobilbaráttá alakítása 3 módon történhet:

  1. Reszponzív design: Ebben az esetben ugyanazt a weboldalt tölti be a böngésző mindenkinek, azonban a képernyő méretéhez alakítja az oldalt. Ez a leggyakoribb, és a jelenlegi oldal is így készült.
  2. Különválasztott URL: Ez esetben külön weboldalt készítenek az asztali gépről nézelődőknek, és külön oldalt a tabletről/mobilról. Ilyen formában működik a facebook is. A normál felhasználók a https://www.facebook.comcímen böngésznek, míg ha mobilról nézzük meg az oldalt, akkor átirányít a https://m.facebook.com címre.
  3. Dinamikus kiszolgálás: Ilyenkor ugyanazon az URL címen jeleníti meg az asztali gépre és a mobilra szánt tartalmat is A különbség az, hogy a szerver megpróbálja meghatározni, hogy milyen eszközről böngésznek, és annak megfelelően dönti el, hogy melyik verziót küldi el a böngészőnek. Tehát ugyanazon cím alatt teljesen más tartalmat láthatunk, ha másik eszközről nézzük az oldalt.

Felmerülő hibák:

  • Bővítmények: Kerüljük a bővítmények használatát, különösen a FLASH tartalmakat. Ugyanis a mobilok többsége ezeket nem tudja megjeleníteni.
  • Nézet (viewport): Ha nincs beállítva, akkor a böngésző nem fogja átrendezni a tartalmakat a különböző eszközökre.
  • Tartalom nincs méretezve a nézethez: Ha például a képernyő szélessége 640px, de a megjelenítendő kép fixen 1000px, ekkor a kép csak részben fog látszódni, és vízszintesen is kell szkrollozni.
  • Túl kicsi a betűméret: Leggyakrabban akkor fordul elő, hogy ha a nézet nincs konfigurálva. Ugyanis ilyenkor gyakran úgy tölti be az oldalt mobilon, mint ha asztali gép lenne, és ahhoz hogy olvashassuk a tartalmát, rá kell nagyítanunk.
  • Koppintási terület túl közel: Például mikor a menüpontok túl közel vannak egymáshoz, ezáltal ha mobilon megpróbálunk rákattintani, könnyen mellé kattinthatunk.
  • Közbeiktatott hirdetések: Mivel a mobil képernyője viszonylag kicsi, az olyan reklámok, melyek eltakarják a tartalom nagy részét, zavaróak a felhasználóknak, és sokszor még a bezárása is nehézkes. 

 

Sebesség

Szintén egy fontos tényező a keresőoptimalizálásban, hiszen a mai világban a felhasználók gyorsan szeretnének hozzájutni azokhoz az információkhoz, amely érdekli őket. Emellett csökkentheti az adatforgalmat és a szerver terhelését is. A sebességet számos tényező befolyásolja, ezek közül a legfontosabbak:

  • Képek mérete: Ha a weboldalon csak 100px méretben akarjuk megjeleníteni, akkor ne töltsünk fel 3000px-es képet. Hiába látjuk csak kicsiben, attól még a böngésző letölti a teljes képet. Mostanában is több olyan oldallal találkoztam, ahol már a főoldal több, mint 20MB képet töltött le feleslegesen.
  • Használjunk gyorsítótárazást. Felesleges minden alkalommal letölteni a böngészőnek a képeket. Első alkalommal letölti, utána már sokkal gyorsabb, ha a helyi gépről nyitja meg.
  • Amennyire lehet, csökkentsük a külső forrásokból betöltendő tartalmakat. Sok weboldal akár 100 külső forrást is használ (pl. css, js fájlok, képek, statisztikai, közösségi bővítmények, stb). Minél kevesebb külső forrást használ az oldal, annál gyorsabb lesz a betöltődés.
  • Tömörítsünk. Ezzel a fájlok mérete, valamint az adatforgalom is csökken.

A weboldalak betöltődési sebessége 3 fontos tényezőből áll:

  • Weboldal optimalizálása: képméretek csökkentése, tömörítés, fájlok összevonása, programkód optimalizálása, stb.
  • Felhasználók adatforgalmának sebessége: Ezt nem tudjuk befolyásolni, de pl. a facebook ez alapján dönt arról,  hogy az üzenőfalon lévő videók elinduljanak-e automatikusan. Ha úgy ítéli meg, hogy lassú a netkapcsolatunk, akkor nem indítja el a videókat, ezáltal is csökkentve az adatforgalmat.
  • Szerver konfigurálása: Milyen rendszer fut rajta, mekkora a terhelése, meghajtó típusa, memória mérete, fizikai elhelyezkedése, stb.

A Google biztosít egy ingyenes eszközt, amellyel megvizsgálható a weboldal teljesítménye: https://developers.google.com/speed/pagespeed/insights/

URL felépítése

A weboldal url struktúrája akkor a legjobb, ha egyszerű, és nem csak a gépeknek, hanem az emberek részére is könnyen értelmezhető.  Sok esetben az URL hosszú azonosítószámokat, paramétereket használ, ahelyett hogy értelmezhető szavak (pl. https://emegjelenes.hu/projektek) lennének benne, amely abból a szempontból is előnyösebb, hogy már ide betehetjük az adott oldalra jellemző legfontosabb kulcsszót. 
További ajánlások az URL-el kapcsolatban a keresőkonzol súgójában.


Biztonság, titkosítás

A keresőkonzolba történő regisztráció egyik nagy előnye, hogy ha a Google komolyabb biztonsági hibát érzékel az oldalon, vagy ha feltörték az oldalunkat (Erre konkrét példákat a következő rész fog tartalmazni), akkor emailben értesítést küld a részünkre, esetleg megoldási javaslatokkal együtt. A feltört oldalak komoly pozícióvesztést okozhatnak a találati listában, ezért az oldal helyreállítását amilyen gyorsan csak lehet, el kell végezni. 

Tavaly óta beleszámít a rangsorolásba az oldal titkosítása (SSL) is. Amennyiben az oldalunkat SSL tanúsítvánnyal látjuk el, az biztosítja, hogy a szerver és a kliens közötti kommunikáció titkosított legyen. 

https

Ugyanis ez megakadályozza, hogy egy illetéktelen szereplő megfigyelhesse az oldalon lévő kommunikációnkat. Ezek lehetnek: Chat-elés, felhasználónév és jelszó, email, stb. Amikor bejelentkezünk egy weboldalon, ott megadjuk a jelszavunkat is, és bár a böngészőn csak csillagokat látunk, https nélkül a böngésző titkosítás nélkül elküldi azt a weboldalnak. Azonban egy illetéktelen, aki ugyanazon a hálózaton van (pl. nyílt wifi), ha kicsit is ért hozzá, látni fogja a hálózaton keresztülmenő adatforgalmat (Phishing), beleértve a jelszavakat is.


Könyvtár struktúra

Az oldal kialakításánál törekedni kell arra, hogy az jól átlátható legyen a későbbi fejlesztők részére, valamint a keresők részére is. Például a képeket a képek mappába, a PDF fájlokat a dokumentumok könyvtárba, és így tovább.

 

A sorozat korábbi cikkei:

SEO alapok, 1. rész: tartalom

Szólj hozzá!

hozzászólás

MEGOSZTÁS
Előző cikkSikeres Cégvezetők Csúcstalálkozója 2016 – Piac & Profit
Következő cikkGoogle: A mobil keresések vezetik a vásárlókat a boltodba
Pálmai Dániel
2010-ben vállalatfinanszírozási szakon végeztem a Pécsi Tudományegyetemen, ezáltal a weboldalakat nem csak programozási, hanem megtérülési oldalról (ROI) is mélyebben vizsgálom. Weboldalak fejlesztésével 2004, míg az online hirdetési formákkal 2010 óta foglalkozok, 2011-től pedig Google Partnerként SEO és Adwords területeken segítem az ügyfeleimet. Jelenleg a hirdetések automatizálásán dolgozok (Adwords API).