Generator metatagów i Open Graph za darmo

Jak to działa

Całe składanie znaczników i parsowanie sekcji head odbywa się bezpośrednio w przeglądarce — bez udziału serwera. Narzędzie używa useMemo Reacta do reaktywnego budowania ciągów HTML i natywnego API DOMParser przeglądarki do odczytu istniejącego kodu strony w funkcji importu/audytu.

1. 1
   Formularz napędza składanie na żywo

   Podczas pisania hook useMemo natychmiast ponownie składa pełny blok znaczników — tytuł, meta description, właściwości Open Graph i atrybuty Twitter Card — escapując znaki specjalne (&, <, >, "), aby wynik można było bezpiecznie wkleić bezpośrednio do HTML.
2. 2
   Walidacja URL przez konstruktor URL przeglądarki

   Każde pole URL (adres strony, obraz dla serwisów społecznościowych) jest sprawdzane wbudowanym konstruktorem URL przeglądarki. Przechodzą tylko poprawne adresy http:// lub https:// z nazwami hostów zawierającymi kropkę; nieprawidłowe wartości blokują przycisk kopiowania i pokazują błąd przy polu.
3. 3
   Import: DOMParser odczytuje istniejący kod head

   Jeśli wkleisz istniejący HTML sekcji <head> do audytu, narzędzie przepuszcza go przez DOMParser w trybie bezczynnym — żadne skrypty nie są wykonywane i nie są wysyłane żadne żądania sieciowe. Następnie przeszukuje sparsowany dokument pod kątem znanych selektorów meta (og:title, twitter:description, link canonical itd.) i wstępnie wypełnia pola formularza znalezionymi wartościami.
4. 4
   Podgląd wyniku Google i karty społecznościowej na żywo

   Narzędzie renderuje w czasie rzeczywistym wystylizowany wynik wyszukiwania Google i podgląd karty Open Graph na podstawie tego samego stanu formularza, więc widzisz dokładnie, jak tytuł i opis zostaną przycięte, zanim skopiujesz wynik.

Powiązane narzędzia