Keresőbarát weboldal 2.rész
Az első részben (http://digital-illusions.hu/blog/2010/12/21/keresobarat-weboldal-akadalymentes-weboldal-1-resz/) bemutattam, hogy melyek azok a HTML tag-ek amik fontosak a keresőoptimalizálás szempontjából valamint megismerhettük azt is, hogy miért kell megadnunk aTITLE attribútumot minden esetben a HTML tageknél.
Ma azt fogom megmutatni, hogy munkánk során melyek lesznek azok a kiegészítők (add-on) a Firefox nevű böngészőhöz, amik segítenek fognak majd. Lássunk is hozzá!
IE Tab
Ezzel a kiegészítővel elkerülhetjük azt, hogy külön el kelljen indítanunk az Internet Explorer-t amikor például a megjelenést készítjük el CSS-el az oldalunkhoz. Segítségével a Firefoxban tudjuk használni az Internet Explorer megjelenítő motorját.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/10909/
Firebug
Nagy segítség a forráskód átnézése egy-egy hiba javítása során, főleg ha az megjelenésben mutatkozik meg (elcsúszott kép, szétesett tartalom, stb.). Az Internet Explorer sajnos nem rendelkezik (legjobb tudomásom szerint) olyan fejlett hibaelemző kiegészítővel ami a munkánkat megkönnyítené. A Firebug továbbá segít, hogy azonnal tudjuk változtatni a HTML valamint a hozzá tartozó CSS-t.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/1843/
Firecookie
Ha telepítettük a korábban említett Firebug kiegészítőt akkor bátran használhatjuk a hozzá készített Firecookie kiegészítőt amivel a sütiket tudjuk szerkeszteni, akár törölni is.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/6683/
Html Validator
Ezzel a HTML értelmezővel tudjuk ellenőrizni az előállított kódunkat, hogy az teljes mértékben megfelel-e a szabványnak. Az oldal legenerálása után a kiegészítő elemzi azt és megmutatja a talált hibákat. Hiányzó TITLE attribútum, nem lezárt IMG tag, ezeket mind megmutatja nekünk sőt, javaslatot tesz a hibás kód kijavítására. Egy pici angol tudás szükséges lehet hozzá, de nélküle is érthető. Mindenképpen ajánlom, ha mást nem is próbálsz ki, ezt mindenképpen tedd meg.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/249/
NoScript
Kíváncsi vagy, hogy hogyan működik az oldalad ha kikapcsolják a Javascript-et? Ha nem, akkor nem érted, hogy mi a keresőoptimalizálás illetve az akadálymentesítés lényege. A keresőrobotok nem tudják a Javascriptet értelmezni ahogyan a felolvasó programok sem. Ha csilli-villi Javascript által legenerált menüt készítesz, jól fog kinézni, de a robotok és a felolvasó programok nem fogják tudni elolvasni, így máris magad ellen dolgoztál. Egy weboldalnak működnie kell akkor is ha nincs telepítve Adobe Flash plugin vagy nem lehet futtatni Javascriptet. Soha, ismétlem soha nem szabad elvárni, hogy egy felhasználó alkalmazkodjon az oldalunkhoz! Miért? Egyszerű, talál helyette 100 másik oldalt ami csak arra vár, hogy kielégítse a vágyait.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/722/
Quick Image
Ez a kiegészítő igazán hasznos tud lenni. A kereső robot mivel nem tudja értelmezni a képet így az azon található képet vagy szöveget sem, így szinte teljesen úgy láthatjuk az oldalunkat ahogyan Ő. Ha a menüpontoknál képet használunk de nem gondoskodunk azALT attribútum meglétéről akkor azzal nem sokat tud kezdeni, pláne ha értelmetlenül nevezzük el ami valljuk be, elég gyakori: menu01.jpg, m01.jpg, stb… Ismerős? Ha igen akkor el kell gondolkodnunk a HTML újratervezésén.
Az alábbi linken tölthetjük le: https://addons.mozilla.org/hu/firefox/addon/8126/
Kép helyettesítés CSS-el
A kép használata nincs megtiltva ha okosan használjuk. Egy kis CSS tudással nem kell elvetnünk a már korábban elkészített oldalainkat sem. Mutatok rá egy alternatív példát amivel könnyen ki tudjuk küszöbölni a képek használatából eredő problémákat. Az alábbi kóddal a H1 tag-re állítjuk be az oldal legfontosabb elemét a logót. Meghatározzuk a H1 méretét fixen, amibe pluszba beleteszünk egy A taget, ennek a méretét 100%ra állítva, hogy kitöltse teljes mértékben a H1 elem területét. Az A elem tartalmazni fogja a linket a weboldalunkra valamint a weboldalunk nevét és szlogenjét (ha van, ajánlott) és egy plusz elemet, egy üres SPAN elemet aminek a formázásával el fogjuk takarni az A elemben látott szöveget. Ezzel elértük azt, hogy képet használtunk, de a kereső is tudja olvasni a szükséges szövegeket. Íme a kód:
HTML kód
<h1><a href="/index.html" title="Birkabőr webáruház - ahol jó bőrt kapsz!"> <span></span>Birkabőr webáruház - ahol jó bőrt kapsz!</a></h1>
CSS kód
| 01 |
DEMO oldal
Elkészítettem egy demo oldalt (http://digital-illusions.hu/blog/demo/01/) a korábban tárgyaltak mintájára. Találhatunk benne megoldást az előbb tárgyalt kép helyettesítésreCSS-el, valamint az egész oldal webergonómiailag megfelelő. Hogy ez mit is takar? Majd a következő cikkben kiderül.
A cikk eredeti környezetében is olvasható:
http://digital-illusions.hu/blog/2010/12/25/keresobarat-weboldal-akadalymentes-weboldal-2-resz/