Gjenerues Meta Tag & Open Graph Falas

Si funksionon

I gjithë montimi i etiketave dhe analizimi i kreut ndodh direkt në shfletuesin tënd — pa asnjë server të përfshirë. Mjeti përdor useMemo të React-it për të ndërtuar në mënyrë reaguese vargje HTML dhe API-në vendase DOMParser të shfletuesit për të lexuar markup-in ekzistues të faqes për veçorinë e importit/auditimit.

1. 1
   Hyrja e formularit drejton montimin e drejtpërdrejtë

   Ndërsa shkruan, një hook useMemo e rimonton menjëherë tërë bllokun e etiketave — titullin, përshkrimin meta, vetitë Open Graph, dhe atributet Twitter Card — duke shpëtuar karakteret e veçanta (&, <, >, ") kështu që dalja është e sigurt për t'u ngjitur direkt në HTML.
2. 2
   Validim URL-je përmes konstruktorit URL të shfletuesit

   Çdo fushë URL (URL faqeje, imazh social) validohet duke përdorur konstruktorin e integruar URL të shfletuesit. Vetëm adresat e formuara mirë http:// ose https:// me emra hostesh me pika kalojnë; vlerat e pavlefshme e bllokojnë butonin e kopjimit dhe shfaqin një gabim brendazi.
3. 3
   Import: DOMParser lexon markup-in ekzistues të kreut

   Nëse ngjit HTML ekzistues <head> për ta audituar, mjeti e xhiron përmes DOMParser në mënyrë inerte — nuk ekzekutohet asnjë skript dhe nuk bëhet asnjë kërkesë rrjeti. Pastaj kërkon në dokumentin e analizuar për selektorë meta të njohur (og:title, twitter:description, canonical link, etj.) dhe parambush fushat e formularit me çfarë gjen.
4. 4
   Parashikime të drejtpërdrejta Google dhe kartash sociale

   Mjeti vizaton një rezultat kërkimi Google të stilizuar dhe një parashikim karte Open Graph në kohë reale duke përdorur të njëjtën gjendje formulari, kështu që mund të shohësh saktësisht si do të shkurtohen titulli dhe përshkrimi para se të kopjosh daljen.

Mjete të ngjashme