Γεννήτρια Meta Tag & Open Graph δωρεάν

Πώς λειτουργεί

Όλη η σύνθεση tags και η ανάλυση του head γίνονται απευθείας στον browser σας — χωρίς διακομιστή. Το εργαλείο χρησιμοποιεί το useMemo του React για να δημιουργεί δυναμικά συμβολοσειρές HTML και το εγγενές DOMParser API του browser για να διαβάζει υπάρχον markup σελίδας για τη λειτουργία εισαγωγής/ελέγχου.

1. 1
   Η είσοδος της φόρμας οδηγεί ζωντανή σύνθεση

   Καθώς πληκτρολογείτε, ένα useMemo hook συνθέτει αμέσως ξανά όλο το μπλοκ tags — title, meta description, ιδιότητες Open Graph και χαρακτηριστικά Twitter Card — κάνοντας escape τους ειδικούς χαρακτήρες (&, <, >, ") ώστε η έξοδος να επικολλάται με ασφάλεια απευθείας σε HTML.
2. 2
   Επικύρωση URL μέσω του URL constructor του browser

   Κάθε πεδίο URL (URL σελίδας, εικόνα κοινωνικών δικτύων) επικυρώνεται με τον ενσωματωμένο URL constructor του browser. Περνούν μόνο σωστά διαμορφωμένες διευθύνσεις http:// ή https:// με hostnames που περιέχουν τελεία· οι μη έγκυρες τιμές μπλοκάρουν το κουμπί αντιγραφής και εμφανίζουν σφάλμα δίπλα στο πεδίο.
3. 3
   Εισαγωγή: το DOMParser διαβάζει υπάρχον markup head

   Αν επικολλήσετε υπάρχον HTML <head> για έλεγχο, το εργαλείο το περνά από DOMParser σε αδρανή λειτουργία — κανένα script δεν εκτελείται και κανένα αίτημα δικτύου δεν γίνεται. Έπειτα αναζητά στο έγγραφο γνωστούς επιλογείς meta (og:title, twitter:description, canonical link κ.λπ.) και συμπληρώνει τα πεδία της φόρμας με ό,τι βρει.
4. 4
   Ζωντανές προεπισκοπήσεις Google και κοινωνικών καρτών

   Το εργαλείο αποδίδει σε πραγματικό χρόνο ένα μορφοποιημένο αποτέλεσμα αναζήτησης Google και μια προεπισκόπηση κάρτας Open Graph με την ίδια κατάσταση φόρμας, ώστε να βλέπετε ακριβώς πώς θα περικοπούν ο τίτλος και η περιγραφή πριν αντιγράψετε την έξοδο.

Σχετικά εργαλεία