Category Archives: webdesign

Keresőoptimalizálás és a webdesign

Pár nappal ezelőtt az egyik barátomnak írtam a blogjára egy eléggé hosszú posztot és annyira tetszett neki is meg nekem is és még azoknak is, akik nem voltak elfogultak, így aztán úgy gondoltam egy fordítást mindenképpen megér, bármilyen sokáig is eltartson. Négy-öt nap alatt sikerült is a végére érnem és hát akkor következzen a blogbejegyzés, de még előtte röviden felsorolnám miről is lesz itt szó:

A keresőoptimalizálásban rejlő legnagyabb lehetőség, hogy segítségével hatékonyan fel lehet venni a versenyt a sokkal vastagabb pénztárcából költekező vállalatokkal a vásárlók kegyeiért folytatott csatában. És ezzel a lehetőséggel élni is kell!

Jelen posztommal szeretnék segíteni neked, hogy a tervezett honlapod a csatában egy nagyon szilárd bástyád lehessen, illetve a már elkészült oldaladból, egy kis pimasz csibész lapot faraghass.

Tartalom
Először egy kicsit a beszélnék a tartalomról. Borzasztóan könnyű dolog meggyőző honlapot csinálni a keresőrobotok számára [tudom mert számtalanszor készítettem nekik weblapot], de kétlem, hogy ők lennének terméked igazi célközénsége. Nem számít, hogy az oldaladat profitorientált, vagy csak pár kellemes percet szeretnél látogatóidnak okozni, kell, hogy legyen célod. Az oldalad tartalmát úgy kell felépítened, struktúrálnod, hogy mindig szemelőtt tartod a célodat.
A különböző kulcsszóválasztó eszközök használatával [Google AdWords Keyword Tool vagy a DP Keyword Generator] összállíthatod azon kifejezések lsitáját, amelyekre célozni fogsz.
Vezetned kell az olvasódat mondataiddal, a megjelenített képekkel egyaránt annak érdekében, hogy azt tegyék, amit szeretnél, hogy tegyenek. Ne foglalkoztasson a kulcsszósűrűség, hidd el, az már tényleg kiment a divatból. Meggyőző és élvezthető, nagyon jól [heading tagokkal h1-h3 ] stuktúrált tartalomra van szükséged. Amikor úgy érzed, elkészült a lapod tartalma teszteld annyi emberen, amennyin csak tudod.
A keresőoptimalizálás a kulcsszókutatáson kívül leginkább a pozicionálásról szól. Pozicionálnod kell a domainedet és a belső lapokon található tartalmakat egyaránt a külső és belső linkekkel, valamint a <title> tagokkal. A linkekkel egy picivel később majd foglalkozom, de most azt kell tudatosítanod, hogy rövid, kifejező és a megcélzott kulcsszavaidat tartalmazó címeket [title tag] kell írnod minden egyes belső oldaladnak! Ez az egyik legjobb módszer a kulcsszókosarad kibővítésére.
A tartalmad hatékonyságával kapcsolatos egyik legkiválóbb mérőszáma a látogatásonkénti oldalletöltés, illetve a látogatások hossza. Ezeket az adatokat könnyűszerrel megkapod az egyik webanalitikai rendszerbe történő regisztrálás után [Google Analytics, Statcounter]. Törekedj ezen mérőszámok maximalizálására és mindig tartsd észben a célod!

Belső linkstuktúra
Az eltérő domainektől érkező linkekhez hasonlóan a belső linkstruktúra az egyik legjobb lehetőség a tartalmad pozicionálására. A kulcsszókutatásod eredményeit az oldalaid linkszövegeként felhasználva tovább növelhedett az adott szóra, kifejezésre a keresőalgoritmusok által kalkulált relevanciát.
Mindenképpen kerüld el a kizárólag javascriptből álló navigációs megoldásokat, mert az abban lévő URL-eket a robot nem képesek felismerni.
Számos esetben megkönnyítheted látogatóid navigációját az alábbi képpen is bemutatott, úgynevezett breadcrumb navigációs linkek segítségével.
breadcrum navigáció
Ezek az oldalon belüli hierarchikus struktúrában informálják látogatóidat az éppen aktuális helyzetükről.
A Google algoritmusa kifejezetten nagyon szereti a tartalmat és arányba állítja annak mennyiség a felhasználó lehetséges élménnyel. Így aztán nagyon könnyen előfordulhat, hogy vertikálisan meglehetősen hosszú olvasnivalót állítunk össze látogatóink számára. Ilyen esetekben érdemes gyorslinkeket használni, amely a scroll-ozás fáradalmaitől kíméli meg az oldalunkra tévedt internetezőt. A szemléletesség kedvéért rögtönöztem egy ehhez a poszthoz tartozó gyorslink tartalomjegyzéket.
Érdemes ezeket a linkeket még a hosszabb szöveg fölött elhelyezni az alábbi html kódok segítségével.
href=”#fejezetcim1”>a gyorlink szövege

href=”fejezetcim1”>1. fejezetcím

[a link nyitó és záró tagját sajnos le kellett hagynom]
Azt tanácsolom kukkants bele ennek az oldalnak a forráskódjába, úgy jobban érthetőbb lesz.
Visszatérve egy mondat erejéig a gyorslinkekre egészen biztos vagyok benne, hogy a látogatóid imádni fogják, hogy a kényelmüket szolgálod és ezzel a keresőalgoritmusok is tisztában lesznek.

Oldaltérkép
Nagyon-nagyon erősen ajánlom, hogy készíts egy oldaltérképet látogatóid számára. A navigációjuk megkönnyítése mellett nagyban hozzájárul a PageRank disztribúcióhoz és lehetővé teszi, hogy az oldalad hierarchikus szerkezetén laposíts. Számtalan olyan oldalt láttam már, ahol több mint 5 vertikális szintet találtam, és ezzel nem könnyű lenyűgözni a keresőket. Ha a kezdőlapodról meglinkeled az oldaltérképedet és onnan a főbb tartalmakat, akkor minden lényeges oldaladat sikerül maximálisan a harmadik vertikális szintre emelned. Fontos észben tartanod, hogy egy adott URL-re ne helyezz el 100-nál több linket. Abban az esetben, ha a honlapod óriási és az oldaltérképre jóval több link kerülne akkor szedd szét több darabra.

Keresőbarát URL
Megfigyelt és nagyon könnyen bizonyítható tény, hogy a keresőalgoritmusok képtelenek az URL-ben elhelyezett kulcsszavakat felismerni, ha azokat alsóvonással [_] választod el. Számos hatékony megoldás kínálkozik az összetett szavak elválasztására, de ezek közül szerintem a kötőjel a legelegánsabb. A kulcsszókutatás végeztével számtalan title tagokba szánt kifejezésed lesz. Miért ne helyeznéd ezeket az URL-ekbe is? Hidd el, nagyon fogják szeretni a lapjaidat a keresők.

Gyakran ismételt webdesign hibák
Számtalan oldalon megtalálható jelenség, hogy a Kezdőlap menüponttal az honlap az “/index.php” URL-t linkeli az “/” helyett. Az algoritmusok azok relevanciáját és fontosságát külön kalkulálják. Amennyiben a tárhelyszolgáltatód engedélyezi a mod_rewrite használatát, könnyedén elbánhatsz ezzel a problémával egy “.htaccess” nevű fájl gyökérkönyvtárba való feltöltésével. A kiterjesztés nélküli fájlba az alábbi kódot illeszd be.

Options +FollowSymLinks
RewriteEngine on
# index.php to /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*index\.php\ HTTP/
RewriteRule ^(.*)index\.php$ /$1 [R=301,L]

A használatos fájlkiterjesztéstől függően a kódban a php helyett állhat akár html is.

A keresők algoritmusai a domained www-s és www nélküli változatát külön kezelik, kivéve akkor, ha tudtukra adod azok egyezőségét. Első lépésként ki kell választanod, hogy melyiket szeretnéd használni. Ennek egyik legpraktikusabb módja a Yahoo! Site Explorer meglátogatása. A kereső input mezőjébe először írd be, hogy “linkdomain:domainem.hu”, majd a “linkdomain:www.domainem.hu”-t. Én a helyedben a magasabb értéket adó lekérdezéssel jellemezhető aldomain mellett döntenék.

Amennyiben a domainem.hu alak mellett tetted le a voksod, az alábbi kódot helyezd a .htaccess fájlba
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^domainem\.hu
RewriteRule (.*) http://domainem.hu/$1 [R=301,L]

Ha a www változat tűnt jobbnak, akkor használd ezt a kódot
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domainem.hu [NC]
RewriteRule ^(.*)$ http://www.domainem.hu /$1 [L,R=301]

[A fennti kódok a tutorial.hu-ról valók, további megoldásokért kérlek látogasd meg a .htaccess átirányítással foglalkozó témát]

Sebességre fel!
Az oldalad táblamenetes felépítése mellett az összes javascript és stílusinformáció külső .js, illetve .css fájlba való helyezésével gyorsíthatod oldalad töltődését. Nem elhanyagolható, hogy a “megjelenő szöveg/teljes kódméret” arány javulni fog [ezzel arányosan a relevancia is], valamint sokkal profibb lesz a kódod is.

Kérdésed van? Ne tartsd magadban!