Generator Meta Tagów OG Online
Generuj tagi Open Graph i Twitter Card. Podglądaj, jak Twój link będzie wyglądał w mediach społecznościowych.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Dlaczego warto
Kontroluj wygląd swojej witryny w mediach społecznościowych
Prawdziwy podgląd
Widzisz dokładnie, jak Twój link będzie wyglądał przed publikacją.
Wszystkie platformy
Facebook, LinkedIn, Twitter, WhatsApp i Telegram w jednym kroku.
Gotowy kod do skopiowania
Poprawnie wygenerowane tagi HTML. Wklej do <head> i gotowe.
Bez rejestracji
Generuj i testuj swoje meta tagi bez tworzenia konta.
Jak to działa
Trzy kroki, żadnych komplikacji
Wprowadź dane swojej strony
Wypełnij tytuł, opis, adres URL i obraz swojej strony. To właśnie te dane zobaczy użytkownik, gdy Twój link zostanie udostępniony.
Wybierz sieci społecznościowe
Zaznacz, czy potrzebujesz Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card, czy obu. Dostosuj pola specyficzne dla każdej platformy.
Skopiuj kod HTML
Skopiuj wygenerowane meta tagi i wklej je wewnątrz <head> swojego HTML. Zweryfikuj za pomocą Facebook Debugger lub Twitter Card Validator.
FAQ
Masz pytania?
Open Graph Protocol to protokół webowy stworzony przez Facebooka (zaprezentowany na F8 2010), który pozwala dowolnej stronie internetowej stać się bogatym obiektem w grafie społecznościowym. Dodając meta tagi og: do sekcji <head> HTML, kontrolujesz dokładnie to, jaki tytuł, opis i obraz pojawia się, gdy ktoś udostępnia Twój link na Facebooku, LinkedIn, WhatsApp, Telegramie i większości platform społecznościowych. Bez tych tagów platformy próbują odgadnąć zawartość z nieprzewidywalnymi rezultatami.
Cztery podstawowe wymagane właściwości to: og:title (tytuł obiektu), og:type (typ obiektu: website, article, product...), og:image (URL obrazu podglądu) i og:url (kanoniczny adres URL strony). Ważne właściwości opcjonalne: og:description, og:site_name, og:locale (np. pl_PL), og:image:width i og:image:height (aby zapobiec przesunięciom podczas ładowania). Dla artykułów og:type=article umożliwia dodatkowe właściwości: article:author, article:published_time, article:section.
Facebook ma Sharing Debugger (developers.facebook.com/tools/debug), który renderuje dokładnie to, jak Twój URL będzie wyglądał po udostępnieniu i pozwala wymusić odświeżenie pamięci podręcznej. Twitter ma Card Validator (cards-dev.twitter.com/validator). LinkedIn ma Post Inspector (linkedin.com/post-inspector). W przypadku lokalnego programowania narzędzia takie jak ngrok lub localtunnel udostępniają Twój localhost, aby zewnętrzne debuggery mogły go odwiedzić. Pamiętaj, że platformy buforują metadane — jeśli zmienisz tagi, użyj narzędzi debugowania, aby unieważnić pamięć podręczną.
Wymiary zalecane przez Facebooka i większość platform to 1200×630 pikseli (proporcje 1,91:1). Ta rozdzielczość jest wystarczająca dla ekranów Retina i dobrze skaluje się do wszystkich rozmiarów podglądu. Minimalna akceptowana wielkość to 200×200 px. Facebook odrzuca obrazy mniejsze niż 200×200 lub większe niż 8 MB. Twitter wymaga minimum 300×157 px dla summary_large_image i maksimum 4096×4096 px przy limicie 5 MB. W przypadku WhatsApp obraz powinien być kwadratowy (1:1) dla podglądów w czatach grupowych.
Open Graph (og:) to otwarty protokół przyjęty przez większość platform społecznościowych. Twitter Cards (twitter:) są specyficzne dla Twittera/X i oferują dodatkowe typy: summary, summary_large_image, app i player. Jeśli zdefiniujesz tagi og:, Twitter użyje ich jako fallbacku, gdy tagi twitter: są nieobecne. Zaleceniem jest definiowanie obu zestawów dla maksymalnej zgodności. Kluczowe pola Twitter Card to twitter:card (typ karty), twitter:site (konto Twitter witryny), twitter:creator (konto autora) i twitter:image (może różnić się od og:image w celu optymalizacji wymiarów).
Open Graph Protocol: historia, Schema.org i crawlery mediów społecznościowych
Open Graph Protocol został przedstawiony przez Facebooka na konferencji F8 21 kwietnia 2010 roku. Celem było przekształcenie dowolnej strony internetowej w obiekt pierwszej klasy w grafie społecznościowym Facebooka, analogicznie do tego, jak strony artystów, filmów i lokalizacji miały już bogatą strukturę danych. Protokół był inspirowany RDFa (Resource Description Framework in Attributes), rozszerzeniem HTML dla danych strukturalnych, ale uproszczonym na potrzeby masowego wdrożenia. Nazwa i domena ogp.me zostały zarejestrowane tego samego dnia. Od czasu uruchomienia Open Graph został przyjęty przez LinkedIn (2011), Twitter jako fallback (2012), WhatsApp (2013) i praktycznie każdą istotną platformę społecznościową i komunikacyjną.
Związek między Open Graph a Schema.org jest komplementarny, ale bywa mylący. Schema.org (uruchomiony w 2011 roku przez Google, Bing i Yahoo) definiuje słownictwo danych strukturalnych dla wyszukiwarek, implementowane przez JSON-LD (zalecane), Microdata lub RDFa. Open Graph jest zoptymalizowany pod kątem podglądów linków w sieciach społecznościowych. Strona powinna mieć oba zestawy: Schema.org dla SEO i Featured Snippets, oraz Open Graph dla udostępniania w mediach społecznościowych. Google używa og:title i og:description jako drugorzędnych sygnałów indeksowania, ale JSON-LD Schema.org ma większe znaczenie. Crawlery społecznościowe (facebookexternalhit, Twitterbot, LinkedInBot) czytają tylko tagi og:, nie JSON-LD.
Crawlery mediów społecznościowych mają ważne cechy techniczne dla programistów. User-agent 'facebookexternalhit/1.1' wskazuje, że Facebook przetwarza URL w celu wygenerowania podglądu. Te crawlery NIE wykonują JavaScriptu — przetwarzają wyłącznie statyczny HTML z serwera. Oznacza to, że aplikacje React/Vue/Angular z renderowaniem po stronie klienta (CSR) bez SSR lub SSG nie będą miały poprawnych metadanych OG, ponieważ meta tagi są generowane dynamicznie po stronie klienta. Rozwiązaniem jest renderowanie po stronie serwera (Next.js, Nuxt), statyczne generowanie witryny lub usługa prerenderowania (Prerender.io, rendertron) serwująca wstępnie wyrenderowany HTML do botów mediów społecznościowych.