Softonic

Podgląd Open Graph

Krok 1 / 2
Dalej

Wpisz tytuł, opis, nazwę witryny, adres URL strony oraz adres URL obrazu, a to narzędzie wyrenderuje na żywo kartę udostępniania dla Facebooka i X (Twittera), która aktualizuje się po każdym naciśnięciu klawisza. To piaskownica projektowa dla Twoich tagów Open Graph: nic nie jest pobierane ani publikowane, więc możesz przećwiczyć długość nagłówka i kadrowanie obrazu, aż karta będzie wyglądać jak należy, a potem przenieść treść do prawdziwych tagów og:.

Jak powstaje podgląd

  1. 1

    Wpisz pola karty

    Tytuł, nazwa witryny, opis, adres URL strony i adres URL obrazu. Każde pole odpowiada jednemu tagowi og:.

  2. 2

    Obserwuj aktualizację kart

    Makiety Facebooka i X renderują się ponownie w miarę pisania, z użyciem rzeczywistego układu i przycinania każdej z platform.

  3. 3

    Dodaj adres URL obrazu

    Wklej bezwzględny adres obrazu https, aby zobaczyć kadr; zostaw puste, a karta Facebooka pokaże element zastępczy.

  4. 4

    Przenieś do swoich tagów og:

    Gdy karta dobrze się czyta, przenieś ten sam tytuł, opis i obraz do tagów meta swojej strony.

Czym staje się każde pole

Pole Tag Open Graph Widoczne na karcie
Tytuł og:title Pogrubiony nagłówek, przycięty do jednej linii
Opis og:description Szary podtytuł, ograniczony do dwóch linii
Nazwa witryny og:site_name Mała etykieta nad nagłówkiem Facebooka
Adres URL og:url Wyświetlana jest domena; wyznacza ją host
Adres URL obrazu og:image Przycięty do 1.91:1 na obu makietach kart

Narzędzie odczytuje host z wpisanego adresu URL, więc https://blog.example.com/post pokaże na karcie blog.example.com.

Dwie karty i czym się różnią

  • Facebook pokazuje obraz przycięty do 1.91:1, następnie domenę zapisaną kapitalikami, pogrubiony tytuł w jednej linii i opis w maksymalnie dwóch liniach. Bez adresu URL obrazu renderuje szary element zastępczy, co jest najczęstszą przyczyną płaskiego udostępnienia bez obrazu, jakie spotyka się w praktyce.
  • X (Twitter) pokazuje zaokrągloną kartę summary_large_image: obraz w kadrze 2:1, domenę, tytuł oraz opis pod spodem.

Jak dopasować treść

  • Tytuł: celuj w 60 do 70 znaków. Facebook ucina około 88, a X około 70, więc tytuł w granicach 70 znaków wszędzie pozostaje w całości.
  • Opis: utrzymaj go poniżej mniej więcej 160 znaków; karta ogranicza się do dwóch linii, a reszta zostaje odcięta.
  • Obraz: zaprojektuj w rozmiarze 1200 x 630 px, aby kadr 1.91:1 był czysty, i umieść go pod bezwzględnym adresem https://. Ścieżka względna nie załaduje się, gdy tagi trafią na produkcję.
  • Nazwa witryny: krótka, wyłącznie marka, bez hasła reklamowego. Znajduje się nad nagłówkiem jako etykieta.

Lista kontrolna na dzień publikacji

  • [ ] Tytuł poniżej 70 znaków
  • [ ] Opis poniżej 160 znaków
  • [ ] Adres URL obrazu jest bezwzględny (https, nie // ani ścieżka względna)
  • [ ] Obraz zaprojektowany w rozmiarze 1200 x 630 px, JPG lub PNG
  • [ ] Adres URL zgodny z kanonicznym, który wdrożysz
  • [ ] Treść przeniesiona do prawdziwych tagów og:, a następnie zweryfikowana walidatorem

Najczęściej zadawane pytania

Nie. Pola karty wpisujesz ręcznie, a narzędzie tworzy makietę tego, jak by wyglądały. To piaskownica projektowa, a nie robot pobierający, więc działa także zanim strona trafi do sieci. Aby odczytać tagi już obecne na stronie, wklej jej kod HTML do Walidatora Open Graph.

Kartę Facebooka i kartę X (Twittera) z dużym obrazem. Obie korzystają z tych samych wartości Open Graph, więc karta, która dobrze się tu prezentuje, jest dobrym punktem odniesienia dla LinkedIn, Slacka, Discorda i innych aplikacji rozwijających linki z tych samych tagów og:, z których każda ma nieco inne limity.

Ponieważ pole obrazu jest puste albo wklejony adres URL nie jest działającym, bezwzględnym adresem https. Dodaj pełny adres URL obrazu https, a kadr pojawi się od razu. Gdy strona trafi na produkcję, utrzymaj plik poniżej 5 MB i serwuj go z publicznym typem zawartości image/*.

Każda platforma przycina w innym miejscu (Facebook w okolicy 88 znaków, X w okolicy 70), a makieta karty to odzwierciedla. Skróć tytuł do 60 do 70 znaków, a pozostanie w całości na każdej platformie.

Powiązane narzędzia

Sprawdzanie długości meta opisu

Zmierz meta opis w znakach i szacowanych pikselach, porównaj wskazówki redakcyjne i przejrzyj makiety na komputer i telefon.

Sprawdzacz indeksowalności

Sprawdź, czy adres URL może zostać indeksowany: plik robots.txt, metaparametry robots, tag X-Robots, sygnały kanoniczne oraz stan HTTP.

Ekstraktor linków zewnętrznych

Wklej surowy kod HTML, opcjonalnie podaj adres URL podstawowy i otrzymaj czystą, bez duplikatów listę wszystkich zewnętrznych linków http/https w kodzie, na potrzeby audytów linków i analiz SEO.

Tester nagłówków bezpieczeństwa HTTP

Wklej nagłówki odpowiedzi HTTP i lokalnie sprawdź HSTS, CSP, ochronę ramek, MIME, referrer oraz zasady cross-origin.

Symulator wyników Google

Wyświetl przybliżony snippet w stylu Google z limitami znaków dla telefonu i komputera. Szkic pozostaje w tej sesji przeglądarki.

Sprawdzanie URL canonical

Wklej HTML strony i sprawdź jej tag rel=canonical: czy jest obecny, czy jest poprawnym absolutnym URL-em, czy zgadza się z URL-em strony?

Narzędzie jest dostępne w innych językach