Ποιες σημαντικές meta ετικέτες πρέπει να βρίσκονται στο head του εγγράφου;

Question

Accepted Answer

Οι ετικέτες `` στο `` παρέχουν μεταδεδομένα σχετικά με τη σελίδα — κωδικοποίηση χαρακτήρων, συμπεριφορά viewport, περιγραφές SEO και προεπισκοπήσεις κοινής χρήσης στο κοινωνικό δίκτυο. Δεν εμφανίζονται αλλά διαβάζονται από περιηγητές, μηχανές αναζήτησης και κοινωνικές πλατφόρμες. ## Τα δύο απαραίτητα ```html ``` - **`charset`** διασφαλίζει ότι το κείμενο (ιδιαίτερα non-ASCII) αποκωδικοποιείται σωστά. Τοποθετήστε το πρώτο. - **`viewport`** είναι αυτό που κάνει ένον ιστότοπο **responsive** σε κινητές συσκευές — χωρίς αυτό, τα τηλέφωνα εμφανίζονται σε ένα ψευδές πλάτος 980px και μικραίνουν, σπάζοντας το responsive CSS σας. ## SEO meta ```html Page Title — 50–60 chars ``` Το `` και η `description` είναι αυτά που εμφανίζονται στα αποτελέσματα της Google, επομένως προσδιορίζουν το ποσοστό κλικ. Το `canonical` ενημερώνει τις μηχανές αναζήτησης για το αρχική URL. ## Open Graph — προεπισκοπήσεις κοινής χρήσης στο κοινωνικό δίκτυο ```html <meta property="og:title" content="Shareable title" /> <meta property="og:description" content="Shown when shared" /> <meta property="og:image" content="https://site.com/preview.jpg" /> <meta property="og:url" content="https://site.com/page" /> <meta name="twitter:card" content="summary_large_image" /> ``` Αυτές ελέγχουν την κάρτα που εμφανίζεται όταν ο σύνδεσμός σας μοιράζεται στο Facebook, LinkedIn, Slack, X κ.λπ. — χωρίς αυτά λαμβάνετε μια άσχημη ή κενή προεπισκόπηση. ## Γιατί έχει σημασία Το `charset` και το `viewport` είναι μη διαπραγματεύσιμα για σωστή εμφάνιση και ανταπόκριση για κινητά· `title`/`description`/`canonical` προσδιορίζουν το SEO· Οι ετικέτες Open Graph ελέγχουν πώς φαίνονται οι σύνδεσμοί σας κατά την κοινή χρήση. Μαζί αποτελούν το επίπεδο μεταδεδομένων που κάνει μια σελίδα να εμφανίζεται σωστά, να κατατάσσεται και να μοιράζεται καλά.