Co to są meta tagi i jak je dodać na stronie? Kluczowe znaczniki HTML

przez Brandbay.pl · Opublikowane 28/10/2019 · Zaktualizowane 06/08/2020

Co to są meta tagi?

Meta tagi (inaczej: metatags, znaczniki meta) to zbiór znaczników meta znajdujących się w sekcji <head></head> strony internetowej w formacie HTML lub XHTML. Tego typu metadane służą do opisu zawartości strony www i mogą być pomocne w pozycjonowaniu oraz zachęceniu użytkowników do odwiedzenia strony www – wskazywać użytkownikom czego dotyczy dana strona.
Poniżej znajduje się kilka informacji dotyczących dodawania metadanych do strony w kodzie html oraz w WordPressie oraz optymalizacji kluczowych znaczników html: title, meta name description, meta name viewport, etc.

Jak dodać meta tagi na stronie w kodzie html?

Klasyczna strona pisana w html zaczyna się od sekcji head, w której to sekcji umieszczamy informacje takie jak: tytuł strony, meta tagi, odnośniki do wykorzystywanych skryptów, css. W praktyce umieszczenie znaczników meta html w sekcji head może wyglądać tak jak w poniższym przykładzie.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Co to są meta tagi i jak je dodać na stronie? Kluczowe znaczniki HTML.</title>
<meta name=”Description” content=”wskazówki dotyczące optymalizacji znaczników meta w kodzie html i na WordPressie: title, meta name description, keywords, viewport, meta charset i inne” />
</head>

Oczywiście znaczników może być więcej, np. te dotyczące sieci społecznościowych. Przykładowo:

Jak dodać meta tagi w WordPressie

Jeżeli zastanawiamy się jak dodać meta tagi wordpress, to tutaj mamy kilka możliwości:

1. Korzystając z WordPressa możemy skorzystać z jednej z popularnych wtyczek, takich jak: All in One SEO Pack, Yoast SEO lub innych.

Przykładowo, w przypadku All in One SEO, po aktywowaniu wtyczki, w panelu ‘ustawienia ogólne’ możemy dodać odpowiednie meta tagi: nazwa (title), opis (description). Na bieżąco jesteśmy tu informowani czy przekraczamy dopuszczalną liczbę znaków w danym opisie (zoptymalizowaną pod kątem wyszukiwarek).

2. Możemy też dodać te meta tagi samodzielnie wchodząc w zakładkę ‘Wygląd’ > ‘Edytor’ i wyszukać plik ‘Nagłówek motywu (header.php)’. Tam dodajemy interesujące nas meta tagi w odpowiednim miejscu sekcji <head>.

Meta tagów związanych z kodowaniem strony i wyświetlaniem na urządzeniach mobilnych raczej nie będziemy potrzebowali zmieniać, gdyż są one zapisane w WordPress-owych szablonach.

Jeżeli po wszystkim chcemy sprawdzić jakie znaczniki posiada nasza strona możemy wejść na daną stronę i sprawdzić źródło tej strony (prawy przycisk myszki: ‘pokaż źródło strony’).

Więcej o meta tagch w WordPressie: https://codex.wordpress.org/Meta_Tags_in_WordPress

Kluczowe znaczniki HTML

Możliwych do dodania do strony meta tagów są setki, ale umieszczanie wszystkich wydaje się całkowicie niepotrzebne (w świetle tego co mówią przedstawiciele samych wyszukiwarek), ponieważ tylko kilka z nich jest kluczowych zarówno ze względu na pozycję w wynikach wyszukiwania jak i wygląd fragmentu pojawiającego się w wyszukiwarce.

Kluczowe znaczniki HTML według większości ekspertów, to:

title – tytuł strony, pojawiający się w wyszukiwarce,
name=”description” – opis strony pojawiający się w wyszukiwarce,
charset – kodowanie strony,
name=”viewport” – dostosowanie strony do urządzeń mobilnych.

Inne popularne, ale mniej istotne meta tagi to przykładowo:

name=”keywords” – słowa kluczowe,
name=”robots” – instrukcje dla robotów wyszukiwarek,
name=”google-site-verification” – weryfikacja webmastera Google Search Console,
name=”msvalidate.01″ – weryfikacja Bing,
name=’yandex-verification’ – weryfikacja Yandex,
name=”author” – określenie autora strony,
name=”copyright” – określenie właściciela praw autorskich do strony,
social meta tags – tagi dla mediów społecznościowych (Facebook, Twitter, etc.),
etc.

Rozbudowane listy meta tagów znajdziemy przykładowo na stronach:

Kluczowe znaczniki HTML

title – jak długi powinien być i co zawierać

<title>Co to są meta tagi i jak je dodać na stronie? Kluczowe znaczniki HTML.</title>

1. Warto zwrócić uwagę na to, że tytuł strony nie jest tym samym co ‘meta tytuł’ – istotny znacznik HTML znajdujący się w sekcji head. Treść znacznika title pojawia się bowiem w wynikach wyszukiwania, a to na podstawie tytułów użytkownicy w dużej mierze decydują czy odwiedzić daną stronę czy nie. Title wpływa także na pozycję w wynikach wyszukiwania.

2. Tytuł powinien mieć odpowiednią długość. Długość tytułu wyświetlana przez Google i inne wyszukiwarki (Bing, Duckduckgo) to maksymalnie około 60 znaków, dlatego najlepiej stworzyć tytuł odrobinę krótszy. Podobno w 2019 roku Google zwiększyło długość wyświetlanych tytułów do 70 znaków, więc jeżeli chcemy, możemy spróbować z dłuższym tytułem, ale dobrą praktyką w większości wciąż jest tytuł do 60 znaków.

3. Tytuł może zawierać słowa kluczowe, które wskażą użytkownikom co mogą znaleźć na stronie, ale pamiętajmy jednocześnie, że Google może też zdecydować się na wyświetlenie innego tytułu niż ten który podaliśmy gdy uzna, że tytuł zawiera zbyt dużo słów kluczowych lub nie odpowiada na potrzeby użytkowników, nie odzwierciedla treści strony.

4. Należy pamiętać, aby najważniejsze słowa kluczowe w tytule dawać na jego początku.

5. Jeżeli mamy rozpoznawalną markę, możemy umieścić jej nazwę w tytule, co może zaowocować zwiększoną klikalnością.

6. Więcej na temat tworzenia tytułów strony można znaleźć w pomocy Google:
https://support.google.com/webmasters/answer/35624?hl=pl

meta description – co to za tag i jak go zoptymalizować

1. Opis ze znacznika meta name=”description” pojawia się w wynikach wyszukiwania pod tytułem strony. Nie wpływa on bezpośrednio na pozycję w wynikach wyszukiwania, ale wpływa na to co widzi użytkownik kiedy już się strona wyświetli.

2. Warto pamiętać, że podobnie jak w przypadku title, Google czasami samodzielnie decyduje o tym co ma się pojawić w opisie strony, wybierając fragment danej strony jako lepszy niż to, co znajduje się w description.

3. Podobnie jak w przypadku tytułu, istotnym zagadnieniem jest w przypadku meta description – ile znaków powinien on zawierać. W 2019 roku jest to 160 znaków.

4. Opis znajdujący się w meta description poszczególnych podstron powinien być dostosowany do tego, co znajduje się na stronie, treść różna w zależności od podstrony – nie należy używać tego samego opisu na wszystkich podstronach.

5. Więcej na temat tworzenia opisów znajduje się na stronie pomocy Google:
https://support.google.com/webmasters/answer/35624?hl=pl

meta charset – jakiego kodowania używamy na stronie

Charset wskazuje na użyty na stronie zestaw znaków. Google zaleca stosowanie kodowania Unicode/UTF-8. W przypadku tego tagu nie mamy specjalnie wiele do zrobienia. Wystarczy wkleić go zaraz na początku sekcji metadanych i gotowe.

meta name=”viewport” – przystosowanie do urządzeń mobilnych

Meta tag ‘viewport’ służy do powiadomienia danej przeglądarki internetowej w jaki sposób ma renderować stronę na smartfonie czy tablecie. Dla Google obecność tego tagu jest informacją, że strona została dostosowana do urządzeń mobilnych. Może to być ważne zwłaszcza przy prezentowaniu wyszukań na tych właśnie urządzeniach.

Mniej istotne znaczniki html

meta kewyords – czy warto go używać

W tagu meta keywords możemy umieścić słowa kluczowe, które uznajemy za istotne dla strony. Niemniej jednak, Google od dawna twierdzi, że nie korzysta z tego meta tagu przy pozycjonowaniu, więc przynajmniej ze względu na tę wyszukiwarkę nie musimy się zajmować tym znacznikiem. Warto jednak pamiętać, że inne wyszukiwarki mogą z nich korzystać.
Tagi Keywords mogą też pomagać wewnętrznej wyszukiwarce w rozróżnianiu pomiędzy poszczególnymi stronami, zwłaszcza gdy mamy sklep internetowy i wiele artykułów. Warto wtedy każdej podstronie przypisać inne słowa kluczowe.
Jeżeli decydujemy się użyć tagu meta keywords, pamiętajmy jednocześnie, aby nie przesadzić ze słowami kluczowymi, które tam umieszczamy, gdyż może to być niemile widziane przez wyszukiwarki, które ewentualnie korzystają z tego tagu.

meta robots – instrukcje dla robotów

Tag meta robots zawiera instrukcje dla robotów wyszukiwarek. Może instruować roboty wyszukiwarek czy mają indeksować daną witrynę czy nie (index, noindex), czy powinny / nie powinny śledzić linków na stronie (follow, nofollow). Przy pomocy tagu robots możliwe są także modyfikacje tego co i jak ma być wyświetlane w wyszukiwarce (nosnippet, max-snippet, etc.).

Więcej na temat tagu robots w pomocy Google:
https://developers.google.com/search/reference/robots_meta_tag?hl=pl

Inne meta tagi

Więcej na temat meta tagów, które Google potrafi zinterpretować można znaleźć na stronie:
https://support.google.com/webmasters/answer/79812?hl=pl

oraz w podstawowych informacjach dla webmasterów:
https://support.google.com/webmasters/answer/7451184?hl=pl

Co to są meta tagi i jak je dodać na stronie? Kluczowe znaczniki HTML