Οι τίτλοι σελίδων, οι μετα-ετικέτες και οι μετα-περιγραφές είναι σημαντικά για το SEO. Είναι τα πρώτα πράγματα που βλέπει ένας χρήστης στο SERPS και καθορίζουν αν κάνουν κλικ στον ιστότοπό σας. Επομένως, είναι σημαντικό να βελτιστοποιήσετε τους τίτλους, τις μετα-ετικέτες και την περιγραφή του ιστότοπού σας.
Στο Next.js, τα προσθέτετε μέσω του προσαρμοσμένου στοιχείου κεφαλιού. Μπορείτε είτε να τα προσθέσετε σε όλες τις σελίδες της εφαρμογής είτε να τα προσαρμόσετε για κάθε σελίδα.
Προσθήκη καθολικής ετικέτας κεφαλίδας σε όλες τις σελίδες Next.js
Το Next.js παρέχει _app.js για την προετοιμασία σελίδων. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε μετα-ετικέτες κοινές σε όλες τις σελίδες.
εισαγωγή '../styles/globals.css'
εισαγωγή Κεφάλι από 'επόμενο/κεφάλι'λειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ <>
<Κεφάλι>
<μετα όνομα="συγγραφέας" περιεχόμενο="John Doe"/>
</Head>
<Στοιχείο {...pageProps} />
</>
}
εξαγωγήΠροκαθορισμένο MyApp
Εάν θέλετε μια σελίδα να έχει προσαρμοσμένο τίτλο και περιγραφή, προσθέστε το στοιχείο κεφαλής σε αυτό και το Next.js θα το χρησιμοποιήσει αντί για το προεπιλεγμένο στοιχείο στο στοιχείο εφαρμογής.
Προσθήκη Meta Tags και περιγραφής σε μια συγκεκριμένη σελίδα Next.js
Οι στατικές μετα-ετικέτες και οι περιγραφές είναι κατάλληλες για σελίδες των οποίων το περιεχόμενο παραμένει το ίδιο, για παράδειγμα, μια αρχική σελίδα.
Ανοίξτε το αρχείο /pages/index.js και τροποποιήστε την ετικέτα head με τον κατάλληλο τίτλο και περιγραφή.
εισαγωγή Κεφάλι από "επόμενο/κεφάλι";συνθ Αρχική σελίδα= () => {
ΕΠΙΣΤΡΟΦΗ (
<>
<Κεφάλι>
<τίτλος>Ιστολόγιο</title>
<μετα όνομα="θέαση" περιεχόμενο="αρχική κλίμακα=1,0, πλάτος=πλάτος συσκευής" />
<μετα όνομα='περιγραφή' περιεχόμενο='Άρθρα προγραμματισμού'/>
</Head>
<κύριος>
<h1>Καλώς ήρθατε στο μπλογκ μου!</h1>
</main>
</>
);
};
εξαγωγήΠροκαθορισμένο Σπίτι;
Μπορείτε να αποκτήσετε πρόσβαση στο στοιχείο Head εισάγοντάς το από το next/head. Λειτουργεί με την προσθήκη στοιχείων στην ετικέτα κεφαλής του μια σελίδα HTML. Ανάλογα με το πού τοποθετείτε αυτό το στοιχείο, οι μετα-ετικέτες και η περιγραφή θα είναι διαθέσιμες σε ολόκληρη την εφαρμογή ή σε μεμονωμένες σελίδες.
Η προσθήκη του τίτλου, του πλάτους της θύρας προβολής και της περιγραφής στο αρχείο _app.js διασφαλίζει ότι όλες οι σελίδες έχουν τα ίδια μεταδεδομένα.
Αυτή η σελίδα έχει στατικό περιεχόμενο, αλλά μερικές φορές, μπορεί να θέλετε να δημιουργήσετε σελίδες που καταναλώνουν δυναμικό περιεχόμενο.
Προσθήκη τίτλου και περιγραφών Dynamic Meta σε μια σελίδα Next.js
Ανάλογα με την περίπτωση χρήσης, μπορείτε να χρησιμοποιήσετε τα getStaticProps(), getStaticPaths() ή getServerSideProps() για να ανακτήσετε δεδομένα στο Next.js. Αυτά τα δεδομένα καθορίζουν το περιεχόμενο της σελίδας. Χρησιμοποιήστε το για να δημιουργήσετε τα μεταδεδομένα για τη σελίδα.
Για παράδειγμα, η δημιουργία των μεταδεδομένων για την εφαρμογή Next.js που αποδίδει αναρτήσεις ιστολογίου θα ήταν κουραστική.
Ο προτεινόμενος τρόπος είναι να δημιουργήσετε μια δυναμική σελίδα που λαμβάνει ένα αναγνωριστικό που μπορείτε να χρησιμοποιήσετε ανακτήστε το περιεχόμενο του ιστολογίου. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το περιεχόμενο στο στοιχείο κεφαλής.
εισαγωγή { getAllPosts, getSinglePost } από "../../utils/mdx";
εισαγωγή Κεφάλι από "επόμενο/κεφάλι";συνθ Δημοσίευση = ({ τίτλος, περιγραφή, περιεχόμενο }) => {
ΕΠΙΣΤΡΟΦΗ (
<>
<Κεφάλι>
<τίτλος>{τίτλος}</title>
<μετα όνομα="περιγραφή" περιεχόμενο={περιγραφή} />
</Head>
<κύριος>{/* περιεχόμενο σελίδας */}</main>
</>
);
};εξαγωγήσυνθ getStaticProps = ασυγχρονισμός ({ params }) => {
// λάβετε μία ανάρτηση
συνθ ανάρτηση = αναμένω getSinglePost (params.id, "posts");ΕΠΙΣΤΡΟΦΗ {
props: { ...post },
};
};εξαγωγήσυνθ getStaticPaths = ασυγχρονισμός () => {
// Ανάκτηση όλων των αναρτήσεων
μονοπάτια const = getAllPosts("αναρτήσεις").map(({ id }) => ({ params: { id } }));ΕΠΙΣΤΡΟΦΗ {
μονοπάτια,
εναλλακτική: ψευδής,
};
};
εξαγωγήΠροκαθορισμένο Θέση;
Η συνάρτηση getStaticProps μεταβιβάζει τα δεδομένα ανάρτησης στο στοιχείο Post ως στηρίγματα. Το στοιχείο Post καταστρέφει τον τίτλο, την περιγραφή και το περιεχόμενο από τα στηρίγματα. Το στοιχείο head χρησιμοποιεί στη συνέχεια τον τίτλο και την περιγραφή στις μετα-ετικέτες.
Το Next.js είναι ένα βελτιστοποιημένο πλαίσιο
Μόλις μάθατε πώς να χρησιμοποιείτε το στοιχείο head για να προσθέτετε μετα τίτλους και περιγραφές σε ένα έργο Next.js. Χρησιμοποιήστε αυτή τη γνώση για να δημιουργήσετε κεφαλίδες φιλικές προς το SEO, να αναρριχηθείτε στα SERP και να προσελκύσετε περισσότερους επισκέπτες στον ιστότοπό σας.
Εκτός από το στοιχείο head, το Next.js παρέχει άλλα στοιχεία, όπως Link και Image. Αυτά τα στοιχεία είναι βελτιστοποιημένα από το κουτί, διευκολύνοντας τη δημιουργία γρήγορων ιστοτόπων φιλικών προς το SEO.
