Nagłówek i treść - HTML
W tym rozdziale dowiesz się...
Opis znaczników: BODY - ogólny wygląd strony oraz META - informacje nagłówkowe.
WstępCo to jest nagłówek, a co ciało dokumentu? Jak dodać do dokumentu dodatkowe informacje, mówiące o jego charakterze?
- Język strony <html lang, link hreflang>
Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?
- Tytuł strony <title>
Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?
- Deklaracja strony kodowej <meta charset>
O czym nie należy zapominać pisząc stronę WWW po polsku?
- Opis zawartości strony <meta "description">
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w wyszukiwarkach (Google)?
- Słowa kluczowe <meta "keywords">
W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?
- Autor strony <meta "author", link "author">
Gdzie wpisać autora strony WWW? Jak wskazać link do strony autora aktualnego artykułu?
- Edytor <meta "generator">
Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?
- Roboty <meta "robots, googlebot">
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki?
- Plik robots.txt
Jak zablokować indeksowanie zdjęć lub plików z określonego katalogu?
- Strona kanoniczna <link "canonical">
W jaki sposób pozbyć się zduplikowanych (powielonych) stron z wyników wyszukiwania?
- Skalowanie strony <meta "viewport">
W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?
- Strona mobilna <link media>
W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?
- Automatyczne odświeżanie strony <meta "refresh">
Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?
- Automatyczne wczytanie strony <meta "url">
Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?
- Ikona strony <link "shortcut icon">
W jaki sposób wstawić ikonę obok adresu strony WWW?
- Nawigacja <link "prev, next, help, search">
W jaki sposób ułatwić nawigację na stronie WWW?
- Dokumenty prawne <link "license, privacy-policy, terms-of-service">
W jaki sposób wskazać licencję odnoszącą się do aktualnej strony? Jak oznaczyć prawa autorskie zdjęć umieszczonych w dokumencie? Gdzie podawać dokument opisujący przetwarzanie danych osobowych (RODO, GDPR)? Jak wskazać regulamin serwisu?
- Kanały informacyjne <link "rss, atom">
Jak udostępnić czytelnikom subskrypcję kanału informacyjnego RSS (Really Simple Syndication) lub Atom, zawierającego nowości w serwisie?
PowtórkaHTML
ĆwiczeniaHTML
Wstęp
Co to jest nagłówek, a co ciało dokumentu? Jak dodać do dokumentu dodatkowe informacje, mówiące o jego charakterze?
Znaczniki <body>...</body> oraz <meta> określają pewne informacje na temat strony jako całości. Polecenie BODY powinno wchodzić w skład każdego dokumentu HTML. Stanowi ono właściwą treść, czyli tzw. ciało, w którym zawierają się wszystkie inne znaczniki, dotyczące formatowania, a także zwykły tekst. W jednym dokumencie może się znajdować tylko jeden znacznik <body> - zaraz po nagłówku strony (<head>...</head>).
Natomiast znacznik <meta> stanowi tzw. metainformację, pozwalającą określić pewne ogólne wiadomości dotyczące dokumentu, m.in. sposób kodowania znaków, opis zawartości strony, jej autora czy język, w którym została napisana. Metainformacje nie wpływają bezpośrednio na wygląd dokumentu, lecz cechy które podają, są równie ważne. Chociaż nie są one wymagane, warto je stosować, ponieważ może to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe. Każdy dokument powinien zawierać obowiązkowo przynajmniej deklarację strony kodowej, bez której polskie litery na stronie mogą zostać błędnie wyświetlone! W pojedynczym dokumencie znajduje się zwykle kilka znaczników <meta> - każdy dotyczy innej informacji - wszystkie muszą znajdować się wewnątrz nagłówka strony (<head>...</head>). Ponadto w tym rozdziale opisane zostaną również inne przydatne znaczniki, które można umieścić w nagłówku dokumentu, opisujące sam dokument, a nie wyświetlające jakieś treści.
Oczywiście nie ma obowiązku stosowania dokładnie wszystkich znaczników META, które zostały przedstawione w tym rozdziale. Samodzielnie wybierz te, które Ci odpowiadają lub przekazują według Ciebie ważne informacje. Jednak nigdy nie należy zapominać o wstawianiu deklaracji strony kodowej, natomiast podanie tytułu strony jest wręcz obowiązkowe! Zaleca się również wpisanie opisu zawartości strony.
Język strony <html lang, link hreflang>
Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?
Język dokumentu <html lang>
<html lang="język">...</html>
Polecenie to pozwala podać, w jakim języku jest napisana Twoja strona internetowa, np.: pl - polski, en - angielski, de - niemiecki, fr - francuski, it - włoski, es - hiszpański i inne [zobacz: Skróty nazw jezyków]. Nie należy również zapominać o zadeklarowaniu odpowiedniej dla wybranego języka strony kodowej.
Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden element <html>. Dlatego powyższy atrybut lang="..." należy przypisać do już istniejącego znacznika, a nie dodawać kolejnego.
Inne wersje językowe <link hreflang>
<head> <link rel="alternate" hreflang="język" href="adres"> </head>
Polecenie to może być przydatne, jeśli tłumaczymy artykuły w naszym serwisie na kilka różnych języków. Na przykład podstawową wersją może być język polski, ale udostępniamy również język angielski. Możliwe jest oczywiście wskazanie więcej niż jednej alternatywnej wersji językowej. W takim przypadku wystarczy dodać kilka takich znaczników - każdy dla innego języka.
Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden znacznik <head>. Dlatego powyższy element <link hreflang> należy wstawić wewnątrz istniejącego znacznika nagłówka dokumentu, a nie dodawać kolejnego.
Ze znacznika <link hreflang> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić wersja strony zgodna z językiem aktualnie ustawionym w przeglądarce użytkownika.
W przypadku gdy strona zawiera alternatywne wersje językowe, zaleca się, aby umieścić na niej również odpowiedni znacznik <link hreflang> odnoszący się do bieżącej wersji językowej wskazujący na aktualny dokument.
Przykład <link hreflang>
Poniższy kod powinien się znaleźć w nagłówku dokumentu zarówno na stronie https://www.example.com/pl/index.html jak i https://www.example.com/en/index.html:
<link rel="alternate" hreflang="pl" href="https://www.example.com/pl/index.html"> <link rel="alternate" hreflang="en" href="https://www.example.com/en/index.html">
Wszystkie wersje językowe muszą wskazywać na siebie nawzajem. W przeciwnym razie powiązania między nimi mogą zostać zignorowane.
Oznacza to, że gdyby w powyższym przykładzie znaczniki <link hreflang> znajdowały się tylko na stronie https://www.example.com/pl/index.html, to dokument pod adresem https://www.example.com/en/index.html nie zostanie uznany za inną wersję językową tej strony.
Domyślna wersja językowa
<head> <link rel="alternate" hreflang="x-default" href="adres"> </head>
Zapewne nie uda Ci się przygotować tłumaczenia strony na wszystkie możliwe języki świata ;-) Dlatego dobrze jest wstawić specjalną wartość atrybutu hreflang="x-default" z linkiem do wersji językowej, która powinna zostać użyta w sytuacji, gdy żaden język nie zostanie dopasowany do ustawień przeglądarki użytkownika. Można w ten sposób wskazywać:
- Wybór języka - specjalna strona, która nie zawiera właściwej treści, a jedynie formularz bądź linki z możliwością wyboru określonej wersji językowej serwisu
- Komunikat błędu - strona informująca, że nie ma wersji aktualnego dokumentu odpowiadającej językowi, którym posługuje się użytkownik
- Domyślny język - podstawowa wersja językowa bieżącego dokumentu, która mimo wszystko powinna zostać wyświetlona, nawet jeśli użytkownik nie posługuje się żadnym językiem z listy
Przykład <link "x-default">
<link rel="alternate" hreflang="pl" href="https://www.example.com/pl/"> <link rel="alternate" hreflang="en" href="https://www.example.com/en/"> <link rel="alternate" hreflang="x-default" href="https://www.example.com/">
Pytania i odpowiedzi <html lang>
Jak ustawić język strony w HTML?
Ustawienie języka strony WWW - np. polskiego lub angielskiego - nie jest obowiązkowe, ale ułatwia zadane m.in. automatycznym tłumaczom tekstu. Aby ustawić język strony najlepiej do znacznika obejmującego cały dokument dodać odpowiedni atrybut - np.: <html lang="pl">...</html>. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden taki znacznik. Zatem odpowiedni atrybut dodajemy do już istniejącego elementu, a nie wstawiamy nowego!
O czym informuje atrybut np. lang="pl" dla znacznika HTML?
Wskazuje on na język, w jakim jest napisana treść zawarta na stronie. Na przykład lang="pl" oznacza język polski, lang="en" - angielski, lang="de" - niemiecki, lang="fr" - francuski, lang="it" - włoski, lang="es" - hiszpański.
Tytuł strony <title>
Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?
<head> <title>Tytuł strony</title> </head>
Każdy dokument HTML (podstrona serwisu) posiada własny tytuł. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on również odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu, na karcie ze stroną), a także w wyszukiwarkach sieciowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt długi. Trafny tytuł może również zachęcić internautów do obejrzenia Twojej strony.
Taki sam tytuł na wszystkich podstronach serwisu nie jest dobrym pomysłem, a tytuły w stylu "Strona główna" czy "Bez tytułu" są już bardzo nietrafne. Oczywiście w tytule wszystkich podstron można umieścić ten sam fragment z nazwą serwisu, ale oprócz tego każdy dokument powinien zawierać dalszą część tytułu, opisującą jego zawartość.
Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd!
Ponadto treść tytułu nie może zawierać żadnych znaczników.
Pytania i odpowiedzi <title>
Co to jest tytuł strony?
Tytuł strony to tekst, który zwykle pojawia się na karcie przeglądarki ze stroną oraz w wynikach wyszukiwania np. Google.
Gdzie można umieścić <title>?
Znaczniki <title>...</title> należy umieścić w dowolnym miejscu nagłówka dokumentu - tzn. wewnątrz elementu <head>...</head>. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik tytułu strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden tytuł strony.
Deklaracja strony kodowej <meta charset>
O czym nie należy zapominać pisząc stronę WWW po polsku?
<head> <meta charset="utf-8"> </head>
Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą zapisane w formie cyfrowej znaki na naszej stronie WWW. Więcej na ten temat możesz dowiedzieć się w rozdziale pt.: Strony kodowe.
UWAGA!
Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania UTF, a nie WINDOWS, gdyż wtedy mogą wystąpić problemy z wyświetlaniem polskich znaków (nawet jeśli na Twoim komputerze wszystko jest w porządku)!
Pytania i odpowiedzi <meta charset>
Jak ustawić kodowanie polskich znaków HTML?
Aby na stronie wyświetlały się poprawnie wszystkie polskie znaki diakrytyczne, w nagłówku strony - tzn. w dowolnym miejscu wewnątrz elementu <head>...</head> - trzeba wstawić tzw. deklarację strony kodowej. Najczęściej stosowanym zapisem jest w tym przypadku: <meta charset="utf-8">. Oprócz tego konieczne jest dysponowanie odpowiednim edytorem HTML, który obsługuje polski alfabet.
Jak ustawić utf-8 HTML?
utf-8 to nazwa tzw. strony kodowej, dzięki której wszystkie znaki na stronie - w tym polskie litery - poprawnie się wyświetlają w przeglądarce internetowej. Aby ustawić taką stronę kodową, wystarczy w dowolnym miejscu nagłówka strony - tzn. wewnątrz elementu <head>...</head> - wstawić następujący znacznik: <meta charset="utf-8">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem deklarację strony kodowej dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
Opis zawartości strony <meta "description">
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w wyszukiwarkach (Google)?
<head> <meta name="description" content="Tu podaj opis twojej strony"> </head>
Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono opisać co znajduje się na Twojej stronie. Z informacji tej korzystają wyszukiwarki sieciowe, dlatego staraj się tutaj wpisać tekst, który jak najlepiej opisze zawartość strony i zachęci do jej odwiedzenia. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do obejrzenia Twojej strony.
Znacznik <meta name="description"> nie ma wpływu na pozycję w Google, ale może zostać wyświetlony w wynikach wyszukiwania.
UWAGA!
W treści wszystkich atrybutów content="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: "
Pytania i odpowiedzi <meta "description">
Jak sprawdzić meta description?
Znacznik <meta name="description"> może wyświetlać się w wynikach wyszukiwania np. Google, ale normalnie nie jest widoczny na stronie. Aby go sprawdzić, można podejrzeć kod źródłowy strony. W systemie Windows najczęściej robi się to za pomocą kombinacji klawiszy Ctrl+U.
Jak dodać opis strony HTML?
Aby dodać opis strony, który może pojawić się potem w wynikach wyszukiwania np. Google, trzeba w dowolnym miejscu nagłówka strony - tzn. wewnątrz elementu <head>...</head> - wstawić np. następujący znacznik: <meta name="description" content="Tu podaj opis twojej strony">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem opis strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden opis strony.
Słowa kluczowe <meta "keywords">
W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?
<head> <meta name="keywords" content="wyraz1, wyraz2, wyraz3..."> </head>
Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala Ci ono podać wyrazy kluczowe, z których mogą korzystać wyszukiwarki sieciowe. Dlatego staraj się tutaj wpisać wyrazy, które jak najlepiej opiszą zawartość Twojej strony. Dobrze dobrane słowa kluczowe mogą pomóc wyszukiwarkom odnaleźć Twoją stronę.
Znacznik <meta name="keywords"> nie jest wykorzystywany przez Google i nie ma wpływu na pozycję strony w wynikach tej wyszukiwarki.
Pytania i odpowiedzi <meta "keywords">
Jak wpisać słowa kluczowe?
Słowa kluczowe to lista wyrazów rozdzielonych przecinkami, które wskazują, o jakiej tematyce jest strona. Można je wpisać w nagłówku dokumentu - tzn. w dowolnym miejscu wewnątrz elementu <head>...</head> - używając następującego znacznika: <meta name="keywords" content="wyraz1, wyraz2, wyraz3...">. Jednak ponieważ tak wstawione słowa kluczowe nie wyświetlają się normalnie na stronie, w przeszłości twórcy witryn internetowych nadużywali tego sposobu. Dodawali oni wiele nieadekwatnych ale bardzo popularnych wyrazów kluczowych do swoich serwisów licząc na to, że dzięki temu ich strona znajdzie się wyżej w wynikach wyszukiwania np. Google. Z tego powodu obecnie znacznik ten jest zupełnie ignorowany przez większość wyszukiwarek internetowych. Dlatego aby skutecznie dodać słowa kluczowe do swojej strony, najlepiej je wstawić bezpośrednio w treści, tak żeby były widoczne dla czytelnika.
Jak dobrać słowa kluczowe SEO?
SEO to skrót z języka angielskiego: Search Engine Optimization - czyli optymalizacja dla wyszukiwarek internetowych. Jest to zbiór działań mających na celu poprawienie miejsca strony w wynikach wyszukiwania np. Google. Jednym z nich są odpowiednio dobrane słowa kluczowe. Zastanów się, jakie wyrazy mogą chcieć wpisać w wyszukiwarce użytkownicy, aby trafić na Twoją stronę. Dobrym pomysłem może być również śledzenie trendów - jeśli coś jest aktualnie bardzo popularne, zapewne więcej użytkowników będzie szukać witryn na ten temat. Pamiętaj jednak, że aby słowa kluczowe były skuteczne, powinny się znaleźć również w sposób naturalny w treści Twojej strony.
Autor strony <meta "author", link "author">
Gdzie wpisać autora strony WWW? Jak wskazać link do strony autora aktualnego artykułu?
Autor dokumentu <meta "author">
<head> <meta name="author" content="Tu wpisz swoje imię i nazwisko"> </head>
Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono podać informację o fizycznej osobie będącej autorem strony.
Strona autora <link "author">
<head> <link rel="author" href="lokalizacja"> </head>
- ścieżka dostępu do podstrony w obrębie tego samego serwisu
- adres zewnętrznej strony (rozpoczynający się od http:// lub https://) w innym serwisie - np. jeśli autor publikuje tutaj gościnnie, ale prowadzi również własny serwis
- adres e-mail (rozpoczynający się od mailto:), którym posługuje się autor strony
W odróżnieniu od znacznika <meta author> element ten pozwala podać link do osobnej strony opisującej autora aktualnego artykułu, a nie tylko jego imię, nazwisko bądź pseudonim. Strona autora może zawierać np. krótką biografię wraz z listą wszystkich jego artykułów w serwisie.
Dozwolone jest również podanie adresu poczty elektronicznej, którego używa autor bieżącego dokumentu. W takim przypadku konieczne jest poprzednie adresu odpowiednim przedrostkiem.
Przykład <meta "author", link "author">
<meta name="author" content="Jan Kowalski"> <link rel="author" href="mailto:jan.kowalski@example.com">
Edytor <meta "generator">
Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?
<head> <meta name="generator" content="nazwa edytora"> </head>
Pozwala określić nazwę edytora HTML, który został wykorzystany do utworzenia dokumentu.
Przykład <meta "generator">
<meta name="generator" content="MetBod (https://www.kurshtml.edu.pl/generatory/metbod.html)">
Roboty <meta "robots, googlebot">
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki?
Roboty <meta "robots">
<head> <meta name="robots" content="dyrektywy"> </head>
- "index" - strona, na której wstawiono polecenie, będzie indeksowana przez roboty sieciowe (indeksery) - domyślnie
- "noindex" - strona, na której wstawiono polecenie, nie będzie indeksowana
- "follow" - przechodzenie do stron, do których odnoszą się odsyłacze, znajdujące się w dokumencie - domyślnie
- "nofollow" - robot nie przechodzi do stron stron wskazywanych przez odsyłacze wstawione na stronie, ale może je zaindeksować, jeżeli istnieją inne linki umieszczone na stronach bez tego zakazu
- "index, nofollow" - indeksuje stronę, nie przechodzi do stron wskazywanych przez odsyłacze
- "noindex, follow" - nie indeksuje strony, na której wstawiono polecenie, przechodzi do stron wskazywanych przez odsyłacze
- "all" = "index, follow" - indeksuje wszystko (domyślnie)
- "none" = "noindex, nofollow" - nie indeksuje nic
Polecenie określa sposób zachowania się robotów-indekserów, czyli specjalnych programów zbierających informacje o stronach w Internecie, wykorzystywane później przez wyszukiwarki. Stosuj noindex tylko wtedy, gdy nie chcesz, aby Twoja strona była odnaleziona przez wyszukiwarki (bo np. treści na niej zawarte są ściśle tajne :-)). Niestety całkowitej pewności nie będzie nigdy, ponieważ nie wszystkie roboty interpretują to polecenie.
Pamiętaj, że domyślnym zachowaniem robotów wyszukiwarek sieciowych jest indeksowanie wszystkich dokumentów. To oznacza, że dyrektywa "index, follow" może być pominięta, a zamiast wpisywać "noindex, follow" czy "index, nofollow" zwykle wystarczy wpisać odpowiednio: "noindex" i "nofollow". W przypadku zupełnego braku znacznika <meta name="robots" content="..."> robot zaindeksuje wszystkie strony serwisu, dlatego dodaje się go zwykle tylko, kiedy chcemy zablokować dostęp robotowi do wybranych stron.
Zwróć uwagę, że wartość "nofollow" blokuje jedynie podążanie za odnośnikami, a to oznacza, że może nie zapobiec indeksowaniu stron, do których prowadzą linki umieszczone w dokumencie. Jeżeli na innych stronach - możliwe, że w zupełnie innym serwisie - znajdą się linki do tych stron, zostaną one normalnie zaindeksowane. Aby temu zapobiec, należy wstawić dyrektywę "noindex" na stronach, które nie powinny być zaindeksowane.
Specyfikacja HTML 4.01 wskazuje tylko następujące wartości tego elementu: all, index, nofollow, noindex. Choć inne specyfikacje jasno wskazują na dodatkowe wartości, to jeśli chcesz mieć największą pewność, że dyrektywy zostaną uwzględnione, zamiast "none" możesz użyć "noindex, nofollow".
Jeśli chcesz poznać bardziej zaawansowane sposoby sterowania indeksowaniem elementów strony, zobacz także rozdziały: Plik robots.txt, Strona kanoniczna, Blokada indeksowania fragmentów treści, Blokada indeksowania odsyłaczy.
Niestandardowe dyrektywy robotów
Roboty mogą interpretować dodatkowe, niestandardowe dyrektywy (wszystkie poniższe są rozpoznawane przez robota wyszukiwarki Google):
- "noarchive" - blokada archiwizowania kopii strony w pamięci podręcznej wyszukiwarki
- "nosnippet" - blokada wyświetlania opisu strony w wynikach wyszukiwania
- "max-snippet:liczba" - ograniczenie długości opisu w wynikach wyszukiwania do podanej liczby znaków
- "notranslate" - blokada proponowania tłumaczenia strony na inny język
- "noimageindex" - blokada indeksowania obrazków wstawionych na stronie (sama strona nadal może być indeksowana)
- "nositelinkssearchbox" - uniemożliwia wyświetlenie w wynikach dodatkowego pola wyszukiwania w witrynie i innych linków z niej pochodzących
- "noindex, indexifembedded" - umożliwia indeksowanie stron załadowanych wewnątrz ramek, kiedy indeksowanie dokumentu, w którym są wstawione te ramki, zostało zablokowane ("noindex")
- "unavailable_after: data/czas" - uniemożliwia wyświetlanie strony w wynikach wyszukiwania po określonej dacie/czasie. Datę i czas można podać w formacie ISO 8601.
- "max-image-preview:rozmiar" - steruje rozmiarem podglądu zdjęć ze strony, które mogą się wyświetlać w wynikach wyszukiwania. Jako rozmiar należy podać jedną z następujących wartości:
- none - w wynikach wyszukiwania nigdy nie będzie wyświetlany żaden podgląd zdjęć ze strony
- standard - podgląd zdjęć ze strony w domyślnym rozmiarze
- large - wyszukiwarka będzie mogła wyświetlić duży podgląd zdjęć ze strony (nawet pełnoekranowy)
- "max-video-preview:czas" - jeżeli na stronie są osadzone materiały wideo, w wynikach wyszukiwania może się wyświetlać ich podgląd. Za pomocą tej dyrektywy możemy określić maksymalny czas trwania (wyrażony w sekundach) filmu z tym podglądem. Podanie wartości zero ("max-video-preview:0") oznacza, że w podglądzie będzie mogło się wyświetlić co najwyżej statyczne zdjęcie z filmu (atrybut
poster="...") - zgodnie z ustawieniami dyrektywy "max-image-preview".
Dyrektywa "noarchive" blokuje archiwizowanie dokumentu. Wyszukiwarki sieciowe często zapisują kopię indeksowanych stron w swojej pamięci podręcznej. Użytkownicy korzystający z wyszukiwarki mogą otworzyć taką kopię strony np. kiedy oryginalna witryna jest chwilowo niedostępna. Aby otworzyć stronę z pamięci podręcznej wyszukiwarki Google, należy na liście wyników wyszukiwania kliknąć link "Kopia".
Wyszukiwarki często przy popularnych stronach wyświetlają dodatkową zawartość związaną z witryną. Może to być specjalne pole, które umożliwi użytkownikowi szybkie odnalezienie innych treści z tego serwisu. Mogą to być również linki do najpopularniejszych stron w obrębie tej witryny. Jeśli z jakiegoś powodu nie chcemy, aby nasza strona prezentowała się w ten sposób w wynikach wyszukiwania, możemy użyć dyrektywy "nositelinkssearchbox". Jednak prawdę mówiąc trudno jest znaleźć rozsądny powód, dlaczego ktoś chciałby to zablokować ;-) Taki sposób prezentacji jest przecież zarezerwowany dla szczególnie popularnych stron i może zwiększyć prawdopodobieństwo, że użytkownik przejdzie do naszej witryny.
Jeśli prowadzimy serwis np. z listą wydarzeń albo organizujemy konkursy, prawdopodobnie nie chcielibyśmy otrzymywać niepotrzebnych zapytań od użytkowników, którzy trafili na takie strony już po zakończeniu wydarzenia bądź rozstrzygnięciu konkursu. Dlatego jeśli w nagłówku strony umieścimy np. taki znacznik:
<meta name="robots" content="unavailable_after: 2023-06-04">
to powinna ona zniknąć z wyników wyszukiwania 5 czerwca 2023 roku - czyli zaraz po dacie podanej w dyrektywie.
Zdarza się, że twórcy obawiają się zmniejszenia ruchu na swojej stronie, ponieważ użytkownicy będą mogli otrzymać wszystkie interesujące ich informacje bezpośrednio w wynikach wyszukiwania. Na przykład jeśli prowadzimy stronę zawierającą listę cytatów sławnych ludzi, mogłoby się zdarzyć, że treść wyjątkowo krótkiego cytatu znalazłaby się w całości w wynikach wyszukiwania. Możemy się przed tym zabezpieczyć określając maksymalną dozwoloną długość opisu strony w wynikach wyszukiwania - za pomocą dyrektywy "max-snippet:liczba". Może to mieć również znaczenie zwłaszcza dla stron z bardzo krótkimi materiałami wideo. Jeśli ktoś będzie w stanie obejrzeć cały taki filmik bez wychodzenia z wyników wyszukiwania, po co miałby jeszcze przechodzić do strony docelowej? Aby uniknąć takich sytuacji, użyj dyrektywy "max-video-preview:0". Z drugiej strony być może właśnie możliwość otworzenia podglądu zdjęcia w trybie pełnoekranowym zachęci użytkownika do poznania innych naszych prac? Jeśli tak uważasz, użyj dyrektywy: "max-image-preview:large".
Aby połączyć dyrektywy standardowe z niestandardowymi, nie należy wpisywać kilku osobnych znaczników <meta name="robots">, ale podać pełną listę po przecinku, np.:
<meta name="robots" content="nofollow, noarchive">
Googlebot <meta "googlebot">
Wyszukiwarka Google wprowadziła specjalny znacznik, który pozwala wydać dyrektywy tylko dla robota Googlebot. Na przykład aby zablokować robotowi Google dostęp do strony, ale jednocześnie pozwolić na to robotom innych wyszukiwarek, można wpisać:
<meta name="googlebot" content="noindex, nofollow">
Pytania i odpowiedzi <meta "robots">
Co to są roboty HTML?
Witryn w całym Internecie jest tak dużo, że niemożliwe byłoby przeszukiwanie ich wszystkich w czasie rzeczywistym - tak jak plików na dysku lokalnym komputera. Dlatego każda wyszukiwarka internetowa (np. Google) posiada własnego robota (albo w skrócie po prostu bota). Jest to specjalny program, który nieustannie odwiedza wszystkie strony w Internecie i zapisuje ich przetworzoną treść w swojej bazie danych. Następnie kiedy użytkownicy wpisują określone słowa kluczowe, wyszukiwarka odczytuje potrzebne informacje z tej bazy danych, aby błyskawicznie wyświetlić jak najlepiej pasujące wyniki. Należy się liczyć z tym, że baza danych wyszukiwarek może nie być cały czas aktualna. Dlatego jeśli wprowadzisz na swojej stronie jakieś zmiany albo dodasz nową podstronę, efekt będzie widoczny w wynikach dopiero, kiedy robot wyszukiwarki ponownie odwiedzi i przetworzy Twoją stronę.
Co to jest meta robots?
To znacznik, który można wstawić w nagłówku dokumentu HTML - czyli wewnątrz elementu <head>...</head>. Pozwala on sterować widocznością strony w wynikach wyszukiwania np. Google. Na przykład <meta name="robots" content="noindex"> spowoduje, że strona nie powinna być w ogóle widoczna w wynikach wyszukiwania.
Plik robots.txt
Jak zablokować indeksowanie zdjęć lub plików z określonego katalogu?
robots.txt
Znacznik <meta name="robots"> jest przydatny w celu określania dostępu przez roboty do pojedynczych dokumentów HTML. Okazuje się jednak mało praktyczny, jeśli chcielibyśmy zablokować dostęp robotom-indekserom np. do wszystkich dokumentów z określonego katalogu serwisu albo wręcz hurtowo do wszystkich plików witryny, tak aby nie pojawiały się w wynikach wyszukiwania np. Google. Znacznik ten okazuje się wręcz zupełnie nieprzydatny, jeśli zależy nam na zablokowaniu indeksowania zdjęć z naszego serwisu (większość wyszukiwarek posiada osobne formularze do wyszukiwania plików graficznych).
Istnieje jednak możliwość określenia globalnego dostępu do wszystkich plików serwisu - nosi on nazwę: Standard Wykluczania Robotów (ang. A Standard for Robot Exclusion - Robots Exclusion Protocol). W głównym katalogu konta WWW - czyli tam, gdzie znajduje się dokument strony głównej serwisu (index.html) - należy umieścić specjalny plik pod nazwą robots.txt. W pliku tym umieszcza się tzw. rekordy - każdy zawiera grupę linijek w postaci:
Pole: wartość
Wielkość liter w nazwach pól nie ma znaczenia, natomiast zwykle ma znaczenie w wartościach pola. Oprócz typowych linijek możliwe jest również umieszczanie komentarzy, czyli tekstu, który nie zostanie wzięty pod uwagę przez roboty. Komentarz rozpoczyna się znakiem "#", a kończy na końcu linijki.
User-Agent
W jednym pliku robots.txt może się znajdować dowolna liczba rekordów rozdzielonych pustymi linijkami - każdy musi się rozpoczynać linią User-Agent, wskazującą do których robotów odnoszą się dalsze linijki danego rekordu:
# Ten rekord odnosi się tylko do robota "Googlebot": User-agent: Googlebot
Pojedynczy rekord może zawierać więcej niż jedną linię User-Agent:
# Ten rekord odnosi się tylko do robotów "Googlebot" i "MSNBot": User-agent: Googlebot User-agent: MSNBot
Specyfikacja HTML 4.01 wyraźnie zabrania umieszczania kilku linii User-Agent jednej pod drugą, jednak standard (nieopracowany przez W3C) mówi na ten temat zupełnie co innego. Googlebot interpretuje wielokrotne linijki tego typu.
Wielkość liter w nazwach robotów nie ma znaczenia. Lista istniejących robotów wyszukiwarek sieciowych znajduje się na stronie: The Web Robots Database.
Zamiast nazwy robota można wpisać również znak gwiazdki ("*"), co wskazuje każdego istniejącego robota. Kiedy robot danej wyszukiwarki odwiedza witrynę, najpierw sprawdza czy istnieje plik robots.txt. Jeśli tak, szuka w nim rekordu (grupy linii), który pasuje do jego nazwy. Jeśli taki znajdzie, odczytuje linie z wybranego rekordu i pomija wszystkie inne. Jeżeli nie znajdzie, szuka rekordu z linią User-Agent: *. Jeżeli takiego nie znajdzie, indeksuje bez ograniczeń wszystkie dokumenty serwisu. Zwracam uwagę, że jeśli robot znajdzie przeznaczony specjalnie dla niego rekord, to w ogóle nie zajmuje się rekordem User-Agent: *.
Disallow
W rekordach poniżej User-Agent musi się znajdować jedna lub więcej linii Disallow, wskazujących ścieżki do plików, do których robot nie ma dostępu. Każda ścieżka musi rozpoczynać się od znaku ukośnika ("/") i powstaje poprzez wycięcie pierwszego członu adresu URL. Na przykład aby zablokować dostęp do pliku http://www.example.org/index.html, należy wpisać:
User-Agent: * Disallow: /index.html
Pusta wartość Disallow oznacza brak ograniczeń w indeksowaniu dokumentów:
User-Agent: * # Wszystkie dokumenty serwisu będą normalnie indeksowane: Disallow:
Aby zablokować dostęp do wszystkich plików z jakiegoś katalogu i ewentualnie wszystkich jego podkatalogów, wystarczy wpisać samą nazwę tego katalogu, która koniecznie musi kończyć się znakiem ukośnika ("/"):
User-Agent: * # Żaden plik z katalogu "prywatne" nie zostanie zaindeksowany: Disallow: /prywatne/
Aby zablokować dostęp do wszystkich plików całego serwisu, jako ścieżkę należy podać sam ukośnik:
# Ten serwis w ogóle nie będzie indeksowany przez roboty: User-Agent: * Disallow: /
Allow
Standard Wykluczania Robotów został rozszerzony o dodatkową dyrektywę - Allow, której działanie jest przeciwne do Disallow, czyli wskazuje ścieżki, które robot może indeksować:
# Tylko strona główna tego serwisu zostanie zaindeksowana: User-Agent: * Disallow: / Allow: /index.html
Dyrektywa Allow może nie być interpretowana przez niektóre roboty wyszukiwarek (jest rozpoznawana przez robota Google)
Wzorce dopasowania
Co zrobić, jeśli chcemy zablokować indeksowanie wszystkich zdjęć serwisu, ale jednocześnie zezwolić na indeksowanie samych dokumentów HTML? Najlepiej byłoby umieścić wszystkie zdjęcia w osobnym katalogu:
User-Agent: * Disallow: /zdjecia/
Czasem jednak jest to niemożliwe. W takim przypadku pomocne są tzn. wzorce dopasowania, czyli znaki specjalne, które pozwalają dopasować ścieżki na podstawie ogólnych warunków. Googlebot rozpoznaje następujące znaki specjalne w ścieżkach dyrektyw Disallow oraz Allow:
- * - Zastępuję dowolny ciąg znaków (również pusty)
- $ - Jeżeli zostanie postawiony na końcu ścieżki, oznacza dopasowanie do końca nazwy, dzięki temu nadaje się szczególnie do określania ścieżek do plików określonego typu, czyli o wybranym rozszerzeniu nazwy
User-Agent: Googlebot # Nie indeksuj plików graficznych: Disallow: /*.jpg$ Disallow: /*.jpeg$ Disallow: /*.gif$ Disallow: /*.png$ # Nie indeksuj dokumentów z identyfikatorami sesji: Allow: /*?$ Disallow: /*?
Różnica pomiędzy /*.gif$ a /*.gif jest taka, że w drugim przypadku zablokowane zostaną również pliki: /nazwa.gift, /nazwa.gif/nazwa.html, co raczej nie było naszym zamiarem.
Wzorce dopasowania są rozszerzeniem standardu i mogą być nieobsługiwane przez wiele robotów sieciowych (są interpretowane przez robota Google), dlatego zaleca się nie umieszczać ich w rekordzie User-Agent: *.
Pytania i odpowiedzi robots.txt
Czym jest plik robots.txt?
Plik robots.txt to specjalny dokument tekstowy, dzięki któremu możemy sterować widocznością dokumentów, zdjęć i innych plików z naszej strony internetowej w wynikach wyszukiwania np. Google.
Gdzie jest plik robots.txt?
Plik robots.txt nie jest obowiązkowy. Jeśli twórca witryny zdecydował się go dodać, musi się on znajdować w głównym folderze ze stroną WWW i mieć dokładnie taką nazwę (ważna jest również wielkość liter!). Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku powinien być następujący: https://www.example.com/robots.txt.
Strona kanoniczna <link "canonical">
W jaki sposób pozbyć się zduplikowanych (powielonych) stron z wyników wyszukiwania?
W niemal każdym serwisie internetowym zdarza się, że ta sama treść jest prezentowana na kilka sposobów, tzn. pod różnymi adresami URL:
- specjalna wersja serwisu przystosowana dla urządzeń mobilnych (smartfony, tablety itp.)
- osobne wersje artykułów przeznaczone do wydruku
- dokumenty zawierające tę samą listę pozycji (produktów, wyników wyszukiwania, artykułów itp.), a jedynie posortowanych w inny sposób - np. artykuly.php?sortuj=data i artykuly.php?sortuj=alfabet
- obszary witryny wymagające zalogowania użytkownika, kiedy w adresie jest przekazywany identyfikator sesji - np. index.php?PHPSESSID=0123456789abcdef0123456789abcdef lub index.php?sid=0123456789abcdef0123456789abcdef
- linki prowadzące do tej samej strony mają różną postać:
- jeśli domyślnym numerem strony artykułu będzie 1, to adres artykul.php?strona=1 może być równoważny artykul.php
- podobnie kolejność parametrów adresu URL, podawanych po pytajniku i rozdzielonych znakami "&", zwykle nie ma znaczenia, tzn. adres artykul.php?id=1&strona=1 zwykle jest równoważny artykul.php?strona=1&id=1
- nazwę pliku "index.htm", "index.html" czy "index.php" zwykle można pominąć podając adres strony, dlatego http://www.example.com/index.html jest równoważny http://www.example.com/
Teoretycznie nie powinno to przeszkadzać czytelnikom naszej witryny, jednak może stać się problemem w przypadku wyszukiwarek internetowych - takich jak np. Google. Roboty wyszukiwarek starają się eliminować duplikujące się treści ze swojej bazy zaindeksowanych stron. Oznacza to, że jeśli ta sama lub bardzo podobna treść występuje w Twoim serwisie pod kilkoma różnymi adresami URL, w wynikach wyszukiwania pojawi się tylko jedna jej wersja. Która? To zależy, którą robot indeksujący uzna za podstawową. Niestety to tyko automat dlatego może się mylić, uznając za wersję podstawową adres URL z wieloma niepotrzebnymi parametrami po pytajniku lub wersję artykułu przeznaczoną do wydruku. Może to potencjalnie obniżyć pozycję Twojej witryny w wynikach wyszukiwania oraz wywołać pewną dezorientację czytelnika, który trafił z wyszukiwarki do Twojego serwisu na niewłaściwą wersję dokumentu.
Istnieje jednak możliwość jasnego wskazania robotowi wyszukiwarki, która wersja strony jest tą podstawową - stroną kanoniczną. Aby to zrobić, na każdej wersji takiej strony, która różni się adresem URL od wersji podstawowej, należy podać bezpośredni adres prowadzący do wersji kanonicznej:
<head> <link rel="canonical" href="adres strony podstawowej"> </head>
W tym przypadku nie powinno się używać względnej ścieżki dostępu, ponieważ taki zapis może nie być prawidłowo zinterpretowany przez roboty indeksujące wyszukiwarek sieciowych.
Warto zwrócić uwagę, że nie należy w ten sposób oznaczać dokumentów, które nie stanowią jedynie innej wersji strony kanonicznej (podstawowej), ponieważ wywoła to tylko ich niepotrzebną eliminację z wyników wyszukiwania. Trzeba również mieć świadomość, że znacznik ten stanowi jedynie sugestię dla robota wyszukiwarki i może nie być wzięty pod uwagę, jeśli robot z innego powodu uzna, że w danej sytuacji takie oznaczenie strony kanonicznej nie będzie pożądane dla użytkownika korzystającego z wyszukiwarki.
Pytania i odpowiedzi <link "canonical">
Co to jest strona kanoniczna?
Jeżeli w serwisie internetowym ta sama lub bardzo podobna podstrona znajduje się pod kilkoma różnymi adresami, strona kanoniczna wskazuje na jej podstawową wersję. Najczęściej będzie to po prostu dokument z najkrótszym adresem. W wynikach wyszukiwania np. Google zwykle pojawi się właśnie tylko strona kanoniczna, a pozostałe jej duplikaty zostaną pominięte.
Jak oznaczyć stronę kanoniczną?
Oznaczenie strony kanonicznej nie jest obowiązkowe. Warto to jednak zrobić, jeśli w serwisie mamy zduplikowane dokumenty. W przeciwnym razie wyszukiwarka będzie się sama próbowała domyślić, która z wersji jest podstawowa - co nie zawsze może być zgodne z naszymi założeniami. Aby oznaczyć stronę kanoniczną, we wszystkich dokumentach z powtarzającą się treścią (z wyjątkiem strony, którą chcemy wskazać jako wersję podstawową), trzeba wstawić w nagłówku dokumentu - czyli w dowolnym miejscu wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="canonical" href="adres strony podstawowej">. Na przykład jeśli w naszej witrynie zarówno pod adresem https://www.example.com/ jak i https://www.example.com/index.html znajduje się identyczna treść, w tym drugim dokumencie możemy dodać znacznik: <link rel="canonical" href="https://www.example.com/">.
Skalowanie strony <meta "viewport">
W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?
<head> <meta name="viewport" content="parametr1=wartość1, parametr2=wartość2..."> </head>
- width
- Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania.
- height
- Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-height, które oznacza pełną wysokość obszaru wyświetlania.
- initial-scale
- Wartość od 0.0 do 10.0 (należy posługiwać się kropką dziesiętną, a nie przecinkiem!) określająca początkowy stopień przeskalowania strony. Im większa wartość tym bardziej będzie powiększona zawartość strony.
- minimum-scale
- Wartość od 0.0 do 10.0 określająca minimalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Jest to przydatne w przypadku, gdy nasza strona nie wygląda zbyt dobrze, kiedy jest za bardzo pomniejszona. Pamiętajmy jednak, że stanowi to ingerencję w preferencje użytkowników i dlatego przeglądarki mogą blokować to polecenie.
- maximum-scale
- Wartość od 0.0 do 10.0 określająca maksymalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Przeglądarki mogą blokować to polecenie.
- user-scalable
- Może przyjąć następujące wartości:
- yes - domyślnie
- no - możliwość skalowania strony zostanie zablokowana (przeglądarki mogą ignorować to polecenie z uwagi na preferencje użytkownika)
Polecenie to jest szczególnie przydatne na urządzeniach mobilnych takich jak smartfony czy tablety. Ponieważ ekran przeglądarek mobilnych zwykle jest dość małych rozmiarów, strona może być odpowiednio powiększana, tak aby jej zawartość była dobrze czytelna. W pewnym zakresie możemy sterować tym zachowaniem za pomocą powyższego polecenia. W szczególności możemy zaprojektować stronę z użyciem techniki Responsive Web Design (w skrócie: RWD), tak aby automatycznie dopasowywała się do dostępnej szerokości ekranu przeglądarki [zobacz: Zapytania mediów]. W takim przypadku w nagłówku strony powinniśmy wstawić następujące polecenie:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dzięki temu dokument HTML zostanie wyświetlony w taki sposób, aby nie wymagał od użytkownika dalszego powiększania. W przeciwnym razie przeglądarka mobilna starałaby się wyświetlić stronę w rozdzielczości typowej dla przeglądarek używanych na standardowych komputerach, co zwykle oznaczałoby zdecydowanie zbyt mały rozmiar tekstu, aby nadawał się do wygodnego czytania.
Strona mobilna <link media>
W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?
<head> <link rel="alternate" media="media" href="adres"> </head>
W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu nawigacyjne lepiej przystosowane do ekranów dotykowych. Dzięki powyższemu znacznikowi możemy w prosty sposób wskazać taką wersję, na wypadek gdyby użytkownik przypadkowo trafił na stronę przeznaczoną dla tradycyjnych komputerów z dużym ekranem.
Ze znacznika <link media> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić wersja strony odpowiednia dla urządzenia, z którego w danej chwili korzysta użytkownik.
Przykład <link media>
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
Pytania i odpowiedzi <link media>
Co to jest mobilna wersja strony?
Mobilna wersja strony to dostosowana do urządzeń mobilnych wersja witryny internetowej, zoptymalizowana pod kątem mniejszych ekranów i interakcji dotykowych. Zazwyczaj jest bardziej ergonomiczna dla użytkowników korzystających z smartfonów czy tabletów.
Jak dostosować stronę do urządzeń mobilnych HTML?
Aby dostosować stronę do urządzeń mobilnych w HTML, można użyć meta tagu viewport. Przykład: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ten tag umożliwia przeglądarce odpowiednie skalowanie i dostosowanie widoku do szerokości ekranu urządzenia.
Jak zrobić stronę mobilną?
Aby zrobić stronę mobilną, można użyć znacznika <link> z atrybutem media="..." do wskazania adresu strony dedykowanej urządzeniom mobilnym. Przykład: <link rel="alternate" media="only screen and (max-width: 600px)" href="https://m.example.com/">. Ten link informuje przeglądarkę o istnieniu alternatywnej wersji strony przeznaczonej dla urządzeń o mniejszych ekranach.
Jak sprawdzić wygląd strony na urządzeniach mobilnych?
Aby sprawdzić wygląd strony na urządzeniach mobilnych, można skorzystać z narzędzi deweloperskich przeglądarki, takich jak tryb responsywności. Wchodząc w inspekcję elementu (Ctrl+Shift+I), można przełączyć się w tryb responsywności (ikona ze smartfonem) i dostosować widok do różnych rozmiarów ekranów.
Jak przełączyć przeglądarkę w tryb mobilny?
Aby przełączyć przeglądarkę w tryb mobilny, można użyć narzędzi deweloperskich lub dodatków. W przypadku narzędzi deweloperskich (Ctrl+Shift+I), wchodząc w tryb responsywności (ikona ze smartfonem), można wybrać konkretny model urządzenia. Dodatkowo, istnieją rozszerzenia, takie jak "User-Agent Switcher," które umożliwiają emulację różnych urządzeń.
Automatyczne odświeżanie strony <meta "refresh">
Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?
<head> <meta http-equiv="refresh" content="s"> </head>
Polecenie to pozwala na automatyczne odświeżanie strony, co pewien określony przedział czasu (podany w sekundach). Powinno być wstawione w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.
Nie należy przesadzać z odświeżaniem strony, ponieważ irytuje to użytkowników, a nawet może uniemożliwić czytanie!
Przykład <meta "refresh">
Pytania i odpowiedzi <meta "refresh">
Co to jest odświeżanie strony?
Odświeżenie strony to ponowne jej wczytanie, tak aby zobaczyć wszystkie ewentualne zmiany, które na niej zaszły. W większości przeglądarek internetowych odświeżenie strony odbywa się poprzez wciśnięcie klawisza F5. Możliwe jest również odświeżenie strony z pominięciem pamięci podręcznej - poprzez kombinację klawiszy Ctrl+F5. Może to być przydatne zwłaszcza, kiedy wprowadziliśmy zmiany w elementach osadzonych na stronie (np. obrazkach), ale ciągle widzimy ich poprzednią wersję.
Jak ustawić automatyczne odświeżanie strony?
Aby wymusić automatyczne odświeżenie strony np. po upływie 60 sekund, wystarczy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="60">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik odświeżenia strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Pamiętaj również, że zbyt krótki czas odświeżania strony może spowodować nadmierne użycie łącza internetowego użytkowników oraz dodatkowe obciążenie serwera z Twoją stroną, przez co strona może zacząć działać wolniej.
Automatyczne wczytanie strony <meta "url">
Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?
<head> <meta http-equiv="refresh" content="s; url=Tu podaj adres strony lub ścieżkę dostępu"> </head>
- s
- Czas, po którym zostanie załadowana podana strona (w sekundach)
- Tu podaj adres strony lub ścieżkę dostępu
- Adres lub ścieżkę dostępu do strony, która ma być wczytana
Polecenie to pozwala na automatyczne wczytanie podanej strony. Załadowanie nastąpi po określonym przez nas czasie (podanym w sekundach). Powinno być wstawione w treści nagłówkowej dokumentu.
Polecenie to jest często stosowane, w razie przeniesienia serwisu pod inny adres, w celu automatycznego przekierowania tam użytkownika.
Przykład <meta "url">
Pytania i odpowiedzi <meta "url">
Jak działa redirect?
Redirect oznacza automatyczne przekierowanie użytkownika do innego adresu. Może to być przydatne, jeśli dokument albo nawet cały serwis został przeniesiony pod nowy adres. W takiej sytuacji po wejściu na stary adres przeglądarka automatycznie wczyta nową stronę, bez potrzeby klikania użytkownika w dodatkowe odsyłacze.
Jak ustawić przekierowanie na inną stronę?
Aby po wejściu na stronę natychmiast automatycznie przekierować użytkownika na nowy adres (np. https://www.example.com/), wystarczy wstawić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="0; url=https://www.example.com/">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik przekierowania dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
Ikona strony <link "shortcut icon">
W jaki sposób wstawić ikonę obok adresu strony WWW?
(interpretuje: Internet Explorer, Firefox, Opera 7, Chrome)
<head> <link rel="shortcut icon" href="adres ikony"> </head>
Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o rozmiarach 32x32. Format *.ico pozwala zapisać dwie wersje rozmiaru w jednym pliku. Przeglądarki pozwalają również używać innych formatów graficznych, takich jak np. PNG.
Możemy również podać kilka ikon, a przeglądarka samodzielnie wybierze sobie taką, która jej najlepiej pasuje. W przypadku gdy więcej niż jedna z podanych ikon będzie odpowiednia, zostanie wybrana ostatnia z wymienionych. Na przykład:
<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon"> <link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> <link rel="icon" href="favicon48.png" sizes="48x48" type="image/png"> <link rel="icon" href="favicon72.png" sizes="72x72" type="image/png"> <link rel="icon" href="favicon96.png" sizes="96x96" type="image/png"> <link rel="icon" href="favicon144.png" sizes="144x144" type="image/png"> <link rel="icon" href="favicon192.png" sizes="192x192" type="image/png"> <link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
gdzie dodatkowe atrybuty oznaczają:
sizes- Może być zapisany w jednym z dwóch formatów:
- "any" - oznacza, że ikona może być dowolnie skalowana przez przeglądarkę. Najlepiej do tego nadają się grafiki wektorowe, które można bez ograniczeń powiększać bez żadnej utraty jakości.
- Rozdzielona spacjami lista rozmiarów ikon zapisanych w podanym pliku. Każdy rozmiar składa się z dwóch liczb rozdzielonych znakiem "x" (bez spacji!), które określają kolejno: szerokość i wysokość.
type- Typ MIME
Ikona strony może się wyświetlić automatycznie, nawet bez potrzeby wstawiania powyższego znacznika, jeśli będzie nosiła nazwę favicon.ico i zostanie zapisana w głównym katalogu na serwerze WWW, czyli np. http://www.example.com/favicon.ico (Internet Explorer, Firefox, Opera 12-).
Niestety niektóre przeglądarki pobierają ikonę strony tylko raz, a później rzadko jest ona odświeżana (albo nawet wcale). Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować.
Pytania i odpowiedzi <link "icon">
Jaki rozmiar ikony strony?
Ikona strony powinna mieć rozmiary 16x16 pikseli. Ponadto format graficzny *.ico umożliwia zapisanie w jednym pliku kilku ikon o różnych wymiarach. W ten sposób można dodatkowo zapisać ikonę o wymiarach 32x32 piksele, co może być przydatne, jeśli użytkownicy będą chcieli umieścić skrót do strony na pulpicie swojego systemu operacyjnego.
Jak zrobić ikonę strony?
Ikona strony może się wyświetlać w przeglądarce internetowej na karcie ze stroną oraz w wynikach wyszukiwania np. Google. Do przygotowania ikony możemy użyć dowolnego programu graficznego, który obsługuje format *.ico (np. darmowy GIMP). Obrazek ikony powinien mieć wymiary 16x16 pikseli. Należy go zapisać w pliku o nazwie favicon.ico (ważna jest również wielkość liter!) w głównym folderze ze stroną WWW. Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku ikony powinien być następujący: https://www.example.com/favicon.ico.
Jak ustawić ikonę w HTML?
Aby ustawić ikonę strony, która została zapisana w pliku favicon.ico, należy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="shortcut icon" href="/favicon.ico">. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem ikonę dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
Nawigacja <link "prev, next, help, search">
W jaki sposób ułatwić nawigację na stronie WWW?
Wstęp
(interpretuje: Opera 12-)
Niektóre przeglądarki pozwalają określić bezpośrednio z poziomu strony WWW dodatkowe punkty nawigacyjne w serwisie. Mogą one być wyświetlane na specjalnym pasku narzędzi (najczęściej Nawigacja) w postaci linków do wskazanych stron. Część z tego typu punktów nawigacyjnych może być również wykorzystywana przez roboty wyszukiwarek internetowych (np. Google).
- adres
- Lokalizacja punktu nawigacyjnego
- Tytuł
- Tytuł który pojawi się na pasku nawigacji
Sekwencja <link "prev, next">
- Poprzednia strona:
<head> <link rel="prev" href="adres"> </head>
- Następna strona:
<head> <link rel="next" href="adres"> </head>
Jeżeli strony w naszym serwisie poukładane są w określonej sekwencji i ważne jest, aby czytelnik zaznajomił się z nimi właśnie w takiej kolejności, przydatne może okazać się wskazanie poprzedniego i następnego dokumentu.
Pomoc <link "help">
<head> <link rel="help" href="adres"> </head>
Czasami nie chcemy zaciemniać treści artykułu przesadną ilością wyjaśnień. Może się jednak zdarzyć, że czytelnik nie zrozumie wszystkiego od razu. W takiej sytuacji można wskazać mu stronę, gdzie uzyska bardziej szczegółowe wytłumaczenie w postaci pomocy kontekstowej odnoszącej się do bieżącego artykułu.
Szukaj <link "search">
<head> <link rel="search" href="adres"> </head>
Jeżeli posiadamy w naszym serwisie wyszukiwarkę, możemy wskazać adres, pod jakim się ona znajduje.
Dokumenty prawne <link "license, privacy-policy, terms-of-service">
W jaki sposób wskazać licencję odnoszącą się do aktualnej strony? Jak oznaczyć prawa autorskie zdjęć umieszczonych w dokumencie? Gdzie podawać dokument opisujący przetwarzanie danych osobowych (RODO, GDPR)? Jak wskazać regulamin serwisu?
Licencja (prawa autorskie) <link "license">
<head> <link rel="license" href="ścieżka dostępu"> </head>
Jeżeli aktualny dokument jest chroniony prawami autorskimi, warto wskazać ścieżkę dostępu do dokumentu z licencją opisującą warunki korzystania z materiałów znajdujących się na stronie.
Licencja na zdjęcia
Może się zdarzyć, że niektóre elementy strony, jak np. zdjęcia wstawione w dokumencie, mogą być chronione odrębnymi licencjami. W takiej sytuacji przy każdym takim elemencie powinniśmy osobno wskazać właściciela praw autorskich i licencję. Na przykład:
<figure> <img src="zdjecie.jpg" alt="Tatry"> <figcaption>Tatry<br><small>© Jan Kowalski (<a rel="license" href="https://creativecommons.org/licenses/by/4.0/deed.pl">CC BY</a>)</small></figraption> <figure>
Polityka prywatności (przetwarzanie danych osobowych) <link "privacy-policy">
<head> <link rel="privacy-policy" href="ścieżka dostępu"> </head>
W 2018 roku weszły w życie regulacje RODO (Rozporządzenie o Ochronie Danych Osobowych, ang. GDPR - General Data Protection Regulation) określające zasady przetwarzania danych osobowych. Chociaż przepisy te dotyczą Unii Europejskiej, to podobne regulacje wprowadziło u siebie wiele innych krajów. Pociąga to za sobą m.in. wymóg określenia w specjalnym dokumencie (tzw. polityka prywatności) jakie dane są przetwarzane, w jakim celu i jakie są podstawy prawne tego przetwarzania. Oprócz podania linku do tego dokumentu np. w stopce serwisu, można użyć powyższego znacznika w sekcji nagłówkowej dokumentu, w którym wskażemy ścieżkę dostępu do polityki prywatności.
Warunki świadczenia usług (regulamin) <link "terms-of-service">
<head> <link rel="terms-of-service" href="ścieżka dostępu"> </head>
Wiele witryn internetowych udostępnia specjalny dokument zawierający regulamin serwisu. Jest on formą umowy pomiędzy właścicielem witryny a użytkownikami opisującą wzajemne prawa i obowiązki. Oprócz podania linku do tego dokumentu np. w stopce serwisu, można użyć powyższego znacznika w sekcji nagłówkowej dokumentu, w którym wskażemy ścieżkę dostępu do regulaminu.
Pytania i odpowiedzi
Co to znaczy licencja CC?
Licencja Creative Commons (CC) to rodzaj licencji, który umożliwia autorom udostępnianie swoich dzieł z pewnymi ograniczeniami. Pozwala to na elastyczne korzystanie z utworów przy jednoczesnym respektowaniu praw autorskich.
Jakie są rodzaje licencji CC?
Istnieje kilka rodzajów licencji Creative Commons, takich jak CC BY (atrybucja), CC BY-SA (atrybucja, na tych samych warunkach), CC BY-NC (atrybucja, użytki niekomercyjne) itp. Każda z tych licencji określa różne warunki korzystania z utworów.
Jak prawidłowo korzystać z licencji Creative Commons?
Aby prawidłowo korzystać z licencji Creative Commons, należy przestrzegać warunków określonych w danej licencji. Na ogół wymaga to podania informacji o autorze (BY), utrzymania tych samych warunków (SA), a w przypadku niektórych licencji, unikania zastosowań komercyjnych (NC).
Co to jest licencja CC BY 3.0?
Licencja CC BY 3.0 to jedna z wersji licencji Creative Commons. Oznacza, że użytkownicy mogą swobodnie korzystać, rozpowszechniać, modyfikować i budować na danym dziele, nawet w celach komercyjnych, pod warunkiem podania odpowiedniego odniesienia do autora.
Na co pozwala licencja Creative Commons?
Licencja Creative Commons pozwala na elastyczne dzielenie się utworami, umożliwiając innym ich używanie, modyfikowanie i udostępnianie przy określonych warunkach. To narzędzie wspiera wolne dzielenie się wiedzą i kulturą, jednocześnie zachowując respektowanie praw autorskich.
Co znaczy słowo "private"?
W języku angielskim słowo "private" oznacza "prywatny".
Co to znaczy "Privacy Policy"?
"Privacy Policy" to polityka prywatności, czyli dokument określający, jakie informacje są zbierane przez daną firmę, serwis internetowy lub aplikację, w jaki sposób są przechowywane, przetwarzane i zabezpieczane. Jest to istotny element dla użytkowników, którzy dowiadują się, jakie dane są gromadzone i w jaki sposób są używane.
Jakie to są dane osobowe?
Dane osobowe to informacje dotyczące zidentyfikowanej lub możliwej do zidentyfikowania osoby fizycznej. Obejmuje to m.in. imię, nazwisko, adres e-mail, numer telefonu czy adres zamieszkania. W kontekście ochrony prywatności ważne jest odpowiednie gospodarowanie i zabezpieczanie tego rodzaju danych.
Jakie są zasady przetwarzania danych osobowych?
Zasady przetwarzania danych osobowych obejmują zbieranie danych w sposób zgodny z prawem, jasność co do celów zbierania, ograniczenie przechowywania danych do niezbędnego minimum, zapewnienie ich integralności i poufności.
Co to jest za skrót RODO?
RODO to skrót od: Rozporządzenie o Ochronie Danych Osobowych, czyli unijny akt prawny regulujący kwestie związane z przetwarzaniem danych osobowych.
Co to jest RODO i na czym polega?
RODO to unijne rozporządzenie mające na celu ochronę danych osobowych obywateli. Polega ono na określeniu zasad przetwarzania danych, prawach osób, których dane dotyczą, oraz obowiązkach podmiotów przetwarzających te dane.
Jakie dane podlegają ochronie RODO?
RODO chroni wszelkie dane osobowe, czyli informacje dotyczące zidentyfikowanej lub możliwej do zidentyfikowania osoby fizycznej. Obejmuje to m.in. imię, nazwisko, adres, numer identyfikacyjny, dane lokalizacyjne, czy identyfikatory online.
Co nie podlega pod RODO?
RODO nie obejmuje przetwarzania danych osobowych w celach czysto osobistych, np. prowadzenia korespondencji prywatnej. Nie podlegają mu także dane anonimowe, które nie pozwalają na identyfikację konkretnych osób.
Kanały informacyjne <link "rss, atom">
Jak udostępnić czytelnikom subskrypcję kanału informacyjnego RSS (Really Simple Syndication) lub Atom, zawierającego nowości w serwisie?
- Kanał w formacie RSS
<head> <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/rss+xml"> </head>
- Kanał w formacie Atom
<head> <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/atom+xml"> </head>
- Tytuł kanału
- Nazwa kanału, która może pojawić się w przeglądarce przy jego subskrybowaniu
- adres kanału
- Ścieżka dostępu lub lokalizacja pliku z kanałem informacyjnym
Kanał informacyjny to specjalny plik tekstowy w formacie XML zawierający listę artykułów (uszeregowanych od najnowszych), które pojawiły się ostatnio w serwisie. Użytkownik może zasubskrybować taki kanał w swojej przeglądarce lub innej przeznaczonej do tego aplikacji i otrzymywać na bieżąco powiadomienia o wszystkich nowościach bez potrzeby ciągłego odwiedzania serwisu i sprawdzania, czy pojawiło się coś nowego.
Możliwe jest osadzenie kilku kanałów informacyjnych na jednej stronie - wystarczy wstawić kolejno kilka takich znaczników. W takim przypadku każdy powinien mieć inny tytuł (atrybut title="..."), ponieważ inaczej użytkownik nie będzie mógł rozróżnić, co chciałby subskrybować.
Przykład <link "rss">
<link rel="alternate" title="Kurs HTML - darmowe szkolenie: tworzenie stron internetowych" href="https://www.kurshtml.edu.pl/rss/rss.php?id=1" type="application/rss+xml">
Pytania i odpowiedzi
Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.
Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?
Jak ustawić język strony w HTML?
Ustawienie języka strony WWW - np. polskiego lub angielskiego - nie jest obowiązkowe, ale ułatwia zadane m.in. automatycznym tłumaczom tekstu. Aby ustawić język strony najlepiej do znacznika obejmującego cały dokument dodać odpowiedni atrybut - np.: <html lang="pl">...</html>. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden taki znacznik. Zatem odpowiedni atrybut dodajemy do już istniejącego elementu, a nie wstawiamy nowego!
O czym informuje atrybut np. lang="pl" dla znacznika HTML?
Wskazuje on na język, w jakim jest napisana treść zawarta na stronie. Na przykład lang="pl" oznacza język polski, lang="en" - angielski, lang="de" - niemiecki, lang="fr" - francuski, lang="it" - włoski, lang="es" - hiszpański.
Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?
Co to jest tytuł strony?
Tytuł strony to tekst, który zwykle pojawia się na karcie przeglądarki ze stroną oraz w wynikach wyszukiwania np. Google.
Gdzie można umieścić <title>?
Znaczniki <title>...</title> należy umieścić w dowolnym miejscu nagłówka dokumentu - tzn. wewnątrz elementu <head>...</head>. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik tytułu strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden tytuł strony.
O czym nie należy zapominać pisząc stronę WWW po polsku?
Jak ustawić kodowanie polskich znaków HTML?
Aby na stronie wyświetlały się poprawnie wszystkie polskie znaki diakrytyczne, w nagłówku strony - tzn. w dowolnym miejscu wewnątrz elementu <head>...</head> - trzeba wstawić tzw. deklarację strony kodowej. Najczęściej stosowanym zapisem jest w tym przypadku: <meta charset="utf-8">. Oprócz tego konieczne jest dysponowanie odpowiednim edytorem HTML, który obsługuje polski alfabet.
Jak ustawić utf-8 HTML?
utf-8 to nazwa tzw. strony kodowej, dzięki której wszystkie znaki na stronie - w tym polskie litery - poprawnie się wyświetlają w przeglądarce internetowej. Aby ustawić taką stronę kodową, wystarczy w dowolnym miejscu nagłówka strony - tzn. wewnątrz elementu <head>...</head> - wstawić następujący znacznik: <meta charset="utf-8">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem deklarację strony kodowej dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w wyszukiwarkach (Google)?
Jak sprawdzić meta description?
Znacznik <meta name="description"> może wyświetlać się w wynikach wyszukiwania np. Google, ale normalnie nie jest widoczny na stronie. Aby go sprawdzić, można podejrzeć kod źródłowy strony. W systemie Windows najczęściej robi się to za pomocą kombinacji klawiszy Ctrl+U.
Jak dodać opis strony HTML?
Aby dodać opis strony, który może pojawić się potem w wynikach wyszukiwania np. Google, trzeba w dowolnym miejscu nagłówka strony - tzn. wewnątrz elementu <head>...</head> - wstawić np. następujący znacznik: <meta name="description" content="Tu podaj opis twojej strony">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem opis strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden opis strony.
W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?
Jak wpisać słowa kluczowe?
Słowa kluczowe to lista wyrazów rozdzielonych przecinkami, które wskazują, o jakiej tematyce jest strona. Można je wpisać w nagłówku dokumentu - tzn. w dowolnym miejscu wewnątrz elementu <head>...</head> - używając następującego znacznika: <meta name="keywords" content="wyraz1, wyraz2, wyraz3...">. Jednak ponieważ tak wstawione słowa kluczowe nie wyświetlają się normalnie na stronie, w przeszłości twórcy witryn internetowych nadużywali tego sposobu. Dodawali oni wiele nieadekwatnych ale bardzo popularnych wyrazów kluczowych do swoich serwisów licząc na to, że dzięki temu ich strona znajdzie się wyżej w wynikach wyszukiwania np. Google. Z tego powodu obecnie znacznik ten jest zupełnie ignorowany przez większość wyszukiwarek internetowych. Dlatego aby skutecznie dodać słowa kluczowe do swojej strony, najlepiej je wstawić bezpośrednio w treści, tak żeby były widoczne dla czytelnika.
Jak dobrać słowa kluczowe SEO?
SEO to skrót z języka angielskiego: Search Engine Optimization - czyli optymalizacja dla wyszukiwarek internetowych. Jest to zbiór działań mających na celu poprawienie miejsca strony w wynikach wyszukiwania np. Google. Jednym z nich są odpowiednio dobrane słowa kluczowe. Zastanów się, jakie wyrazy mogą chcieć wpisać w wyszukiwarce użytkownicy, aby trafić na Twoją stronę. Dobrym pomysłem może być również śledzenie trendów - jeśli coś jest aktualnie bardzo popularne, zapewne więcej użytkowników będzie szukać witryn na ten temat. Pamiętaj jednak, że aby słowa kluczowe były skuteczne, powinny się znaleźć również w sposób naturalny w treści Twojej strony.
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki?
Co to są roboty HTML?
Witryn w całym Internecie jest tak dużo, że niemożliwe byłoby przeszukiwanie ich wszystkich w czasie rzeczywistym - tak jak plików na dysku lokalnym komputera. Dlatego każda wyszukiwarka internetowa (np. Google) posiada własnego robota (albo w skrócie po prostu bota). Jest to specjalny program, który nieustannie odwiedza wszystkie strony w Internecie i zapisuje ich przetworzoną treść w swojej bazie danych. Następnie kiedy użytkownicy wpisują określone słowa kluczowe, wyszukiwarka odczytuje potrzebne informacje z tej bazy danych, aby błyskawicznie wyświetlić jak najlepiej pasujące wyniki. Należy się liczyć z tym, że baza danych wyszukiwarek może nie być cały czas aktualna. Dlatego jeśli wprowadzisz na swojej stronie jakieś zmiany albo dodasz nową podstronę, efekt będzie widoczny w wynikach dopiero, kiedy robot wyszukiwarki ponownie odwiedzi i przetworzy Twoją stronę.
Co to jest meta robots?
To znacznik, który można wstawić w nagłówku dokumentu HTML - czyli wewnątrz elementu <head>...</head>. Pozwala on sterować widocznością strony w wynikach wyszukiwania np. Google. Na przykład <meta name="robots" content="noindex"> spowoduje, że strona nie powinna być w ogóle widoczna w wynikach wyszukiwania.
Jak zablokować indeksowanie zdjęć lub plików z określonego katalogu?
Czym jest plik robots.txt?
Plik robots.txt to specjalny dokument tekstowy, dzięki któremu możemy sterować widocznością dokumentów, zdjęć i innych plików z naszej strony internetowej w wynikach wyszukiwania np. Google.
Gdzie jest plik robots.txt?
Plik robots.txt nie jest obowiązkowy. Jeśli twórca witryny zdecydował się go dodać, musi się on znajdować w głównym folderze ze stroną WWW i mieć dokładnie taką nazwę (ważna jest również wielkość liter!). Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku powinien być następujący: https://www.example.com/robots.txt.
W jaki sposób pozbyć się zduplikowanych (powielonych) stron z wyników wyszukiwania?
Co to jest strona kanoniczna?
Jeżeli w serwisie internetowym ta sama lub bardzo podobna podstrona znajduje się pod kilkoma różnymi adresami, strona kanoniczna wskazuje na jej podstawową wersję. Najczęściej będzie to po prostu dokument z najkrótszym adresem. W wynikach wyszukiwania np. Google zwykle pojawi się właśnie tylko strona kanoniczna, a pozostałe jej duplikaty zostaną pominięte.
Jak oznaczyć stronę kanoniczną?
Oznaczenie strony kanonicznej nie jest obowiązkowe. Warto to jednak zrobić, jeśli w serwisie mamy zduplikowane dokumenty. W przeciwnym razie wyszukiwarka będzie się sama próbowała domyślić, która z wersji jest podstawowa - co nie zawsze może być zgodne z naszymi założeniami. Aby oznaczyć stronę kanoniczną, we wszystkich dokumentach z powtarzającą się treścią (z wyjątkiem strony, którą chcemy wskazać jako wersję podstawową), trzeba wstawić w nagłówku dokumentu - czyli w dowolnym miejscu wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="canonical" href="adres strony podstawowej">. Na przykład jeśli w naszej witrynie zarówno pod adresem https://www.example.com/ jak i https://www.example.com/index.html znajduje się identyczna treść, w tym drugim dokumencie możemy dodać znacznik: <link rel="canonical" href="https://www.example.com/">.
W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?
Co to jest mobilna wersja strony?
Mobilna wersja strony to dostosowana do urządzeń mobilnych wersja witryny internetowej, zoptymalizowana pod kątem mniejszych ekranów i interakcji dotykowych. Zazwyczaj jest bardziej ergonomiczna dla użytkowników korzystających z smartfonów czy tabletów.
Jak dostosować stronę do urządzeń mobilnych HTML?
Aby dostosować stronę do urządzeń mobilnych w HTML, można użyć meta tagu viewport. Przykład: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ten tag umożliwia przeglądarce odpowiednie skalowanie i dostosowanie widoku do szerokości ekranu urządzenia.
Jak zrobić stronę mobilną?
Aby zrobić stronę mobilną, można użyć znacznika <link> z atrybutem media="..." do wskazania adresu strony dedykowanej urządzeniom mobilnym. Przykład: <link rel="alternate" media="only screen and (max-width: 600px)" href="https://m.example.com/">. Ten link informuje przeglądarkę o istnieniu alternatywnej wersji strony przeznaczonej dla urządzeń o mniejszych ekranach.
Jak sprawdzić wygląd strony na urządzeniach mobilnych?
Aby sprawdzić wygląd strony na urządzeniach mobilnych, można skorzystać z narzędzi deweloperskich przeglądarki, takich jak tryb responsywności. Wchodząc w inspekcję elementu (Ctrl+Shift+I), można przełączyć się w tryb responsywności (ikona ze smartfonem) i dostosować widok do różnych rozmiarów ekranów.
Jak przełączyć przeglądarkę w tryb mobilny?
Aby przełączyć przeglądarkę w tryb mobilny, można użyć narzędzi deweloperskich lub dodatków. W przypadku narzędzi deweloperskich (Ctrl+Shift+I), wchodząc w tryb responsywności (ikona ze smartfonem), można wybrać konkretny model urządzenia. Dodatkowo, istnieją rozszerzenia, takie jak "User-Agent Switcher," które umożliwiają emulację różnych urządzeń.
Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?
Co to jest odświeżanie strony?
Odświeżenie strony to ponowne jej wczytanie, tak aby zobaczyć wszystkie ewentualne zmiany, które na niej zaszły. W większości przeglądarek internetowych odświeżenie strony odbywa się poprzez wciśnięcie klawisza F5. Możliwe jest również odświeżenie strony z pominięciem pamięci podręcznej - poprzez kombinację klawiszy Ctrl+F5. Może to być przydatne zwłaszcza, kiedy wprowadziliśmy zmiany w elementach osadzonych na stronie (np. obrazkach), ale ciągle widzimy ich poprzednią wersję.
Jak ustawić automatyczne odświeżanie strony?
Aby wymusić automatyczne odświeżenie strony np. po upływie 60 sekund, wystarczy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="60">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik odświeżenia strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Pamiętaj również, że zbyt krótki czas odświeżania strony może spowodować nadmierne użycie łącza internetowego użytkowników oraz dodatkowe obciążenie serwera z Twoją stroną, przez co strona może zacząć działać wolniej.
Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?
Jak działa redirect?
Redirect oznacza automatyczne przekierowanie użytkownika do innego adresu. Może to być przydatne, jeśli dokument albo nawet cały serwis został przeniesiony pod nowy adres. W takiej sytuacji po wejściu na stary adres przeglądarka automatycznie wczyta nową stronę, bez potrzeby klikania użytkownika w dodatkowe odsyłacze.
Jak ustawić przekierowanie na inną stronę?
Aby po wejściu na stronę natychmiast automatycznie przekierować użytkownika na nowy adres (np. https://www.example.com/), wystarczy wstawić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="0; url=https://www.example.com/">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik przekierowania dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
W jaki sposób wstawić ikonę obok adresu strony WWW?
Jaki rozmiar ikony strony?
Ikona strony powinna mieć rozmiary 16x16 pikseli. Ponadto format graficzny *.ico umożliwia zapisanie w jednym pliku kilku ikon o różnych wymiarach. W ten sposób można dodatkowo zapisać ikonę o wymiarach 32x32 piksele, co może być przydatne, jeśli użytkownicy będą chcieli umieścić skrót do strony na pulpicie swojego systemu operacyjnego.
Jak zrobić ikonę strony?
Ikona strony może się wyświetlać w przeglądarce internetowej na karcie ze stroną oraz w wynikach wyszukiwania np. Google. Do przygotowania ikony możemy użyć dowolnego programu graficznego, który obsługuje format *.ico (np. darmowy GIMP). Obrazek ikony powinien mieć wymiary 16x16 pikseli. Należy go zapisać w pliku o nazwie favicon.ico (ważna jest również wielkość liter!) w głównym folderze ze stroną WWW. Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku ikony powinien być następujący: https://www.example.com/favicon.ico.
Jak ustawić ikonę w HTML?
Aby ustawić ikonę strony, która została zapisana w pliku favicon.ico, należy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="shortcut icon" href="/favicon.ico">. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem ikonę dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
W jaki sposób wskazać licencję odnoszącą się do aktualnej strony? Jak oznaczyć prawa autorskie zdjęć umieszczonych w dokumencie? Gdzie podawać dokument opisujący przetwarzanie danych osobowych (RODO, GDPR)? Jak wskazać regulamin serwisu?
Co to znaczy licencja CC?
Licencja Creative Commons (CC) to rodzaj licencji, który umożliwia autorom udostępnianie swoich dzieł z pewnymi ograniczeniami. Pozwala to na elastyczne korzystanie z utworów przy jednoczesnym respektowaniu praw autorskich.
Jakie są rodzaje licencji CC?
Istnieje kilka rodzajów licencji Creative Commons, takich jak CC BY (atrybucja), CC BY-SA (atrybucja, na tych samych warunkach), CC BY-NC (atrybucja, użytki niekomercyjne) itp. Każda z tych licencji określa różne warunki korzystania z utworów.
Jak prawidłowo korzystać z licencji Creative Commons?
Aby prawidłowo korzystać z licencji Creative Commons, należy przestrzegać warunków określonych w danej licencji. Na ogół wymaga to podania informacji o autorze (BY), utrzymania tych samych warunków (SA), a w przypadku niektórych licencji, unikania zastosowań komercyjnych (NC).
Co to jest licencja CC BY 3.0?
Licencja CC BY 3.0 to jedna z wersji licencji Creative Commons. Oznacza, że użytkownicy mogą swobodnie korzystać, rozpowszechniać, modyfikować i budować na danym dziele, nawet w celach komercyjnych, pod warunkiem podania odpowiedniego odniesienia do autora.
Na co pozwala licencja Creative Commons?
Licencja Creative Commons pozwala na elastyczne dzielenie się utworami, umożliwiając innym ich używanie, modyfikowanie i udostępnianie przy określonych warunkach. To narzędzie wspiera wolne dzielenie się wiedzą i kulturą, jednocześnie zachowując respektowanie praw autorskich.
Co znaczy słowo "private"?
W języku angielskim słowo "private" oznacza "prywatny".
Co to znaczy "Privacy Policy"?
"Privacy Policy" to polityka prywatności, czyli dokument określający, jakie informacje są zbierane przez daną firmę, serwis internetowy lub aplikację, w jaki sposób są przechowywane, przetwarzane i zabezpieczane. Jest to istotny element dla użytkowników, którzy dowiadują się, jakie dane są gromadzone i w jaki sposób są używane.
Jakie to są dane osobowe?
Dane osobowe to informacje dotyczące zidentyfikowanej lub możliwej do zidentyfikowania osoby fizycznej. Obejmuje to m.in. imię, nazwisko, adres e-mail, numer telefonu czy adres zamieszkania. W kontekście ochrony prywatności ważne jest odpowiednie gospodarowanie i zabezpieczanie tego rodzaju danych.
Jakie są zasady przetwarzania danych osobowych?
Zasady przetwarzania danych osobowych obejmują zbieranie danych w sposób zgodny z prawem, jasność co do celów zbierania, ograniczenie przechowywania danych do niezbędnego minimum, zapewnienie ich integralności i poufności.
Co to jest za skrót RODO?
RODO to skrót od: Rozporządzenie o Ochronie Danych Osobowych, czyli unijny akt prawny regulujący kwestie związane z przetwarzaniem danych osobowych.
Co to jest RODO i na czym polega?
RODO to unijne rozporządzenie mające na celu ochronę danych osobowych obywateli. Polega ono na określeniu zasad przetwarzania danych, prawach osób, których dane dotyczą, oraz obowiązkach podmiotów przetwarzających te dane.
Jakie dane podlegają ochronie RODO?
RODO chroni wszelkie dane osobowe, czyli informacje dotyczące zidentyfikowanej lub możliwej do zidentyfikowania osoby fizycznej. Obejmuje to m.in. imię, nazwisko, adres, numer identyfikacyjny, dane lokalizacyjne, czy identyfikatory online.
Co nie podlega pod RODO?
RODO nie obejmuje przetwarzania danych osobowych w celach czysto osobistych, np. prowadzenia korespondencji prywatnej. Nie podlegają mu także dane anonimowe, które nie pozwalają na identyfikację konkretnych osób.
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.
Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?
<html lang="język">...</html>
<head>
<link rel="alternate" hreflang="język" href="adres">
</head>
<head>
<link rel="alternate" hreflang="x-default" href="adres">
</head>
Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?<head>
<title>Tytuł strony</title>
</head>
O czym nie należy zapominać pisząc stronę WWW po polsku?<head>
<meta charset="utf-8">
</head>
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w wyszukiwarkach (Google)?<head>
<meta name="description" content="Tu podaj opis twojej strony">
</head>
W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?<head>
<meta name="keywords" content="wyraz1, wyraz2, wyraz3...">
</head>
Gdzie wpisać autora strony WWW? Jak wskazać link do strony autora aktualnego artykułu?<head>
<meta name="author" content="Tu wpisz swoje imię i nazwisko">
</head>
<head>
<link rel="author" href="lokalizacja">
</head>
Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?<head>
<meta name="generator" content="nazwa edytora">
</head>
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki?<head>
<meta name="robots" content="dyrektywy">
</head>
Jak zablokować indeksowanie zdjęć lub plików z określonego katalogu?Pole: wartość
W jaki sposób pozbyć się zduplikowanych (powielonych) stron z wyników wyszukiwania?<head>
<link rel="canonical" href="adres strony podstawowej">
</head>
W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?<head>
<meta name="viewport" content="parametr1=wartość1, parametr2=wartość2...">
</head>
W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?<head>
<link rel="alternate" media="media" href="adres">
</head>
Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?<head>
<meta http-equiv="refresh" content="s">
</head>
Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?<head>
<meta http-equiv="refresh" content="s; url=Tu podaj adres strony lub ścieżkę dostępu">
</head>
W jaki sposób wstawić ikonę obok adresu strony WWW?<head>
<link rel="shortcut icon" href="adres ikony">
</head>
W jaki sposób ułatwić nawigację na stronie WWW?<head>
<link rel="prev" href="adres">
</head>
<head>
<link rel="next" href="adres">
</head>
<head>
<link rel="help" href="adres">
</head>
<head>
<link rel="search" href="adres">
</head>
W jaki sposób wskazać licencję odnoszącą się do aktualnej strony? Jak oznaczyć prawa autorskie zdjęć umieszczonych w dokumencie? Gdzie podawać dokument opisujący przetwarzanie danych osobowych (RODO, GDPR)? Jak wskazać regulamin serwisu?<head>
<link rel="license" href="ścieżka dostępu">
</head>
<head>
<link rel="privacy-policy" href="ścieżka dostępu">
</head>
<head>
<link rel="terms-of-service" href="ścieżka dostępu">
</head>
Jak udostępnić czytelnikom subskrypcję kanału informacyjnego RSS (Really Simple Syndication) lub Atom, zawierającego nowości w serwisie?<head>
<link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/rss+xml">
</head>
<head>
<link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/atom+xml">
</head>
Quiz i certyfikat ukończenia
Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia * , rozwiązując testowy QUIZ (online).
* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.
Ćwiczenia
- Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
- Dodaj informację o języku, w którym została wprowadzona treść na Twojej stronie.
- Podaj autora strony.
- Zdefiniuj ikonę strony. Jeżeli nie posiadasz wystarczających umiejętności graficznych, przykładową ikonę możesz wyszukać w internecie.
Pamiętaj o poszanowaniu praw autorskich! Nie każdy obrazek można swobodnie skopiować sobie na swoją stronę, jeżeli autor nie wyraził na to zgody.
Jednym z serwisów, który udostępnia m.in. darmowe ikony, jest Iconfinder - przy wyszukiwaniu użyj filtra "free". Zwróć również uwagę na pole "License type" - w niektórych przypadkach może być konieczne wstawienie na stronie linku do strony autora wybranej ikony. Może też być zabronione użycie grafiki do celów komercyjnych. - Otwórz Twoją stronę w przeglądarce internetowej i sprawdź, czy na karcie, w której się ona wyświetla, widoczna jest zdefiniowana przez Ciebie ikona.