Meta tagi do wyszukiwarki i udostępniania, z podglądem
Ten generator meta tagów tworzy HTML, który decyduje, jak strona wygląda w wynikach Google i gdy jej link jest udostępniany na Facebooku, LinkedIn, X, Slacku, Discordzie lub WhatsAppie. Wpisz tytuł, opis, kanoniczny URL i obraz do udostępniania, a otrzymasz podstawowe tagi SEO, tagi Open Graph i tagi Twitter Card, poprawnie escapowane i gotowe do wklejenia w <code><head></code>, z podglądem na żywo fragmentu wyników wyszukiwania i każdej karty. Wklej head istniejącej strony, aby wczytać jej tagi i je poprawić. Wszystko działa w Twojej przeglądarce.
Jak wygenerować meta tagi
- 1Napisz tytuł i opis. Liczniki zmieniają kolor na czerwony, gdy Google prawdopodobnie je utnie: około 600 pikseli (≈60 znaków) dla tytułu i około 160 znaków dla opisu.
- 2Podaj kanoniczny URL strony, nazwę witryny i bezwzględny URL obrazu — najlepiej 1200 × 630 pikseli — z tekstem alternatywnym.
- 3Wybierz typ Open Graph, locale i styl karty X oraz dodaj swoje konta X. Odznacz Zezwalaj na indeksowanie dla stron, które nie mogą pojawiać się w wynikach wyszukiwania.
- 4Sprawdź podglądy Google, Facebooka, LinkedIn i X, potem przełącz na HTML, wybierz grupy do uwzględnienia i skopiuj tagi do
<head>strony. - 5Aby edytować istniejącą stronę, kliknij Importuj i wklej jej HTML lub źródło strony.
Tagi, które liczą się w SEO
- <title>
- Najważniejszy sygnał na stronie i klikalny nagłówek w wynikach. Główny temat umieść na początku, zadbaj o unikalność na każdej stronie i zakończ marką. Google przepisuje tytuły, które uzna za nieprzydatne, za długie lub przeładowane słowami kluczowymi.
- meta description
- Nie jest czynnikiem rankingowym, ale często służy jako opis pod tytułem, więc wpływa na kliknięcia. Streść stronę w 120–160 znakach i podaj powód, by ją odwiedzić.
- canonical
- <link rel="canonical"> wskazuje preferowany URL, gdy ta sama treść jest dostępna pod kilkoma adresami (parametry śledzące, http i https, końcowe ukośniki).
- robots
- noindex wyklucza stronę z wyników, nofollow mówi robotom, by nie podążały za jej linkami. Index, follow to wartość domyślna, więc tag jest dodawany tylko wtedy, gdy ją zmienisz.
- viewport i charset
- To nie są tagi SEO jako takie, ale każda strona ich potrzebuje: UTF-8 i responsywny viewport są warunkiem indeksowania mobile-first.
- keywords
- Ignorowany przez Google i Bing w rankingu od ponad dekady. Dodaj go tylko wtedy, gdy czyta go wewnętrzna wyszukiwarka lub inny system.
Open Graph: jak wyglądają udostępniane linki
Open Graph to protokół wprowadzony przez Facebooka, który dziś czyta niemal każda platforma: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest i wiele innych. Podstawowe tagi to og:title, og:description, og:image, og:url i og:type; og:site_name i og:locale dopracowują kartę.
To obraz decyduje o karcie. Użyj bezwzględnego URL https://, 1200 × 630 pikseli (proporcje 1.91:1), poniżej 5 MB, w formacie JPEG, PNG lub WebP, i trzymaj tekst oraz logo z dala od krawędzi, bo platformy kadrują różnie. Platformy zapisują karty w pamięci podręcznej: po zmianie tagów odśwież je w Sharing Debugger Facebooka, Post Inspector LinkedIn lub udostępniając URL z parametrem zapytania.
Karty Twitter / X
X czyta własny tag twitter:card, aby wybrać układ — summary_large_image dla obrazu na pełną szerokość, summary dla małej kwadratowej miniatury — oraz twitter:site i twitter:creator dla kont witryny i autora. Tytuł, opis i obraz pobiera awaryjnie z tagów Open Graph, dlatego generator dodaje twitter:title, twitter:description i twitter:image tylko wtedy, gdy Open Graph jest wyłączony, unikając powielonych znaczników.
Obecnie X pokazuje karty z dużym obrazem jako obraz z nałożonym tytułem i domeną pod spodem; opisy pojawiają się tylko na kartach summary w niektórych klientach.
Długość tytułu: znaki czy piksele
Google ucina tytuły według szerokości, a nie liczby znaków: na komputerze limit to około 600 pikseli czcionką podobną do Arial 20 px, co mieści około 50–60 znaków zależnie od liter — „WWW” jest trzy razy szersze niż „iii”. Licznik mierzy tytuł tą czcionką w Twojej przeglądarce, więc odzwierciedla Twoje rzeczywiste słowa. Opisy są ucinane przy około 920 pikselach, czyli mniej więcej 155–160 znakach na komputerze i mniej na telefonie.
Ucięcie nie jest karą — ukrywa tylko koniec tekstu — ale umieszczenie ważnych słów na początku gwarantuje, że zostaną zauważone. Dbaj, by tytuł i opis odpowiadały widocznej treści; wtedy Google chętniej zostawi je bez zmian.
Gdzie umieścić tagi
Wszystkie te tagi należą do elementu <head> strony i muszą być obecne w HTML wysyłanym przez serwer: roboty podglądu linków nie uruchamiają JavaScriptu, więc tagi dodane kodem po stronie klienta są niewidoczne dla Facebooka, LinkedIn i X. We frameworkach takich jak Next.js, Nuxt czy Astro używaj ich API metadanych, aby renderować je na serwerze. Każda wartość atrybutu jest escapowana w HTML, więc cudzysłowy i ampersandy w tytułach nie zepsują znaczników.
Połącz to z plikiem robots.txt, który wpuszcza roboty na Twoje strony, mapą witryny XML z kanonicznymi URL-ami i favicon, aby wynik pokazywał Twoją ikonę.
Najczęstsze pytania
- Jaka jest idealna długość meta title i description?
- Około 50–60 znaków (poniżej ~600 pikseli) dla tytułu i 120–160 znaków dla opisu. Liczniki pokazują obie wartości i zmieniają kolor na czerwony, gdy Google prawdopodobnie utnie tekst.
- Jaki rozmiar powinien mieć obraz Open Graph?
- 1200 × 630 pikseli (1.91:1) sprawdza się na Facebooku, LinkedIn, X i w komunikatorach. Użyj bezwzględnego URL https, rozmiaru poniżej 5 MB i trzymaj najważniejsze treści na środku.
- Dlaczego podgląd linku pokazuje stary obraz lub tytuł?
- Platformy przechowują podglądy linków w pamięci podręcznej. Użyj Sharing Debugger Facebooka lub Post Inspector LinkedIn, aby ponownie pobrać URL; X odświeża pamięć podręczną po około tygodniu lub od razu dla URL z nowym parametrem zapytania.
- Czy potrzebuję zarówno tagów Open Graph, jak i Twitter?
- Open Graph jest potrzebny dla większości platform, a dla X co najmniej twitter:card. X korzysta awaryjnie z og:title, og:description i og:image, więc pozostałe tagi Twitter są opcjonalne, gdy jest Open Graph.
- Czy tag meta keywords pomaga w SEO?
- Nie. Google i Bing od wielu lat ignorują go w rankingu. Tutaj jest opcjonalny i przydaje się tylko wtedy, gdy czyta go jakiś wewnętrzny system.
- Czy mogę edytować meta tagi istniejącej strony?
- Tak. Kliknij Importuj, wklej HTML strony (źródło strony też działa), a wartości title, description, canonical, Open Graph, Twitter i robots zostaną wczytane do formularza.
- Dlaczego obraz do udostępniania nie pojawia się w podglądzie?
- URL musi być bezwzględny (https://…) i publicznie dostępny. Niektóre serwery blokują wyświetlanie obrazów na innych stronach; prawdziwe platformy pobierają je po stronie serwera, więc tam mogą działać.
- Czy coś jest przesyłane?
- Nie. Tagi są generowane w Twojej przeglądarce. Tylko obraz do udostępniania jest wczytywany z podanego URL, aby pokazać go w podglądach.