Co to są meta tagi (dane) i do czego je wykorzystywać?

Czas czytania 4 minuty

Meta znaczniki (Metadata) zwane również meta tagami to specjalne znaczniki HTML, które umieszcza się w sekcji <head></head> strony internetowej.

Ich głównym zadaniem jest informowanie robotów wyszukiwarki o treści jakiej mogą znaleźć na podstronach witryny oraz o sposobie jej interpretacji. Niektóre tagi określają także uprawnienia do odwiedzania jej przez roboty wyszukiwarek.

Gdzie w kodzie strony znajdują się meta tagi?

Meta tagi jak już pisałam wcześniej umieszczane są pomiędzy znacznikami <head></head>, czyli jeszcze przed sekcją <body>. Aktualnie stosuje się całkiem sporo różnego typu meta tagów o bardzo różnych funkcjach i zastosowaniu. Przykładowa implementacja wygląda następująco np.:

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="description" content="...">
  <meta name="keywords" content="...">
  <meta name="author" content="...">
</head>

To oczywiście tylko przykłady w praktyce bowiem można spotkać znaczników tego typu dużo więcej.

Czy meta znaczniki / dane są widoczne w wynikach wyszukiwania?

Jak najbardziej, część z nich widoczna jest także dla zwykłych czytelników w wynikach wyszukiwania np. <title>. Zadaniem tej grupy jest zachęcenie potencjalnych użytkowników do odwiedzenia strony internetowej.

fragment wyników wyszukiwania z title i description
fragment wyników wyszukiwania

Obecnie nie zawsze wyświetla się title i description strony w wynikach wyszukiwania. Czasami wyszukiwarka zastępuję je fragmentem strony – lepiej pasującym do zapytania. Przykładowo zamiast title wyświetli jeden z nagłówków.

Istotne meta znaczniki dla kodu strony internetowej

Określanie kodowania znaków w dokumencie

 <meta charset="UTF-8">

To w praktyce jeden z najważniejszych elementów na stronie internetowej. Informuje on bowiem wyszukiwarkę internetową w jaki sposób ma interpretować tekst na stronie. Brzmi trochę dziwnie spokojnie to dość proste – przynajmniej w użyciu.

Jak z pewnością już wiecie większość w Internecie, ale nie tylko wszystko nastawione jest głównie na język angielski. Nawet klawiatura do komputera zawiera jedynie litery dostępne w alfabecie łacińskim, ale z uwzględnieniem jedynie tych stosowanych w angielskim. Podobnie jest z kodowaniem stron. Język polski, ale nie tylko posiada jednak litery, które nie występują w alfabecie angielskim. Dlatego by z nich poprawnie skorzystać, i nie wyświetliły nam się dziwne znaczki musimy ustawić odpowiednie kodowanie dla witryny.

W przypadku języka Polskiego oraz dla kilku innych świetnie sprawdzi się UTF-8.

Kodowanie znaków na stronie internetowej <- więcej na ten temat

Znacznik title

Znacznik <title> właściwie to nie do końca jest znacznikiem meta (według niektórych źródeł). Jednak pełni on bardzo ważną funkcję i jak gdyby uzupełnia meta tagi. Zawiera tytuł strony internetowej, na której aktualnie się znajdujemy. Tak naprawdę nie jest on meta tagiem a osobnym tagiem wchodzącym w strukturę witryny. Title podobnie jak meta tagi znajduje się w sekcji nagłówka strony czyli <head>.

Znacznik ten odgrywa istotną rolę w procesach rankingowych stron w różnych wyszukiwarkach. A tym samym wykorzystywany jest w procesie pozycjonowania stron internetowych. Dlatego też odpowiednie skonfigurowanie tego znacznika jest bardzo ważne. Jak pokazałam na obrazku powyżej jest on widoczny w wynikach wyszukiwania. Znaleźć go można również na belce karty witryn.

Ważne jest by każda podstrona miała swój własny unikalny <title>. W 2021 roku nastąpiła zmiana w sposobie wyświetlania TITLE w wynikach wyszukiwania możecie o niej poczytać tutaj!

Meta description

<meta name="Description" content="Opis strony">

Jest to znacznik opisujący treść strony – poza kodem strony widoczny jest również w wynikach wyszukiwania. W przypadku jego braku lub większej trafności w tekście witryny w jego miejsce wstawiony zostanie fragment treści strony. Tekst ten powinien mieć długość około 115 – 130 znaków ze spacjami włącznie.

Znacznik ten ma duże znaczenie podczas optymalizacji strony internetowej. Warto w nim umieścić słowa na które chcemy by nasza strona pojawiała się w wynikach wyszukiwania. Oczywiście trzeba pamiętać, że słowa te muszą także pokazywać się w tekście strony.

Meta keywords

<meta name="Keywords" content="Słowa kluczowe">

Meta keywords kiedyś odgrywał istotną rolę podczas pozycjonowania witryny internetowej. Obecnie nie jest on brany pod uwagę przez większość wyszukiwarek internetowych. W miejscu „Słowa kluczowe” umieszczało się po przecinku słowa kluczowe dla konkretnej podstrony.

Warto jednak wziąć pod uwagę fakt, że algorytm ulega ciągłym zmianą.

Meta robots

Jest to tag wpływający na wiele istotnych cech strony w zależności od posiadanej wartości.

<meta name="robots" content="wartość">

Przyjmowane wartości (umieszczamy je w miejscu słowa wartość z przykładu)

  • index – jest to wartość domyślna, zezwala wyszukiwarkom na swobodną indeksację witryny
  • noindex – blokuje wyszukiwarką możliwość indeksacji konkretnej strony
  • follow –  jest to wartość domyślna pozwala ona wyszukiwarką na indeksowanie stron, do których odnośniki umieszczone są na stronie
  • nofollow – nie pozwala na podążanie za odnośnikami zawartymi na stronie
  • none – takie samo działanie jak noindex, nofollow
  • noarchive – nie zezwala na to by strona została zapisana w pamięci cache
  • nosnippet – nie zezwala na wyświetlanie opisu strony (description) w wynikach wyszukiwania
  • noimageindex – nie zezwala na wyświetlanie witryny jako źródła grafiki widocznej w wyszukiwarce google
  • nocache – działa jak noarchive

Meta viewport

Zadaniem tagu meta viewport informowanie o wymiarach i skalowaniu witryny dla różnych urządzeń. Tag ten jest niezbędny do optymalizacji stron responsywnych.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Dodanie autora strony

<meta name="author" content="...">

Z pomocą powyższego kodu można najprościej rzecz ujmując można określić kto jest autorem danej witryny.

Podsumowanie – czyli czy to wszystko co muszę wiedzieć?

W praktyce zamieszczone informacje to tylko wstęp. O każdym z tych znaczników można by sporo napisać, i być może kiedyś przygotuję takie wpisy. To co warto jednak zapamiętać to to, że oprócz tych znaczników na stronach internetowych stosuje się także inne np.:

Prawdopodobnie też ilość znaczników z biegiem czasu będzie rosła. Inna kwestia czy będą one stosowane.

źródła: