meta tagi

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

Czas czytania: 3 minut

Meta znaczniki (Metadata) zwane również meta tagami to specjalne znaczniki HTML umieszczane 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 przeglądarki.

Gdzie w kodzie strony znajdują się meta tagi?

Meta tagi jak już pisałam wcześniej umieszczane są po między znacznikami <head></head> czyli jeszcze przed sekcją <body>. Aktualnie jest ich całkiem sporo i mogą pełnić one bardzo różnorodne funkcje. Implementacja ich w kodzie może wyglądać np. tak:

<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

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 przeglądarkę internetową w jaki sposób ma interpretować tekst na stronie. Brzmi trochę dziwnie spokojnie to dość proste. 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.

Znacznik title

Znacznik <title> teoretycznie nie do końca jest to znacznik meta jednak pełni on analogiczną funkcję. 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 znalazł się tutaj ponieważ odgrywa istotną rolę w pozycjonowaniu. 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 przeglądarką 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 przeglądarce 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:

%d bloggers like this: