Generator tagów meta Open Graph

Tagi, z których budowany jest podgląd linku

Gdy ktoś wkleja twój link do posta lub wiadomości, aplikacja wysyła na stronę robota i odczytuje kilka tagów <meta> w <head>. Tagi te pochodzą z protokołu Open Graph, który wymienia cztery jako wymagane:

• og:title: tytuł w postaci, w jakiej ma pojawić się w podglądzie.
• og:type: czym jest strona. website pasuje do większości stron, a article do wpisu na blogu. Protokół definiuje też typy takie jak profile, book, video.movie i music.song.
• og:image: adres URL obrazu reprezentującego stronę.
• og:url: kanoniczny adres URL, który protokół nazywa trwałym identyfikatorem obiektu.

Protokół definiuje też tagi opcjonalne, a generator tworzy te przydatne: og:description, og:site_name oraz szczegóły obrazu og:image:width, og:image:height i og:image:alt. W sprawie tekstu alternatywnego protokół jest jednoznaczny: jeśli strona określa og:image, powinna określać też og:image:alt, a tekst ten opisuje, co jest na obrazie, a nie stanowi podpisu.

Co dodaje X: twitter:card

X również odczytuje Open Graph. Jego dokumentacja znaczników kart (dokumentacja dla deweloperów X, podlinkowana tu przez Internet Archive, ponieważ oryginalna strona teraz przekierowuje) wymienia wartości zastępcze dla każdego tagu: twitter:title cofa się do og:title, twitter:description do og:description, twitter:image do og:image, a twitter:image:alt do og:image:alt. Zatem jedynym wartym dodania tagiem jest twitter:card, który wybiera układ. Jeśli go pominiesz, ta sama dokumentacja mówi, że X może cofnąć się do małej karty podsumowania, nawet jeśli chciałeś dużej:

• summary_large_image: obraz na pełną szerokość nad tytułem. Strona X o karcie z dużym obrazem podaje, że obrazy do niej obsługują proporcje 2:1, o minimalnych wymiarach 300 × 157 i maksymalnych 4096 × 4096 pikseli, poniżej 5MB, w formatach JPG, PNG, WEBP lub GIF. SVG nie jest obsługiwany.
• summary: mniejsza karta z kwadratowym obrazem. Strona X o karcie podsumowania podaje, że obraz obsługuje proporcje 1:1, od 144 × 144 do 4096 × 4096 pikseli, i jest przycinany do kwadratu na wszystkich platformach.

Ten sam dokument wymienia karty app i player, które wymagają dodatkowych pól App Store lub odtwarzacza wideo, dlatego pominięto je tutaj. Opisuje też limity używane przez powyższe sprawdzenia: 70 znaków na tytuł, 200 na opis i 420 na tekst alternatywny.

Rozmiary obrazów podawane przez platformy

• LinkedIn: jego przewodnik o udostępnianiu witryny wymaga og:title, og:image, og:description i og:url oraz podaje maksymalny rozmiar pliku 5 MB, minimum 1200 × 627 pikseli i zalecane proporcje 1.91:1.
• Meta: jej najlepsze praktyki udostępniania zalecają obrazy o szerokości co najmniej 1080 pikseli dla ekranów wysokiej rozdzielczości i co najmniej 600 pikseli, by wyświetlać reklamy z linkiem obrazkowym. Ta sama strona wymaga og:image:width i og:image:height, aby robot mógł od razu wyrenderować obraz bez wcześniejszego pobierania i przetwarzania.

Obraz 1200 × 630 spełnia wszystkie te wymagania: ma co najmniej 1200 × 627 dla LinkedIn, jest szerszy niż 1080 dla Meta i ma proporcje 1.905:1, czyli w granicach 5% od 2:1 wymaganych przez X.

Sprawdź i odśwież stare podglądy

Aplikacje buforują to, co pobrały, więc poprawienie tagów nie naprawia podglądu, który został już zapisany. Obie duże sieci dają ci narzędzie do tego:

• Sharing Debugger od Meta pokazuje tagi, które pobiera robot, wraz z błędami lub ostrzeżeniami, i wymusza ponowne pobranie. Przewodnik Meta dla webmasterów go opisuje, a strona z najlepszymi praktykami zaznacza, że pobrana treść w przeciwnym razie odświeża się co standardowe 24 godziny.
• Post Inspector od LinkedIn odświeża zbuforowany adres URL. Strona pomocy LinkedIn zaznacza, że odświeżenie dotyczy tylko nowych postów: posty, które już zawierają ten adres URL, zachowują stary podgląd.

Czego to narzędzie nie robi

Nie pobiera twojej strony ani obrazu, więc nie widzi, co jest faktycznie dostępne na żywo, a powyższy podgląd to tekstowy szkic, a nie render. Zapisuje tagi; twoja witryna nadal musi je serwować w sekcji <head> strony, w kodzie HTML, który otrzymuje robot. Tagi dodane później przez JavaScript mogą nigdy nie zostać zauważone. I nie zapisuje kart app ani player, ani dodatkowych właściwości definiowanych przez typy takie jak book czy video.movie.

Jeśli wolisz nie pisać tego ręcznie

Hermoso to marketing na autopilocie: bada reklamy, które już działają na Twoim rynku, tworzy spójne z marką reklamy graficzne i wideo, planuje posty i prowadzi płatne kampanie na Twoich własnych kontach reklamowych. Działa w aplikacji webowej albo wewnątrz Claude, ChatGPT i Cursor przez swój serwer MCP.

Darmowe narzędzia: Kreator linków UTM · Generator kodów QR · Przewodnik po rozmiarach w mediach społecznościowych

Najczęściej zadawane pytania

Które tagi Open Graph są wymagane?

Protokół Open Graph wymienia cztery wymagane właściwości: og:title, og:type, og:image i og:url. og:description, og:site_name oraz tagi szerokości, wysokości i alt dla og:image są opcjonalne, ale warto je dodać.

Czy potrzebuję twitter:title i twitter:image, skoro mam tagi og:?

Nie. Dokumentacja znaczników kart X mówi, że twitter:title, twitter:description, twitter:image i twitter:image:alt korzystają z odpowiedników og:, gdy ich brak. Warto dodać tag twitter:card, który wybiera układ karty.

Jaki rozmiar powinien mieć obraz Open Graph?

LinkedIn wymaga co najmniej 1200 × 627 pikseli w proporcji 1.91:1 i poniżej 5 MB. Meta sugeruje co najmniej 1080 pikseli szerokości. Karta z dużym obrazem w X obsługuje proporcję 2:1 od 300 × 157 do 4096 × 4096. Obraz 1200 × 630 pasuje do wszystkich trzech.

Dlaczego mój link wciąż pokazuje stary obraz po zmianie tagów?

Aplikacja zapamiętała stary odczyt. Przepuść adres URL przez Sharing Debugger Meta albo Post Inspector LinkedIn, żeby pobrać go ponownie. LinkedIn zaznacza, że posty, które już udostępniają ten URL, zachowują stary podgląd.

Dlaczego cudzysłowy i znaki & są zmieniane w wyniku?

Są zabezpieczane jako HTML, żeby tag pozostał poprawny. Tytuł taki jak Tom & Jerry's "Sale" wewnątrz atrybutu content staje się Tom & Jerry's "Sale", a przeglądarki i roboty odczytują go z powrotem jako oryginalny tekst.

Czy narzędzie ładuje mój obraz?

Nie. Nic, co wpisujesz, nie jest nigdzie wysyłane, a adres URL obrazu nigdy nie jest pobierany, dlatego podgląd pokazuje miejsce zastępcze zamiast zdjęcia.