Najważniejsze meta tagi HTML, które powinien znać każdy SEOwiec
Jedną z podstawowych czynności związanych z pozycjonowaniem stron jest optymalizacja meta tagów. Z tego artykułu dowiesz się, czym są znaczniki meta i jak jest ich rola w SEO. Zapoznasz się również z najważniejszymi meta tagami umieszczanymi w kodzie HTML.
Jednym z punktów optymalizacji strony pod silniki wyszukiwania jest weryfikacja meta tagów. Pojęcie to zapewne bliżej znane jest jedynie osobom zajmującym się pozycjonowaniem czy tworzeniem stron internetowych. Jednak nawet przeciętny użytkownik internetu styka się z nimi niemal codziennie. W tym artykule przybliżę nieco, czym są i do czego służą meta tagi.
Z tego artykułu dowiesz się:
- Czym są meta tagi?
- Podstawowe meta tagi
- Meta Charset
- Meta Viewport
- Meta Robots
- Title
- Meta Description
- Meta Keywords
- Meta Google Site Verification
- Znaczniki meta mediów społecznościowych
- Znaczniki Open Graph – Meta tagi Facebooka
- Twitter Card – znaczniki meta Twittera
- Jak sprawdzić meta tagi strony WWW lub sklepu internetowego?
- Jak dodać meta tagi na stronę?
- Znaczenie meta tagów w SEO
Czym są meta tagi?
Meta tagi to znaczniki umieszczane w kodzie dokumentu HTML w sekcji head. Inaczej określane są mianem meta danych. Ich zadanie polega na przekazywanie przeglądarkom, wyszukiwarkom (np. robotom Google), a nawet portalom społecznościowym informacji o stronie internetowej. Część z nich ma istotny wpływ na pozycje w wynikach wyszukiwania, inne odpowiadają za wygląd udostępnionego linku na Facebooku czy Twitterze.
Choć rola znaczników meta w pozycjonowaniu nie jest już tak duża jak to było jeszcze kilka lat temu, warto poświęcić uwagę ich prawidłowemu zastosowaniu. Większość popularnych CMS-ów pozwala z pozycji panelu zmienić ustawienia niektórych meta tagów, inne kodowane są w szablonie i niekiedy bez pomocy programisty się nie obejdzie.
Meta tagi są znacznikami pojedynczymi, co oznacza, że nie mają one znacznika zamykającego. Ich składnia jest prawie zawsze taka sama:
<meta name="nazwa-tagu" content="wartość"/>
Przyjrzyjmy się zatem najczęściej używanym meta tagom i ich wpływowi na pozycjonowanie stron.
Podstawowe meta tagi
Meta Charset
Pierwszym znacznikiem meta, który powinien pojawić się zaraz po otwarciu tagu <head> jest meta charset.
<meta charset="utf-8" />
Definiuje on zestaw znaków, jaki będzie stosowany w dalszej części strony. Google zaleca, aby stosować kodowanie Unicode/UTF-8, które zresztą jest jedynym poprawnym sposobem kodowania dokumentów w standardzie HTML5. Znacznik meta charset powinien w całości znaleźć się w pierwszych 1024 bajtach dokumentu.
Meta Viewport
Kolejnym istotnym meta tagiem, który w dobie mobilnego internetu, możemy znaleźć w kodzie źródłowym niemal każdej strony, jest meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Informuje on przeglądarkę, w jaki sposób strona powinna być skalowana w zależności od rozdzielczości urządzenia, na którym została wyświetlona.
Zastosowanie wartości „width=device-width” powoduje, że szerokość treści strony dopasowuje się do szerokości urządzenia.
Z kolei ustawienie wartości initial-scale=1.0 informuję o zależności między pikselami CSS a pikselami urządzenia w chwili wejścia na stronę.
Poza wyżej wymienionymi deklaracjami, do meta viewport można także dodać:
- minimum-scale - określa minimalne przybliżenie, jakie może wykonać użytkownik
- maximum-scale - określa maksymalne przybliżenie, jakie może wykonać użytkownik
- user-scalable - czy użytkownik może wykonać zbliżenie
Meta Robots
Znamy już meta tagi odpowiedzialne za definiowanie zestawu znaków i responsywność Twojej strony internetowej na urządzeniach mobilnych. Pora przejść do znacznika mówiącego robotom co im wolno, a czego nie wolno na stronie.
<meta name="user-agent" content="dyrektywy" />
Meta robots informuje roboty wyszukiwarek, w jaki sposób mają skanować i indeksować zawartość strony. Możemy w kodzie strony umieścić jedną dyrektywę dotyczącą wszystkich botów, lub dyrektywny dla pojedynczych robotów wyszukiwarek takich jak np. robota Google. Należy jednak pamiętać, że złośliwe roboty nie będą stosować się do tego znacznika.
<meta name="robots" content="dyrektywy" />
W powyższym przykładzie wartość atrybutu name wskazuje, że znacznik dotyczy wszystkich robotów. Jeżeli chcesz, by skierowana była do konkretnego, jako wartość podaj nazwę bota (nazwy popularnych robotów znajdziesz w artykule: Plik robots.txt – zastosowania i przykłady)
Dyrektywy stosowane w znaczniku meta robots:
- index - informacja dla silnika wyszukiwarki, że może zaindeksować tę stronę. Jest to domyślna wartość i nie musi być dodawana.
- noindex - przeciwieństwo poprzedniej reguły. Roboty Google i innych wyszukiwarek nie umieszczą danej podstrony w indeksie. Meta robots noindex sprawia, że strony nie znajdziemy w na stronach wyników wyszukiwania.
- follow - dyrektywa informująca roboty o tym, że mają podążać za linkami umieszczonymi na stronie. Jest to domyślne zachowanie robota na stronie, więc meta robots follow jest na stronie zbędny.
- nofollow - przeciwieństwo powyższej reguły. Roboty nie mogą podążać za linkami.
- noimageindex - jak pewnie łatwo się domyślić, dyrektywa ta zabrania indeksowania obrazów znajdujących się na stronie.
- all - zezwala zarówno na indeksowanie i podążanie za linkami. Jest to domyśle zachowanie botów na stronie i nie ma potrzeby umieszczania jej w meta tagach.
- none - przeciwieństwo powyższej reguły. Odpowiednik zastosowania jednocześnie noindex, nofollow.
- noarchive - wyszukiwarki nie będą przechowywały kopii strony w pamięci podręcznej.
- nosnippet - dyrektywa informująca o tym, by nie wyświetlać snippetów (np. meta description) w wynikach wyszukiwania.
- max-snippet - określa, jak długi powinien być krótki opis strony pojawiający się w SERPach. Podanie wartości -1 zezwala robotom na wybranie fragmentu o dowolnej długości, 0 blokuje wyświetlanie opisu, a liczba większa od zera informuje o ilości znaków możliwych do wyświetlenia.
- max-image-preview - informacja o maksymalnym rozmiarze podglądu obrazu z wynikach wyszukiwania. Możliwe wartości to none, standard i large.
- max-video-preview - określa długość podglądu wideo w sekundach, który może pojawić się w SERPach. Wartość -1 to zezwolenie na nielimitowany podgląd a 0 zablokowanie podglądu wideo.
- notranslate - zabrania wyszukiwarce Google umieszczenia obok wyniku wyszukiwania przycisku, który służy do tłumaczenia danej strony internetowej.
- unavailable_after - dyrektywa informująca roboty wyszukiwarki o tym, że dany adres URL nie powinien trafić do indeksu Google po ustawionej dacie.
„Meta” Title
Choć title jest niezależnym znacznikiem HTML, często przywołuje się go razem z innymi meta tagami. Ma on istotne znaczenie przy pozycjonowaniu stron w wynikach wyszukiwania Google.
<title>tytuł strony</title>
Wyświetla się on w wynikach wyszukiwania i na dwojaki sposób może przyczynić się do osiągnięcia celu, jakim jest skłonienie użytkownika do wejścia na naszą stronę internetową.
Po pierwsze: słowa kluczowe zawarte w znaczniku title pomagają uzyskiwać lepsze pozycje. Wyższe pozycje z kolei przekładają się na większy ruch na stronie.
Po drugie: Dobrze zbudowany meta tag title, mimo słabszej pozycji strony, może dać Ci wyższy współczynnik klikalności.
Title wyświetla się również wykorzystywany przez przeglądarki internetowe (tytuł strony wyświetla się w zakładce) oraz przez media społecznościowe (jeżeli inne meta tagi są niedostępne).
Google potrafi zinterpretować title tag, ale coraz częściej zastępuje go np. nagłówkiem H1
Meta Description
Meta tag description to opis strony, który Google wyświetla zaraz pod title w wynikach wyszukiwania. Opis powinien być uzupełnieniem tytułu strony.
Jeszcze kilka lat temu, jedną z technik pozycjonowania strony, było umieszczanie słów kluczowych w meta tagach description. Obecnie nie jest on czynnikiem rankingowym, ale – odpowiednio skonstruowany – może nakłonić użytkownika do odwiedzenia strony.
<meta name="description" content="opis strony" />
W dużej mierze Google nadpisuje meta opis, wybierając pasującą do zapytania zawartość strony internetowej. Według badań agencji marketingowej Portent dzieje się tak w ok. 70% przypadków [1].
Warto jednak przygotować meta description dla każdej strony, aby uniknąć sytuacji, w której Google z braku laku wyświetla np. fragment polityki cookies. Dobrze przygotowany opis potrafi także zwiększyć współczynnik klikalności (ang. Click Through Rate)
W przygotowaniu title i meta description odpowiedniej długości mogą pomóc ogólnodostępne symulatory SERPów.
Przykład meta description z wyszukiwarki Google
Meta Keywords
Aktualnie Google przestał uznawać meta tag keywords i korzystać z danych w nim podawanych do celów indeksowani stron. Stało się tak za sprawą jego nadużywania w postaci stosowania tzw. keyword stuffing – czyli upychania słów kluczowych. Obecnie nie ma on żadnego wpływu na pozycję strony, a Google sam ocenia, na jakie frazy dana podstrona ma się wyświetlać. Nic nie stoi na przeszkodzie, aby wykorzystać meta keywords w wewnętrznej wyszukiwarce, to tworzenia własnych, pomocnych użytkownikowi indeksów.
<meta name="keywords" content="słowo kluczowe 1, słowo kluczowe 2, słowo kluczowe 3" />
Meta Google Site Verification
Umieszczony w sekcji nagłówkowej dokumentu ten znacznik meta odpowiada za weryfikację własności witryny w narzędziu Google Search Console. Więcej o tym sposobie potwierdzania własności dowiesz się z mojego poprzedniego artykułu: Weryfikacja usługi w Google Search Console – Krok po kroku.
<meta name="google-site-verification" content="token" />
Social Media Meta Tags, czyli znaczniki meta mediów społecznościowych
Na początku artykułu wspomniałem o tym, że istnieje spora grupa meta tagów, które przeznaczone są do komunikacji pomiędzy stronami internetowymi a mediami społecznościowymi. Do najbardziej popularnych zalicza się oczywiście Open Graph oraz Twitter Card. Choć Open Graph stworzony został przez Facebooka, korzystają z niego inne platformy społecznościowe, takie jak LinkedIn czy Pinterest. Także Twitter – jeżeli nie wykryje Twitter Card – zadowoli się tymi znacznikami.
Prawidłowo wdrożone odpowiednie meta tagi pozwalają na lepszą prezentację udostępnianych treści. Co jednak gdy ich nie ma?
Roboty pobiorą znacznik title, pierwszy napotkany tekst i losowe zdjęcie. Prawda, że taki wygląd linku w Social Mediach nie będzie zbyt atrakcyjny?
Przejdźmy zatem do opisu poszczególnych znaczników meta przeznaczonych dla mediów społecznościowych.
Znaczniki Open Graph – Meta tagi Facebooka
Znaczniki Open Graph mają składnię zbliżoną do standardowych meta tagów z jedną różnicą. Zamiast parametru name występuje parametr property.
<meta property="og:type" content="article" />
og:url
W tym meta tagu podajemy adres kanoniczny strony. Nie powinien on zawierać zmiennych związanych z sesją czy innych zbędnych parametrów.
og:title
Tytuł podstrony. Może on różnić się od tego stosowanego w title i wg. zaleceń Facebooka nie powinien zawierać nazwy strony czy firmy.
og:description
Od 2 do 4 zdań zawierających informację, o czym jest dana strona. Opis będzie wyświetlał się poniżej tytuły postu.
og:image
Adres URL wskazujący na obraz, który ma wyświetlić się przy udostępnianej treści. Możemy również zastosować bardziej szczegółowe meta tagi, które określą wysokość i szerokość obrazu czy też jego typ.
fb:app_id
Jeżeli chcemy skorzystać z Facebook Insights i sprawdzić, jaki ruch przeszedł z Facebooka na stronę musimy dodać app ID na daną podstronę. Do tego służy właśnie ten tag.
og:type
Określa typ zawartości strony udostępnianej w Social Mediach. Domyślnie jest to typ website, ale możemy także oznaczyć naszą treść jako: music, video, article, book czy profile. Każdy z typów oferuje dodatkowe własności.
og:locale
Lokalizacja zasobu. Domyślnie jest to en_US. Można zauważyć pewne podobieństwo do deklaracji w znaczniku <html>. Tutaj jednak zamiast dywizu stosowany jest znak podkreślenia.
Twitter Card – znaczniki meta Twittera
Budowa znaczników meta Twittera jest taka sama jak w meta tagach klasycznych.
<meta name="twitter:title" content="tytul-artykulu" />
Meta tagi dla Twittera mogą składać się z następujących elementów:
twitter:card
Określa typ karty, a jaką mamy do czynienia. Możemy wybrać spośród 4 typów:
- Summary Card (content="summary") - karta zawiera tytuł, opis oraz miniaturę zdjęcia.
- Summary Card with Large Image (content="summary-large-image") - zawiera podobne dane do poprzedniej karty, jednak zamiast miniatury będzie wyświetlany większy obraz.
- App Card (content="app") - Karta zawierająca bezpośrednią ścieżkę do pobrania aplikacji mobilnej.
- Player Card (content="player") - Karta pozwalająca na wyświetlenie video lub audio.
twitter:title
Określa tytuł udostępnianej treści. Odpowiednik og:title.
twitter:description
Krótki opis udostępnianej treści. Odpowiednik og:description.
twitter:site
Nazwa użytkownika – poprzedzona @ – do której powinna być przypisana karta.
twitter:image
Określa adres unikalnego obrazu, które ma ilustrować treść. Nie należy używać obrazów, które powielają się na wielu podstronach (np. logo). Obrazy obsługiwane są w proporcjach 2:1 o minimalnych wymiarach 300 x 157 px. Obrazy nie mogą być większe niż 4096 x 4096 px i ważyć więcej niż 5 MB. Twitter obsługuje formaty JPG, PNG, WEBP i GIF.
twitter:url:alt
Ten meta tag zawiera alternatywny opis, udostępnianego z zawartością zdjęcia.
Powyższe meta znaczniki nie są wszystkimi, jakie można użyć do opisania zawartości swojej strony. Nic nie stoi na przeszkodzie, aby stworzyć własny meta tag i wykorzystać go np. przy tworzeniu zaawansowanej wyszukiwarki wewnętrznej.
Jak sprawdzić meta tagi strony WWW lub sklepu internetowego?
Do sprawdzenia, jakie mate tagi obecne są na konkretnej podstronie, możesz wykorzystać kilka metod.
Pierwszym sposobem jest ich weryfikacja w kodzie HTML. Wystarczy, że w dowolnym miejscy na stronie, klikniesz prawym przyciskiem myszy i wybierzesz pozycję: „Pokaż źródło strony”.
Źródło strony zawierające wybrane meta tagi
Drugi sposób to skorzystanie z DevTools — narzędzi dla developerów wbudowanych w przeglądarkę Chrome (inne przeglądarki mają podobne opcje). Aby uruchomić wspomniane narzędzie, wystarczy kliknąć prawym przyciskiem myszy w dowolnym miejscu na danej stronie i wybrać z menu „Zbadaj”. Innym sposobem na uruchomienie DevTools są skróty klawiszowe: Options + Command + I, Options + Command + J, Options + Command + C lub CRTL + Shift + C. W zakładce „Elementy” będziesz mógł odszukać wybrane meta tagi.
Dla osób mniej technicznych pomocne będą wszelakie wtyczki i rozszerzenia do przeglądarek. Osobiście używam META SEO Inspector, który prócz meta tagów podaje też szereg innych istotnych informacji mających wpływ na pozycjonowanie strony internetowej.
Zrzut SEO Meta Inspector
Jeżeli chciałbyś masowo sprawdzić meta tagi na dużej liczbie podstron, to wyżej wymienione metody mogą być mało efektywne. W takiej sytuacji sprawdzi się narzędzie do crawlowania, takie jak Screeming Frog lub wykorzystanie arkuszy Google i funkcji IMPORTXML.
Jak dodać meta tagi na stronę?
Nie ma jednego sposobu na dodanie meta tagów do strony. Niektóre CMS’y (systemy do zarządzania treścią) umożliwiają modyfikację tytułu czy opisu strony np. za pomocą odpowiedniego rozszerzenia lub wtyczki. Dobrym przykładem jest tutaj plugin Yoast SEO, z pomocą którego ustawimy Title, Description, znaczniki Open Graph czy też dyrektywy dla robotów Google i nie tylko.
Yoast SEO umożliwa uzupełnienie nie tylko podstawowych meta tagów, ale też tych związanych z mediami społecznościowymi
Z kolei dodawanie meta tagów takich jak Charset czy Viewport wiązać się będzie z modyfikacją szablonu strony.
Znaczenie meta tagów w SEO
Jeżeli kiedykolwiek miałeś przed sobą ofertę agencji SEO, jednym z punktów z pewnością była optymalizacja meta tagów. Pod tym pojęciem kryje się właście sprawdzenie, stworzenie lub modyfikacja istniejących znaczników meta, tak aby były one jak najbardziej użyteczne w procesie pozycjonowania witryny.
Idealną sytuacją jest, gdy sprawdzeniu poddane zostaną meta tagi każdej podstrony – lub chociaż najistotniejszych stron. Duże znaczenie dla SEO mają:
- znacznik title
- meta tag robots
- meta tag vievport
- meta tag charset
Zoptymalizować warto też meta tagi description – choć nie mają one bezpośredniego wpływu na wyniki wyszukiwania.
Dla wygody i lepszej prezencji konkretnej podstrony wskazane jest też przyjrzenie się tagom mediów społecznościowych.
Mam nadzieję, że przybliżyłem Ci temat meta tagów i ich rolą w procesie pozycjonowania. Jeżeli prowadzisz blog, sklep internetowy lub stronę firmową i chciałbyś zadbać o widoczność swojej strony w wynikach wyszukiwania, skontaktuj się ze mną.
Od 2018 roku związany jestem z marketingiem internetowym. Specjalizuję się w optymalizacji stron internetowych i sklepów. Obecnie pełnię funkcję Marketing Managera w Agencji KS. Prywatnie jestem miłośnikiem fantastyki oraz zapalonym czytelnikiem.