Najważniejsze meta tagi, które powinien znać każdy SEOwiec
Jednym z elementó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
Czym są meta tagi?
Meta tagi to znaczniki umieszczane w kodzie HTML strony w sekcji head. Inaczej określane są jako meta danych. Ich zadanie polega na przekazywanie przeglądarkom, wyszukiwarkom 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ą tagami 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ść strony 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 przekazuje robotom informacje, w jaki sposób mają skanować i indeksować zawartość strony. Możemy w kodzie strony umieścić jedną dyrektywę dotyczącą wszystkich robotów, lub dyrektywny dla pojedynczych botów 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.
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.
- follow - dyrektywa informująca roboty o tym, że mają podążać za linkami umieszczonymi na stronie. Jest to domyślne zachowanie robota na stronie.
- 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ślne 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
-1zezwala robotom na wybranie fragmentu o dowolnej długości,0blokuje 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,standardilarge. - max-video-preview - określa długość podglądu wideo w sekundach, który może pojawić się w SERPach. Wartość
-1to zezwolenie na nielimitowany podgląd, a0zablokowanie 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 jest niedostępny po podanej dacie.
Title
Choć title nie jest meta tagiem, często przywołuje się go razem z nimi. 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 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).
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 ten meta tag, wybierając pasującą do zapytania zawartość strony internetowej. Według badań agencji marketingowej Portent, dzieje się tak w ok 70% przypadków.
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.
W przygotowaniu title i meta description odpowiedniej długości mogą pomóc ogólnodostępne symulatory SERPów.
Meta Keywords
Większość wyszukiwarek internetowych przestała 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. 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 artykułu: Jak dodać stronę do Google Search Console
<meta name="google-site-verification" content="token" />
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 X (dawniej Twitter) - jeżeli nie wykryje Twitter Card - zadowoli się tymi znacznikami.
Prawidłowo wdrożone znaczniki meta 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 treści 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 . 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:car
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.
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śnie 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ą.
