Przeczytaj
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 SEOSEO programowania webowego.
Analizę kodu źródłowego rozpocznijmy od wstępnego przyjrzenia się całemu szkieletowi dokumentu zapisanemu w standardzie HTML5:
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ści wstecznej. Używana współcześnie deklaracja dla HTML5 prezentuje się następująco:
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:
HTML 4.01 Frameset:
XHTML 1.1 DTD:
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
headto 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
bodyto 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:
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
.htmlub.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:
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ą:
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 SEOSEO znacznik meta to opis strony w rezultatach wyszukiwania:
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:
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:
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:
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:
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:
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:
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.
To właśnie kontekst SEOSEO 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ę.
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ą:
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:
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:
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):
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.
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:
czy jednak wykorzystać następujący sposób:
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
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
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