Przy tworzeniu strony internetowej zawsze warto mieć na uwadze wyszukiwarki internetowe i sposób ich działania – poza specyficznymi przypadkami to właśnie wyszukiwarki są głównym źródłem osób odwiedzających stronę. Dlatego też warto aby wyszukiwarki mogły jak najłatwiej wyciągnąć tekst ze strony i umieścić go w swoim indeksie.
Wyszukiwarki (a dokładniej ich pajączki, które ciągle przemierzają sieć poszukując nowych treści) można porównać do osoby niewidomej, która korzysta z Internetu za pomocą urządzenia syntetyzującego mowę podłączonego do komputera. Dodatkowo urządzenie to nie jest najbardziej zaawansowane technicznie, zatem część elementów strony może pozostać dla niego „niewidoczna”. Poniżej opiszę po kolei elementy na które warto zwrócić uwagę podczas tworzenia strony.
Zgodność ze standardami
W sieci ciągle można spotkać strony z charakterystycznym napisem „Oglądać tylko pod IE w rozdzielczości 1024×768” (lub złośliwie parafrazując, „Oglądać tylko na komputerze autora”). Niestety czasy gdy IE miał prawie 100% udziału wśród przeglądarek internetowych dawno już minęły – obecnie druga w rankingu przeglądarka ma już ponad 30% rynku (u mnie na stronie jest to nawet ponad 50%), pozostałe przeglądarki też aktywnie przyczyniają się do spadku popularności IE, dlatego koniecznością jest sprawdzenie jak strona wygląda pod innymi przeglądarkami i naniesienie odpowiednich poprawek.
Ważna jest także zgodność że standardem HTML lub XHTML – im wyższy poziom zgodności, tym łatwiej przeglądarki i wyszukiwarki będą mogły przeanalizować treść strony. Najlepiej jest usunąć wszystkie błędy – poprawność strony można sprawdzić za pomocą narzędzia W3C Validator, lub dodatku do Firefox’a o nazwie Html Validator. Dostępne są także inne programy pozwalające na sprawdzanie poprawności składniowej strony.
Ramki
Ramki miały może sens w momencie gdy PHP i podobne technologie to był luksus na który mało kto mógł sobie pozwolić. Obecnie jednak jest to standard w przypadku hostingu płatnego. Jeżeli interesuje Cię wyłącznie darmowy hosting, to tutaj też znajdziesz serwery gdzie jest do dyspozycji PHP (lub inna podobna technologia) – wystarczy nieco poszukać. Wracając do ramek – ich typowym zastosowaniem było podzielenie strony na menu i treść, przez co zmiany w menu nie wymagały modyfikacji wszystkich podstron serwisu. Ramki jednak mają tą wadę że nie wszystkie wyszukiwarki je interpretują. Jeżeli wyszukiwarka radzi sobie z ramkami, to pojawia się kolejny problem: w wynikach wyszukiwania zazwyczaj pojawiają się strony ładowane do ramki, zatem kliknięcie na odnośnik do takiej strony spowoduje że załadowana strona nie będzie mieć elementów ładowanych do innych ramek, np. menu. Oczywiście można ten problem ominąć stosując odpowiedni skrypt, ale lepiej go wogóle unikać niż rozwiązywać.
Jeżeli już musisz zastosować ramki, pamiętaj aby podać alternatywną treść dla przeglądarek które nie obsługują ramek wewnątrz znacznika <noframes>:
<frameset cols="200,*"> <frame name="menu" src="menu.html" /> <frame name="glowna" src="glowna.html" /> <noframes> <body> Treść strony dla przeglądarek nie obsługujących ramek i dla wyszukiwarek </body> </noframes> </frameset>
Dodam jeszcze że powszechną praktyką jest umieszczanie wewnątrz sekcji <noframes> napisu „Twoja przeglądarka nie obsługuje ramek” – jest to komunikat raczej mało pomocny dla osoby odwiedzającej stronę. Wyszukiwarkom jest wszystko jedno – wezmą ten napis i go zindeksują; problem jest tylko taki że raczej nikt nie szuka Twojej strony używając takiego właśnie hasła…
Skrypty JavaScript
Umiejętnie zastosowane skrypty JavaScript pomagają stworzyć lepszą stronę, jednak ich złe zastosowanie może przynieść więcej szkody niż pożytku. Proponuję zrobić mały test: wyłącz obsługę skryptów w swojej przeglądarce i następnie załaduj Swoją Stronę WWW. Jeżeli zniknie tylko część „bajerów”, ale strona nadal będzie przyzwoicie wyglądać, i co ważniejsze da się wykonywać na niej typowe operacje (takie jak przeglądanie artykułów czy składanie zamówień) to strona jest dobrze napisana. Jeżeli jednak nie, musisz się zastanowić jak to naprawić.
Najprostszym sposobem jest zastanowienie się czy dany fragment strony musi być generowany przez skrypt, czy też można zastosować HTML, na którym ew. będzie pracował później jakiś skrypt. Drugą metodą wartą rozważenia jest dostarczenie alternatywnej zawartości dla przeglądarek które nie obsługują, lub mają wyłączoną obsługę skryptów, za pomocą znacznika <noscript>, np. w taki sposób:
<script type="text/javascript"><!-- RysujMojeWypasioneMenu(); //--></script> <noscript> <ul> <li><a href="strona1.html">Strona 1</a></li> <li><a href="strona2.html">Strona 2</a></li> <li><a href="strona3.html">Strona 3</a></li> </ul> </noscript>
Osobną sprawą jest AJAX – tego nie przeskoczy obecnie żadna wyszukiwarka. Jeżeli zatem masz stronę zrobioną tak że podstrony ładujesz przez AJAX’a, to musisz to zmienić jeżeli chcesz zaistnieć w wyszukiwarkach. Bez tego wyszukiwarki zindeksują stronę główną (no chyba że ona tez ciągnie treść przez AJAX’a, to wtedy zindeksuje się tylko szablon strony).
Wspomnę jeszcze o różnych „wynalazkach” pozwalających na zaszyfrowanie kodu strony – poza tym że załatwisz amatorów i wyszukiwarki nic więcej nie osiągniesz, bo każdy kto zna się trochę więcej na JavaScript i webmasterce obejdzie je wcześniej czy później. Tutaj sprawa jest z góry przegrana bo serwer wysyła do przeglądarki zaszyfrowaną treść, algorytm deszyfrujący i ewentualnie potrzebne klucze, zatem wszystko to co jest potrzebne do odszyfrowania kodu strony. Jeżeli już chcesz coś blokować, zablokuj podręczne menu i możliwość zaznaczania treści na stronie – profesjonalista to łatwo obejdzie (dodam że w Firefox’ie można w opcjach zablokować tego typu blokady :)), a reszta albo zostanie zablokowana (zgodnie z oczekiwaniami), albo się będzie irytować że nie mogą zaznaczyć fragmentu tekstu do wydrukowania, czy też nie mogą wyświetlić menu podręcznego i wybrać z niego opcji „Otwórz stronę w nowym oknie/karcie”.
Wspomnę też o rosnącej liczbie osób które z przyczyn bezpieczeństwa całkowicie wyłączają w przeglądarce obsługę skryptów, lub instalują dodatki takie jak NoScript, które pozwalają na włączenie wykonywania skryptów tylko dla wybranych witryn internetowych.
Flash
Z Flashem jest podobnie jak ze skryptami – wyszukiwarki zwykle nie potrafią ich otworzyć (nawet Google obsługuje je tylko częściowo); poza tym ludzie masowo je blokują ze względu na wyskakujące wszędzie nachalne reklamy (czasami to aż się boję otworzyć lodówkę ;)). Tutaj też możesz zrobić podobny test jak przy skryptach – wyłączasz obsługę ActiveX lub Flasha w przeglądarce, i sprawdzasz jak strona wygląda.
Tutaj też warto dostarczyć alternatywną treść dla przeglądarek które nie obsługują Flasha. Jeżeli obiekt Flash jest umieszczony za pomocą znacznika <object>, to można ją umieścić wewnątrz tego znacznika. Jeżeli to tego celu jest używany skrypt JavaScript, to nie wiem jak to można zrobić – po prostu nie korzystam z Flasha na co dzień. (Wiesz jak to zrobić? Napisz mi jak to się robi).
Obrazki
Obrazki są kolejnym elementem strony na który warto zwrócić uwagę. Ważne tutaj jest aby każdy obrazek posiadał przypisany za pomocą atrybutu alt tekst alternatywny, który będzie opisywał co na obrazku się znajduje – dzięki temu można dodać dodatkowy tekst dla wyszukiwarek:
<img src="wyniki.gif" alt="Wyniki głosowania telewidzów" title="Wyniki głosowania telewidzów" />
Ponieważ niektóre przeglądarki po najechaniu myszą na obrazek wyświetlają tekst podany w atrybucie alt, a inne ten z atrybutu title, warto podać obydwa.
Warto tutaj też przeprowadzić ciekawy test – wyłączyć w przeglądarce wyświetlanie obrazków i wczytać stronę (czasami trzeba jeszcze wyczyścić pamięć podręczną przeglądarki (cache) aby to zadziałało). Po wyłączeniu obrazków strona nadal powinna być czytelna, ale nie zawsze tak jest – najczęstszym błędem jest użycie tła graficznego np. w tabelce czy div’ie, i brak określenia koloru tła. Po wyłączeniu obrazków taki błąd się ujawnia – np. pojawia się czarny tekst na czarnym tle, przez co strona staje się nieczytelna. Naprawić to można łatwo – wystarczy podać kolor tła, który jest identyczny lub zbliżony do tego który ma obrazek użyty jako tło. Jeżeli obrazek jest jednolity, warto też rozważyć całkowite jego usunięcie, gdyż można ten sam efekt osiągnąć podając kolor tła w HTML lub w arkuszu CSS.
Komentarze