SEO
Tagi HTML (inaczej nazywane znacznikami) stanowią część składni języka HTML i zawierają informacje na temat struktury i wyglądu strony internetowej. Dane umieszczone w tagach są również wykorzystywane przez roboty do pobierania zawartości strony, aby lepiej dopasować wyniki wyszukiwania do intencji użytkownika.
Lista znaczników HTML używanych przed właściwą zawartością strony
<head> — część dokumentu HTML zawarta w tym znaczniku jest niewidoczna dla osoby przeglądającej witrynę, ale zawiera ważne informacje o stronie, przez co ma ogromne znaczenie dla SEO. Dodatkowo w tej sekcji umieszcza się dodatkowe skrypty analityczne, co sprawia, że marketerzy często pochylają się nad jej edycją.
<title> — znacznik w którym określa się tytuł strony (wyświetlany m.in. w wynikach wyszukiwania i na pasku przeglądarki).
<meta> — znacznik szczegółowo opisujący zawartość strony, do prawidłowego działania potrzebuje jednak atrybutu (są to przede wszystkim name, property i content).
<link> — to tag, którego celem jest określenie relacji strony z zewnętrznymi zasobami, podobnie do znacznika meta musi posiadać atrybuty (będą to rel, href, alternate, hreflang oraz type).
Przykład 1
<head>
<title>Słownik HTML</title>
<meta name="description" content="Słownik kodu HTML - opis strony, który chcę wyświetlić w Google." />
</head>W powyższym przykładzie możemy też zaobserwować dwa typy znaczników: podwójne (w tym wypadku head i title, które są zamykane przez powtórzenie ze znakiem / na początku znacznika) i pojedyncze (zamykane znakiem /). Na potrzeby drugiego przykładu wprowadźmy sobie jeszcze pojęcie komentarza HTML.
<!– –> — znacznik komentarza, wszystko co w nim zapiszemy zostanie zignorowane przez przeglądarki i boty.
Przykład 2
<head>
<title>Słownik HTML</title>
<meta name="description" content="Słownik kodu HTML - opis strony, który chcę wyświetlić w Google." />
<!-- dodajemy teraz kod zezwalający botom na indeksowanie strony -->
<meta name="robots" content="index, follow" />
<!-- teraz chcemy dodać adres kanoniczny -->
<link rel="canonical" href="/slownik-html" />
<!-- na koniec przykładu dodamy jeszcze relację z plikiem CSS -->
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
</head>W ramach znacznika link oznacza się też tzw. hreflangi, o których to napisałem już osobny artykuł.
Podstawowe znaczniki HTML w części właściwej strony
<body> — tag w ramach którego umieszczamy całą zawartość strony internetowej.
<hx> — grupa znaczników HTML oznaczająca nagłówki (za “x” wstawiamy cyfrę). Podstawowym z nich jest oczywiście h1, po którym zgodnie z semantyką powinny się pojawiać znaczniki h2, h3, h4, itd.
<p> — tym znacznikiem oznaczamy akapit (paragraf) tekstu.
<ol> — od ang. ordered list, czyli znacznik oznaczający listę uporządkowaną (inaczej mówiąc wypunktowanie).
<ul> — od. ang. unordered list, czyli lista nieuporządkowana.
<li> — od. ang. list item, czyli element listy (zarówno uporządkowanej, jak i nieuporządkowanej).
<img> — znacznik umożliwiający dodanie pliku graficznego do kodu strony (pod kątem SEO często zwraca się uwagę by posiadał atrybut alt).
<strong> — służy do pogrubiania tekstu, jest nieco nowszą i bardziej semantycznie poprawną wersją znacznika <b> (który też pogrubia tekst).
<em> — znacznik umożliwiający pisanie kursywą, analogicznie jego starszą wersją jest <i>.
<a> — jeden z ważniejszych znaczników w SEO, czyli legendarny link. Posiada niezwykle ważne atrybuty takie jak rel oraz href, który bardziej szczegółowo omawiam w artykule o anchor text.
<br> — przeniesienie do nowej linii bez kończenia akapitu czy listy.
Powyższe znaczniki są najczęściej używanymi przez marketerów lub po prostu osoby odpowiedzialne za obsługę CMSa, dlatego zanim wymienię kolejne, przejdźmy szybko przez kolejny przykład.
Przykład 3
<body>
<h1>Pamiętaj by każda Twoja podstrona miała nagłówek H1</h1>
<p>Kiedyś SEOwcy mówili, że jeśli jakaś fraza jest napisana w znaczniku strong, to mocniej "klepie". <strong>To mit</strong>.</p>
<h2>Inne ważne zasady w pozycjonowaniu stron</h2>
<ol>
<li>Należy zachowywać kolejność nagłówków.</li>
<li>Listy można w sobie zagnieżdżać:
<ul>
<li>to jest pierwszy myślnik punktu drugiego,</li>
<li>a to drugi.</li>
</ul>
</li>
<li>Tutaj mamy punkt trzeci, którym <em>kończymy</em> listę.</li>
</ol>
<h3>Jak wstawiać odnośniki w języku HTML?</h3>
<p>Możemy wstawiać je w tekście, np. tak: <a href="https://example.com">mój anchor text</a>.</p>
<p>Odnośnikiem może być również grafika zawarta w img!</p>
<a href="https://example.com"><img src="https://example.com/przykladowa-grafika.jpg" alt="grafika kotwicy" width="500" height="600"></a>
</body>Mniej znane, ale równie ważne tagi HTML
Strukturę dokumentu HTML buduje się nie tylko opierając się na prostych paragrafach i nagłówkach. Omówmy teraz najważniejsze z nich.
<div> — to podstawowy znacznik stosowany podczas tworzenia stron internetowych. Oznacza on ni mniej ni więcej blok zajmujący całą dostępną szerokość.
<section> — wprowadzony w HTML5 znacznik, mający dokładnie takie same zastosowanie jak div, ale semantycznie oznaczający większą sekcję.
<header> — analogicznie do section, jest to kolejne wydanie diva, tym razem z dodatkowym semantycznym znaczeniem — nagłówka strony (nie mylić z nagłówkiem tekstowym).
<footer> — kolejna “nowość” w HTML5, czyli znacznik stopki strony.
<article> — w tym wydaniu diva mamy do czynienia ze znacznikiem przeznaczonym do umieszczenia właściwej treści dokumentu.
Oczywiście w praktyce mało kto operuje tymi dodatkowymi znacznikami. W zdecydowanej większości programista stosuje wyłącznie znacznik <div> nadając mu odpowiednie klasy i ID (które następnie styluje w plikach CSS).