Szkielet współczesnej strony internetowej to zestaw najbardziej elementarnych znaczników, których obecność w kodzie zagwarantuje poprawne działanie witryny w przeglądarce oraz właściwe jej zaindeksowanie przez wyszukiwarki.

Na początku tworzenia witryny warto uwzględniać cały ogół czynności mających zapewnić jak najwyższą pozycję strony w wynikach wyszukiwania w Google – jest to tak zwany kontekst SEOSEOSEO programowania webowego.

Analizę kodu źródłowego rozpocznijmy od wstępnego przyjrzenia się całemu szkieletowi dokumentu zapisanemu w standardzie HTML5:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html lang znak równości cudzysłów pl cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny meta charset znak równości cudzysłów utf minus 8 cudzysłów zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny title zamknij nawias ostrokątny Tytuł strony otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny meta name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Opis zawartości strony cudzysłów zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów słowa przecinek kluczowe przecinek opis przecinek zawartości cudzysłów zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Jan Programista cudzysłów zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów X minus Ua minus Compatible cudzysłów content znak równości cudzysłów IE znak równości edge przecinek chrome znak równości 1 cudzysłów zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny meta name znak równości cudzysłów viewport cudzysłów content znak równości cudzysłów width znak równości device minus width przecinek initial minus scale znak równości 1 cudzysłów zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny link rel znak równości cudzysłów shortcut icon cudzysłów type znak równości cudzysłów image prawy ukośnik x minus icon cudzysłów href znak równości cudzysłów ikonka kropka ico cudzysłów zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny link rel znak równości cudzysłów stylesheet cudzysłów href znak równości cudzysłów arkusz kropka css cudzysłów zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny script src znak równości cudzysłów skrypt kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny wykrzyknik minus minus otwórz nawias kwadratowy if lt IE 9 zamknij nawias kwadratowy zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny script src znak równości cudzysłów html5shiv kropka min kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny script src znak równości cudzysłów respond kropka min kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny wykrzyknik otwórz nawias kwadratowy endif zamknij nawias kwadratowy minus minus zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny wykrzyknik minus minus Zawartość podstrony minus minus zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

Zajmijmy się rozszyfrowaniem przeznaczenia każdej przedstawionej instrukcji.

Deklaracja typu dokumentu

Kod źródłowy witryny inicjujemy poinformowaniem przeglądarki, której wersji standardu języka użyjemy do stworzenia podstrony. To ważne, gdyż nawet starsze wersje języka (HTML 4.01, XHTML) są nadal obsługiwane w ramach zachowania w internecie zasady tzw. kompatybilności wstecznejkompatybilność wstecznakompatybilności wstecznej. Używana współcześnie deklaracja dla HTML5 prezentuje się następująco:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny.

Taka deklaracja informuje przeglądarkę, iż dokument został zapisany w standardzie HTML5. Wcześniejsze deklaracje były dużo dłuższe w zapisie, gdyż występowały w trzech odmianach: Strict, Transitional oraz Frameset. Przez to zawierały dodatkowo wpis DTD (ang. Document Type Definition). Oto kilka przykładów starszych deklaracji:

  • HTML 4.01 Strict:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE HTML PUBLIC cudzysłów minus prawy ukośnik prawy ukośnik W3C prawy ukośnik prawy ukośnik DTD HTML 4 kropka 01 prawy ukośnik prawy ukośnik EN cudzysłów. Linia 2. cudzysłów http dwukropek prawy ukośnik prawy ukośnik www kropka w3 kropka org prawy ukośnik TR prawy ukośnik html4 prawy ukośnik strict kropka dtd cudzysłów zamknij nawias ostrokątny.
  • HTML 4.01 Frameset:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE HTML PUBLIC cudzysłów minus prawy ukośnik prawy ukośnik W3C prawy ukośnik prawy ukośnik DTD HTML 4 kropka 01 Frameset prawy ukośnik prawy ukośnik EN cudzysłów. Linia 2. cudzysłów http dwukropek prawy ukośnik prawy ukośnik www kropka w3 kropka org prawy ukośnik TR prawy ukośnik html4 prawy ukośnik frameset kropka dtd cudzysłów zamknij nawias ostrokątny.
  • XHTML 1.1 DTD:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html PUBLIC cudzysłów minus prawy ukośnik prawy ukośnik W3C prawy ukośnik prawy ukośnik DTD XHTML 1 kropka 1 prawy ukośnik prawy ukośnik EN cudzysłów. Linia 2. cudzysłów http dwukropek prawy ukośnik prawy ukośnik www kropka w3 kropka org prawy ukośnik TR prawy ukośnik xhtml11 prawy ukośnik DTD prawy ukośnik xhtml11 kropka dtd cudzysłów zamknij nawias ostrokątny.

Oczywiście wraz z upływem czasu, starsze (dużo bardziej rozbudowane) deklaracje zostały zastąpione prostym zapisem wprowadzonym od standardu HTML5.

Nagłówek i ciało witryny, polskie znaki

Już od lat 70‑tych XX wieku, tradycją w programowaniu strukturalnym stało się konstruowanie własnych funkcji w taki sposób, aby zawierały dwie sekcje:

  • nagłówek, który składa się z nazwy funkcji oraz z typów przetwarzanych parametrów i zwracanych przez nią wartości,

  • ciało, czyli zamknięty (najczęściej w nawiasach klamrowych) blok instrukcji realizujących konkretne zadanie.

Odzwierciedleniem tej klasycznej metodologii tworzenia funkcji jest także anatomia elementarnej struktury strony internetowej:

  • sekcja head to część nagłówkowa, która określa wiele parametrów technicznych witryny – np. tytuł, używany zestaw znaków, słowa kluczowe, opis, autor kodu, uwzględniane pliki składowe i tym podobne elementy,

  • sekcja body to ciało witryny, czyli elementy składowe wyświetlające zawartość strony – znaczniki strukturalne, akapity tekstu, grafiki, listy, tabele, kontrolki formularzy i tak dalej.

Obie te klasyczne części składowe zamknięto dodatkowo w zbiorcze ramy podwójnego znacznika html:

Linia 1. otwórz nawias ostrokątny html lang znak równości cudzysłów pl cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny minus minus Część nagłówkowa minus minus zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny minus minus Ciało witryny minus minus zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

Ważnym atrybutem zapisu jest lang="pl". Aby polskie znaki diakrytyczne na pewno wyświetlały się poprawnie, należy dopilnować obecności dwóch zapisów HTML, jak również poprawnie ustawić kodowanie samego pliku.

Warunki konieczne do spełnienia:

  • język polski ustawiony zapisem <html lang="pl">,

  • zastosowanie zestawu znaków utf‑8; odpowiada za to znacznik <meta charset="utf‑8">, który omówiono w sekcji „Mapa myśli”,

  • ustawienie tego samego zestawu znaków dla pliku z rozszerzeniem .htm lub .html; rodzaj zastosowanego kodowania można zawsze zmienić w edytorze kodu źródłowego.

Znaczniki meta w sekcji nagłówkowej

Wskazanie używanego przez witrynę zestawu znaków powinno być pierwszym znacznikiem wstawionym do sekcji head. Kolejne znaczniki, np. tytuł, opis witryny, autor, mogą już zawierać znaki diakrytyczne:

Linia 1. otwórz nawias ostrokątny meta charset znak równości cudzysłów utf minus 8 cudzysłów zamknij nawias ostrokątny.

Wybieramy współcześnie stosowany zestaw znaków utf‑8, który zastąpił wcześniej używany dla polskich witryn standard iso‑8859‑2. Istnieje także dłuższa wersja tagu, którą można stosować zamiennie z wersją pierwotną:

Linia 1. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów Content minus Type cudzysłów content znak równości cudzysłów text prawy ukośnik html średnik charset znak równości utf minus 8 cudzysłów zamknij nawias ostrokątny.

Ten wariant przypomina w zapisie analogiczny znacznik ze standardu HTML 4.01 i XHTML. Ponieważ oba zapisy są w HTML5 równoważne, to warto zdecydować się na prostą, krótszą wersję.

Kolejny ważny w kontekście SEOSEOSEO znacznik meta to opis strony w rezultatach wyszukiwania:

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Opis zawartości strony cudzysłów zamknij nawias ostrokątny.

Do dyspozycji mamy około 155‑160 znaków. Opis powinien składać się zarówno z kluczowych fraz, jak również bezpośrednio zwracać się do internauty, aby zainteresować go właśnie naszą witryną.

Wyszukiwarka Google, w miejscu opisu znalezionego rezultatu, często wstawia fragmenty stron, zawierających poszukiwane frazy. Internauta widzi więc kontekst użycia szukanych słów. To właśnie dlatego oryginalny opis z podanego znacznika nie zawsze będzie widoczny w Google.

Następny znacznik meta to kolekcja słów kluczowych:

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów słowa przecinek kluczowe przecinek opis przecinek zawartości cudzysłów zamknij nawias ostrokątny.

Obecnie wyszukiwarka Google najczęściej ignoruje tę sekcję (z powodu nadużyć internautów w przeszłości), jednak wciąż umieszczamy ją w kodzie witryny, wpisując kilka najbardziej kluczowych, reprezentatywnych fraz. Znacznik ten nie przynosi więc korzyści podczas pozycjonowania danej strony WWW.

Możemy określić autora witryny:

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Jan Programista cudzysłów zamknij nawias ostrokątny.

Jest to także znacznik opcjonalny, służący do podpisania pracy. W praktyce jednak dużo lepiej podpisać się na stronie linkiem do własnej witryny bądź portfolio (znacznik <a>). Zyskujemy wówczas kolejny link prowadzący do nas w rezultatach wyszukiwania Google – a to już wymierna korzyść zastosowania znacznika.

Warto jeszcze zatroszczyć się o poprawne wyświetlenie witryny w starszych wersjach przeglądarki Internet Explorer:

Linia 1. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów X minus Ua minus Compatible cudzysłów content znak równości cudzysłów IE znak równości edge przecinek chrome znak równości 1 cudzysłów zamknij nawias ostrokątny.

Znacznik ustawia możliwie najnowszy sposób renderowania witryny w starszych przeglądarkach z grupy IE, wcześniejszych od wersji 11 – szczególnie w IE 8 i 9.

Ponadto, dodano opcjonalny zapis chrome=1, który poprawia wygląd witryny wyświetlonej z użyciem pluginu do IE, nazwanego Chrome Frame. Obecnie niewielu jest użytkowników IE + Chrome Frame, ale ponieważ sam zapis nie zajmuje wiele miejsca w kodzie, to wciąż spotkamy go w niektórych źródłach HTML5.

W przypadku tworzenia strony responsywnej, czyli dopasowującej sposób wyświetlania do ekranów urządzeń mobilnych, należy koniecznie dopisać znacznik:

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów viewport cudzysłów content znak równości cudzysłów width znak równości device minus width przecinek initial minus scale znak równości 1 cudzysłów zamknij nawias ostrokątny.

Słowo viewport oznacza wirtualne okno, wewnątrz którego przeglądarka na urządzeniu mobilnym wyświetla responsywną witrynę. Ustawiamy szerokość width na wartość pobraną z właściwości ekranu urządzenia oraz początkowy poziom zbliżenia widoku, tuż po załadowaniu witryny do okna.

Tytuł bieżącej strony

Definicja tego elementu witryny wydaje się na pozór bardzo prosta – odpowiednią frazę wystarczy zamknąć wewnątrz podwójnego znacznika:

Linia 1. otwórz nawias ostrokątny title zamknij nawias ostrokątny Tytuł strony otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny.

Warto jednak uzmysłowić sobie, gdzie w praktyce, podczas codziennego użytkowania internetu, mamy do czynienia z tytułem witryny. Najważniejsze dwa miejsca to:

  • zakładka w przeglądarce internetowej – po prawej stronie ikonki reprezentującej serwis w sposób wizualny, w przypadku gdy długość zakładki pozwala na zmieszczenie kilkunastu do kilkudziesięciu znaków, ujrzymy tytuł podstrony, który z oczywistych powodów powinien dobrze i celnie streścić zawartość tej otwartej karty przeglądarki:

R1EzSRDs1VNIH
Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.
  • rezultaty wyszukiwania w Google – tytuł strony jest za sprawą dużej, niebieskiej czcionki (lub fioletowej dla serwisów już odwiedzonych) mocno wizualnie wyeksponowany – internauci poszukujący informacji w sieci zdecydowanie zwrócą na niego uwagę; poza tym często na podstawie przekazu zawartego w tytule, podejmujemy decyzję o odwiedzeniu danego serwisu.

R1eitn3dRuF9w
Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.

To właśnie kontekst SEOSEOSEO sprawia, że wybór zawartych pomiędzy znacznikami <title></title> wyrazów, to jedna z najważniejszych decyzji projektowych, której należy poświęcić należytą uwagę.

Ciekawostka

Wyszukiwarka respektuje tytuł ustawiony przez programistę w kodzie źródłowym. Nawet jeśli szukanej frazy w tytule nie ma, to Google i tak prezentuje w wynikach oryginalny tytuł, pobrany ze źródła – dokładnie tak, jak go zapisał na etapie projektowania programista webowy (pamiętajmy jednak, że zbyt długie tytuły zostaną przycięte i zakończone wielokropkiem).

Jak zatem tworzyć dobre tytuły stron? Czy skupić się na często wyszukiwanych frazach, czy raczej na kreatywnych skojarzeniach, poczuciu humoru, a może na socjotechnice i filozofii click‑bait?

To kwestia wiedzy i doświadczenia z zakresu marketingu webowego.

Jeżeli chodzi o kwestie czysto techniczne, warto zapamiętać, że tytuł powinien składać się łącznie maksymalnie z około 50‑70 znaków. Dokładną wartość limitu określa firma Google w zmieniających się co roku wytycznych, przy czym zazwyczaj tytuły wyświetlane na urządzeniach mobilnych mogą być nieco dłuższe. W praktyce dobry, spójny tytuł powinien mieć aktualnie około 55‑60 znaków.

Uwzględnianie zewnętrznych plików

Oprócz tytułu witryny, ważnym aspektem wizualnym na zakładce w przeglądarce jest ikonka kojarząca się z otwartą stroną:

Linia 1. otwórz nawias ostrokątny link rel znak równości cudzysłów shortcut icon cudzysłów type znak równości cudzysłów image prawy ukośnik x minus icon cudzysłów href znak równości cudzysłów ikonka kropka ico cudzysłów zamknij nawias ostrokątny.

Ta ikonka (określana jako favicon) widoczna będzie także na pasku zakładek oraz w skrótach na ekranie głównym pustej karty przeglądarki. Nie należy więc lekceważyć tego charakterystycznego elementu, kojarzącego się ze stroną.

Oprócz plików .ico możliwe jest także zastosowanie formatu np. .svg lub .png, dzięki odpowiedniej modyfikacji wartości atrybutu type.

Podpięcie zewnętrznego arkusza stylów, czyli zmiana wyglądu poszczególnych elementów składowych dokumentu:

Linia 1. otwórz nawias ostrokątny link rel znak równości cudzysłów stylesheet cudzysłów href znak równości cudzysłów arkusz kropka css cudzysłów zamknij nawias ostrokątny.

Podpięcie zewnętrznego skryptu napisanego w języku JavaScript, czyli dodanie funkcji której nie potrafią obsłużyć języki opisowe HTML i CSS:

Linia 1. otwórz nawias ostrokątny script src znak równości cudzysłów skrypt kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny.

Poprawne działanie HTML5 w Internet Explorer

Standard HTML5 wprowadził wiele nowości, w tym użycie w sekcji body znaczników semantycznych, czyli określających przeznaczenie każdego elementu w kontekście SEO. Są to między innymi znaczniki: <nav>, <header>, <footer>, <aside>, <article>, <section>. W przypadku wykorzystania tych tagów, warto zadbać o ich poprawne wyświetlenie (emulowanie) w starszych przeglądarkach z rodziny Internet Explorer (dalej: IE):

Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus otwórz nawias kwadratowy if lt IE 9 zamknij nawias kwadratowy zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny script src znak równości cudzysłów html5shiv kropka min kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny script src znak równości cudzysłów respond kropka min kropka js cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik script zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny wykrzyknik otwórz nawias kwadratowy endif zamknij nawias kwadratowy minus minus zamknij nawias ostrokątny.

Oprócz skryptu html5shiv.min.js naprawiającego brak obsługi znaczników semantycznych w IE w wersjach poniżej dziewiątej, rozwiązano także problem braku rozpoznania zapisów media queries w CSS, które potrzebne są do prawidłowej obsługi responsywności w tych przeglądarkach.

Ważne!

W starszych wersjach IE zapewniamy emulowaną obsługę współczesnych mechanizmów wykorzystywanych na stronach internetowych: responsywności oraz semantyki.

Jak prawidłowo domykać znaczniki?

Na koniec wspomnijmy jeszcze o wiecznie żywej dyskusji na temat sposobu domykania znaczników pojedynczych w HTML. Czy należy zakończyć pojedyncze znaczniki znakiem / czy jednak nie? Innymi słowy, czy w kodzie źródłowym powinniśmy użyć zapisu:

Linia 1. otwórz nawias ostrokątny meta charset znak równości cudzysłów utf minus 8 cudzysłów zamknij nawias ostrokątny.

czy jednak wykorzystać następujący sposób:

Linia 1. otwórz nawias ostrokątny meta charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny.

Zgodnie ze specyfikacją HTML5 w tagach pojedynczych obowiązuje brak kończącego znaku, aczkolwiek zapis znany z XHTML (czyli domknięcie tagu – wersja druga) nie spowoduje błędu w przeglądarce.

Wielu ludzi z przyzwyczajenia używa wersji starszej języka znaczników. Wprowadzanie nowych standardów sieciowych przebiega wolno, ale będąc na początku nauki programowania, warto od razu wyrobić sobie nawyk użycia wersji pozbawionej domknięcia.

Słownik

kompatybilność wsteczna
kompatybilność wsteczna

sposób zastępowania aktualnie obowiązującej wersji standardu w taki sposób, aby pomimo wprowadzonych zmian oraz rozszerzeń w funkcjach, nowa wersja umożliwiała poprawną współpracę z obecnie istniejącą infrastrukturą oraz możliwie największą liczbą wersji poprzedzających

SEO
SEO

akronim od ang. Search Engine Optimization – ogół działań, których dokonują programiści webowi w celu poprawy widoczności witryny w wynikach wyszukiwania – w szczególności w najbardziej popularnej wyszukiwarce Google