Metatagi i znacznik - LINK\374 - strona główna

Metatagi i znacznik - LINK\374 - strona główna

KURS HTML
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
www.INFORMATYKA.cba.pl
KURS HTML
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:
www.INFORMATYKA.cba.pl
KURS HTML
<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">
www.INFORMATYKA.cba.pl
KURS HTML
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ń
www.INFORMATYKA.cba.pl
KURS HTML
•
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-
www.INFORMATYKA.cba.pl
KURS HTML
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
www.INFORMATYKA.cba.pl
KURS HTML
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.
www.INFORMATYKA.cba.pl
KURS HTML
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!
www.INFORMATYKA.cba.pl