නොමිලේ Meta Tag සහ Open Graph සකසන්නා

එය ක්‍රියා කරන්නේ කෙසේද

සියලුම tag assembly සහ head-parsing ඔබේ බ්‍රවුසරයේ කෙලින්ම සිදු වේ — සර්වරයක් සම්බන්ධ නොවේ. මෙවලම HTML strings reactively ගොඩනගා ගැනීමට React ගේ useMemo සහ import/audit feature එක සඳහා පවතින page markup කියවීමට බ්‍රවුසරයේ native DOMParser API එක භාවිතා කරයි.

1. 1
   Form input එක සජීවී assembly ධාවනය කරයි

   ඔබ ටයිප් කරන විටම, useMemo hook එකක් සම්පූර්ණ tag block එක — title, meta description, Open Graph properties, සහ Twitter Card attributes — ක්ෂණිකව නැවත එකලස් කර, special characters (&, <, >, ") escape කරයි, එබැවින් ප්‍රතිදානය කෙලින්ම HTML වෙත paste කිරීමට ආරක්ෂිතයි.
2. 2
   බ්‍රවුසරයේ URL constructor එක හරහා URL වලංගුකරණය

   සෑම URL field එකක්ම (page URL, social image) බ්‍රවුසරයේ අභ්‍යන්තර URL constructor එකෙන් වලංගු කෙරේ. dotted hostnames සහිත හොඳින් ගොඩනගා ඇති http:// හෝ https:// ලිපින පමණක් pass වේ; වලංගු නොවන අගයන් copy බොත්තම block කර inline error එකක් පෙන්වයි.
3. 3
   Import: DOMParser පවතින head markup කියවයි

   ඔබ පවතින <head> HTML audit කිරීමට paste කරන්නේ නම්, මෙවලම එය inert ප්‍රකාරයේ DOMParser හරහා ධාවනය කරයි — scripts කිසිවක් ක්‍රියාත්මක නොවේ, network ඉල්ලීම් කිසිවක් සිදු නොවේ. එය පසුව parse කළ document එකේ දන්නා meta selectors (og:title, twitter:description, canonical link, ආදිය) query කර සොයාගන්නා ඕනෑම දෙයකින් form fields pre-fill කරයි.
4. 4
   සජීවී Google සහ social card පෙරදසුන්

   මෙවලම එකම form state භාවිතයෙන් styled Google search result එකක් සහ Open Graph card preview එකක් තථ්‍ය කාලීනව render කරයි, එබැවින් ඔබට ප්‍රතිදානය පිටපත් කිරීමට පෙර title සහ description කෙසේ truncate වේද යන්න හරියටම දැක ගත හැක.

සම්බන්ධ මෙවලම්