ಉಚಿತ Meta ಟ್ಯಾಗ್ ಮತ್ತು Open Graph ಜನರೇಟರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಎಲ್ಲಾ ಟ್ಯಾಗ್ ಜೋಡಣೆ ಮತ್ತು ಹೆಡ್-ಪಾರ್ಸಿಂಗ್ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ನಡೆಯುತ್ತದೆ — ಸರ್ವರ್ ಒಳಗೊಂಡಿಲ್ಲ. ಟೂಲ್ 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 ಮಾರ್ಕಪ್ ಓದುತ್ತದೆ

   ನೀವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ <head> HTML ಅನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಅಂಟಿಸಿದರೆ, ಟೂಲ್ ಅದನ್ನು inert ಮೋಡ್‌ನಲ್ಲಿ DOMParser ಮೂಲಕ ಚಾಲಿಸುತ್ತದೆ — ಯಾವುದೇ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಚಾಲನೆಗೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ಯಾವುದೇ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳು ಮಾಡಲಾಗುವುದಿಲ್ಲ. ನಂತರ ಇದು ತಿಳಿದ ಮೆಟಾ ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗಾಗಿ (og:title, twitter:description, canonical link, ಇತ್ಯಾದಿ) ಪಾರ್ಸ್ ಮಾಡಿದ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ ಮತ್ತು ಕಂಡುಬಂದದ್ದನ್ನು ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ ಮೊದಲೇ ತುಂಬುತ್ತದೆ.
4. 4
   ಲೈವ್ Google ಮತ್ತು ಸಾಮಾಜಿಕ ಕಾರ್ಡ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳು

   ಟೂಲ್ ಅದೇ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಬಳಸಿ ಸ್ಟೈಲ್ ಮಾಡಿದ Google ಹುಡುಕಾಟ ಫಲಿತಾಂಶ ಮತ್ತು Open Graph ಕಾರ್ಡ್ ಪೂರ್ವವೀಕ್ಷಣೆಯನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಔಟ್‌ಪುಟ್ ಅನ್ನು ನಕಲಿಸುವ ಮೊದಲು ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿವರಣೆ ಹೇಗೆ ಕಡಿತಗೊಳ್ಳುತ್ತದೆ ಎಂದು ನಿಖರವಾಗಿ ನೋಡಬಹುದು.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು