Generator Open Graph Preview
Sprawdź jak Twoja strona internetowa wyświetla się na Facebooku, Twitterze, LinkedIn i WhatsApp — zanim ją opublikujesz. Niezbędne narzędzie przy tworzeniu stron internetowych.
Edytuj tagi og: i twitter:, podejrzyj podgląd na żywo i skopiuj gotowy kod HTML bezpośrednio do swojej strony.
Podgląd na żywo
Wypełnij formularz poniżej i obserwuj jak Twoja strona będzie wyglądać na platformach społecznościowych w czasie rzeczywistym.
ogOpen Graph Tags
Zalecany rozmiar: 1200×630 px · Maks. 8 MB · JPG lub PNG
Twitter Card
Wskazówki i ostrzeżenia
Podgląd platform — na żywo
Podgląd jest przybliżony — ostateczny wygląd zależy od aktualnego UI platformy.
</>Wygenerowany kod HTML
<!-- Open Graph / Facebook --> style="color:#f87171"><meta property="og:type" content="website"> style="color:#f87171"><meta property="og:locale" content="pl_PL"> <!-- Twitter Card --> style="color:#f87171"><meta name="twitter:card" content="summary_large_image">
[ Dokumentacja ]
TagiOpenGraph
—przewodnik
Wszystko co musisz wiedzieć o tagach Open Graph i Twitter Cards przy projektowaniu stron internetowych.
og:title — tytuł karty
Główny tytuł wyświetlany przy udostępnianiu. Może różnić się od meta title strony — napisz go bardziej chwytliwie dla odbiorców social media. Optymalna długość: 40–70 znaków.
og:image — grafika 1200×630
Grafika to najważniejszy element karty — ma największy wpływ na klikalność. Zalecany format to 1200×630 px (proporcje ~1.91:1). Unikaj małego tekstu, który będzie nieczytelny na mobilnych.
og:description — opis karty
Opis wyświetlany pod tytułem. Facebook ucina go po ok. 200 znakach. Powinien zachęcać do kliknięcia — użyj call-to-action. Nie musi być identyczny z meta description.
Twitter Cards — typy kart
summary_large_image — duże zdjęcie nad tekstem, summary — małe zdjęcie obok tekstu. Twitter odczyta tagi og:, ale dedykowane twitter: dają pełniejszą kontrolę nad wyglądem karty.
Najczęstsze błędy
Brak og:image to najczęstszy błąd przy projektowaniu stron. Inne: zbyt mały obraz (min. 200×200 px), obraz zablokowany dla botów, brak cache-clearing po aktualizacji, nieaktualne OG po zmianie treści.
Cache i odświeżanie
Facebook, LinkedIn i inne platformy agresywnie cache'ują dane OG. Po zmianach użyj: Facebook Sharing Debugger, LinkedIn Post Inspector lub Google Rich Results Test, aby wymusić ponowne pobranie danych.
[ Social Media Optimization ]
Dlaczego Open Graph jest niezbędny przy tworzeniu stron?
Współczesne projektowanie stron internetowych to nie tylko piękny wygląd i szybkość działania — to również pełna optymalizacja obecności marki w social media. Tagi Open Graph decydują o pierwszym wrażeniu, jakie Twoja strona wywiera na platformach społecznościowych.
Badania pokazują, że treści z atrakcyjnym obrazem og:image generują nawet 3× więcej kliknięć niż linki bez grafiki. To dlatego każda profesjonalna strona internetowa powinna mieć starannie skonfigurowane tagi OG dla każdej podstrony.
Przy tworzeniu stron internetowych w Studio Kalmus zawsze konfigurujemy kompletny zestaw tagów Open Graph, Twitter Cards oraz JSON-LD Schema — to standard, nie opcja. Twoja strona będzie wyglądać profesjonalnie wszędzie: w Google, na Facebooku, LinkedIn, Twitterze i WhatsApp.
og:title, og:description, og:image, og:type — wymaga Cache Debugger po zmianach.
Dedykowane twitter: tagi. summary_large_image = duże zdjęcie; summary = kompaktowa karta.
Odczytuje tagi og: oraz linkedin:. Użyj Post Inspector do odświeżenia cache.
Używa og:title, og:description i og:image. Obrazy są wyświetlane w oknie czatu.
[ FAQ ]
Pytania
oOpenGraph
Najczęściej zadawane pytania dotyczące tagów Open Graph i optymalizacji stron internetowych pod social media.
Twoja strona zasługuje na profesjonalne OG
Przy projektowaniu stron internetowych w Studio Kalmus konfigurujemy pełny zestaw tagów Open Graph, Twitter Cards, JSON-LD Schema i meta tagów SEO — dla każdej podstrony z osobna.
Tworzenie stron internetowych to więcej niż kod — to kompleksowa strategia widoczności w Google i na platformach społecznościowych. Zrób to raz, zrób to dobrze.
Więcej darmowych narzędzi