အခမဲ့ Meta Tag & Open Graph ထုတ်လုပ်စက်

မည်သို့ အလုပ်လုပ်သည်

Tag ပေါင်းစည်းမှုနှင့် head-parsing အားလုံးကို သင့် browser ထဲတွင် တိုက်ရိုက် ဖြစ်ပျက်ပါသည် — server မပါဝင်ပါ။ ကိရိယာသည် React ၏ useMemo ကို သုံး၍ HTML string များကို reactively တည်ဆောက်ပြီး browser ၏ native DOMParser API ကို import/audit feature အတွက် ရှိပြီးသား စာမျက်နှာ markup ကို ဖတ်ရန် သုံးသည်။

1. 1
   Form input သည် live assembly ကို မောင်းနှင်သည်

   ရိုက်နေစဉ် useMemo hook တစ်ခုသည် title၊ meta description၊ Open Graph property များနှင့် Twitter Card attribute များပါသော tag block အပြည့်အစုံကို ချက်ချင်း ပြန်တည်ဆောက်ပေးပြီး special character များ (&, <, >, ") ကို escape လုပ်သဖြင့် output ကို HTML ထဲသို့ တိုက်ရိုက် paste လုပ်ရန် ဘေးကင်းသည်။
2. 2
   Browser ၏ URL constructor မှတစ်ဆင့် URL validation

   URL field တစ်ခုစီ (page URL, social image) ကို browser ၏ built-in URL constructor ကို သုံး၍ စစ်ဆေးသည်။ Dotted hostname ပါသော http:// သို့မဟုတ် https:// address များသာ ဖြတ်သန်းသည်၊ မမှန်ကန်သော တန်ဖိုးများသည် copy ခလုတ်ကို ပိတ်ဆို့ပြီး inline error ပြသသည်။
3. 3
   Import: DOMParser သည် ရှိပြီးသား head markup ကို ဖတ်သည်

   ရှိပြီးသား <head> HTML ကို audit လုပ်ရန် paste လုပ်ပါက ကိရိယာသည် ၎င်းကို inert mode တွင် DOMParser မှတစ်ဆင့် run လုပ်သည် — script မည်သည်မျှ execute မဖြစ်ပါ၊ network request မလုပ်ပါ။ ထို့နောက် parse လုပ်ထားသော document ကို သိထားသော meta selector များ (og:title, twitter:description, canonical link, etc.) အတွက် query လုပ်ပြီး တွေ့သမျှဖြင့် form field များကို ကြိုတင်ဖြည့်ပေးသည်။
4. 4
   Live Google နှင့် social card ကြိုကြားမှုများ

   ကိရိယာသည် ပုံစံချထားသော Google ရှာဖွေရလဒ်တစ်ခုနှင့် Open Graph card ကြိုကြားမှုတစ်ခုကို form state တူတူကို သုံး၍ အချိန်နှင့်တပြေးညီ render လုပ်ပေးသည်၊ ထို့ကြောင့် title နှင့် description ကို output copy မလုပ်မီ မည်သို့ တိုတောင်းသွားမည်ကို အတိအကျ မြင်နိုင်သည်။

ဆက်နွှယ်သော ကိရိယာများ