Θέλατε ποτέ ο ιστότοπός σας Next.js να εμφανίζεται ως εμπλουτισμένο αντικείμενο όταν κοινοποιείται στα μέσα κοινωνικής δικτύωσης; Εάν ναι, τότε πρέπει να εφαρμόσετε το πρωτόκολλο Open Graph.

Το πακέτο next-seo διευκολύνει την προσθήκη ετικετών Open Graph στον ιστότοπό σας Next.js. Μπορείτε επίσης να χρησιμοποιήσετε μια πιο χειροκίνητη προσέγγιση για καλύτερο έλεγχο του τελικού αποτελέσματος.

Τέλος, θα θελήσετε να εξετάσετε ποιες ακριβώς πληροφορίες θα συμπεριλάβετε στις ετικέτες σας.

Τι είναι το Open Graph;

Το πρωτόκολλο Open Graph είναι ένα ανοιχτό πρότυπο που επιτρέπει στους προγραμματιστές να ελέγχουν τον τρόπο με τον οποίο τα μέσα κοινωνικής δικτύωσης εμφανίζουν το περιεχόμενό τους. Αναπτύχθηκε αρχικά από το Facebook, αλλά πολλές άλλες πλατφόρμες έχουν υιοθετήσει από τότε το πρωτόκολλο. Αυτά περιλαμβάνουν το Twitter, το LinkedIn και το Pinterest.

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

Γιατί να χρησιμοποιήσετε το πρωτόκολλο Open Graph;

Υπάρχουν τρεις κύριοι τομείς που πρέπει να βελτιώσει το Open Graph: η δέσμευση στα μέσα κοινωνικής δικτύωσης, το SEO και η επισκεψιμότητα του ιστότοπου.

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

2. Βελτιώστε το SEO

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

3. Αυξήστε την επισκεψιμότητα του ιστότοπου

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

4. Βελτιώστε την εμπειρία χρήστη

Ένα άλλο πλεονέκτημα της χρήσης του πρωτοκόλλου Open Graph είναι ότι μπορεί να βελτιώσει την εμπειρία χρήστη στον ιστότοπό σας. Συμπεριλαμβάνοντας μεταδεδομένα, μπορείτε να βοηθήσετε την προσβασιμότητα και να επαναχρησιμοποιήσετε τα δεδομένα, διασφαλίζοντας ότι οι χρήστες βλέπουν τις πιο σχετικές πληροφορίες. Αυτό μπορεί να οδηγήσει σε μια καλύτερη συνολική εμπειρία στον ιστότοπό σας, η οποία μπορεί να οδηγήσει σε περισσότερους επισκέπτες που επιστρέφουν.

Γιατί να χρησιμοποιήσετε το Next.js;

Υπάρχουν δύο κύριοι λόγοι για να χρησιμοποιήσετε το Next.js: να βελτιώσετε την απόδοση και να κάνετε την ανάπτυξη ευκολότερη.

1. Βελτιώστε την απόδοση

Το Next.js μπορεί να συμβάλει στη βελτίωση της απόδοσης με τον διαχωρισμό κώδικα της εφαρμογής σας και την προανάκτηση πόρων. Αυτό μπορεί να οδηγήσει σε ταχύτερο χρόνο φόρτωσης και μειωμένο φόρτο διακομιστή.

2. Κάντε την ανάπτυξη πιο εύκολη

Το Next.js μπορεί επίσης να διευκολύνει την ανάπτυξη παρέχοντας έναν απλό τρόπο δημιουργήστε εφαρμογές React που αποδίδονται από διακομιστή. Αυτό μπορεί να κάνει πιο γρήγορη και ευκολότερη την ανάπτυξη και την ανάπτυξη εφαρμογών React.

Πώς να εφαρμόσετε το Πρωτόκολλο Open Graph στο Next.js

Υπάρχουν δύο τρόποι για να εφαρμόσετε το Open Graph Protocol στο Next.js: χρησιμοποιώντας το πακέτο next-seo ή δημιουργία προσαρμοσμένου _document.js αρχείο.

Μέθοδος 1: Χρήση του πακέτου next-seo

Ο ευκολότερος τρόπος για να εφαρμόσετε το Open Graph Protocol στο Next.js είναι να χρησιμοποιήσετε το πακέτο next-seo. Αυτό το πακέτο θα δημιουργήσει αυτόματα τις απαραίτητες ετικέτες για εσάς.

Για να εγκαταστήσετε το πακέτο next-seo, εκτελέστε την ακόλουθη εντολή:

npm εγκαθιστώΕπόμενο-seo --αποθηκεύσετε

Μετά την εγκατάσταση του πακέτου, μπορείτε να το χρησιμοποιήσετε προσθέτοντας τον παρακάτω κώδικα στο δικό σας index.js αρχείο:

εισαγωγή { NextSeo } από 'next-seo'?
συνθ DemoPage = () => (
<>
<NextSeo
 τίτλος="Ο τίτλος σου"
 περιγραφή="Αυτή είναι μια περιγραφή επίδειξης"
 κανονικός="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 τίτλος: 'Ανοίξτε τον τίτλο του γραφήματος',
 περιγραφή: 'Ανοίξτε την περιγραφή γραφήματος',
 εικόνες: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 πλάτος: 800,
 ύψος: 600,
 alt: 'Og Εικόνα Alt',
 τύπος: 'εικόνα/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 πλάτος: 900,
 ύψος: 800,
 alt: 'Og Image Alt Second',
 τύπος: 'εικόνα/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 όνομα ιστοσελίδας: 'YourSiteName',
 }}
 twitter={{
 λαβή: '@λαβή',
 ιστοσελίδα: '@ιστοσελίδα',
 Τύπος κάρτας: 'σύνοψη_μεγάλη_εικόνα',
 }}
 />
<Π>Επίδειξη σελίδας</Π>
</>
);
εξαγωγήΠροκαθορισμένο DemoPage;

Αυτός ο κώδικας εισάγει το στοιχείο NextSeo από το πακέτο next-seo και το χρησιμοποιεί για να καθορίσει τον τίτλο, την περιγραφή και την εικόνα για τη σελίδα. Καθορίζει επίσης το όνομα της τοποθεσίας και τη λαβή Twitter.

Εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τον διακομιστή ανάπτυξης:

npm εκτέλεση dev

Ανοιξε http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε τη σελίδα επίδειξης.

Μέθοδος 2: Χρήση του Προσαρμοσμένου αρχείου _document.js

Ένας άλλος τρόπος για να εφαρμόσετε το Open Graph Protocol στο Next.js είναι να δημιουργήσετε ένα προσαρμοσμένο _document.js αρχείο. Αυτό το αρχείο θα σας επιτρέψει να καθορίσετε μόνοι σας τις ετικέτες Open Graph και δημιουργία επαναχρησιμοποιήσιμου κώδικα για όλες τις σελίδες.

Για να δημιουργήσετε ένα έθιμο _document.js αρχείο, δημιουργήστε ένα νέο αρχείο στο δικό σας σελίδες κατάλογο με τα ακόλουθα περιεχόμενα:

εισαγωγή Document, { Html, Head, Main, NextScript } από 'Επόμενο/έγγραφο';
τάξηMyDocumentεκτείνεταιΕγγραφο{
στατικόςασυγχρονισμός getInitialProps (ctx) {
συνθ αρχικόΠροπς = αναμένω Document.getInitialProps (ctx);
ΕΠΙΣΤΡΟΦΗ { ...initialProps };
 }


render() {
ΕΠΙΣΤΡΟΦΗ (
<Html>
<Κεφάλι>
<μετα-ιδιότητα="og: url" περιεχόμενο="https://www.example.com" />
<μετα-ιδιότητα="og: τίτλος" περιεχόμενο="Ανοίξτε τον τίτλο του γραφήματος" />
<μετα-ιδιότητα="og: περιγραφή" περιεχόμενο="Ανοίξτε την περιγραφή γραφήματος" />
<μετα-ιδιότητα="og: εικόνα" περιεχόμενο="https://www.example.com/og-image.jpg" />
<μετα-ιδιότητα="og: site_name" περιεχόμενο="YourSiteName" />
<μετα όνομα="twitter: κάρτα" περιεχόμενο="σύνοψη_μεγάλη_εικόνα" />
<μετα όνομα="twitter: ιστότοπος" περιεχόμενο="@ιστοσελίδα" />
<μετα όνομα="twitter: δημιουργός" περιεχόμενο="@λαβή" />
</Head>
<σώμα>
<Κύρια />
<NextScript />
</body>
</Html>
 );
 }
}
εξαγωγήΠροκαθορισμένο MyDocument;

Προσθέστε το παρακάτω περιεχόμενο στο αρχείο index.js:

συνθ DemoPage = () => (
<>
<Π>Επίδειξη σελίδας</Π>
</>
);
εξαγωγήΠροκαθορισμένο DemoPage;

Αυτός ο κώδικας εισάγει το στοιχείο Document από το επόμενο/έγγραφο και δημιουργεί ένα προσαρμοσμένο MyDocument συστατικό. Καθορίζει τον τίτλο, την περιγραφή και την εικόνα για τη σελίδα μας, καθώς και το όνομα της τοποθεσίας και τη λαβή Twitter.

Εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τον διακομιστή ανάπτυξης:

npm εκτέλεση dev

Ανοιξε http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε τη σελίδα επίδειξης.

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

Υπάρχουν επίσης πολλοί άλλοι τρόποι για τη βελτίωση της κατάταξης του ιστότοπου. Θα πρέπει να βελτιστοποιήσετε τον ιστότοπό σας για κινητές συσκευές και να χρησιμοποιείτε τίτλους και περιγραφές πλούσιους σε λέξεις-κλειδιά. Αλλά η χρήση ετικετών Open Graph είναι ένας γρήγορος και εύκολος τρόπος για να ξεκινήσετε.