Softonic

Sprawdzanie tagów OG na localhost

Krok 1 / 3
Dalej

Podczas pracy na localhost nie zobaczysz jeszcze prawdziwych kart udostępniania, ponieważ Facebook i inne platformy nie mogą dotrzeć do adresu na Twoim komputerze. Tagi og możesz jednak sprawdzić już teraz. Wklej HTML z lokalnej strony, a narzędzie pokaże, które tagi istnieją i jakie mają wartości.

Jak testować tagi og z localhost

  1. 1

    Otwórz kod źródłowy lokalnie

    Otwórz stronę na localhost w przeglądarce i użyj view-source, aby skopiować sekcję head.

  2. 2

    Wklej HTML

    Wklej go w pole Kod HTML nagłówka strony, a następnie kliknij Dalej i Wyniki.

  3. 3

    Sprawdź czerwone pozycje

    Każda czerwona pozycja wśród sześciu kontroli to tag, którego narzędzie nie mogło odczytać z Twoich znaczników.

  4. 4

    Popraw szablon i testuj ponownie

    Zmień szablon w projekcie, przeładuj stronę, ponownie skopiuj kod źródłowy i wklej go jeszcze raz.

Dlaczego lokalne strony wymagają innego sprawdzenia

Platformy społecznościowe pobierają stronę z własnego serwera. Adresu takiego jak localhost:3000 albo 192.168.1.20 nie da się otworzyć z Facebooka, X ani z aplikacji czatu, więc podgląd widoczny tam nigdy nie odzwierciedla dokładnie lokalnego wyniku. To, co można sprawdzić lokalnie, to same znaczniki: czy tagi istnieją, czy mają poprawne atrybuty i czy zawierają wartości?

Co warto sprawdzić lokalnie

  • Czy każdy tag Open Graph używa property, na przykład <meta property="og:title" ...>.
  • Czy og:url zawiera pełny adres publicznej strony, a nie localhost. Lokalny adres w og:url wskazuje zły cel po późniejszej publikacji.
  • Czy og:image jest bezwzględnym adresem https. Ścieżka względna, na przykład /img/card.jpg, działa w przeglądarce, ale nie w karcie udostępniania.
  • Czy wartości są wypełnione i nie zawierają tekstu zastępczego z szablonu.

Testuj pod publicznym adresem

Gdy strona znajdzie się pod prawdziwą domeną, sprawdź ją ponownie tym samym narzędziem, kopiując kod źródłowy z publicznego adresu. Następnie użyj Sharing Debugger z publicznym URL-em, aby zobaczyć gotową kartę. Nie pobieraj tam lokalnego adresu, ponieważ platforma nie będzie mogła go osiągnąć.

Typowe błędy w środowiskach deweloperskich

Objaw Prawdopodobna przyczyna Rozwiązanie
og:url pokazuje localhost Wartość jest wpisana na sztywno w szablonie Zbuduj adres z publicznej domeny lub konfiguracji
Obraz pokazuje lokalną ścieżkę Adres względny Użyj pełnego adresu https do pliku
Tagi widać tylko w narzędziach dla programistów JavaScript dodaje je po załadowaniu strony Wypisz je w HTML generowanym przez serwer
Stare tagi zostają po zmianie Zapisana w pamięci podręcznej wersja strony Wyczyść pamięć podręczną środowiska i przeładuj stronę

Po publikacji

Zielony wynik tutaj oznacza, że znaczniki są kompletne, ale nie że publiczna strona działa. Sprawdź, czy strona odpowiada bez logowania, czy nie przekierowuje na inny adres i czy obraz otwiera się w przeglądarce. Dopiero wtedy test lokalny jest naprawdę zakończony.

Najczęściej zadawane pytania

Nie. Facebook nie dociera do adresów na Twoim komputerze ani w sieci lokalnej, więc z takich miejsc nie da się pobrać podglądu. Przetestuj znaczniki tutaj, a potem pobierz publiczny adres.

Og:url wskazuje kanoniczny adres, do którego prowadzą karta i udostępnienia. Jeśli wskazuje na localhost, udostępnienia rozproszą się między adresami, których nikt nie może otworzyć.

Tak, jeśli środowisko testowe ma publiczny adres. Sprawdź tam znaczniki tak samo jak na produkcji, ponieważ szablony mogą różnić się między środowiskami.

Narzędzie odczytuje wklejony przez Ciebie HTML, aby pokazać wynik. Nie pobiera Twojej lokalnej strony i nie łączy się z żadną platformą.

Powiązane narzędzia

Dekoder skróconych linków

Rozwijaj linki bit.ly, t.co, tinyurl i inne skrócone. Zobacz każdy przeskok przekierowania, kod statusu i cel końcowy, zanim klikniesz.

Sprawdzanie mieszanej treści

Przeskanuj dowolną stronę HTTPS w poszukiwaniu niezabezpieczonych zasobów HTTP, które wywołują ostrzeżenia o mieszanej treści i psują ikonę kłódki w przeglądarce.

Kreator linków UTM

Buduj adresy URL śledzące kampanie z parametrami UTM source, medium, campaign, term i content. Czyste, zakodowane w URL linki gotowe do reklam i newsletterów.

Ekstraktor linków wewnętrznych

Wyodrębnij wszystkie linki wewnętrzne z adresu URL lub wklejonego kodu HTML wraz z tekstem kotwicy, atrybutami rel i statusem nofollow na potrzeby audytów SEO.

Generator metatagów

Utwórz pełny zestaw metatagów: title, description, canonical, Open Graph, Twitter Card, ikony, PWA oraz dane strukturalne JSON-LD.

Parser UTM

Wklej adres URL kampanii i odczytaj jego pięć standardowych tagów UTM (source, medium, campaign, term i content) z każdą wartością zdekodowaną. Szybki sposób na sprawdzenie linku śledzącego przed wysyłką.

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

Poradniki i zastosowania