CodeKitHubCzym jest to narzędzie?
Open Graph to protokół, stworzony pierwotnie przez Facebooka, który pozwala każdej stronie internetowej opisać samą siebie za pomocą niewielkiego zestawu znaczników <meta property="og:..."> umieszczonych w sekcji <head> kodu HTML. Gdy ktoś wkleja Twój link do aplikacji społecznościowej, komunikatora lub czatu, aplikacja ta odczytuje te znaczniki, aby zbudować kartę podglądu — tytuł, opis i miniaturę obrazu — zamiast zgadywać na podstawie treści strony.
Twitter (X) używa pokrewnego, ale osobnego zestawu znaczników <meta name="twitter:...">, który kontroluje wygląd podglądu linku konkretnie na tej platformie. Większość witryn ustawia oba zestawy: znaczniki Open Graph zapewniają szeroką kompatybilność, a znaczniki Twitter Card pozwalają dopracować podgląd na X (na przykład wybrać kartę z dużym obrazem zamiast małego podsumowania).
Bez tych znaczników udostępniony link albo nie pokazuje żadnego podglądu, albo platforma próbuje odgadnąć tytuł i obraz na podstawie surowej treści strony — często wybierając zły nagłówek, przypadkowy obraz w tekście albo nic. Jawne ustawienie og:title, og:description i og:image daje pełną kontrolę nad tym, jak Twoja treść jest prezentowana, zanim ktokolwiek kliknie link.
Dlaczego warto go używać?
- Podgląd na żywo — widzisz dokładnie, jak będzie wyglądać karta udostępniania w trakcie pisania, jeszcze przed publikacją.
- Generuje jednocześnie znaczniki Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) i znaczniki Twitter Card.
- Obejmuje pola faktycznie odczytywane przez platformy: tytuł, opis, kanoniczny URL, obraz, nazwę witryny, typ treści i styl karty Twitter.
- Działa całkowicie po stronie przeglądarki — Twój tytuł, opis i adresy URL nigdy jej nie opuszczają.
- Darmowe, bez logowania, bez limitów — skopiuj wynik i wklej do swojego kodu HTML.
Jak używać
- Wpisz tytuł swojej strony i krótki opis (tytuł najlepiej poniżej ~60 znaków, opis ~155–160 znaków).
- Wpisz kanoniczny URL strony oraz bezwzględny adres URL obrazu podglądu (adresy obrazów muszą być pełne, np. https://example.com/obraz.jpg, a nie ścieżką względną).
- Opcjonalnie ustaw nazwę witryny, wybierz og:type (website, article, product, profile, video, music) oraz typ karty Twitter (summary lub summary_large_image).
- Sprawdź kartę podglądu na żywo, aby upewnić się, że tytuł, opis i obraz dobrze do siebie pasują.
- Kliknij „Kopiuj” i wklej wygenerowane znaczniki <meta> do sekcji <head> swojej strony, tuż przed zamykającym znacznikiem </head>.
Przykład
Wejście
Tytuł: „10 darmowych narzędzi dla programistów, których naprawdę użyjesz”
Opis: „Wyselekcjonowana lista narzędzi działających w przeglądarce dla JSON, wyrażeń regularnych, UUID i innych — bez instalacji.”
URL: https://example.com/blog/dev-tools
Obraz: https://example.com/images/dev-tools-cover.jpgWynik
<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />W wyniku pojawiają się tylko wypełnione pola — pozostawienie pustej nazwy witryny po prostu pomija og:site_name w wyniku.
Częste błędy, których należy unikać
- Całkowity brak og:image — bez niego większość platform albo nie pokazuje żadnego obrazu podglądu, albo losowo pobiera obraz ze strony, co zwykle wygląda niechlujnie i nieprofesjonalnie.
- Użycie względnej ścieżki do obrazu, np. /images/cover.jpg, zamiast pełnego adresu URL, np. https://example.com/images/cover.jpg — roboty społecznościowe zazwyczaj nie potrafią rozwiązać ścieżek względnych.
- Nieprawidłowe proporcje obrazu — kwadratowy lub pionowy obraz jest niezgrabnie przycinany, gdy platforma wymusza format poziomy 1,91:1; zawsze projektuj obraz udostępniania blisko rozmiaru 1200×630.
- Tytuły lub opisy, które się ucinają — trzymaj og:title poniżej ~60 znaków, a og:description poniżej ~155–160 znaków, aby nie zostały przycięte wielokropkiem na większości platform.
- Zapominanie o aktualizacji zbuforowanych podglądów — po zmianie znaczników og na już opublikowanej stronie stary podgląd może pozostać w pamięci podręcznej Facebooka lub LinkedIn, dopóki ręcznie nie wymusisz ponownego skanowania za pomocą ich narzędzi debugujących.
Gdzie wykorzystywany jest każdy znacznik
og:title, og:description i og:image to trzy znaczniki, które prawie każda platforma odczytuje, budując podgląd. og:url informuje roboty, z jakim kanonicznym linkiem powiązać podgląd, co ma znaczenie, gdy ta sama treść jest dostępna pod wieloma adresami URL. og:site_name pokazuje niewielką etykietę (np. nazwę wydawcy lub marki) nad tytułem na niektórych platformach, takich jak Facebook.
og:type zmienia rodzaj obiektu, jaki strona reprezentuje dla robotów obsługujących bogatszy model obiektów Open Graph — na przykład article włącza og:article:published_time i og:article:author na platformach, które je odczytują, choć większość podglądów społecznościowych ignoruje te dodatkowe pola i korzysta tylko z podstawowego trio tytuł/opis/obraz.
twitter:card kontroluje układ specyficznie w X: summary pokazuje małą kwadratową miniaturę obok tekstu, natomiast summary_large_image pokazuje obraz na pełną szerokość nad tekstem — ten drugi wariant niemal zawsze jest lepszym wyborem dla treści z istotnym obrazem okładkowym.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć mój og:image?
Zalecany rozmiar to 1200×630px — wystarczająco duży dla ekranów o wysokiej gęstości pikseli i zbliżony do proporcji ok. 1,91:1, do których przycinają obraz Facebook, LinkedIn i X. Trzymaj plik poniżej 5–8MB, używaj JPG lub PNG i upewnij się, że URL obrazu jest pełnym, bezwzględnym adresem, a nie ścieżką względną — większość robotów nie potrafi poprawnie rozwiązać ścieżek względnych.
Dlaczego mój podgląd nie pojawia się po udostępnieniu linku?
Najczęstsze przyczyny to: brak og:image, względny zamiast bezwzględnego adres URL obrazu, robot zablokowany przez robots.txt, albo platforma pokazuje zbuforowaną wersję starego podglądu. Facebook i LinkedIn agresywnie buforują podglądy — po zaktualizowaniu znaczników użyj Sharing Debugger od Facebooka lub Post Inspector od LinkedIn, aby wymusić ponowne przeskanowanie.
Jaka jest różnica między znacznikami og: a twitter:?
Znaczniki og: (og:title, og:description, og:image itd.) należą do standardu Open Graph, odczytywanego przez Facebooka, LinkedIn, Slacka, Discorda, WhatsApp i większość innych platform. Znaczniki twitter: to własny format Twittera/X. Jeśli brakuje twitter:title lub twitter:image, X automatycznie sięga po odpowiedni znacznik og: — jednak jawne ustawienie obu zestawów daje więcej kontroli, w tym możliwość wybrania summary_large_image dla dużego obrazu podglądu.
Jakiego og:type powinienem użyć?
„website” to bezpieczna wartość domyślna dla większości stron, w tym stron głównych i ogólnych treści. Użyj „article” dla wpisów na blogu i artykułów informacyjnych (odblokowuje dodatkowe znaczniki specyficzne dla artykułów, takie jak czas publikacji), „product” dla stron e-commerce, a „profile” dla stron profilu osobistego lub użytkownika. Typ wpływa głównie na to, które dodatkowe właściwości Open Graph są prawidłowe, a nie na podstawowy wygląd karty podglądu.
Czy to narzędzie przechowuje lub wysyła moje dane gdziekolwiek?
Nie. Całe generowanie odbywa się lokalnie w Twojej przeglądarce, w zwykłym JavaScript. Nic, co wpiszesz, nie jest przesyłane, rejestrowane ani przechowywane — zamknięcie karty przeglądarki czyści wszystko.