Meta-sildi ja Open Graphi generaator tasuta

Kuidas see töötab

Kogu siltikoostamine ja päise-parsimine toimub otse sinu brauseris — servet ei kaasata. Tööriist kasutab React'i useMemo, et reaktiivselt ehitada HTML-stringe ja brauseri natiivset DOMParser API-t olemasoleva lehe markupi lugemiseks impordi/audiitorlusfunktsiooni jaoks.

1. 1
   Vormi sisend juhib reaalajas koostamist

   Kirjutades koostab useMemo hook kohe uuesti kogu siltibloki — pealkiri, meta kirjeldus, Open Graph omadused ja Twitter Card atribuudid — paoates erimärke (&, <, >, "), nii et väljund on turvaline otse HTML-i kleepimiseks.
2. 2
   URL-i valideerimine brauseri URL-konstruktori kaudu

   Iga URL-väli (lehe URL, sotsiaalne pilt) valideeritakse brauseri sisseehitatud URL-konstruktori abil. Läbivad ainult hästimoodustatud http:// või https:// aadressid punktidega hostinimedega; kehtetud väärtused blokeerivad kopeerinupu ja näitavad reasisest viga.
3. 3
   Import: DOMParser loeb olemasoleva päise markupi

   Kui kleebid olemasoleva <head> HTML-i audiitorluseks, käivitab tööriist selle DOMParser'i kaudu inertses režiimis — skriptid ei käivitu ja võrgupäringuid ei tehta. See küsitleb seejärel parsitud dokumenti tuntud meta-selektorite osas (og:title, twitter:description, kanooniline link jne) ja eeltäidab vormi väljad sellega, mida see leiab.
4. 4
   Reaalajas Google'i ja sotsiaalse kaardi eelvaated

   Tööriist renderdab stiliseeritud Google'i otsingutulemuse ja Open Graph kaardi eelvaate reaalajas, kasutades sama vormi olekut, nii et näed täpselt, kuidas pealkiri ja kirjeldus kärbitakse enne väljundi kopeerimist.

Seotud tööriistad