મફત મેટા ટેગ અને Open Graph જનરેટર

આ કેવી રીતે કાર્ય કરે છે

બધું tag assembly અને head-parsing સીધું તમારા બ્રાઉઝરમાં થાય છે — કોઈ સર્વર સામેલ નથી. ટૂલ HTML strings reactively બનાવવા React ના useMemo અને import/audit feature માટે existing page markup વાંચવા બ્રાઉઝરના નેટિવ DOMParser API નો ઉપયોગ કરે છે.

1. 1
   Form input live assembly ચલાવે છે

   તમે ટાઈપ કરો તેમ, useMemo હૂક તરત આખો tag block ફરીથી એસેમ્બલ કરે છે — title, meta description, Open Graph properties, અને Twitter Card attributes — ખાસ અક્ષરો (&, <, >, ") escape કરીને જેથી આઉટપુટ સીધું HTML માં પેસ્ટ કરવા સુરક્ષિત રહે.
2. 2
   બ્રાઉઝરના URL constructor દ્વારા URL validation

   દરેક URL ફિલ્ડ (page URL, social image) બ્રાઉઝરના બિલ્ટ-ઇન URL constructor વડે validate થાય છે. ફક્ત dotted hostnames સાથેના well-formed http:// કે https:// સરનામાં જ પસાર થાય છે; અમાન્ય મૂલ્યો copy બટન block કરે છે અને inline error બતાવે છે.
3. 3
   Import: DOMParser existing head markup વાંચે છે

   જો તમે audit કરવા existing <head> HTML પેસ્ટ કરો, તો ટૂલ તેને inert મોડમાં DOMParser દ્વારા ચલાવે છે — કોઈ scripts execute થતા નથી અને કોઈ network requests થતાં નથી. પછી તે parsed document ને known meta selectors (og:title, twitter:description, canonical link, વગેરે) માટે query કરે છે અને જે મળે તેનાથી form fields pre-fill કરે છે.
4. 4
   Live Google અને social card previews

   ટૂલ એ જ form state વાપરીને styled Google search result અને Open Graph card preview રિયલ ટાઇમમાં render કરે છે, જેથી તમે copy કરો તે પહેલાં title અને description કેવી રીતે truncate થશે તે બરાબર જોઈ શકો.

સંબંધિત સાધનો