സൗജന്യ മെറ്റാ ടാഗ് & ഓപ്പൺ ഗ്രാഫ് ജനറേറ്റർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

എല്ലാ ടാഗ് അസംബ്ലിയും ഹെഡ്-പാഴ്സിംഗും നിങ്ങളുടെ ബ്രൗസറിൽ നേരിട്ട് നടക്കുന്നു — സെർവർ ഉൾപ്പെട്ടിട്ടില്ല. ടൂൾ HTML സ്ട്രിംഗുകൾ റിയാക്ടീവ് ആയി നിർമ്മിക്കാൻ React-ന്റെ useMemo ഉം, ഇംപോർട്ട്/ഓഡിറ്റ് ഫീച്ചറിനായി നിലവിലുള്ള പേജ് മാർക്കപ്പ് വായിക്കാൻ ബ്രൗസറിന്റെ നേറ്റീവ് DOMParser API ഉം ഉപയോഗിക്കുന്നു.

1. 1
   ഫോം ഇൻപുട്ട് തത്സമയ അസംബ്ലി നയിക്കുന്നു

   നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ, ഒരു useMemo ഹുക്ക് ഉടനടി മുഴുവൻ ടാഗ് ബ്ലോക്കും — ടൈറ്റിൽ, മെറ്റാ ഡിസ്ക്രിപ്ഷൻ, Open Graph പ്രോപ്പർട്ടികൾ, Twitter Card ആട്രിബ്യൂട്ടുകൾ — വീണ്ടും അസംബിൾ ചെയ്യുന്നു, പ്രത്യേക ക്യാരക്ടറുകൾ (&, <, >, ") എസ്കേപ്പ് ചെയ്യുന്നു, അതിനാൽ ഔട്ട്പുട്ട് HTML-ലേക്ക് നേരിട്ട് പേസ്റ്റ് ചെയ്യാൻ സുരക്ഷിതമാണ്.
2. 2
   ബ്രൗസറിന്റെ URL കൺസ്ട്രക്ടർ വഴി URL വാലിഡേഷൻ

   ഓരോ URL ഫീൽഡും (പേജ് URL, സോഷ്യൽ ഇമേജ്) ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ URL കൺസ്ട്രക്ടർ ഉപയോഗിച്ച് സാധൂകരിക്കുന്നു. ഡോട്ടഡ് ഹോസ്റ്റ്നെയിമുകളുള്ള നല്ല രൂപത്തിലുള്ള http:// അല്ലെങ്കിൽ https:// വിലാസങ്ങൾ മാത്രമേ പാസ് ആകൂ; അസാധുവായ മൂല്യങ്ങൾ കോപ്പി ബട്ടൺ ബ്ലോക്ക് ചെയ്യുകയും ഒരു ഇൻലൈൻ എറർ കാണിക്കുകയും ചെയ്യുന്നു.
3. 3
   ഇംപോർട്ട്: DOMParser നിലവിലുള്ള ഹെഡ് മാർക്കപ്പ് വായിക്കുന്നു

   ഓഡിറ്റ് ചെയ്യാൻ നിലവിലുള്ള <head> HTML നിങ്ങൾ പേസ്റ്റ് ചെയ്താൽ, ടൂൾ ഇത് inert മോഡിൽ DOMParser വഴി പ്രവർത്തിപ്പിക്കുന്നു — സ്ക്രിപ്റ്റുകളൊന്നും എക്സിക്യൂട്ട് ചെയ്യുന്നില്ല, നെറ്റ്‌വർക്ക് റിക്വസ്റ്റുകളൊന്നും നടത്തുന്നില്ല. പിന്നെ അറിയപ്പെടുന്ന മെറ്റാ സെലക്ടറുകൾക്കായി (og:title, twitter:description, canonical link, മുതലായവ) പാഴ്സ് ചെയ്ത ഡോക്യുമെന്റ് ക്വറി ചെയ്യുകയും കണ്ടെത്തുന്നതെന്തും ഫോം ഫീൽഡുകളിൽ മുൻകൂട്ടി പൂരിപ്പിക്കുകയും ചെയ്യുന്നു.
4. 4
   തത്സമയ Google, സോഷ്യൽ കാർഡ് പ്രിവ്യൂകൾ

   ടൂൾ ഒരേ ഫോം സ്റ്റേറ്റ് ഉപയോഗിച്ച് ഒരു സ്റ്റൈൽഡ് Google സെർച്ച് ഫലവും ഒരു Open Graph കാർഡ് പ്രിവ്യൂവും തത്സമയം റെൻഡർ ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾ ഔട്ട്പുട്ട് കോപ്പി ചെയ്യുന്നതിന് മുമ്പ് ടൈറ്റിലും ഡിസ്ക്രിപ്ഷനും എങ്ങനെ ട്രങ്കേറ്റ് ചെയ്യപ്പെടും എന്ന് കൃത്യമായി കാണാം.

അനുബന്ധ ടൂളുകൾ