Komputery nie zapisują liter wklepywanych z klawiatury wprost, stosują do tego nieco bardziej wyrafinowanego sposobu liczbowego. Każdej literze (znakowi) jest przypisana jakaś cyfra i w zależności od typu kodowania może ona przyjmowac różne wartości, zawarte w różnym typie oraz zakresie. Brzmi poważnie;) Czytaj dalej!

Pierwsze kodowania zawierały znaki wyłącznie z alfabetu angielskiego oraz kilkudziesięciu znaków specjalnych typu ‘/?><’, najbardziej rozpowszechniony standard to ASCII (American Standard Code for Information Interchange – Amerykański Standardowy Kod dla Wymiany Informacji). Ponieważ w tym pierwotnym kodowaniu nie były uwzględnione znaki diakrytyczne dla innych języków świata, powstały strony kodowe, które pozwalały na zapisanie w języku komputerów wszystkich ogonków, umlautów, etc — ISO 8859. I tutaj zamieszanie, gdyż jak wiele jest odmian alfabetycznych przypisanych językom tak wiele powstało stron kodowych, dla polskich znaków było ich conajmniej kilka. Najpopularniejsze i obecnie uznane jako standard jest iso-8859-2 oraz standard “windowsowy” win-1250. Z mnogości odmian językowych wynika niemałe zamieszanie, które ma rozwiązać najnowszy standard kodowania znaków UTF. Powstał on z myślą zawarcia wszelkich regionalizmów, i tak z technicznego punktu widzenia, ponieważ unikod jest 4 bitowym kodowaniem (stosuje do zapisu liter 4 bity znaków cyfrowych) zawiera on w sobie pierwotny standard ASCII (w pierwszym bajcie można zapisać wszystkie znaki ASCII -co daje im pełną zgodność). Pozostała nadmiarowość pozwala na zawarcie diakrytyzmów. Jest tu pewnien kompromis w stosowaniu UTF’u, gdyż ze wspomnianej nadmiarowości powstaje problem ekonomii zapisu znaków – jednak są równiez zalety, które moim zdaniem w pełni rekompensują tą niedogodność.

Dla zapisu polskich znaków, możemy stosować poniżej wymienione kodowania:

• win-1250 — mocno niezalecane, rozumiane i stosowane przez niektóre windowsy

• iso-8859-2 — jest przyjętym standardem dla kodowania polskich ogonków, jednak przez jego niszowość nie pozwala na swobodne stosowanie w obrębie wielojęzycznego internetu

• utf-8 — zalecany dla stron wielojęzycznych, potrafi poprawnie obsłużyć polskie znaki, jest elastyczny oraz ściśle zalecany przez agencje ustalające standardy.

Który typ kodowania znaków jest najlepszy?

Dla tworzenia polskich stron internetowych zalecanym kodowaniem jest utf-8 (utf-8 to trochę bardziej oszczędna wersja unikodu, jego nadmiarowość w przypadku zapisu polskiej treści wynosi ok. 5%). Drugą poprawna stroną kodową jest iso-8859-2. Został on uznany przez ustawę Polskiej Normy, jako standard zapisu polskich znaków w internecie. Natomiast, wspomniany wcześniej win-1250 nie jest w pełni zgodny ze światowym standardem ASCII i przez to nie jest porpawnie rozumiany przez część aplikacji, szczególnie odradzam jego stosowanie.

Na bazie powyższych rozważań zwycięzcą ogłaszam uniwersalny UTF-8. Jest niewątpliwie przyszłością wielojęzycznego internetu, daje nam wiele możliwości stosowania różnych jezyków na stronach oraz, wyklucza ryzyko niezgodności z przeglądarkami internetowymi za kilka lat

Praktyczne uwagi do wybranego charset.

Od strony praktycznej, sprawa kodowania przedstawia się następująco: najpierw musimy zapisać znaki w określonym kodowaniu, czyli albo używamy edytora, który ma opcję zmiany użytego kodowania, albo mamy świadomość, że windowsowy notatnik pisze w win-1250 ;S

Następnie w odpowiednim tagu meta musimy zawrzeć deklarację użytego kodowania, tak aby przeglądarki internetowe interpretujące nasz (x)html wiedziały jak go rozkodować, może to wyglądać tak:

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-2*”>.

Jeśli stosujemy xhtml, który jest strikte XML’em musimy również do naszego dokumentu dołączyć deklaracje w jego “dialekcie”, co wygląda następująco:

<?xml version=”1.0″ encoding=”iso-8859-2*”?>,

umieszczamy go na samym początku dokumentu. Niestety w przypadku stron wysyłanych jako text/html deklaracja xml znajdująca się przed doctype rodzi pewne problemy w rozumieniu stron przez przeglądarke IE w wersji 6.x . Ale to już problem do dyskusji na osobny wpis.

Zakończenie.

Boje z kodowaniem nie dotyczą wyłącznie dokumentów hipertekstowych, również inne dokumenty, dane w zbiorach bazodanowych opierają się na zapisie kodowym. Stąd świadomość omawianych zagadnień jest niezbędna aby opóźnić objawy starzenia i utrzymać zdrowie psychiczne w dobrej kondycji ;p Szczególnie jeśli interesuje Cię profesjonalne tworzenie stron internetowych.

~Michał Kowalski 2008

(*)Zakładam, że stosujemy kodowanie iso-8859-2, jednak przypominam, że lepiej jest stosować UTF-8.

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

Spis rzeczy:

–

1. Słowo wstępne.

2. Cele – Wprowadzenie pojęć.

2.a. Duplicate Content
2.b. Supplemental Index

3. Działania – metody.

3.a. Optymalizacja tytułów.
3.b. Przyjazne linki (mod_rewrite/.htaccess).
3.c. Stosowanie mechanizmu ‘Read-More’.

4. Zasady optymalizacji treści – kompozycja.

5. Mapa strony - google-sitemap.

6. Zakończenie.

–

Ad.1.

WordPress uchodzi za jeden z lepiej funkcjonujących i przyjaznych wyszukiwarkom silników zarządzania treścią, ja podobnie jak tysiące innych internautów zgadzam się z tym zdaniem w stu procentach. Najczęściej template’y do WP są poprawne ze względu na wymagania jakie stawia specyfikacja xhtml’a, czyli przechodzą poprawnie walidację. Jeśli nie wiesz co to jest, tutaj: dowiesz się co to walidacja. Wracając do zagadnienia pomimo, że WP stanowi w wersji podstawowej jeden z lepszych CMS’ów, zawsze można nad nim popracować i osiągnąć lepszy efekt oraz dużo bardziej zadowalające rezultaty pozycjonowania Twojego bloga.

Ad.2.

Chcemy aby nasza praca nad poprawieniem aktualnego stanu Twojego WordPress’a przyniosła efekt w postaci lepszego indeksowania Twojej treści przez roboty google’a oraz pozwoliła na osiągnięcie lepszych pozycji w wynikach wyszukiwarek. Chcemy aby nasz blog stał się przyjazny dla crawlerów. Chcemy aby Twoja wiedza nie była publikowana na marne. Musimy poradzić sobie z takimi zjawiskami jak duplicate content na skutek czego mamy do czynienia z wpadaniem naszych postów do indeksów uzupełniających wyników wyszukiwania. Aby rozjaśnić nieco sytuację proponuję przejść do definicji.

Ad.2.a. Duplicate Content

Duplicate Content (Efekt Zduplikowanej Zawartości) jest to zjawisko powodowane przez dostępność tej samej treści (postów) pod kilkoma możliwymi ścieżkami w treści serwisu. Ze względu na to, że WPress dzieli artykuły na kategorie, dodatkowo również udostępnia archiwum postów, co powoduje, iż ta sama treśc wpisów jest dostępna pod kilkoma ścieżkami podążania za odnośnikami w ramach bloga. Google zwraca szczególną uwagę na jakość treści, które trafiają do indeksu stron – Duplicate Content zapobiega publikowaniu tych samych stron kilkukrotnie z tą samą zawartością. (por. Ad.3.b. oraz Ad.3.c)

Ad.2.b. Supplemental Index – Indeks Uzupełniający

– aby wyjaśnić to pojęcie powinniśmy sobie wyobrazić jak google indeksuje linki wewnętrzne oraz treści zawarte w ramach naszego bloga do których one prowadzą. Jeśli założymy, że wszystkie posty zostały zaindeksowane, to zazwyczaj nie wszystkie są na równi traktowane przez wyszukiwarkę. Jedne z nich pojawiają się jako podstawowe wyniki wyszukiwania inne natomiast nie są wyświetlane w przypadku podstawowego zapytania do naszego adresu URL. Może to wyglądać tak:
site:www.twoj.blog.pl

Często do wpadania linków do SI przyczynia się wcześniej omówione zjawisko podwójnej treści. Nie jest do końca wyjaśnione na czym dokładnie polega mechanizm SI, wiemy natomiast jak on się objawia oraz jak sprawdzić występowanie naszych adresów w Wynikach Uzupełniających. Przykładowo wpisując w pasek wyszukiwania google’a zapytanie:
site:www.twoj.blog.pl *** -view,

otrzymamy wyniki prezentujące ilość naszych podstron jakie trafiły do SI. Przyczyną takiego traktowania linków może być również zduplikowany tag tytułowy <title> oraz meta-tag keywords. Kolejny aspekt optymalizacji seo naszego WP. Skoro wyjaśniliśmy sobie najtrudniejszcze pojęcia, możemy zacząć działać.

“Jedziemy dalej, nikt nie woła!”

Ad.3.a

Optymalizacja tytułów obejmuje zagadnienie wyświetlania tekstów w pasku przeglądarki, z czego również korzysta google przy wyświetlaniu wyników. Dla przykładu w przypadku skórki z jakiej korzystam linijka odpowiedzialna za wyświetlanie tagów tytułowych znajdowała się w pliku:

wp-content/themes/*nazwa_theme*/header.php i wyglądała następująco:

<title><?php bloginfo('name'); ?><?php wp_title();?></title>.

Kod ten daje efekt tytułu wyglądającego jak: NAZWA BLOGA TytułArta – jak dla użytkownika prezentuje się zadowalająco, jednak w przypadku chęci poprawienia działania tego elementu, można skorzystać z metody zaproponowanej na stronie Pawła Lipca pod adresem http://polskiblogger.pl/lepszy-tytul-bloga.html:

<title>
<?php if (is_home () ) { bloginfo(“name”); }
elseif ( is_category() ) { single_cat_title(); echo ” w “; bloginfo(“name”); }
elseif (is_single() ) { single_post_title(); echo ” na “; bloginfo(“name”); }
elseif (is_page() ) { single_post_title(); echo ” - “; bloginfo(“name”); }
elseif (is_search() ) { echo wp_specialchars($s); echo ” w “; bloginfo(“name”); }
elseif (is_archive() ) {  echo “Archiwum “; bloginfo(“name”); }
else { wp_title(“,true”); } ?>
</title>

Jak to działa? Jeśli wyświetlana jest strona domowa (adres główny) to jako tytuł wyświetlana jest nazwa bloga, w przypadku jeśli jesteśmy w kategorii wyświetlana jest nazwa kategorii oraz na końcu nazwa bloga. Daje to efekt generowania różnych tytułów w zależności od wyświetlanej treści. Pamiętając, że google lubi różnorodność contentu warto poświećić temu zagadnieniu kilka chwil i odpowiednio spersonalizować ten element naszego WP.

Ad.3.b.

Przyjazne adresy są związane z wyglądem linków jakie stanowią wewnętrzną strukturę nawigacji po naszych postach i stronach, wyszukiwarki stanowczo zwracają na ten aspekt sporo uwagi (o ile można pozwolić sobie na tak dalece posuniętą personifikacje tych bezdusznych mechanizmów przyp. red.).

Po pierwsze należy zastanowić się czy nasz blog ma być dostępny pod adresem z prefiksem www. czy bez. Google dwa typy adresów postaci www.blog.pl oraz blog.pl widzi jak dwie odrębne lokalizacje i możliwe jest aby pod dwoma takimi URL’ami znajdowały się zupełnie inne strony www. Aby poradzić sobie z omawianym wcześniej Duplicate Content na tej drodze możemy zastosować reguły przepisywania mod-rewrite, osiągalne zazwyczaj z poziomu pliku .htaccess.

Jeśli już wiemy jaki wariant nas interesuje (wybieramy tylko jeden) zastosujemy jedą z poniższych reguł:

#www.blog.efrenzy.pl
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^blog.efrenzy.pl
RewriteRule (.*) http://www.blog.efrenzy.pl/$1 [R=301,L]

bądź:

#blog.efrenzy.pl
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www.blog.efrenzy.pl
RewriteRule (.*) http://blog.efrenzy.pl/$1 [R=301,L]

–
Słowem wyjaśnienia RewriteEngine On — używamy wyłącznie raz na początku pliku .htaccess (umieszczamy w katalogu gdzie znajduje się index.php, nadajemy prawa 644), RewriteBase / — ustawia nam poziom zero, czyli miejsce do, którego odnoszą się nasze reguły, RewriteCond — to warunek przepisania (to co chcemy zmaienić) oraz RewriteRule — to co chcemy uzyskać czyli reguła.

Za pomocą mod rewrite możemy również ustawić postać linków jakie będą wyświetlane w paski adresu, a także widziane przez roboty wyszukiwarek, tak aby nie były łańcuchami postaci:

adres.bloga.pl/index.php?strona=testowa&kategoria=nieprzyjazna etc.

W ramach panelu administracyjnego możemy zdefiniować postac linków przyjaznych z naszego punktu widzenia:

Options>PermaLinks>Custom structure:/%postname%/

czyli Opcje>LinkiWew>Custom structure:/%postname%/ .

Daje to przyjazny efekt wyświetlający wyłącznie tytuł posta, i w przypadku reedycji np. pod inna datą pozwala uniknąć zbieżności treści.

Temat zastosowania htaccess to materiał na naprawdę długą opowieść dlatego należy zainteresować się we własnym zakresie nad innymi jeszce możliwościami.

Ad.3.c.

Jeśli powrócimy do wciąż powtarzającej się tematyki zduplikowanego kontentu, możemy zastosować jedną jeszcze metodę zapobiegania występowaniu DC. Mianowicie stosowanie znaczników “ReadMore” / “CzytajDalej”, komponując treść wpisu polecam kilka zdań wstępu oddzielić od reszty posta linią znacznika, który pozwala ukryć pozostały content. Google w ten sposób nie trafia odrazu na stronie głównej oraz na stronach kategorii na pełną treść wpisów. Są one dzięki temu widziane w pełnej krasie po wyświetleniu za pomocą konkretnego odwołania.

Ad.4. Kompozycja, słowa kluczowe, strategiczne rozmieszczenie.

Aby wykorzystać w pełni potencjał prezentowanych wpisów dobrze jest tak komponować części dodatkowo podkreślone aby zawierały słowa kluczowe czyli strategiczne dla tematyki naszego bloga. Tak więc podkreślone części to nagłówki h1, treść pogrubiona, linki wewnętrzne. Jeśli pamiętamy, że kluczowe mają być naprawdę kluczowe, dostajemy korzyść lepszych wyników na stronie SERP.

Ad.5. 

Bardzo dobrym rozwiązaniem jest stworzenie mapy strony i zgłoszenie jej w narzędziach dla webmasterów google. Jeśli chcesz się dowiedzieć więcej odsyłam do mojego tekstu na temat tworzenia google sitemap (mapy stron).

Ad.6.

Treść tego wpisu stanowi tylko wierzchołek góry lodowej, gdyż dokumentacja WordPress’a zawiera bogaty opis pozwalający na poszerzanie naszych działań optymalizacyjnych, dlatego w następnej części podzielę sie kolejną dawką wiedzy na temat optymalizacji WP. W razie pytań czy wątpliwości zachęcam do zadawania pytań.

~Michał Kowalski 2008

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

Napewno nie raz natrafiłeś na teksty zawierające słowo ’semantyka’, jeśli nie jesteś jeszcze ekspertem w dziedzinie webmasteringu/seo to możesz nie wiedzieć co ono właściwie oznacza. Formalnie jest to określenie dziedziny wiedzy, która bada relacje pomiędzy znakami a przedmiotami do których się one one odnoszą, a jak to jest w przypadku, który nas najbardziej interesuje?

 Jak to się ma do kodu strony? Czytaj wyjaśnienie…

xHTML czy inny język służący do tworzenia dokumentów hipertekstowych to zbiór znaczników które opisują strukturę prezentacji danych. Inaczej mówiąc aby na stronie umieścić jakieś informacje (np. ten tekst) należy je zapisać przy użyciu odpowiednich tagów, tak aby przeglądarka mogła dokonać interpretacji i zgodnie z naszą intencją rozmieścić w logiczny sposób na karcie wyświetlanego dokumentu. I tutaj przychodzi czas odwołania do naszej semantyki. Określa ona w jaki sposób używać wspomnianych tagów, aby oznaczały dokładnie to do czego zostały powołane. Abyśmy wiedzieli jaki był zamysł twórców danego języka, powstał standard, stworzony oraz rozwijany pod skrzydłami Światowego Konsorcjum W3C (Word Wide Web Consortium). Stosując się do standardów tworzymy przejrzysty oraz poprawny pod względem składniowym dokument, który posiada dodatkową zaletę – mianowicie jest zrozumiały dla maszyn;) Co to znaczy? Kod semantyczny prezentuje dane, które rozumiemy my – ludzie, jednak w taki sposób aby również przeglądarki, aplikacje przetwarzania danych, etc mniej więcej wyczuwały nasze intencję… To spora zaleta z punktu widzenia seo/pozycjonowania. Dlaczego ? To proste! Roboty wyszukiwarek są aplikacjami, przeglądając naszą stronę www robot ma nadzieję, że jej twóra wiedział co robi. Dlatego właśnie semantyczne strony jako “lekkostrawne” są lepiej traktowane przez crawlery i pająki.

Jakie to może nieść korzyści?

Korzyść w głównej mierze odnosi się do lepszych pozycji strony w wynikach wyszukiwania przeglądarek. Oczywiście samo stworzenie poprawnej strony nie załatwia samo w sobie sprawy jednak bardzo pomaga. Przekonałem się o tym, kiedy po optymalizacji strony Efrenzy Interactive uzyskałem w google 3 miejsce pod frazą ‘webdesign seo’ bez linkowania – zupełnie sote. To dobry wynik, zważywszy na fakt ilości powiązanych wyników dla tej frazy (spośród około9,300,000). Niestety nie udało się prześcignąć Bielaka ;)

Może następnym razem….

M.K.