Polski
Twórz tagi Open Graph i Twitter Card z podglądem na żywo w mediach społecznościowych.
Ostatnia aktualizacja
Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.
Gdy udostępniasz link w dowolnej nowoczesnej aplikacji (w poście, wiadomości prywatnej, kanale na Slacku), platforma pobiera adres URL i wyciąga z niego niewielki zestaw metadanych, żeby wyświetlić *kartę udostępniania*: tytuł, opis, obraz i nazwę strony. Te metadane nie pochodzą z widocznej części strony, tylko z określonego zestawu tagów <meta> w <head>. Większość z nich definiuje protokół Open Graph, wymyślony przez Facebooka w 2010 roku. X (dawniej Twitter) dodaje kilka własnych z prefiksem twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp i Pinterest czytają te same tagi z drobnymi różnicami.
Poprawne ustawienie tych tagów to jednorazowa praca dla każdej strony, ale ma ogromny wpływ. Strona bez obrazu Open Graph po udostępnieniu wygląda na zepsutą. Za długi tytuł zostaje ucięty w połowie słowa. Obraz og:image w złych proporcjach każda platforma otoczy pustymi pasami. To narzędzie pozwala dopracować te wartości z podglądem na żywo, więc problemy z ucinaniem i kadrowaniem widzisz *przed* publikacją strony.
Wszystko działa lokalnie. Stan formularza, podglądy i wygenerowany HTML nigdy nie opuszczają twojej przeglądarki, więc możesz wklejać adresy stron przed premierą i niepublikowane teksty bez obaw o wyciek.
property (<meta property="og:title">), a standardowe tagi SEO i Twitter Card używają name (<meta name="description">, <meta name="twitter:card">).title, meta description), w Open Graph (og:title, og:description) i w Twitterze (twitter:title, twitter:description).og:image powinien mieć 1200×630, być serwowany przez HTTPS i mieć bezwzględny URL: ścieżki względne nie działają, gdy stronę pobierają inne serwery.twitter:card w X decyduje o układzie: summary to mała kwadratowa miniatura, a summary_large_image to baner na całą szerokość, którego chce większość marek.Celuj w 50-60 znaków. Facebook ucina tytuł przy około 95 znakach, a X przy około 70. Zacznij od wartości, a nie od marki: "Jak wdrożyć aplikację na Cloudflare Workers" wygrywa z "Blog Coddy · Poradnik wdrażania".
Celuj w 120-155 znaków. Większość platform ucina opis przy około 200. Pisz pełnymi zdaniami: opis pojawia się pod tytułem na każdej karcie, a ucięte fragmenty wyglądają na niedokończone.
Użyj bezwzględnego adresu https:// samej strony, a nie linku śledzącego czy przekierowania. Roboty Open Graph kierują się og:url przy łączeniu duplikatów udostępnień, więc kanoniczny URL utrzymuje spójne liczniki udostępnień i podglądy.
1200×630 to optymalny rozmiar dla kart summary_large_image w X oraz standardowych kart na Facebooku i LinkedInie. PNG lub JPEG, poniżej około 5 MB. Zawsze używaj bezwzględnego URL: ścieżki względne nie działają, bo robot serwisu społecznościowego odwiedza adres ze swojego serwera.
Wklej blok z panelu **Wygenerowane tagi <head>** do sekcji <head> swojej strony. Po wdrożeniu sprawdź wynik w debuggerze każdej platformy (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) i wymuś ponowne pobranie, jeśli później zmienisz obraz.
Tagi poniżej obejmują wszystko, co dziś czytają platformy społecznościowe. Tagi oznaczone property= należą do protokołu Open Graph; tagi oznaczone name= to standardowe warianty SEO i Twitter Card. Specyfikacje: Open Graph, X Cards.
| Tag | Używany przez | Zalecane | Uwagi |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 znaków | Gdy go brak, używany jest <title>, ale i tak go ustaw. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 znaków | Gdy go brak, używany jest meta description. |
og:image | Każda platforma | 1200×630, < 5 MB, HTTPS, bezwzględny URL | Musi to być bezwzględny URL, ścieżki względne nie działają. |
og:image:alt | Dostępność | Opisz obraz | Używany przez czytniki ekranu i niektóre platformy. |
og:url | FB, LinkedIn | Kanoniczny URL https:// | Służy do łączenia duplikatów udostępnień z różnymi parametrami w adresie. |
og:type | FB, LinkedIn | website lub article | article odblokowuje article:published_time, article:author. |
og:site_name | FB, Discord | Nazwa marki | Wyświetlana jako mały podpis nad lub pod kartą. |
twitter:card | X | summary_large_image | summary dla małej kwadratowej miniatury, summary_large_image dla układu z banerem. |
twitter:title | X | To samo co og:title | Gdy go brak, X używa og:title, ale dla pewności ustaw oba. |
twitter:description | X | To samo co og:description | Gdy go brak, używany jest og:description. |
twitter:image | X | To samo co og:image | Gdy go brak, używany jest og:image. |
twitter:site | X | @yourbrand | Nazwa konta wydawcy w X, z której korzystają niektóre statystyki. |
Ustaw **og:type** na article, dodaj **Autora** i **Datę publikacji** w sekcji dla artykułów i użyj obrazu okładki 1200×630. Podglądy zaktualizują się i pokażą, jak karta wygląda na każdej platformie.
og:type=article odblokowuje tagi dla artykułów (article:published_time, article:author), z których niektóre platformy (Discord, LinkedIn) korzystają, żeby pokazać autora. Twitter je ignoruje, ale nie zgłasza błędów.
Zostaw **og:type** jako website. Jako tytuł użyj nazwy produktu, jako opis jednego zdania o jego wartości, a jako obraz grafiki głównej lub wycinka zrzutu ekranu.
Landing page nie potrzebuje metadanych artykułu. Najczęściej klikanym elementem udostępnionej karty landing page jest zwykle obraz, więc zainwestuj w czystą grafikę 1200×630.
Tytuł: "Pojęcie | Sekcja · Docs". Opis: jedno zdanie wyjaśniające pojęcie. Obraz: ogólna okładka dokumentacji albo zrzut ekranu odpowiedniego interfejsu.
Strony dokumentacji są udostępniane na kanałach Slacka i w wątkach na X. Spójna okładka dokumentacji sprawia, że rozpoznaje się je w zatłoczonym feedzie, zanim ktoś przeczyta tytuł.
og:image, np. /images/cover.png. Roboty serwisów społecznościowych odwiedzają twoją stronę ze *swoich* serwerów, więc ścieżki względne wskazują na domenę samej platformy i kończą się błędem 404. Zawsze używaj bezwzględnego adresu zaczynającego się od https:// i pełnej domeny.twitter:card. Bez niego X domyślnie pokazuje minimalną kartę bez obrazu. Dodaj twitter:card=summary_large_image, żeby dostać układ z banerem, którego chce prawie każda marka.og:image:alt. Nic nie kosztuje, pomaga użytkownikom czytników ekranu, a kilka platform pokazuje go jako tekst alternatywny na karcie.og:image pobierz stronę ponownie w Facebook Sharing Debugger.<meta>: tytułem, opisem, obrazem, typem i tak dalej. Czyta go dziś każda duża platforma społecznościowa i komunikator, dlatego stał się standardem de facto dla metadanych kart udostępniania.twitter:, korzysta z odpowiadających im tagów og:, więc technicznie wystarczy sam Open Graph. Ale dodanie twitter:card, twitter:site i twitter:creator daje ci większą kontrolę nad tym, jak karta wygląda na X.<title> i meta description. Google czasem wykorzystuje og:image w wyszukiwarce grafik i w Discover, ale nie jest to czynnik rankingowy.