Narzędzie do sprawdzania Open Graph pomaga zrozumieć, dlaczego udostępniona strona ma niewłaściwy tytuł, brakujące metadane albo nieoczekiwaną deklarację obrazu. Screpy odczytuje HTML jednej publicznej strony i pokazuje jej znaczniki Open Graph, konflikty oraz grupy obrazów. Wykorzystaj te dane do poprawienia opublikowanego źródła, a następnie osobno sprawdź plik obrazu i rzeczywistą platformę udostępniania. Podgląd ilustruje zadeklarowane wartości; nie odtwarza karty sieci społecznościowej.
Jak korzystać z narzędzia do sprawdzania Open Graph
Wprowadź pełny publiczny URL strony, którą chcesz udostępnić, wraz ze ścieżką, i wyślij go do sprawdzenia. Sprawdzenie strony głównej nie obejmuje jej artykułów ani stron produktów. Najpierw przeczytaj Końcowy URL: jeśli adres przekierowuje, raport opisuje stronę docelową. Użyj Narzędzia do Sprawdzania Przekierowań, gdy cel jest nieoczekiwany.
Przejrzyj tabelę właściwości w kolejności źródła. Każdy wiersz pokazuje deklarację, jej wartość i, jeśli jest dostępny, numer wiersza źródłowego. Otwórz grupy obrazów, aby sprawdzić powiązane pola, a następnie przeczytaj ustalenia i proponowane poprawki.
Czerwony kolor wyróżnia brakujące wymagane wartości lub odrzucone wartości URL. Żółty oznacza konflikty albo częściowy zakres. Zielony informuje, że obsługiwane kontrole nie wykryły problemu w kompletnym zachowanym raporcie. Nie potwierdza wczytywania obrazu, dopasowania tekstu do strony ani wyświetlenia zamierzonej karty przez platformę.
Sprawdź cztery wymagane właściwości Open Graph
Protokół Open Graph określa cztery podstawowe wymagane właściwości. Sprawdź ich znaczenie, a nie tylko obecność:
| Właściwość | Co sprawdzić na tej stronie |
|---|---|
og:title |
Czytelny tytuł udostępnienia tej konkretnej strony, bez tekstu starej kampanii. |
og:type |
Zamierzony rodzaj obiektu, np. website lub article. |
og:image |
Adres obrazu, który chcesz powiązać ze stroną. |
og:url |
Stały adres mający identyfikować ten udostępniany obiekt. |
Kontrola obecności w Screpy wymaga co najmniej jednej zachowanej deklaracji z niepustą wartością dla każdej dokładnej nazwy właściwości. Wypełnione og:type przechodzi tę kontrolę nawet z nieodpowiednią wartością; narzędzie nie sprawdza słownika typów ani wszystkich wymagań właściwych danemu typowi.
Dodaj przydatne og:description, które objaśnia stronę bez powtarzania tytułu. Brak tego pola nie uruchamia kontroli czterech wymaganych właściwości. HTML <title> lub zwykły metaopis to odrębna deklaracja: nie zakładaj, że w tym raporcie uzupełnia puste pole Open Graph.
Popraw brakujące i sprzeczne znaczniki
Ustalenie o brakującej właściwości oznacza, że wymaganej nazwy nie ma w zachowanych wierszach albo wszystkie odpowiadające jej wartości są puste. Sprawdź pisownię i zawartość przed dodaniem kolejnego znacznika. Narzędzie rozpoznaje nazwy zapisane małymi literami, takie jak og:title; inaczej zapisane nazwy mogą nie zostać objęte tą kontrolą.
Konflikt oznacza różne surowe wartości dla og:title, og:type, og:url lub og:description. Liczy się nawet różnica w odstępach. Identyczne powtórzenia nie wywołują tego ostrzeżenia, choć zbędne wielokrotne generowanie deklaracji nadal warto uporządkować.
Przykładowa fikcyjna strona mogłaby publikować puste og:title, a następnie kolejne z treścią „Trasy piesze Atlas”. Późniejsza wartość spełnia kontrolę obecności, ale ilustracyjny podgląd używa pierwszej i pozostaje pusty. Różne wartości powodują też konflikt. Ostrzeżenie o braku i pusty podgląd odpowiadają zatem na różne pytania.
Ustal, które pole CMS, motyw lub szablon generuje każdy wiersz. Popraw odpowiednie źródło, aby zamierzona wartość występowała tylko raz w tych polach o pojedynczej wartości. Dodanie trzeciej deklaracji nie ukrywa oryginalnych. Zachowaj celowo powtórzone deklaracje obrazów do osobnego sprawdzenia grup poniżej.
Przypisz właściwości do odpowiedniego obrazu
Kilka deklaracji og:image może być zamierzonych. Umieść właściwości strukturalne każdego obrazu tuż po jego deklaracji głównej i przed następnym obrazem. Ten fikcyjny fragment head przedstawia powiązanie; nie jest kompletnym zestawem metadanych:
<meta property="og:image" content="https://example.com/media/route-map.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Mapa trasy pieszej Atlas">
<meta property="og:image" content="https://example.com/media/trail.jpg">
<meta property="og:image:alt" content="Ścieżka obok zalesionego zbocza">
Pierwsza grupa deklaruje mapę z wymiarami i tekstem alternatywnym. Druga ma własny opis i nie ma zadeklarowanych wymiarów. Przeniesienie drugiego pola alt nad jego deklarację główną przypisałoby je do mapy. Wartości te opisują źródło; Screpy nie pobiera plików ani nie mierzy, czy mapa rzeczywiście ma te wymiary.
Pola umieszczone przed jakąkolwiek deklaracją główną obrazu mogą występować w surowej tabeli bez powiązania z grupą. Popraw je na podstawie kolejności źródła. Przy częściowym zakresie sprawdź cały head, zanim zaufasz zachowanemu grupowaniu.
Protokół traktuje og:image:url jako alias og:image. Screpy rozpoznaje alias przy grupowaniu i wyborze podglądu, ale obecna kontrola wymaganych właściwości nadal oczekuje jawnego, niepustego og:image. Strona używająca wyłącznie aliasu może więc pokazać URL obrazu i jednocześnie ustalenie o brakującej właściwości. To ograniczenie narzędzia, a nie dowód, że alias jest niedozwolony.
Oddziel kontrole URL od kontroli obrazu i platformy
Kontrola URL obejmuje og:url, og:image, og:image:url i og:image:secure_url. Próbuje ustalić ich wartości jako adresy HTTP lub HTTPS względem końcowego URL strony. Nie stosuje adresu HTML <base> ani nie sprawdza wszystkich URL audio i wideo.
Wartość względna może przejść kontrolę, wskazując niewłaściwy plik. Jeśli końcowa strona to https://example.com/guides/route/, images/map.jpg prowadzi pod /guides/route/, a nie do katalogu /images/ witryny. Jeśli to możliwe, użyj pełnego zamierzonego adresu HTTPS, aby cel był jednoznaczny. Poprawna składnia URL nadal nie dowodzi istnienia pliku.
Otwórz zamierzony obraz osobno i sprawdź, czy odwiedzający mają do niego dostęp bez logowania. Przejrzyj rzeczywiste wymiary, rozmiar pliku i zawartość; zmiana og:image:width nie przeskalowuje obrazu. Na przykład wymagania modułu udostępniania LinkedIn określają minimum 1200 × 627 pikseli, maksymalny rozmiar 5 MB i zalecane proporcje 1,91:1. Są to wymagania LinkedIn, a nie uniwersalne limity Open Graph czy pomiary wykonywane tutaj. Chroniony obraz może pozostać niedostępny, nawet gdy jego wymiary pasują.
Rozróżniaj też og:url i <link rel="canonical">. Pierwsze identyfikuje obiekt udostępnienia; drugie wyraża preferencję adresu kanonicznego dla wyszukiwania. Drugie sprawdzisz za pomocą Narzędzia do Sprawdzania Znaczników Canonical. Jak wyjaśnia dokumentacja Google o adresach kanonicznych, te sygnały nie gwarantują URL wybranego przez Google.
Zweryfikuj opublikowaną poprawkę i zakres raportu
Zaktualizuj odpowiednie pole CMS lub szablon, opublikuj zmianę i ponownie prześlij tę samą stronę. Porównaj końcowy URL, kolejność właściwości i ustalenia z wcześniejszym raportem. Znaczniki wstawiane dopiero po uruchomieniu JavaScript nie są objęte tą kontrolą: sprawdzaj HTML dostarczany przez stronę, nie tylko dokument zmodyfikowany przez przeglądarkę.
Przeczytaj informację o zakresie, zanim uznasz brakujący wiersz za nieobecny znacznik. Screpy zachowuje do 200 deklaracji Open Graph i 20 grup obrazów. Raport częściowy może pomijać późniejsze deklaracje i nie ustala wszystkich powiązań obrazów. Sprawdź pełne źródło przed usuwaniem lub dodawaniem znaczników wyłącznie na tej podstawie. Wartości są także skracane do 4096 jednostek UTF-16; samo to skrócenie nie uruchamia oznaczenia częściowego zakresu. Sprawdź wyjątkowo długie wartości w źródle.
Wyeksportuj raport JSON, aby zachować zaobserwowane deklaracje i ustalenia. Jeśli kontrola nie może się zakończyć, wynik jest niedostępny; nie oznacza to, że strona przeszła kontrolę. Po poprawieniu źródła i sprawdzeniu rzeczywistego obrazu zweryfikuj prawdziwe udostępnienie na docelowej platformie. Użyj Analizatora Meta Tagów, jeśli chcesz sprawdzić także zwykły tytuł, opis i inne deklaracje head.