OpenGraph — og:title, og:description i og:image
Kontrolowanie wyglądu strony podczas udostępniania jej w serwisach społecznościowych
OpenGraph — og:title, og:description i og:image to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest OpenGraph?
OpenGraph to protokół metadanych wprowadzony przez Facebooka, dzięki któremu każda strona może określić, jak powinna wyglądać po udostępnieniu na platformie społecznościowej. Znaczniki znajdują się w elemencie <head> w postaci par <meta property="og:..." content="..."> i są odczytywane przez wszystkie najważniejsze sieci społecznościowe.
Podstawowe znaczniki
Cztery wymagane w praktyce znaczniki to og:title, og:description, og:image i og:url. Brak któregokolwiek z nich skutkuje nieatrakcyjną kartą udostępniania albo, co gorsza, kartą bez podglądu, którą użytkownicy zwykle pomijają.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Nagłówek na karcie udostępniania. Należy ograniczyć go do około 60 znaków, aby mieścił się w jednym wierszu i nie był obcinany przez sieć społecznościową. Powinien odpowiadać elementowi <title> strony, ale można go zoptymalizować pod kątem współczynnika klikalności.
og:description
Jedno- lub dwuzdaniowe podsumowanie wyświetlane pod tytułem. Należy dążyć do długości 120–160 znaków — wystarczającej, aby zachęcić do kliknięcia, ale na tyle krótkiej, by tekst wyświetlał się w całości na każdej platformie. Należy unikać clickbaitu; uczciwe opisy zapewniają większe zaangażowanie w dłuższej perspektywie.
og:image
Główny obraz. Należy użyć pliku JPG lub PNG o rozmiarze 1200x630 pikseli (poniżej około 5 MB). Zawsze należy używać absolutnego adresu URL — względne adresy URL nie działają, ponieważ scraper nie zna pojęcia „tej strony”. Warto podać og:image:width i og:image:height, aby pominąć dodatkowe żądanie podczas generowania podglądu.
og:url
Kanoniczny adres URL strony. Należy go ustawić nawet wtedy, gdy strona ma już element <link rel="canonical"> — niektóre scrapery preferują znacznik OG. Należy usunąć parametry śledzenia, aby udostępniane adresy URL nie rozmnażały się w bazie danych platformy społecznościowej jako wiele „różnych” stron.
og:type
Informuje platformę, jakiego rodzaju jest dana treść: "website", "article", "product", "video.movie", "book" itd. Article to najczęstszy wybór dla wpisów na blogu i odblokowuje dodatkowe znaczniki, takie jak article:published_time i article:author.
og:locale
Ustawienia regionalne treści w standardzie BCP-47 (np. "en_US", "tr_TR"). W połączeniu z og:locale:alternate informują sieć, w jakich innych językach dostępna jest strona, dzięki czemu Facebook może zdecydować, czy przetłumaczyć podgląd.
og:site_name
Nazwa wyświetlana witryny publikującej treść. Niektóre sieci pokazują ją jako podtytuł na karcie. Należy zadbać o jej zwięzłość i spójność na wszystkich stronach, aby marka wyglądała tak samo niezależnie od tego, który artykuł jest udostępniany.
Testowanie kart
Należy użyć narzędzia Facebook Sharing Debugger i Post Inspector firmy LinkedIn, aby pobrać stronę w taki sposób, w jaki widzi ją scraper, wyświetlić odczytane znaczniki oraz odświeżyć zapisany w pamięci podręcznej podgląd. Po wdrożeniu nowego og:image konieczne jest ponowne odczytanie strony, w przeciwnym razie użytkownicy mogą przez kilka dni widzieć stary obraz.
Typowe problemy
Znaczniki renderowane po stronie serwera są obowiązkowe — większość scraperów nie wykonuje JavaScriptu, więc znaczniki OG wstrzykiwane po stronie klienta przez React są dla nich niewidoczne. Należy wyrenderować je w początkowym HTML, najlepiej za pomocą SSR lub SSG; w przeciwnym razie karty udostępniania na zawsze pozostaną ogólne.
Sprawdzenie wiedzy
Dlaczego og:image musi używać absolutnego adresu URL zamiast ścieżki względnej?
Podsumowanie
Znaczniki OpenGraph (og:title, og:description, og:image z absolutnym adresem URL, og:url, og:type, og:locale, og:site_name) decydują o wyglądzie każdej strony po jej udostępnieniu. Należy renderować je po stronie serwera, ograniczać tytuły do 60 znaków, utrzymywać opisy na poziomie około 150 znaków, używać obrazów 1200x630 oraz przetestować całość za pomocą Facebook Sharing Debugger przed uruchomieniem.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „OpenGraph — og:title, og:description i og:image” jest bezpłatna?
Tak — pełny tekst „OpenGraph — og:title, og:description i og:image” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „OpenGraph — og:title, og:description i og:image”?
Kontrolowanie wyglądu strony podczas udostępniania jej w serwisach społecznościowych Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „OpenGraph — og:title, og:description i og:image”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- OpenGraph — og:title, og:description i og:image
- Znaczniki meta Twitter Cards
- Podstawy danych strukturalnych JSON-LD
- Hreflang dla stron międzynarodowych