Sprawdzanie i symulator OGP
- Bezpieczne
- Wyniki diagnostyki nie są nigdzie zapisywane ani publikowane.
Uwagi
Narzędzie do weryfikacji tagów OGP i symulacji wyglądu strony po udostępnieniu w mediach społecznościowych.
Przydatne podczas tworzenia obrazów OGP i testowania tagów meta HTML.
Źródło wejściowe
Wybierz jedną z trzech metod.
| URL strony | Odpowiednie dla publicznie dostępnych stron. |
|---|---|
| Źródło HTML | Odpowiednie dla stron w trakcie tworzenia lub z ograniczeniami dostępu. |
| Plik obrazu | Odpowiednie do sprawdzenia wyglądu obrazu OGP podczas tworzenia. |
Wynik diagnostyki
Ocena w trzech stopniach.
| Ocena A | Spełnia wszystkie zalecane wymagania. |
|---|---|
| Ocena B | Spełnia wymagane elementy, ale są zalecenia. |
| Ocena C | Niektóre elementy wymagają naprawy. |
Zalecany przykład
Poniższe ustawienia obejmują główne platformy SNS.
<meta property="og:title" content="Tytuł strony">
<meta property="og:description" content="Opis strony">
<meta property="og:url" content="URL strony">
<meta property="og:image" content="URL obrazu OGP">
<meta property="og:type" content="Typ strony">
<meta property="og:site_name" content="Nazwa witryny">
<meta name="twitter:card" content="Typ Twitter Card">Szczegóły tagów
Podstawowe tagi OGP
Tagi, które mogą być używane na różnych platformach. Zaleca się ustawienie wszystkich poniższych.
Użyj atrybutu `property`.
<meta property="og:title" content="Tytuł strony">
<meta property="og:description" content="Opis strony">
<meta property="og:url" content="URL strony">
<meta property="og:image" content="URL obrazu OGP">
<meta property="og:type" content="Typ strony">
<meta property="og:site_name" content="Nazwa witryny">og:title
Ustawia tytuł strony. Zwykle taki sam jak w tagu `title`.
W X (Twitter) brak może wyłączyć Twitter Card, więc jest to praktycznie wymagane.
<meta property="og:title" content="Tytuł strony">Przykład
<meta property="og:title" content="Sprawdzanie i symulator OGP">og:description
Ustawia opis strony. Zwykle taki sam jak w tagu `description`.
Na większości SNS, jeśli pominięto, `description` może zostać użyty jako fallback.
<meta property="og:description" content="Opis strony">Przykład
<meta property="og:description" content="Zdiagnozuj ustawienia OGP i sprawdź podgląd, jak Twoja strona będzie wyglądać po udostępnieniu w mediach społecznościowych na podstawie URL lub źródła HTML. Obsługuje X, Facebook i LINE oraz potrafi symulować także z pliku obrazu.">og:url
Ustaw URL strony jako absolutny URL.
<meta property="og:url" content="URL strony">Przykład
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Ustaw URL obrazu OGP jako absolutny URL. Zalecany rozmiar: `1200px`×`630px`.
Ponieważ może być wyświetlany jako 1:1, trzymaj ważne informacje w centralnym obszarze `630px`×`630px`.
<meta property="og:image" content="URL obrazu OGP">Przykład
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Określa typ strony.
| website | Strona główna serwisu |
|---|---|
| article | Strony inne niż główna, np. artykuły |
| blog | Strona główna bloga |
| product | Strony szczegółów produktu/usługi |
<meta property="og:type" content="Typ strony">Przykład
<meta property="og:type" content="article">og:site_name
Określa nazwę witryny. Zwykle wspólna dla wszystkich stron.
<meta property="og:site_name" content="Nazwa witryny">Przykład
<meta property="og:site_name" content="develop.tools">Tagi X (Twitter)
Tagi priorytetowe dla X (dawniej Twitter).
Jeśli podstawowe tagi OGP są ustawione, możesz pominąć wszystkie te bez problemu.
Ustaw `twitter:card` tylko, jeśli chcesz kontrolować rozmiar miniatury.
Użyj atrybutu `name`.
<meta name="twitter:card" content="Typ Twitter Card">
<meta name="twitter:title" content="Tytuł strony">
<meta name="twitter:description" content="Opis strony">
<meta name="twitter:image" content="URL miniatury">
<meta name="twitter:site" content="Nazwa użytkownika X/Twitter witryny">
<meta name="twitter:creator" content="Nazwa użytkownika X/Twitter autora">twitter:card
Ustawia typ Twitter Card. Podaj, jeśli chcesz dużą miniaturę.
Jeśli pominięto, będzie `summary`.
| summary | Mała miniatura (kwadrat) + informacje o stronie obok |
|---|---|
| summary_large_image | Duża miniatura + informacje o stronie pod spodem |
<meta name="twitter:card" content="Typ Twitter Card">Przykład
<meta name="twitter:card" content="summary_large_image">Tagi Facebook
Tagi używane przez Facebook.
Podaj je, jeśli chcesz korzystać z funkcji analitycznych specyficznych dla Facebooka.
<meta property="fb:app_id" content="ID aplikacji Facebook">