Ponieważ temat seo i procesu optymalizacji serwisów internetowych jest niezwykle złożony należy wcześniej poznać wszystkie podstawy i dokładnie przemyśleć strategię postępowania. Algorytmy wyszukiwania oraz konkurencja z każdym dniem stają się coraz bardziej wymagające, zaniedbanie jedego ze składowych aspektów naszych działań może narazić wysiłek na szwank i pogrzebać rezultaty w zgliszczach szczerych chęci. Postanowiłem opisać schemat postępowania w sposób możliwe klarowny i dokładnie przedstawiający wszystkie techniki poprawy oraz pozycjonowania adresu w sieci. Zaczynamy, czytaj dalej (…)

Podstawowe czynności, w dobrej kolejności.

Aby osiągać dobre rezultaty optymalizacji należy zadbać o poświęcenie odpowiedniej ilości pracy na odpowiednie czynności, ale co bardzo istotne z zachowaniem kolejności działań. Poniżej skupiam się nad algorytmem postępowania. Samo zgłoszenie adresu do przeglądarek niestety nie wystarczy;) Jeśli chcesz poprawić pozycję strony w wynikach wyszukiwania powinieneś:

• Wyznaczyć frazy (słowa kluczowe) na jakie chcesz pozycjonować swój adres, niestety bardzo często spotykam sie z błędnym myśleniem na ten temat co prowadzi do osłabienia efektu pozycjonowania, a także przekłada się na efekt komercyjny. Aby dobrze wykonać ten etap optymalizacji musisz wcielić się w rolę potencjalnego klienta, do którego kierujesz swoją stronę.

• Zoptymalizować treść swoich stron pod kątem wcześniej ustalonych fraz, i jak niektórzy błędnie sądzą nie dotyczy to tylko kilku podstron – wyszukiwarki sprawdzają całą zawartość adresu i porównanwczo względem całości określają odpowiedniość treści do zadanego zapytania. W tym artykule dowiesz się jak to zrobić, jest to kluczowa sprawa dla całego procesu.

• Umieścić stronę w większości istotnych oraz odpowiednich (*) wyszukiwarek oraz katalogów, wspomniana istotność oraz odpowiedniość dotyczy zgłaszania strony zgodnie z pewnymi zasadami. Należy zadbać aby adres był zgłoszony do większości popularnych wyszukiwarek, do najważniejszych katalogów, do katalogów branżowych czyli tematycznie powiązanych z wcześniej wyznaczonymi słowami kluczowymi. I tak dla przykładu zgłaszanie strony z wyłącznie polską treścią do zagranicznych katalogów nie jest lepszym rozwiązaniem niż skupienie się na polskich katalogach tematycznych.

• Zdobyć linki zewnętrzne z innych serwisów (najlepiej o wysokim PR oraz pozycji w google), najlepiej jeśli są one tematycznie powiązane z twoją stroną. Bardzo ważne aby linki jakie prowadzą do Twojej strony zawierały słowa kluczowe na jakie pozycjonujesz adres, google traktuje takie linki jak głosy polecające treść strony w odniesieniu do danej frazy. Jest kilka sposobów aby zapewnić sobie zdobywanie wartościowych linków a anchor’ami zawierającymi Twoje keyword’s.

Jeszcze raz podkreślam, należy skrupulatnie podejść do każdego z punktów wymienionych powyżej aby odnieść dobry efekt. Przedyskutujmy dokładniej etapy optymalizacji i pozycjonowania.

–

Jakie słowa kluczowe wybrać?

Najważniejsze to zastanowić się jakich słów używają internauci aby znaleźć to co chcesz im zaoferować! Brzmi prosto i w gruncie rzeczy nie jest skomplikowane, jednak wymaga dobrego przemyślenia. Warto zauważyć, że ludzie nie używają ogólnych i pojedynczych słów kluczowych a ich zlepek, pozycjonowanie na cztero wyrazowe frazy jest dużo korzystniejsze niż na jedną główną. Musisz konkretnie wskazać możliwie najwięcej trafnych słów, które bardzo dobrze odpowiadają tematyce strony i wyłonić z nich konfiguracje fraz, które podejrzewasz, że internauci wpisują w pole wyszukiwania. Jeśli konkurencja na Twoje frazy jest duża to pomyśl o frazach kombinowanych ze słów kluczowych (wbrew pozorom bardzo konkretne frazy też mogą być skuteczne), dodatkowo możesz targetować swoje usługi lokalnie na miasto lub region. Przykładowo jeśli sprzedajesz ’samochodziki na baterie’ i widzisz, że trudno będzie wskoczyć do top10 w krótkim czasie (ze względu na dużą konkurencję) to postaraj się optymalizować swoją stronę na frazę typu ’samochodziki na baterie miasto/województwo’.

Przy doborze słów kluczowych kieruj się zasadą wyczucia intencji potencjalnych klientów, wciel się w ich rolę i pomyśl jak byś szukał to co chcesz im zaoferować. Jeśli dokonasz wyczerpującej analizy słów kluczowych oraz fraz jakie można z nich utworzyć, możesz być pewnym, że idziesz w dobrym kierunku – w innym wypadku stracisz dużo czasu oraz potencjalnych klientów.

–

Kolejny krok - optymalizacja stron.

Jeśli etap wyboru i kategoryzowania fraz masz za sobą, możesz zająć się wcieleniem swoich przemyśleń w życie, musisz zadbac o odpowiednią kompozycję treści na stronie, optymalizację wewnętrznej struktury linków oraz poprawności strony kodowej (x)html/css’u. To ostanie jest po to aby wyszukiwarki potrafiły skutecznie czytać oraz analizować zawartość podstron. Aktualnie przeważająca większość algorytmów wyszukiwania zwraca uwagę na treść stron – należy im umożliwić (robotom) ten proces oraz polepszyć jego wydajność. To robi dla nas semantyczny kod oraz struktrura linkowania.

Dobrze jeśli optymalizacji treśći w kontekście słów kluczowych oraz poprawności kodu dokonasz zanim zgłosisz stronę do przeglądarek. Nie martw się jeśli Twoja strona jest już w pamięci google’a, to nie przeszkadza.

Pierwszym etapem na jaki zwrócimy uwagę jest poprawność kodu. Niezależnie czy strona jest zrobiona z wykorzystaniem html’a czy xhtml’a trzeba zadbać o to aby Twój adres przechodził proces walidacji. (Wiele osób twierdzi, że strony nie muszą przechodzić poprawnie procesu walidacji i osiągać dobre pozycje, jednak aby sobie móc na to pozwolić trzeba wiedzieć jakie typy niezgodności nie przeszkadzają – jeśli jesteś świeży – zapomnij o tym!). Poprawność podstron możesz sprawdzić pod adresem: http://validator.w3.org, wcześniej upewnij się, że masz poprawnie ustalony doctype oraz kodowanie dokumentów. Poprawność arkusza stylów CSS możesz sprawdzić pod adresem: http://jigsaw.w3.org/css-validator. Jeśli twoja strona jest wykonana w technologii flash to niestety jesteś w nieco trudniejszej sytuacji i musisz zatrudnić nieco więcej logistyki w optymalizację strony – nieco wskazówek w artykule flash – optymalizacja seo.

Jeśli masz kodzik zgodny ze standardem odmiany języka jakiego używasz to możesz zabrać się za gęstość słów kluczowych (gęstość występowania – accuring density) w treści podstron. Można przyjąć pewne granice, które normują optymalną zawartość słów kluczowych na podstronach. Zgodnie z logiką – jeśli deklarujesz w tagu <title></title>, że strona jest o ‘gwoździach’ to słowo to musi występować w treści. Optymalnie słowa kluczowe powinny stanowić od 2.5% – 6% wszystkich słów (posłuż się odpowiednim narzędziem do ustalenia). Dodatkowo, oprócz umieszczenia keyword’s w tagu tytułowym, powienieneś zadbać o jego wyróznienie na stronie, np. tagiem nagłówka h1,h2,strong,b etc.

W odniesieniu do wewnętrznej struktury linków w ramach Twoich wszystkich podstron, musisz skupić się na tworzeniu linków zawierających słowa kluczowe, np. jeśli robisz menu nawigacyje to nie używaj słowa ‘wykonania’ a ‘wykonane remonty’ jeśli zajmuszejsz się branżą remontową Drobna zmiana, która dla ludzi przeglądających stronę nie zrobi więszej różnicy a dla jakości strony w oczach google’a TAK!

–

Zgłaszanie do wyszukiwarek oraz katalogów.

Skoro napracowałeś się nad optymalizacją oraz poprawnością kodu i treści Twojej strony możesz zabrać się za zgłaszanie jej adresu do wyszukiwarek (jeśli jest nowa i google oraz msn o niej jeszcze nie słyszały – zakładam, że to kobiety ;d). Powinieneś napewno umieścić adres w:

google.pl, msn.com, wp.pl, onet.pl — czyli najważniejszych wyszukiwarkach z jakich korzystają polscy internauci.

W aspekcie dodawania do katalogów nie wierz w obiegowy mit, że dodawaniem do byle jakich spisów stron podniesiesz znacząco pozycję strony. Musisz zadbać to aby w pierszej kolejności dodać swoją stronę do tematycznych oraz branżowych katalogów będących w merytorycznej zgodzie z treścią oraz tematyką. To daje dużo lepsze efekty. Dodatkowo sprawdzaj jakość katalogu po jego wskaźniku PR (jeśli nie wiesz co oznaczają te wszystkie skróty zapraszam do przeczytania innego wpisu: ‘słownik pozycjonera‘). Ważne aby dbać o miarowe dodawanie strony do katalogów, i w miarę regularne. Wpisy jakie dodajesz staraj się tytułować z wykorzystaniem wcześniej ustalonych słów kluczowych, więcej na ten temat w następnym punkcie.

–

Zdobywanie użytecznych linków do strony www.

To już ostatni i najdłużej trwający etap całego procesu pozycjonowania. Musisz wiedzieć, że google jak i inne wyszukiwarki oceniają stronę po ilości linków jakie do niej prowadzą, ze zwróceniem szczególnej uwagi na linki zawierające słowa kluczowe. Pierwsze linki jakie może zyskać Twoja strona to oczywiście wpisy do katalogów, oraz presell pages. W woli wyjaśnienia, presel’e to strony, na których możesz umieszczać wpisy (artykuły) tematyczne z linkami zwrotnymi do Twojego adresu. Jest to ostatnio bardzo popularny sposób wspomagania pozycjonowania oraz zdobywania popularności w sieci. Trzeba jednak (tak jak to było z katalgami) dbać o umieszczanie swoich artów w miejscach o pewnej renomie, wysokiej ocenie PR oraz dobrej moderacji. Moderacja zapewnia, że linki jakie skierujesz do siebie będą otoczone wartościową i tematyczną treścią oraz, że nie znikną w niewyjasnionych okolicznościach z indeksu google’a (np. po banie).

Drugim typem linków sa tzw. linki naturalne – są to najbardziej porządane linki gdyż tworzą ją osoby polecające, bądź odnoszące się do treści Twojej strony. Sposobem na zdobywanie dużej ilosci wartościowych linków jest udostępnienie użytecznej wiedzy, bądź narzędzi – w nurcie tematycznym usług i produktów jakie oferujesz na stronie. Np, zbiór porad czy tematycznych tekstów poświęconych zagadnieniom branżowym jest świetnym pomysłem, gdyż jeśli będzie on na dobrym poziomie merytorycznym oraz użyteczności ludzie będą umieszczać do nich linki. Możesz pozwolić na rozpowszechniane takich treści pod warunkiem umieszczenia linku zwrotnego, umieszczenie w komentarzu przykładowego kodu html z treścią linka dodatkowo usprawni sprawę.

–

Zakończenie.

To wszystko z podstaw pozycjonowania i optymalizacji, oczywiście istnieje jeszcze wiele innych metod, technik i aspektów seo – jednak większość to wiedza zdobywana w trudzie i pozwolę sobie na posiadanie tajemnic zawodowych W kolejnych wpisach oczywiście więcej tajników zdobywania popularności stron internetowych, już teraz serdecznie zapraszam.

~Michał Kowalski 2008

Jeśli zajmujesz się kodowaniem wyglądu stron www lub dopiero zaczynasz się tego uczyć to zapewne spotkałeś się z metodą wprowadzenia interakcji do elementów nawigacji, tak aby reagowały w odpowiedni sposób np. na najechanie kursora myszy.
Jeśli chcesz wiedzieć więcej to zapraszam do czytania….

Specyfikacja css’a daje nam możliwość korzystania z zawartych w jego strukturze pseudoklas, które nie wymagaja wcześniejszej deklaracji, one poprostu istieją i są dostępne dla każdego dokumentu (x)html jaki tworzysz. Przedstawia je poniższy listing.

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

–
Czary z linkami – ożywianie nawigacji.

Korzystając z kilku z wymienionych selektorów możemy dostosować wygląd oraz zachowanie naszych linków na stronie, oto one:

• a:link – określa elementy, które są zwykłymi linkami
• a:visited – selektor dla linków odwiedzonych
• a:hover – ta dyrektywa mówi jak zachowa się najechany link (kursor nad polem tekstowym)
• a:active – linki aktywne.

I teraz czas na sekret stosowania powyższych selektorów, aby poprawnie działały i były interpretowane zgodnie z naszym zamysłem należy deklarować je w odpowiedniej kolejności. Najpierw ustalamy właściwość dla elementu a: a {}, następnie a:link, a:visited, a:hover, a:active. W innym razie może wystąpić konfikt deklaracji i nasz kod nie będzie funkcjonował jak należy.

Jednak to nie koniec css’owych czarów, wymienione znczniki można stosować w kombinacjach, ale pod jednym warunkiem, że zostanie zachowania kolejność jaką podałem akapit wyżej. Dla przykładu napiszmy jak to może wyglądać:

• a:link, a:visited { text-decoration: underlined; }
  
• a:hover, a:active { background-color: #000; }

Każdy element , który jest odwiedzonym (klikniętym wcześniej) linkiem zostanie podkreślony, a linki najechane i będące aktualnie wyświeltane otrzymają czarne tło (#000 == black).Z wymienionych na samym początku selektorów pozostałe oznaczają:

• :focus – tyczy się elementów np. pól formularza, które są aktywne
• :first-child – pierwsze dziecko, w kaskadzie określonej kolejnośćią DOM’u
• :lang(pl) – nada wygląd elementom dla których została zadeklarowany atrybut lang jako pl.

To wszystko, na ten temat, do usłyszenia.

~Michał Kowalski 2008

Metoda podstawowa.

Wyświetlanie aktualnego statusu jest udostępnione w postaci skryptu CGI pod adresem URL : http://www.gadu-gadu.pl/users/status.asp wprost z serwisu GG. Aby uzyskać efekt należy przekazać do skryptu status.asp dwa parametry, jako pierwszy ‘id‘, który zawiera nasz numer w sieci gadu gadu, oraz drugi ‘styl‘ oznaczający sposób wyświetlania zwracanego stanu. Po przekazaniu do zmiennej ‘styl‘ wartości 1 nasz status będzie wyświetlał się w postaci słoneczka, natiomiast 2 da efekt opisowy.

Przechodząc do praktyki jaka płynie z powyższej teorii możemy wyświetlić status dla numeru 000000, za pomocą słoneczka (styl=1), wystarczy wstawić w odpowiednie miejsce na stronie poniższy kod (x)html:

<img src=”http://www.gadu-gadu.pl/users/status.asp?id=000000&styl=1″ />

i — gotowe

Dla mocno zamyślonych lub równie mocno co beznadziejnie zakochanych dodam, że zamiast 000000 wstawiamy własny numer gadu- gadu.

Wersja podrasowana – korzystamy z własnych miniaturek statusu za pośrednictwem php.

Jeśliuważasz, że domyśne obrazki jakie oferuje gg nie pasują do layout’u Twojej strony, możesz w łatwy sposób podmienić je wykorzystując do tego prosty kod php:

<?php
$plik=fopen ("http://www.gadu-gadu.pl/users/status.asp?id=00000&styl=2", "r"); $status=fgets($plik, 2);
switch ($status) {
   case 1: echo '<img src="niedostepny.jpg" mce_src="niedostepny.jpg" />'; break;
   case 2: echo '<img src="dostepny.jpg" mce_src="dostepny.jpg" />'; break;
   case 3: echo '<img src="wracam.jpg" mce_src="wracam.jpg" />'; break;
   default: //opcja domyślna: echo '<img src="error.jpg" mce_src="error.jpg" />'; break;
}
fclose($plik);
?>

–

To co robią powyższe instrukcje:

1. fopen — pobieramy status w postaci strony www
2. petla swich – sprawdza co zwróciło zapytanie i przypisuje odpowiedni obrazek
3. fclose — zamyka nasz plik operacyjny zawierający wartość statusu

Oczywiście należy utworzyć odpowiednie pliki miniaturek w formacie jpg i umieścić w miejscu dostępnym dla podanego kodu.

Zakończenie.

Kolejny prosty, aczkolwiek mocno praktyczny sposób na wzmocnienie dostępności Twoich usług oferowanych na stronie. Mam nadzieję, że komuś to ułatwi życie.

~Michał Kowalski 2008 

Co to i po co to – wprowadzenie.

Mniej więcej na przełomie lat 1993/1994 wraz z coraz większym natężeniem ruchu crawler’ów, (zwanych też pająkami) na różnych serwerach stron www zdarzały się sytuacje, że indeksowały one treści, które nie były z różnych powodów przeznaczone do rozpowszechniania. Przykładowo strony, które nie były tworzone z koncepcją udostępniania ich zawartości dla ogółu internetowej społeczności, a z różnych względów nie posiadały odpowiednich mechanizmów zabezpieczających. Dodatkową możliwością jest generowanie zbyt dużego ruchu w ramach lokalizacji internetowej, co mogło powodować zwiększone obciążenie serwerów. Wymyślono wówczas sposób na poinformowanie robota, które części serwisów mają pozostać niezindeksowane, omawianym rozwiązaniem jest właśnie plik robots.txt, w nim właśnie podajemy nazwy katalogów do których pająki nie będą zaglądały.

Format pliku – dopuszczalna składnia.

Plik robots.txt umieszczamy na serwerze w głównej lokalizacji do której prowadzi adres URL, i powinien on zawierać linijki, których ogólna składnia jest zgodna z poniższym schematem:

“<field>:<optionalspace><value><optionalspace>”

“<pole>:<opcjonalna-spacja><wartość><opcjonalna-spacja>”

Dozwolone jest umieszczanie komentarzy w treści omawianego pliku, które wpisujemy po standardowym znaku komentarza, zaczęrpniętym z konwencji stosowanej w systemach UNIX’owych czyli “#” (hasza). Wszystkie linijki zaczynające się od tego znaku są ignorowane.

Wpis zaczyna się od dyrektywy “User-agent”, którą poprzedzamy wyrażeniem “Disallow” czyli odmowy dostępu, a kończymy znakami opsiującymi lokalizację dla jakiej roboty mają mieć zabroniony dostęp. Dla podania lokalizacji możemy stosować znak / (ukośnik) aby odnieść się do aktualnej lokalizacji, oraz * (gwiazdka), która daje wieloznaczne podstawienie, czyli zabrania dostępu w ramach wszystkich plików/podkatalogów w naszym katalogu głównym. Przykładowa składnia pliku znajduje się poniżej:

# oto przykład:
User-agent: * #dotyczy wszystkich typów crawler’ów
Disallow: /tmp #zabrania dostępu do katalogu ‘tmp’
Disallow: test.html #zabrania dostępu do pliku ‘test.html

–
Można dla pola ‘User-agent’ zastosować konkretny typ pająka, np. google/msn i w ten sposób jeden z nich nie będzie miał dostępu do naszych plików.

Zakończenie.

Zagadnienie proste jednak wierzę, że znajdzie się kilka osób, dla których to opracowanie stanie się pomocne. Pozdrowienie!

~Michał Kowalski 2008 

Ponieważ w Efrenzy Interactive wciąż myślimy jak spożytkować naszą kreatywności i umiejętności, wymyśliłem aby zrobić konkurs na najlepszy pomysł realizacji www.
Jeśli posiadasz zamysł na ciekawą lokalizację, napisz do nas pod adres blog (maupa) efrenzy (kropka) pl a my sprawdzimy czy rzeczywiście warto włożyć w Twój projekt odrobinę pracy. Masz możliwość uzyskać BEZPŁATNIE kodowanie oraz opracowanie optymalnej trony internetowej.

Dlaczego to robimy?

Oczywiście dla naszej wspolnej korzyści, Twój zysk jest niewątpliwy – z naszej strony możemy nawiązać współpracę oraz wymienić doświadczenia a co najważniejsze poprostu uwielbiamy nasze zajęcie

Czekam na propozycje! M.Kowalski

Konsorcjum WWW to organizacja zrzeszająca niemalże 400 firm, instytucji, uczelni wyższych, które stoją na straży prawidłowego rozwoju standardów tworzenia dokumentów sieci web. W jego skład wchodzą m. in. deweloperzy tworzący aktualnie najpopularniejsze przeglądarki internetowe (Microsoft, Apple, Operę, AOL (dawny Netscape) i Mozilla). Dziwić może fakt, że w tym gronie znajduje się twórca przeglądarki IE (sic!), jednak Microsoft stanowi poważnego sponsora w3c. To, że jego przeglądarka posiada błędy stanowi odrębną sprawę. Jako głównego założyciela konsorcjum należy wymienić Tim’a Berners Lee – człowieka, który dał początek hipertekstowi, przeglądarkom i serwerom www. Jak już wspomniałem w3c dba o standardy na potrzeby sieci i zważa na jej prawidłowy rozwój wytyczając kierunki. Aby “standard” nie stał się utopią ludzie zrzeszeni w w3c starają się pamiętać o realnym podejściu do tematu, stąd np. wersje Transitional – biorące pod uwagę śmietnik dawnego html’a.

DTD/DOCTYPE – co nam daje W3C.

Skrót od Document Type Definition/Declaration, jest to deklaracja stosowanej przestrzeni nazw, czyli struktury html’a. Umieszczana obowiązkowo na początku każdego dokumentu html/xhtml. Stanowi informację dla przeglądarki jak ma interpretować kod, który jej serwujemy. Wiele jego wersji powstało aby nadążyć za dość chaotycznym rozwojem przeglądarek internetowych – głównie InternetExplorel’a, który w przypadku wersji 5, nie był zgodny z żadnym ze standardów, a twórcy stron optymalizowali kod wyłącznie pod tą aplikację. Powstało przez to wiele zamieszania (np. tryb Quirks Mode) i kilka wersji DOCTYPE:

•  Strict – wersja ścisła, zgodna ze standardem, nie zawiera ramek oraz przestarzałych znaczników, takiej powinniśmy się trzymać przy tworzeniu stron www.
• Transitional – wersja przejściowa, może posiadać tagi uznane za przestarzałe, typ ‘transitional’ powstał z myślą o starych stronach, które siłą rzeczy nadal znajdują się w internecie i jesteśmy skazani na ich za<B>a<BR>any kod.
• Frameset – jest to forma, która dopuszcza stosowanie ramek, jeśli nie wiesz o co chodzi to lepiej niech tak pozostanie, ramki były kiepskim wynalazkiem i dobrze, że aktualnie od tej koncepcji tworzenia stron z całą mocą się odchodzi.

Poprawne deklaracje DOCTYPE:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Niepoprawne DTD - czym to grozi?

Być może miałeś taką sytuację, że napisałeś kod w html’u dla srtony www, sprawdziłeś walidatorem jej poprawność, mimo to strona nie chciała poprawnie funkcjonować w żadnej przeglądarce ? Najprawdopodobniej popsułeś deklarację DOCTYPE. Dlaczego to takie ważne ? Dlatego, że mówi przeglądarce w jakim dialekcie z nią rozmawiasz za pośrednictwem plików html. Rzecz w szczególności dotyczy przeglądarek takich jak Mozilla, IE5/Mac, and IE6/Win. Jeśli deklaracja typu jest błędna bądź wogóle nie występuje, przeglądarka przechodzi w tzw. tryb “Quirks Mode” czyli traktuje stronę jak dokument niestandardowy – napisany przestarzałym kodem. Sporo można na tym stracić! Sprawdź:

1.  czy adres odnoszący się do zewnętrzenego dokumentu “.dtd” jest absolutny (bezwzględny), czyli czy zawiera część “http://www.w3.org/TR/”. Zdarza się, że webmaster kopiuje bezmyślnie deklarację ze stron w3w gdzie mogą być podane linki względne – działające tylko w obrębie danego serwera.
2. czy rzeczywiście napisany przez Ciebie kod jest tym za co się podaje w deklaracji typu czyli DTD

Zakończenie - w edukacji nadzieja na lepszą przyszłość.

Dzięki wielu akcjom promującym stosowanie standardów oraz zwracającym uwagę na poprawność kodu dostępnych lokalizacji jest możliwe, że niedługo internet stanie się dostępniejszy. Mam nadzieję, że tym wpisem udało mi się wyjaśnić kilka niezwykle istotnych zagadnień oraz przyczynić do lepszego funkcjonowania pisanych przez Ciebie stron. Pozdrowienia.

Michał Kowalski 2007

Tagi meta, bardzo często są wykorzystywane z brakiem zrozumienia ich funkcji i używane w sposób przynoszący więcej szkody niż pożytku. Co więcej silniki wyszukiwarek nie biorą ich często pod uwagę – tak twierdzą niektórzy twórcy witryn www. W tym miejscu zebrałem wszystkie prawdy i mity odnośnie konkretnych znaczników oraz dzielę się moimi rekomendacjami odnośnie ich stosowania (bądź odradzam jeśli są przesłanki aby uznać konkretną funkcję za przestarzałą). Do dzieła…

Definicja – czym są meta tags ?

Dla niewtajemniczonych wyjaśniam, że są umieszczane w kodzie strony (x)html pomiędzy znacznikami <head></head> i stanowią definicyjno-informacyją część kodu. Oznacza to tyle, że umieszczamy tam informacje dla serwerów www odpowiedzialnych za interpretacje kodu strony oraz aplikacji typu przeglądarki oraz wyszukiwarki (crawler’y google, msn, yahoo).

Zostały stworzone w latach dziewiędziesiątych wraz z coraz szybszym przyrostem ilości dokumentów hipertekstowych w sieci i miały dodać funkjonalność porządkującą zasoby pod względem typu, języka, treści. Oczywiście towarzyszyły temu liczne nadużycia, czyli niepoprawne stosowanie tagów sekcji meta aby oszukać algorytmy wyszukiwarek. Przeładowanie tagu “keywords” słowami niewystępującymi w treści strony, etc… Spowodowało to zdegradowane znaczenia meta tagów i aktualnie niektórzy twierdzą, że są bezwartościowe z punktu widzenia SEO. Moim zdaniem nie należy o nich zapominać. Przyjrzyjmy się im z bliska.

Zalecane (wymagane) meta-tagi.

• Meta Content Language

Tag informujący o języku w jakim została napisana treść lokalizacji, stosowany przez roboty wyszukiwarek na etapie kategoryzacji pod względem języka. Zalecany do strosowania wyłącznie na stronach innych niż anglojęzyczne, pomagają skierować treść strony do odpowiedniej grupy internautów (np. polskich).

Przykład:

<META HTTP-EQUIV=”Content-Language” CONTENT=”pl-PL”>

• Meta Content Type

Służy deklaracji sposobu wyświetlania znaków na stronie – musi się zgadzać z faktycznym kodowaniem użytym na stronie! Niepoprawne użycie może spowodować problemy z wyświetlaniem treści strony – doskonale znane wszystkim “krzaki” zamiast polskich znaków diakrytycznych. Zalecane stosowanie - zgodne z wykorzystaną deklaracją przestrzeni nazw DTD. (więcej o dtd w odrębnym artykule już wkrótce). Wybór kodowania zależy od preferencji, polecane to utf-8/iso-8859-2 dla polskich znaków.

• Meta Description

Pozwala zamieścić opis strony, jej przeznacznie oraz przybliżyć tematykę jaką porusza zgromadzona zawartość. Stosowana przez roboty, google często używa tego meta-tag’u do wyświetlenia opisu w wynikach wyszukiwania. Nie jest to reguła, jednak podejrzewając, że tag description będzie wyświetlany jako etykieta, należy mu poświęcić odpowiednią uwagę i dopracować go możliwie najdokładniej.

• Meta Language

Ustawia język wykorzystany na stronie – brany pod uwage przez roboty, należy go stosować wyłącznie w przypadku stron pisanych w innym języku niż angielski internacjonalny.

Opcjonalne znaczniki (niewymagane).

• Meta Abstract

Pierwotnie stanowił podsumowanie opisu (description) czyli podkreślał główne znaczenie dokumentu, jego meritum. Stosowany był głównie w prezentacjach akademickich, które zawierały dysertacje i prace na temat. Czasami warto z niego korzystać jeśli specyfika strony tego wymaga (np. dla wyodrębnienia części w obszernej dokumentacji).

• Meta Author

Niesie informację o autorze strony – jeśli zależy nam na sławie w dziedzinie tworzenia stron możemy śmiało się pokusić o umieszczenie naszego nazwiska w tego typu deklaracji. Ściśle niepolecane jest umieszczanie tu adresu e-mail, oczywiście z powodu ryzyka spamu.

• Meta Copyright

Stosowany dla umieszczenia praw autorskich, informacji o znakach zastrzeżonych, bądź numeracji patentowej. Czyli wszelkich adnotacji odnoszących się bezpośrednio do własności intelektualnej. Stosowanie raczej nie zalecane, tylko jeśli wiemy co robimy.

• Meta Designer

Mówi o twórcy kodu strony – mocno opcjonalny tak jak w przypadku tagu author.

• Meta Google

Opcje skierowane na potrzeby współpracy z robotami wyszukiwarki google,  dopuszczalne są dyrektywy:

googlebot: noarchive – nie pozwala na wyświetlanie zindeksowanej zawartości
googlebot: nosnippet – nie pozwala na wyświetlanie zindeksowanej oraz fragmentarycznej części zawartości
googlebot: noindex – nie pozwala na indeksowanie danej strony
googlebot: nofollow – nie pozwala robotom na podążąnie za linkowanymi stronami, mówi aby nie uwzględniać ich znaczenia do Page Rank.

Zalecenie: opcjonalne, wyłacznie jeśli chcemy aby google robiło coś bardzo specyficznego z zawartością naszej strony.

• Meta Keywords

Służy przedstawieniu słów kluczowych jakie zostały zawarte w treści danej strony, stosowanie jest wskazane. Należy zachować specyfikę stosowanych key-words, tak aby w miarę dokładnie oddawały słowa zawarte w treści dokumentu. Stosowanie słowa w tagu, które nie występuje w treści jest kiepskim pomysłem i z góry to odradzam!

• Meta MSN (No ODP)

Tag stosowany w kontekście wyszukiwarki MSN i służy wskazaniu preferowanego opisu srony jeśli chcemy aby był inny niż podany w DMOZ. Stosowanie wyłącznie w uzasadnionych przypadkach.

• Meta Title

Należy stosować z rozwagą, jednak osobiście nie zalecam – robi praktycznie to samo co tagi <title></title> wyrażone explicite. Wspominam o nim raczej ze względów sentymentalnych niż praktycznych
Przykład: <META NAME=”Title” CONTENT=”Page Title Here”>

Niezalecane do stosowania znaczniki.

• Meta Content Script Type
• Meta Content Style Type
• Meta Distribution
• Meta Expires
• Meta Generator
• Meta MS Smart Tags
• Meta Publisher
• Meta Rating
• Meta Refresh
• Meta Reply-To
• Meta Resource Type
• Meta Revisit After
• Meta Robots
• Meta Set Cookie
• Meta Subject
• Meta VW96.ObjectType

Zakończenie – trafna konkluzja.

Aby nie być posądzonym o ignorancję, każdy profesjonalny oraz nawet zajmujący się tworzeniem kodu html hobbistycznie webmaster powinien dowiedzieć się podstaw na temat tej części języka, jaką stanowią meta-tagi. Dodatkowo jeśli nasza strona www ma za zadanie spełniać wymagania marketingowe (sprzedaż, promocja usług) dobrze jest pisać kod przyjazny wyszukiwarkom. Sprawia to, że nasze lokalizacje są skuteczne i wydajne a my śpimy spokojniej …  

P.S. Ładny przykład:

<head>

<title>Oto przykład stosowania meta-tag’s.</title>
<meta name=”keywords” content=”meta, tag, meta-tags, stosowanie” />
<meta name=”description” content=”Dowiedz się jak stosować meta tagi!” />
<meta name=”robots” content=”all” />
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”content-language” content=”en” />

</head>

Michał Kowalski 2007

Nasza lokalizacja internetowa funkjonuje w dwóch materiach, jest postrzegana przez ludzi, internautów, czyli osoby dla których ją projektujemy oraz w przestrzeni aplikacji, które ją przetwarzają oraz interpretują. Jeśli priorytetem jest dla nas skuteczność i osiąganie korzystnych efektów należy uwzglęniać oba aspekty. Dobra brzmi fajnie jak to zrobić? 

Dla robotów i aplikacji.

Drugi czynnik wymieniony we wstępie tego tekstu jest naprawdę istotny, jenak równie często bagatelizowany. Aktualnie większość odwiedzin naszej strony jest generowana przez odesłanie internauty z katalogu bądź wyszukiwarki – należy zadbać aby roboty, crawlery mogły swobodnie i optymalnie korzystać z udostępnionych zasobów. Korzyści z takiego podejścia są ogromne, 85% odwiedzin to google – nad czym jeszcze się zastanawiać?

Minimum:

•  dbamy o semantykę, poprawny kod, walidowalny dobrze zdefiniowany
• poprawna struktura linków wewnętrznych
• optymalizacja w przypadku aplikacji generowanych dynamicznie
• jakość treści, unikalny kontent sprawi, że nie będziemy przypominać spamerów

Strona przyjazna silnikom wyszukiwarek, łatwiej i szybciej trafi na monitory internautów i zachęci tym samym do korzystania z Twojej oferty.

Krok drugi – przeglądarki.

Przeglądarka to mechanizm, który stanowi pomost pomiędzy twoją treścią a ostatnim ogniwem omawianego łańcucha zależności jakim jest internauta. Przeglądarki interpretują kod html, który jest odpowiedzialny (powinienien!) za strukturę logiczną dokumentu oraz arkusze css stanowiące reguły dla warstwy prezentacji czyli wyglądu naszego dokumentu. Ponieważ przeglądarki są gorsze i lepsze, a w przypadku IE w wersjach 4-6 można powiedzieć fatalne należy pamiętać aby sprawdzić jak zachowuje się nasza aplikacja w różnych środowiskach i pod różnymi browser’ami. Czasami będzie nas kosztowało sporo czasu i pracy aby strona mniej więcej podobnie prezentowała się pod przeglądarkami produkcji Microsftu, niestety sposób w jaki interpretują standardy css pozostawia wiele do życzenia. Moglibyśmy o tym zapomnieć gdyby nie statystyki, które brutalnie twierdzą, że ~80% odwiedzin to właśnie IE.

Z myślą o internautach - usability (użyteczność).

Ostatnim aspektem, jednak chyba najistotniejszym jest przyjazność naszych dokumentów hipertekstowych dla samego użytkownika. Jeśli zadbamy aby odbiorca mógł poprzez wyszukiwarkę, wyświetlić poprawnie zakodowany w css’ie layout to należy jeszcze sprawić korzystanie z nawigacji, formularzy i innych zasobów intuicyjnym. Podstawowa zasada brzmi, nie zmuszaj internautów do myślenia jeśli nie jest to konieczne. Przy projektowaniu funkcjonalności serwisu należy uwzględnić przyzwyczajenia, trendy i priorytet prostoty obsługi. Sprawi to, że potencjalny zainteresowany nie zrezygnuje zawiedziony stopniem skomplikowania naszych rozwiązań. Dodatkowo ważne jest aby pamiętać, że pewna część naszych gości korzysta z dodatkowych – alternatywnych mechanizmów nawigacji – np. osoby niedowidzące, które są zmuszone zwiększać rozmiary wyświetlanych czsionek. Zadbajmy aby po takich zmianach strona nie rozsypywała się, zamieniając w haotyczny misz-masz.

Zakończenie.

Planując projekty należy dokładnie przeanalizować możliwe scenariusze, oraz zadbać aby mogły poprawnie realizować stawiane przed nimi zadania. Optymalizacja, to klucz do sukcesu.