Generator Open Graph

Generator Open Graph

Gdy ktoś udostępnia Twoją stronę na Facebooku, LinkedIn czy X, o wyglądzie podglądu decydują meta tagi Open Graph i Twitter Cards — nie treść strony.

Generator Open Graph zamienia kilka pól formularza na gotowy blok znaczników <meta>: od og:title i og:image po twitter:card i twitter:site. Przy komplecie danych dostajesz 14 tagów, a obok orientacyjny podgląd karty udostępnienia i listę uwag, np. o braku obrazu albo złej proporcji grafiki.

Jak działa generator tagów Open Graph

Każde pole odpowiada jednemu lub dwóm tagom. Tytuł trafia do og:title i twitter:title, opis do og:description i twitter:description, adres obrazu do og:image i twitter:image. Szerokość i wysokość obrazu tworzą og:image:width i og:image:height, nazwa serwisu og:site_name, a język og:locale (np. pl_PL). Konto na X trafia do twitter:site, przy czym znak @ zostanie dodany, jeśli go pominiesz. Puste pola opcjonalne są pomijane, więc w wyniku nie ma tagów z pustym content.

Przyciski Strona, Artykuł, Wideo i Produkt ustawiają od razu og:type i typ karty: website lub article z summary_large_image, video.other z player, product z summary. Na liście typów są też profile i book. Tagi i podgląd odświeżają się w trakcie wpisywania, a wpisane dane nie są nigdzie zapisywane.

Liczniki pokazują długość tytułu względem 60 znaków i opisu względem 160 znaków. Po przekroczeniu licznik zmienia kolor i dopisuje, że tekst może zostać obcięty, ale nic nie skraca: o przycięciu decyduje Facebook, LinkedIn czy X po swojej stronie. Twarde limity formularza są znacznie wyższe: 300 znaków dla tytułu i 1000 dla opisu.

Wartości trafiają do atrybutu content, dlatego generator sam zamienia cudzysłowy, apostrofy, & i nawiasy ostre na encje HTML. Tytuł Kredyt "na start" da w wyniku content="Kredyt &quot;na start&quot;", więc robot nie urwie tekstu na pierwszym cudzysłowie. Wielokrotne spacje i złamania wiersza są zamieniane na pojedynczą spację. Adres strony i obrazu musi zaczynać się od https:// lub http://, inaczej formularz zgłosi błąd.

Przykład krok po kroku: tagi dla strony kalkulatora kredytowego

Załóżmy, że publikujesz podstronę kalkulatora kredytowego i chcesz, aby jej udostępnienie wyglądało dobrze na Facebooku i na X.

1. Klikasz przycisk Strona: og:type przyjmuje wartość website, a typ karty summary_large_image, bo obraz ma być widoczny nad tekstem.
2. Wpisujesz tytuł o długości 67 znaków. Licznik pokaże 67 / 60 znaków z dopiskiem, że tytuł jest za długi. Skracasz go o 7 znaków, a najważniejsze słowa przenosisz na początek.
3. Wpisujesz opis o długości 164 znaków, czyli 4 znaki ponad 160. Tu też najlepiej skrócić zdanie, zamiast liczyć na to, że końcówka się zmieści.
4. Podajesz adres kanoniczny w postaci bezwzględnej: https://webp.pl/kalkulator-kredytowy.
5. Podajesz pełny adres grafiki i jej wymiary 1200 × 630 px. Generator liczy proporcję 1200 / 630 = 1,90:1. Mieści się w tolerancji ±0,05 od 1,91, więc kafelek proporcji świeci na zielono. Dla kwadratu 1080 × 1080 px wyszłoby 1,00:1 i pojawiłaby się uwaga, że podgląd może przyciąć obraz.
6. Uzupełniasz nazwę serwisu, locale pl_PL i konto na X, a potem kopiujesz blok przyciskiem Kopiuj tagi i wklejasz go w sekcji <head> tej podstrony.

Wynik: 9 tagów og: i 5 tagów twitter:, razem 14. Bez konta na X będzie ich 13, bo odpada twitter:site. Jeśli pominiesz adres obrazu, znikną od razu cztery: og:image, og:image:width, og:image:height i twitter:image.

Tabela referencyjna tagów Open Graph i Twitter Cards

Praktyczne wskazówki przy generowaniu tagów

• Sedno tytułu zmieść w pierwszych 60 znakach. Dłuższy tytuł zostanie przycięty, więc nazwa marki na końcu zniknie jako pierwsza.
• Opis domykaj w 160 znakach i nie zostawiaj zachęty do kliknięcia na sam koniec zdania.
• Grafikę przygotuj w proporcji 1,91:1, np. 1200×630 px, i nie umieszczaj ważnego tekstu przy krawędziach, bo część serwisów przycina kadr do kwadratu.
• og:url i og:image podawaj z pełnym https://. Przy adresie obrazu zaczynającym się od http:// generator wyświetli uwagę.
• Każda podstrona potrzebuje własnego zestawu: wspólny tytuł i obraz dla całego serwisu sprawia, że udostępnienia różnych stron wyglądają identycznie.
• Kartę summary_large_image wybierz dla szerokiego obrazu, summary wtedy, gdy wystarczy mała miniatura obok tekstu.

Czego generator nie uwzględni

• Nie skróci tekstów — liczniki 60 i 160 znaków tylko ostrzegają, a przycięcie robi dopiero platforma przy renderowaniu podglądu.
• Nie pobiera obrazu spod podanego adresu, więc nie sprawdzi, czy plik istnieje, ile waży i jakie ma rzeczywiste wymiary. Proporcję liczy z wartości, które wpiszesz, a wpisane wymiary tylko opisują plik i go nie zmieniają.
• Karta player wymaga dodatkowych znaczników twitter:player z adresem odtwarzacza i jego rozmiarem. Generator ich nie tworzy i wyświetla o tym uwagę.
• Nie tworzy tagów specyficznych dla typów, takich jak article:published_time czy product:price:amount, ani wielu obrazów og:image dla jednej strony.
• Nie wstawi tagów do szablonu: dostajesz statyczny blok do ręcznego wklejenia, a w CMS-ie wartości trzeba podstawiać dynamicznie dla każdej podstrony.