15. METATAGI I ZNACZNIK <LINK> Oby dwa wyŝej wymienione elementy są bardzo waŝne w szczególności metatagi. Skąd wzięły się dziwaczna nazwa? PoniewaŜ metatag tworzony jest za pomocą znacznika <META>. Dlaczego zatem nie ma znacznika o nazwie ptag, tabletag... PoniewaŜ te znaczniki nie są tak waŝne, jak metatagi. Zanim poznamy wszystkie metatagi rozwiąŝmy wątpliwość, którą ciągniemy juŝ od dwunastu lekcji. O kodowaniu znaków słów kilka Mianowicie dlaczego nie widzimy (powinniśmy nie widzieć) sześciu polskich znaków poprawnie (ą, ś, ź, Ą, Ś, Ź)? PoniewaŜ znaki nie zostały zakodowane, ani nie została dodana instrukcja, jak zostały zakodowane znaki. W polskim internecie tzn. na kaŝdej stronie stworzonej w języku polskim obowiązuje kodowanie ISO-8859-2. JeŜeli widzimy "krzaczki" zamiast wspomnianych liter oznacza, Ŝe kodowanie strony ustawione jest na windows-1250 (standard Microsoftu). Uwaga: jeŝeli widzimy te sześć znaków poprawnie, wcale nie oznacza, Ŝe na innych komputerach teŝ będzie wszystko widoczne poprawnie. Powiem wyraźniej są nawet nikłe szanse! W celu zakodowania poprawnego wszystkich znaków musimy albo uŝyć konwertera, który dodatkowo umieści informacje o sobie w źródle, lub je tak popsuje, Ŝe nie będziemy w nim nic widzieć. Polecam jednak uŝywać edytora tekstu, który podczas zapisu zmienia te znaki na inne poprawne w kodowaniu ISO-8859-2. JeŜeli znaki na naszej witrynie, ewentualnie podstronie są zakodowane poprawnie, osiągnęliśmy juŝ więcej niŝ połowę sukcesu. Pozostało nam tylko umieszczenie odpowiedniego metatagu w sekcji HEAD. Oto sam znacznik: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> Uwaga: niektóre edytory, chociaŝ zmieniły kodowanie ze względu na przejrzystość źródła nie pokazują tych znaków ciągle widać te sześć ogonków normalnie, ale otwierając plik w innym edytorze na pewno zobaczymy zmiany (chyba, Ŝe działa tak samo jak poprzednik...). Metatagi niezbędna na stronie Wszystkie metatagi obowiązkowo posiadają atrybut NAME, albo HTTP-EQUIV. Nie moŝna powiedzieć, który jest waŝniejszy, gdyŝ kaŝdy metatag (za wyjątkiem jednego
znajdującego się w uzupełnieniach) jest na wagę złota. PoniŜej znajdują się inne metatagi wraz z uzupełnieniami. Wartości metatagów umieszcza się w atrybutach CONTENT. PoniŜej prezentuję uproszczoną listę metatagów wraz z krótkim opisem, a bardziej szczegółowe informacje znajdą się dalej: Content-type - kodowanie strony Title - tytuł strony pojawiający się w wyszukiwarkach Description - opis strony pojawiający się w wyszukiwarkach Keywords - słowa kluczowe opisujące stronę Author - autor (administrator) witryny Reply-to - adres e-mail autora (administratora) Content-language - język strony dla wyszukiwarek Generator - program, w którym tworzyliśmy źródło strony Creation-date - data uruchomienia serwisu Expires - instrukcje zachowania się tymczasowych plików Pragma - instrukcje zachowania się tymczasowych plików Cache-control - instrukcje zachowania się tymczasowych plików Refresh - odświeŝanie strony, przekierowanie na inną stornę Robots - instrukcje robotów indeksujących witrynę w wyszukiwarkach Tytuł, opis strony i słowa kluczowe Content-type juŝ omówiliśmy. Opiszę teraz Title (tytuł) i Description (opis). Oby dwa mają swoje miejsce w wyszukiwarkach stron internetowych. Oby dwa metatagi umieszcza się za pomocą atrybutu NAME. Tytuł zawsze pojawi się (przynajmniej powinien pojawić się) w kaŝdym wyniku wyszukiwarki opisującym naszą witrynę. Description natomiast pojawi się w niektórych wyszukiwarkach (częściej pojawia się tam część słów odpowiadających kryterium wyszukiwania), jednakŝe warto skorzystać z tej opcji. Oto przykład zastosowania oby dwóch metatagów:
<META NAME="Title" CONTENT="Strona z kursem HTML i CSS"> <META NAME="Description" CONTENT="Chcesz mieć własną witrynę? Zapraszam!"> Keywords teŝ mają swoje zastosowanie w wyszukiwarkach, jednakŝe nie są tak wysoko brane pod uwagę w wynikach wyszukiwania jak poprzednie dwa metatagi. Ten metatag takŝe umieszcza się za pomocą atrybutu NAME. Słowa kluczowe umieszczane są oddzielając je od siebie przecinkiem i spacją (w takiej kolejności) i warto w nich umieścić najwaŝniejsze słowa cechujące całą witrynę. JeŜeli chcemy umieścić jakieś zdanie warto kaŝdy wyraz napisać osobno. Przykład metatagu: <META NAME="Keywords" CONTENT="kurs, css, html, HTML, CSS"> Uwaga: wpisanie kilku słów oddzielonych spacją, bez przecinka zostanie przez wyszukiwarki uznane jako frazę więc mniej wyników będzie odpowiadać kryteriom wyszukiwania. Zalecam pisanie wszystkich słów po przecinku. Informacje o autorze i kontakcie z nim Kolejne dwa metatagi - Author (autor) i Reply-to (odpowiadać do) takŝe umieszcza się za pomocą atrybutu NAME i oby dwa są informacjami o głównym autorze strony. Pierwszy jest odpowiedzialny za przechowanie imienia i nazwiska, ewentualnie nicku, a drugi za przechowanie adresu e-mail autora. Przykład zastosowania obu metatagów: <META NAME="Author" CONTENT="Nickodem"> <META NAME="Reply-to" CONTENT="login @witryna.pl"> Uwaga: w przypadku Reply-to adresu e-mail nigdy nie poprzedzamy wyraŝeniem mailto:. Informacja o języku strony - Content-language Content-language jest językiem witryny stworzonym specjalnie dla wyszukiwarek, aby wyniki wyszukiwania były precyzyjniejsze, gdyŝ sama domena regionalna nie oznacza prawdziwego języka strony i podstron, a juŝ w ogóle w przypadku domen com, biz, gov... Umieszcza się go za pomocą atrybutu HTTP-EQUIV. W wartości metatagu umieszczamy skrócony język np. pl, de, us... np.: <META HTTP-EQUIV="Content-language" CONTENT="pl">
W czym i kiedy strona została zrobiona Generator jest metatagiem stworzonym specjalnie do reklamowania naprawdę dobrego oprogramowania. W jego nazwie umieszczamy najwaŝniejszy program, w jakim tworzyliśmy witrynę źródło strony. Umieszczamy go za pomocą atrybutu NAME np.: <META NAME="Generator" CONTENT="Notatnik"> Creation-date jest metatagiem, w którym umieszczamy w pewnym formacie datę, kiedy po raz pierwszy strona ujrzała światło dzienne. Formatem daty jest GTM i jest ona dokładna dla południka zero stopni. Aby umieścić tam poprawną datę musimy od naszej aktualnej godziny odjąć dwie godziny w czasie letnim, a w zimowym jedną. Data składa się z kolejno z skrótowej nazwy tygodnia: Mon - Poniedziałek Tue - Wtorek Wed - Środa Thu - Czwartek Fri - Piątek Sat - Sobota Sun - Niedziela Dzień tygodnia jest oddzielony od daty przecinkiem i spacją. Data teŝ jest skomplikowana. Najpierw znajduje się dzień miesiąca, oddzielony spacją od skrótowej nazwy miesiąca, oddzielonej spacją od roku w czterech cyfrach. Nazwy miesiąca to: Jan - Styczeń Feb - Luty Mar - Marzec Apr - Kwiecień May - Maj Jun - Czerwiec Jul - Lipiec Aug - Sierpień
Sep - Wrzesień Oct - Październik Nov - Listopad Dec - Grudzień Następnie po odstępie widnieje godzina (pamiętajmy o odpowiednim przesunięciu jej o jedną, lub dwie godziny) w formacie gg:mm:ss, a na końcu po odstępie wyraŝenie GMT. Metatag zapisuje się za pomocą atrybutu HTTP-EQUIV. Oto przykład metatagu, który opisuję stronę stworzoną o piętnastej, siedemnastego czerwca dwutysięcznego roku w niedzielę. <META HTTP-EQUIV="creation-date" CONTENT="Sun, 17 Jun 2000 15:00:00 GMT"> Uwaga: w przypadku dat, w których dzień, a takŝe godzin, których wartości zawierają mniej niŝ dwie cyfry - 0-9 musimy poprzedzić je zerem np.: 05. Uwaga: najwaŝniejsza jest data, nikogo nie obchodzi, o której minucie i sekundzie został stworzony serwis więc moŝemy pisać np.: 03:00:00. Nie ma to nic wspólnego z datą zapisania pliku na serwerze. Uwaga: pamiętajmy, Ŝe jeŝeli stronę stworzyliśmy bardzo wcześnie rano, zgodnie z GMT musimy odjąć nawet dzień i wpisać późniejszą godzinę. Expires, Cache-Control, Pragma Zajmijmy się teraz trzema kolejnymi metatagami. Chcąc stworzyć portal informacyjny, który jest aktualizowany z godziny na godzinę powinniśmy zrobić tak, aby wszystkie dane były na nowo zgrywane do plików tymczasowych (czasami przeglądarka ze względu na szybkość otwierania stron niektóre pliki odczytuje nie ze zdalnego serwera, tylko z zapisanych plików na dysku), jednakŝe najpierw dobrze się zastanówmy. Wszystkie pliki nie tylko pliki HTML, ale i grafika, skrypty będą pobierane na nowo. Stosując te metatagi powinniśmy najpierw uszczuplić witrynę do maksimum. Wszystkie z nich zapisywane są za pomocą atrybutu HTTP-EQUIV. Oto i one (takie uŝycie wymusza ciągłe pobieranie danych z serwera): <META HTTP-EQUIV="Expires" CONTENT="0"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, no-cache, must-
revalidate"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> OswieŜanie strony i przekierowania Kolejnym z listy jest metatag Refresh, który odpowiedzialny jest za odświeŝanie strony, a takŝe za przekierowanie. Po co odświeŝać stronę? JeŜeli np. nadajemy obraz z kamery internetowej i nie mamy skryptu odświeŝającego wybrany obrazek (moŝna wtedy umieścić to w ramce, której dokument się odświeŝa), albo prowadzimy serwis z informacjami, który co chwila zmienia jakieś dane (np. relacjonując wyniki skoków narciarskich). To nie jedyna moŝliwość tego metatagu. Dodając mu jeszcze atrybut URL (wewnątrz CONTENT) zostajemy przekierowani na określoną stronę (często stosowane przy zmianie serwera itp.). W atrybucie CONTENT podajemy czas w sekundach, po którym ma nastąpić odświeŝenie, bądź przekierowanie. Metatag zapisany jest za pomocą atrybutu HTTP-EQUIV. Prezentuję to na dwóch przykładach pierwszy do odświeŝania, drugi do przekierowania: <META HTTP-EQUIV="refresh" CONTENT="3"> <META HTTP-EQUIV="refresh" CONTENT="3; URL=http:// witryna.pl"> Informacje dostępowe dla wyszukiwarek Jak zwykle najwaŝniejsze metatagi oddziela od siebie serią mniej waŝnych. Tak samo jak i kodowanie strony, waŝne jest teŝ zachowanie się robotów indeksujących witryny - Robots. Są to aplikacje wykorzystane w wyszukiwarkach, które przechodzą poruszając się po linkach zaczynając od stron juŝ zaindeksowanych w bazie, aktualizują wszystkie wpisy i to dzięki nim wszystko działa dobrze. Czasami jednak chcemy, aby coś działało inaczej niŝ chcemy. Metatag zapisuje się za pomocą atrybutu NAME. Wartości, na które posłuszne są roboty to: index - indeksowanie strony głównej noindex - nie indeksowanie strony głównej follow - indeksowanie odsyłaczy nofollow - nie indeksowanie odsyłaczy all - indeksowanie strony głównej i odsyłaczy none - nie indeksowanie strony głównej, ani odsyłaczy Proszę nie myśleć, Ŝe np. none jest tylko dla całkowitych pomyleńców. Jest to wykorzystywane i nawet często, gdyŝ tworząc strony rządowe, tajne informacje
prezentowane są tylko dla osób znajdujących jej adresy poufne dane nie mogą zostać zobaczone przez dowolne osoby. JednakŜe uwaŝam, Ŝe dla Ciebie najlepszym będzie all, którego kod to: <META NAME="Robots" CONTENT="all"> Znacznik <LINK> Znacznik <META> znamy juŝ nawet za dobrze. Nadeszła pora poznać znacznik <LINK>. Na pewno zainteresuje nas jego pierwsza moŝliwość. Dotychczas wiedzieliśmy, Ŝe kod CSS naleŝy umieścić pomiędzy znacznikami w sekcji HEAD pomiędzy znacznikami <STYLE> z atrybutem TYPE o wartości text/css. Zmiana na jednej podstronie wymusza zmiany na wszystkich innych. Istnieje proste rozwiązanie. Kod CSS umieszczamy w zewnętrznych dokumencie o rozszerzeniu css, który łączymy z witryną za pomocą kodu: <LINK HREF="style.css" TYPE="text/css" REL="stylesheet"> W zasadzie wszystko powinno być jasne. W atrybucie HREF umieszczamy lokalizację do dokumentu, w TYPE typ dokumentu, a wartość REL moŝna przetłumaczyć jako arkusz styli. Jest to wielkie udogodnienie, nieprawdaŝ? Uwaga: w dokumencie *.css umieszczamy tylko kod CSS, bez znaczników <STYLE>. Uwaga: znacznik <LINK> załączający arkusz styli naleŝy umieścić bezpośrednio po metatagach, które to teŝ powinny być w jednym miejscu, nie przedzielone innymi znacznikami. Naszą witrynę moŝe w znaczący sposób, aczkolwiek nie wiem dlaczego, być moŝe przyciąga uwagę... malutki obrazek, znajdujący się w większości przeglądarek przy adresie, a takŝe w tzw. ulubionych, o ile przeglądarka posiada taką funkcję. Ten obrazek fachowo jest znany pod hasłem fawikonka (ang. favicon) i moŝemy ją umieścić na dwa sposoby najlepiej wykorzystać je na raz. Pierwszym sposobem, łatwiejszym jest umieszczenie obrazka pod nazwą favicon.ico w głównym katalogu witryny, a dokładniej w miejscu, gdzie znajduje się dokument HTML, który ma mieć tą ikonkę w adresie. Niestety sposób ten nie działa na wszystkich przeglądarkach więc przydałoby się teŝ poznać ten drugi sposób. Polega on na umieszczeniu w sekcji HEAD następnego znacznika <LINK>, który będzie miał atrybut REL o wartości shortcut icon i atrybut HREF, w którym będzie ścieŝka do pliku graficznego. Uwaga: najlepiej umieszczać jest ten plik zawsze pod nazwą favicon.ico. Uwaga: obrazek ten musi mieć rozszerzenie ico i musi być rozmiarów 16 na 16 pikseli.
Kolejne zastosowanie jest uŝywane dość rzadko, nawet na kaŝdym znanym portalu internetowym nie znajdziemy tego łatwo. Mam na myśli kolejne zastosowanie znacznika <LINK>, a raczej cały legion tych znaczników, które w niektórych przeglądarkach będą pozwalać na nawigowanie (nie tylko za pomocą klawiatury, ale i skrótów klawiszowych). Np. w przeglądarce Opera, jeŝeli na danej stronie będzie jedno, lub więcej takich zastosowań, w zakładce Nawigacja / Nawigacja po witrynie będziemy mieli dostępną jedną, lub więcej opcji. Z góry przyznaję, Ŝe taka funkcja jest sporadycznie uŝywana przez internautów. Wszystkie pozycje umieszczę w liście (wartości umieszczamy w atrybucie REL), z jednym przykładem, pamiętajmy tylko, Ŝe w atrybucie HREF zawsze umieszczamy adres do danej strony: start - strona główna Index - indeks (to jest coś zupełnie innego niŝ np. index.htm) contents - zawartość (np. dział artykułów) search - wyszukiwarka treści Glossary - słowniczek help - pomoc first - pierwsza strona (np. w prezentacjach www) previous - poprzednia strona next - następna strona last - ostatnia strona (np. w prezentacjach www) up - do góry (np. w stopniowych nawigacjach) copyright - prawa autorskie author - autor <LINK REL="search" HREF="http:// witryna.pl/szukaj.htm"> Uwaga: wszystkie przykłady zostały sprawdzone na przeglądarce Opera. Wiem, Ŝe na Mozilli moŝna uzyskać jeszcze więcej efektów, ale z wiadomych względów nie będę przedłuŝał lektury. Uwaga: w niektórych przypadkach większość liter jest waŝna!