Ġeneratur ta' Meta Tags u Open Graph b'xejn

Kif Taħdem

L-immuntar tat-tags u l-analiżi tal-head kollha jseħħu direttament fil-browser tiegħek — l-ebda server involut. L-għodda tuża useMemo ta' React biex tibni b'mod reattiv strings HTML u l-API DOMParser nattiva tal-browser biex taqra l-markup tal-paġna eżistenti għall-karatteristika tal-importazzjoni/verifika.

1. 1
   Id-dħul tal-formola jmexxi l-immuntar ħaj

   Hekk kif tittajpja, hook useMemo immedjatament jerġa' jibni l-blokk sħiħ tat-tags — titlu, deskrizzjoni meta, proprjetajiet Open Graph, u attributi Twitter Card — jeskejpja karattri speċjali (&, <, >, ") biex il-ħruġ ikun sigur biex jitwaħħal direttament fl-HTML.
2. 2
   Validazzjoni tal-URL permezz tal-kostruttur URL tal-browser

   Kull qasam tal-URL (URL tal-paġna, stampa soċjali) jiġi vvalidat bl-użu tal-kostruttur URL inkorporat tal-browser. Biss indirizzi http:// jew https:// ffurmati sew b'hostnames b'punti jgħaddu; valuri mhux validi jimblukkaw il-buttuna tal-kopja u juru żball inline.
3. 3
   Importazzjoni: DOMParser jaqra l-markup tal-head eżistenti

   Jekk twaħħal HTML <head> eżistenti biex tivverifikah, l-għodda tħaddmu permezz ta' DOMParser f'modalità inerti — l-ebda script jitħaddem u l-ebda talba tan-netwerk issir. Imbagħad tistaqsi d-dokument analizzat għal selettorijiet meta magħrufa (og:title, twitter:description, link kanoniku, eċċ.) u timla minn qabel il-qsma tal-formola b'dak li ssib.
4. 4
   Anteprimi ħajjin ta' Google u karta soċjali

   L-għodda tirrendja riżultat ta' tfittxija ta' Google stilizzat u anteprima ta' karta Open Graph f'ħin reali bl-użu tal-istess stat tal-formola, biex tara eżatt kif it-titlu u d-deskrizzjoni se jiġu maqtugħa qabel tikkopja l-ħruġ.

Għodod Relatati