Przewodnik po podglądzie społecznościowym
Obrazy Open Graph: sprawdź link przed publikacją
Obrazy Open Graph decydują o wyglądzie strony podczas udostępniania linku. Ten przewodnik pokazuje praktyczne rozmiary, tagi, kontrole projektu, naprawy pamięci podręcznej i listę kontrolną publikacji, które utrzymują podglądy użyteczne.
Szybka odpowiedź
Wybierz jeden obraz Open Graph i sprawdź link przed udostępnieniem
Dla większości stron zacznij od obrazu 1200 x 630, trzymaj ważny tekst i logo z dala od krawędzi, używaj absolutnych URL HTTPS i testuj końcowy URL w narzędziach debugowania platform. Ten prosty proces wychwytuje większość błędnych podglądów.
Rola podglądu
Traktuj obraz Open Graph jako zasób strony
Obraz Open Graph to nie dekoracja. Reprezentuje stronę, gdy roboty tworzą kartę linku do mediów społecznościowych, komunikatorów i narzędzi pracy. Powinien odpowiadać tytułowi, opisowi, widocznemu tematowi i obrazowi w danych strukturalnych.
Zachęca do kliknięcia
Obraz, tytuł i opis tworzą pierwsze wrażenie, zanim odwiedzający dotrze na Twoją stronę.
Powinien odpowiadać treści
Dobry obraz podglądu odpowiada tytułowi strony, widocznemu tematowi i głównej obietnicy dla użytkownika, zamiast używać ogólnego grafiki marki.
Należy do danych SEO
Obrazy Open Graph, obrazy kart Twitter, kanoniczne URL i obrazy JSON-LD powinny opisywać tę samą stronę.
Wymaga zasady nazewnictwa
Jasna nazwa pliku i zasada aktualizacji zapobiegają powrotowi przestarzałych pamięci podręcznych i starych obrazów kampanii.
Plan rozmiaru
Wybierz wymiary, które przetrwają rzeczywiste podglądy
Różne platformy przycinają i buforują podglądy nieco inaczej. Plik 1200 x 630 to dobry domyślny rozmiar dla Open Graph, ale bezpieczniej jest projektować z centralnym obszarem bezpiecznym i testować końcowy URL na ważnych platformach.
| Platforma lub zastosowanie | Praktyczny plan obrazu | Zwróć uwagę na | Kontrola publikacji |
|---|---|---|---|
| Ogólne informacje o Open Graph | Używaj 1200 x 630 jako praktycznego domyślnego rozmiaru dużego obrazu do udostępniania. | Małe obrazy mogą wyglądać na rozmyte lub być wyświetlane jako mniejsze miniatury. | Przetestuj końcowy URL w narzędziu debugowania platformy przed udostępnieniem. |
| Facebook i LinkedIn | Używaj tego samego obrazu w stylu 1,91:1, chyba że strona wymaga zasobu specyficznego dla platformy. | Krawędzie mogą być przycinane inaczej w różnych układach kanałów i na urządzeniach. | Trzymaj ważny tekst i logo w bezpiecznym, centralnym obszarze. |
| Duża karta X | Używaj summary_large_image i trzymaj wizualizację na środku; X obsługuje szerokie obrazy dużych kart. | Drobny tekst i szczegóły przy krawędziach mogą zniknąć po przycięciu lub zmianie rozmiaru karty. | Ustaw twitter:image i przetestuj za pomocą narzędzi kart X. |
| Komunikatory i narzędzia pracy | Utrzymuj plik mały i projekt prosty, ponieważ podglądy często pojawiają się w małych panelach. | Zajęte zrzuty ekranu, długie nagłówki i niski kontrast szybko stają się nieczytelne. | Wklej końcowy link do narzędzi, których faktycznie używa Twoja grupa odbiorców. |
Umieść główny przekaz w centrum obrazu. Krawędzie są ryzykowne, bo karty w kanałach, podglądy w czatach i układy mobilne mogą przycinać inaczej.
HTML
Ustaw tagi potrzebne robotom przed publikacją strony
Tagi Open Graph powinny znajdować się w sekcji head HTML. Używaj absolutnych URL obrazów, deklaruj szerokość i wysokość, dodaj przydatny tekst alternatywny i zachowaj spójność kanonicznego URL ze stroną, którą użytkownicy faktycznie udostępnią.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Dlaczego to ważne | Częsty błąd |
|---|---|---|
| og:image | Wskazuje robotom obraz, który powinien reprezentować stronę. | Używanie ścieżki względnej lub obrazu zablokowanego przez logowanie, przekierowania lub reguły robots. |
| og:image:width / og:image:height | Informuje platformy o rozmiarze obrazu zanim pobiorą i sprawdzą plik. | Pomijanie wymiarów i pozwalanie robotom zgadywać, jak wyświetlić podgląd. |
| og:image:alt | Opisuje obraz podglądu dla dostępności i dostarcza robotom więcej kontekstu. | Powtarzanie tytułu strony zamiast opisu tego, co widać na obrazie. |
| og:url | Łączy podgląd z kanonicznym URL strony, który powinien być udostępniany. | Używanie URL śledzącego, testowego lub w niewłaściwej wersji językowej jako stałej tożsamości strony. |
| twitter:card / twitter:image | Daje X wyraźną instrukcję dużej karty i opcjonalny obraz specyficzny dla platformy. | Zakładanie, że X zawsze wyświetli obraz Open Graph identycznie jak inne platformy. |
Jeśli używasz Blazor, Komponent metadanych SEO dla Blazor łączy tagi Open Graph, Twitter card, kanoniczne URL i metadane JSON-LD.
Zasady projektowania
Projektuj najpierw dla małej karty w kanale
Większość osób nie zobaczy całego obrazu. Widzą skompresowaną kartę w kanale, wiadomości lub podglądzie. Proste układy wygrywają: jeden wyraźny motyw, czytelny kontrast i brak drobnego tekstu działającego tylko w pliku projektu.
Proces
Prosty proces dla każdej ważnej strony
- 1
Napisz obietnicę podglądu
Zdecyduj, co karta powinna przekazać na pierwszy rzut oka: temat, korzyść, produkt lub kąt artykułu.
- 2
Stwórz obraz w zaplanowanych proporcjach
Używaj 1200 x 630 dla domyślnego pliku i trzymaj ważną zawartość na środku.
- 3
Optymalizuj plik
Używaj JPG lub PNG dla obrazu społecznościowego, utrzymuj plik w rozsądnym rozmiarze i unikaj widocznych uszkodzeń kompresji.
- 4
Ustaw metadane i schemat
Aktualizuj jednocześnie tagi Open Graph, tagi kart Twitter, kanoniczny URL i odwołania do obrazów JSON-LD.
- 5
Publikuj z ustabilizowaną nazwą pliku
Używaj znaczącej nazwy pliku i zmieniaj ją przy wymianie obrazu, jeśli platformy mogą przechowywać starą wersję w pamięci podręcznej.
- 6
Przetestuj końcowy URL
Przetestuj publiczny URL strony w narzędziach debugowania i sprawdź rzeczywisty podgląd, nie tylko kod źródłowy.
Podpowiedź
Użyj PixelPress po ustaleniu rozmiaru podglądu
Gdy plan obrazu określa końcowe pliki, PixelPress może pomóc w lokalnej konwersji do WebP lub AVIF. Zachowaj oryginały, sprawdź wynik, a potem zaktualizuj URL Open Graph.
Debugowanie
Odśwież pamięci podręczne platformy przed zaufaniem podglądowi
Platformy społecznościowe buforują dane podglądu. Jeśli wymienisz obraz, ale zachowasz ten sam URL, platforma może nadal pokazywać stary podgląd. Używaj oficjalnych narzędzi i w razie potrzeby zmień nazwę pliku lub dodaj wersjonowany URL.
Lista kontrolna
Lista kontrolna obrazów Open Graph przed publikacją
Użyj tej listy przed publikacją artykułu, strony produktu, narzędzia lub landing page. Wykrywa problemy z podglądem, które trudno zauważyć po udostępnieniu linku.
Najczęstsze pytania
Jaki powinien być rozmiar obrazu Open Graph?
Używaj 1200 x 630 jako praktycznego domyślnego rozmiaru dla większości podglądów Open Graph. Jest wystarczająco duży dla ekranów o wysokiej rozdzielczości i bliski popularnemu proporcjom 1,91:1. Nadal testuj końcowy URL, bo każda platforma może inaczej przycinać lub buforować podglądy.
Czy mogę używać tego samego obrazu Open Graph na każdej stronie?
Możesz, ale zwykle jest to słabsze. Ogólny obraz marki jest lepszy niż brak obrazu, ale ważne artykuły, strony produktów i narzędzia powinny mieć obraz podglądu dopasowany do konkretnej strony.
Dlaczego mój stary obraz Open Graph nadal się wyświetla?
Najczęstszą przyczyną jest buforowanie przez platformę. Użyj Facebook Sharing Debugger, LinkedIn Post Inspector lub narzędzi kart X, aby odświeżyć URL. Jeśli stary plik nadal się pojawia, opublikuj nowy obraz z nową nazwą pliku lub wersjonowanym URL.
Jaka jest różnica między og:image a twitter:image?
og:image to standardowy obraz Open Graph używany przez wiele platform. twitter:image jest specyficzny dla kart X. Jeśli podasz twitter:image, X może użyć tego obrazu zamiast og:image.
Czy obraz JSON-LD powinien odpowiadać obrazowi Open Graph?
Nie musi być identyczny, ale powinien opowiadać tę samą historię strony. Metadane wyszukiwania, tagi Open Graph, Twitter cards i JSON-LD nie powinny wskazywać na niepowiązane lub przestarzałe obrazy.
Jaką rolę pełni PixelPress w obrazach Open Graph?
PixelPress pasuje po ustaleniu rozmiaru obrazu, nazwy pliku i roli. Może pomóc w lokalnej konwersji końcowych plików, zachowując oryginały bez zmian. Strona nadal wymaga poprawnych metadanych i testów podglądu.