ਮੁਫ਼ਤ ਮੈਟਾ ਟੈਗ ਅਤੇ Open Graph ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਸਾਰਾ tag ਜੋੜਨਾ ਅਤੇ head-ਪਾਰਸਿੰਗ ਸਿੱਧੇ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦਾ ਹੈ — ਕੋਈ ਸਰਵਰ ਸ਼ਾਮਲ ਨਹੀਂ। ਟੂਲ HTML strings ਬਣਾਉਣ ਲਈ React ਦਾ useMemo ਅਤੇ import/audit ਵਿਸ਼ੇਸ਼ਤਾ ਲਈ ਮੌਜੂਦਾ ਪੰਨੇ ਦਾ markup ਪੜ੍ਹਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ DOMParser API ਵਰਤਦਾ ਹੈ।

1. 1
   ਫ਼ਾਰਮ ਇਨਪੁੱਟ ਲਾਈਵ ਜੋੜ ਚਲਾਉਂਦਾ ਹੈ

   ਜਿਵੇਂ ਤੁਸੀਂ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਇੱਕ useMemo hook ਤੁਰੰਤ ਪੂਰਾ tag block ਮੁੜ ਜੋੜਦਾ ਹੈ — title, meta description, Open Graph properties, ਅਤੇ Twitter Card attributes — ਖ਼ਾਸ ਅੱਖਰਾਂ (&, <, >, ") ਨੂੰ escape ਕਰਦੇ ਹੋਏ ਤਾਂ ਜੋ ਆਉਟਪੁੱਟ ਸਿੱਧਾ HTML ਵਿੱਚ ਪੇਸਟ ਕਰਨ ਲਈ ਸੁਰੱਖਿਅਤ ਹੋਵੇ।
2. 2
   ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL constructor ਰਾਹੀਂ URL ਜਾਂਚ

   ਹਰ URL ਖੇਤਰ (ਪੰਨੇ ਦਾ URL, ਸੋਸ਼ਲ ਚਿੱਤਰ) ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬਿਲਟ-ਇਨ URL constructor ਨਾਲ ਜਾਂਚਿਆ ਜਾਂਦਾ ਹੈ। ਸਿਰਫ਼ ਬਿੰਦੀ ਵਾਲੇ hostnames ਵਾਲੇ ਸਹੀ ਬਣਤਰ ਦੇ http:// ਜਾਂ https:// ਪਤੇ ਪਾਸ ਹੁੰਦੇ ਹਨ; ਅਵੈਧ ਮੁੱਲ ਕਾਪੀ ਬਟਨ ਰੋਕਦੇ ਹਨ ਅਤੇ inline ਗਲਤੀ ਦਿਖਾਉਂਦੇ ਹਨ।
3. 3
   ਇੰਪੋਰਟ: DOMParser ਮੌਜੂਦਾ head markup ਪੜ੍ਹਦਾ ਹੈ

   ਜੇ ਤੁਸੀਂ ਜਾਂਚ ਲਈ ਮੌਜੂਦਾ <head> HTML ਪੇਸਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਟੂਲ ਇਸਨੂੰ inert ਮੋਡ ਵਿੱਚ DOMParser ਵਿੱਚੋਂ ਲੰਘਾਉਂਦਾ ਹੈ — ਕੋਈ scripts ਨਹੀਂ ਚੱਲਦੇ ਅਤੇ ਕੋਈ ਨੈੱਟਵਰਕ ਬੇਨਤੀ ਨਹੀਂ ਹੁੰਦੀ। ਫਿਰ ਇਹ ਪਾਰਸ ਕੀਤੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਜਾਣੇ-ਪਛਾਣੇ meta selectors (og:title, twitter:description, canonical link, ਆਦਿ) ਲੱਭਦਾ ਹੈ ਅਤੇ ਜੋ ਮਿਲੇ ਉਸ ਨਾਲ ਫ਼ਾਰਮ ਖੇਤਰ ਪਹਿਲਾਂ ਹੀ ਭਰ ਦਿੰਦਾ ਹੈ।
4. 4
   ਲਾਈਵ Google ਅਤੇ ਸੋਸ਼ਲ ਕਾਰਡ ਝਲਕਾਂ

   ਟੂਲ ਉਸੇ ਫ਼ਾਰਮ state ਨਾਲ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਇੱਕ ਸਜਾਇਆ Google ਖੋਜ ਨਤੀਜਾ ਅਤੇ Open Graph ਕਾਰਡ ਝਲਕ ਬਣਾਉਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਆਉਟਪੁੱਟ ਕਾਪੀ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਤੁਸੀਂ ਵੇਖ ਸਕੋ ਕਿ ਸਿਰਲੇਖ ਅਤੇ ਵੇਰਵਾ ਕਿਵੇਂ ਕੱਟੇ ਜਾਣਗੇ।

ਸੰਬੰਧਿਤ ਟੂਲ