Co to jest język HTML?
HTML - HyperText Markup Language - to fundament każdej strony internetowej. To za jego pomocą tworzymy szkielet witryny, definiując strukturę i układ poszczególnych elementów, takich jak nagłówki, paragrafy, listy czy obrazy. Jednak rola HTML wykracza daleko poza estetykę strony. Odpowiednio zastosowane znaczniki HTML stanowią kluczowy element optymalizacji stron pod kątem wyszukiwarek, czyli SEO.
Wyszukiwarki korzystają z algorytmów, które analizują kod HTML strony w celu zrozumienia jej zawartości i kontekstu. Dzięki temu mogą ją odpowiednio sklasyfikować i wyświetlić w wynikach wyszukiwania dla określonych fraz kluczowych. Na przykład zastosowanie odpowiedniego znacznika nagłówka (h1, h2, itp.) pozwala podkreślić najważniejsze słowa kluczowe na stronie, co sygnalizuje wyszukiwarce, o czym jest dana strona. Z punktu widzenia użytkownika natomiast dzieli to całą treść na sekcje i ułatwia czytelność oraz zrozumienie.
Znaczniki (tagi) zbudowane są z nawiasów kwadratowych, czyli "<" oraz ">" i tego, co znajduje się pomiędzy. Umieszczając właściwą treść w znaczniku, możemy między innymi pogrubić tekst, oznaczyć nagłówki, zrobić odstęp między wierszami czy wstawić hiperłącza. A to tylko kilka z wielu ich zastosowań!
💡 Co istotne, znaczniki możemy podzielić na dwa rodzaje: pojedyncze i podwójne.
Znaczniki podwójne zawierają zamknięcie. Czym jest zamknięcie? To zastosowanie znaku "/" pod koniec znacznika. Stosuje się je np. w przypadku pogrubienia tekstu. Wówczas w pierwszym nawiasie kwadratowym wstawiamy "b" lub "strong", a w drugim "/", a potem ponownie "b" lub "strong". Tekst zawarty pomiędzy zostanie pogrubiony.
Znaczniki pojedyncze nie zawierają zamknięcia. Stosuje się je np. w przypadku chęci umieszczenia obrazka na stronie (wówczas wykorzystujemy komendę img src).
Jakie są najważniejsze znaczniki HTML dla SEO?
Poniższych znaczników w formie listy nie wypisujemy tutaj w nawiasach kwadratowych, by nie zaburzyć struktury treści. Pamiętajmy, że należy używać ich przy pomocy "<" i ">".
head; /head - zawiera meta informacje - tytuł strony, linki do skryptów, linki do stylów itd.
title; /title - jest to tytuł strony, prezentowany w wynikach wyszukiwania (SERP)
meta - pozwala umieścić meta opis, także prezentowany w SERP
html; /html - całość dokumentu HTML
rel="canonical" - pozwala wskazać preferowany adres URL strony; to ta wersja strony ma być traktowana jako główna, jeśli istnieje X wersji treści na różnych URL-ach
p; /p - paragraf na stronie
h1; /h1 aż do h6; /h6 - pozwala tworzyć nagłówki; nagłówek h1 jest najważniejszy, zawiera temat oraz główne słowo kluczowe, a kolejne nagłówki dzielą tekst na sekcje i czynią go przejrzystszym
b; /b lub strong; /strong - pozwala pogrubić tekst
u; /u - pozwala podkreślić tekst
i; /i lub em; /em - pozwala pochylić tekst
img src="..." - pozwala umieścić obrazek na stronie, korzystając ze źródła; w pole między cudzysłowami wstawiamy link do obrazka, np. z biblioteki mediów CMS
alt - pozwala umieścić opis alternatywny obrazka, czyli tekst definiujący jego zawartość
a href="..."; /a - pozwala umieścić link w treści; w pole między cudzysłowami wstawiamy tekst, który ma być anchor textem linku (czyli klikalną frazą)
table; /table - pozwala umieścić tabelkę
tr; /tr - pozwala umieścić wiersz w tabelce
td; /td - pozwala umieścić komórkę w wierszu tabelki
th; /th - pozwala umieścić nagłówek kolumny w tabelce
li; /li - pozwala stworzyć punkt w liście
ol; /ol - pozwala oznaczyć listę jako numerowaną
div style="text-align: center"; /div - pozwala wyśrodkować tekst
br - pozwala stworzyć odstęp między wierszami; znacznika br możemy użyć tyle razy, ile życzymy sobie zrobić odstępów
Treści umieszczane na stronie Marketing Online są formatowane przy pomocy języka HTML. Przykładowy fragment jednego z artykułów blogowych wygląda następująco:
Dlaczego znaczniki HTML są tak istotne?
Definicja struktury - znaczniki HTML, takie jak h1, h2, h3 i tak dalej, określają hierarchię nagłówków na stronie. Dzięki temu wyszukiwarki wiedzą, które treści są najważniejsze. Nagłówek h1 powinien zawierać najważniejsze słowo kluczowe, a kolejne nagłówki powinny podzielić treść na bardziej szczegółowe sekcje.
Ułatwienie indeksowania - poprawnie zastosowane znaczniki ułatwiają robotom wyszukiwarek poruszanie się po stronie i indeksowanie jej zawartości. Dzięki temu wyszukiwarki dokładniej oceniają, czy dana strona odpowiada na zapytanie użytkownika.
Poprawa czytelności dla użytkowników - zrozumiała struktura strony ułatwia użytkownikom szybkie znalezienie potrzebnych informacji. A zadowoleni użytkownicy to sygnał dla wyszukiwarek, że strona jest wartościowa!
Meta tagi - znaczniki "meta" służą do dostarczania dodatkowych informacji o stronie, które nie są wyświetlane bezpośrednio. Meta tag description, zawierający krótki opis strony, wpływa na to, jak strona wygląda w wynikach wyszukiwania. Dobrze napisany meta description może zwiększyć współczynnik klikalności (CTR), co z kolei przekłada się na większy ruch na stronie.
Tekst alternatywny obrazka - znacznik alt dostarcza opis alternatywny dla obrazka, który jest czytany przez czytniki ekranowe. Dzięki temu osoby niewidome lub niedowidzące mogą dowiedzieć się, co przedstawia dany obraz. Podpowiada też robotom zawartość grafiki.
Jak sprawdzić kod HTML dowolnej strony?
Wystarczy kliknąć prawym przyciskiem myszy w jakimkolwiek miejscu na stronie, a następnie wybrać opcję "Zbadaj". Wyświetli nam się panel, zawierający kod HTML danej strony. Najeżdżając w tym panelu na konkretny element, podświetli nam się on na stronie - tzn. podświetli się ta część strony, której dotyczy fragment kodu.
Znaczniki HTML - dodatkowe wskazówki 🕯️
Warto stosować znaczniki semantyczne - zamiast używać tagów do stylizacji (np. "b" do pogrubienia), korzystajmy z semantycznych znaczników takich jak "strong" (ważny tekst) czy "em" (tekst podkreślony). Wyszukiwarki lepiej rozumieją znaczenie takiej treści.
Warto stosować znaczniki nawigujące - możemy oznaczać sekcje nawigacyjne za pomocą tagu "nav". Dzięki temu wyszukiwarki łatwiej zorientują się w strukturze strony i zrozumieją, które linki są najważniejsze. Ponadto wykorzystanie tagu "aside" do oznaczenia treści pobocznych, takich jak panele boczne, cytaty czy reklamy, pomaga wyszukiwarkom odróżnić treść główną od dodatkowej.
Warto stosować schema.org - za pomocą schema.org możemy dostarczyć wyszukiwarkom dodatkowych informacji o swojej stronie, takich jak recenzje produktów, wydarzenia czy informacje o firmie. Pozwala to na stworzenie wzbogaconych wyników wyszukiwania (rich snippets) i zwiększa atrakcyjność strony.
Dzięki znacznikom unikniemy duplikacji treści - jeśli mamy wiele wersji tej samej strony (np. z różnymi parametrami URL), użyjmy tagu "link rel="canonical"", aby wskazać wyszukiwarce, która wersja jest oryginalna. Pozwala to zapobiec problemom z indeksowaniem duplikatów.
Hierarchizacja treści - pamiętajmy, że tag "h1" powinien być użyty tylko raz na stronę i zawierać tytuł oraz główny keyword. Kolejne poziomy nagłówków ("h2", "h3" itp.) powinny tworzyć logiczną hierarchię treści. Jednocześnie unikajmy nadmiernego upychania słów kluczowych w nagłówkach. Naturalne i czytelne nagłówki są wartościowsze zarówno dla użytkowników, jak i dla wyszukiwarek.
Podsumowując - znaczniki HTML są nieodłącznym elementem każdej strony internetowej. Ich prawidłowe zastosowanie pozwala nie tylko poprawić pozycjonowanie strony w wyszukiwarkach, ale także zwiększyć jej dostępność dla wszystkich użytkowników. Dlatego warto poświęcić czas na naukę podstaw HTML i zrozumienie, jak poszczególne tagi wpływają na wyświetlanie strony.
➡️
Przeczytaj również:
Pogrubienia w tekście - jak wpływają na UX?
Spadek pozycji w Google - co poszło nie tak?
Czy trzeba pozycjonować się na brandowe słowa kluczowe?
Zapraszamy do naszej Akademii Marketing Online. Jeżeli myślisz o samodzielnym pozycjonowaniu, chcesz zweryfikować swoje dotychczasowe działania i pogłębić wiedzę, nadzorujesz zewnętrznych podwykonawców bądź projekty SEO w swojej firmie - nasze Szkolenie z SEO jest w sam raz dla Ciebie!
