Πώς να προσθέσετε κεφαλίδες φιλικές προς το SEO σε έναν ιστότοπο Next.js

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

Στο Next.js, τα προσθέτετε μέσω του προσαρμοσμένου στοιχείου κεφαλιού. Μπορείτε είτε να τα προσθέσετε σε όλες τις σελίδες της εφαρμογής είτε να τα προσαρμόσετε για κάθε σελίδα.

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

Προσθήκη καθολικής ετικέτας κεφαλίδας σε όλες τις σελίδες Next.js

Το Next.js παρέχει _app.js για την προετοιμασία σελίδων. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε μετα-ετικέτες κοινές σε όλες τις σελίδες.

import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

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

Προσθήκη Meta Tags και περιγραφής σε μια συγκεκριμένη σελίδα Next.js

Οι στατικές μετα-ετικέτες και οι περιγραφές είναι κατάλληλες για σελίδες των οποίων το περιεχόμενο παραμένει το ίδιο, για παράδειγμα, μια αρχική σελίδα.

Ανοίξτε το αρχείο /pages/index.js και τροποποιήστε την ετικέτα head με τον κατάλληλο τίτλο και περιγραφή.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

Μπορείτε να αποκτήσετε πρόσβαση στο στοιχείο Head εισάγοντάς το από το next/head . Λειτουργεί με την προσθήκη στοιχείων στην ετικέτα κεφαλής του μια σελίδα HTML . Ανάλογα με το πού τοποθετείτε αυτό το στοιχείο, οι μετα-ετικέτες και η περιγραφή θα είναι διαθέσιμες σε ολόκληρη την εφαρμογή ή σε μεμονωμένες σελίδες.

ρωτώντας μια κοπέλα στο facebook

Η προσθήκη του τίτλου, του πλάτους της θύρας προβολής και της περιγραφής στο αρχείο _app.js διασφαλίζει ότι όλες οι σελίδες έχουν τα ίδια μεταδεδομένα.

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

Προσθήκη τίτλου και περιγραφών Dynamic Meta σε μια σελίδα Next.js

Ανάλογα με την περίπτωση χρήσης, μπορείτε να χρησιμοποιήσετε τα getStaticProps(), getStaticPaths() ή getServerSideProps() για να ανακτήσετε δεδομένα στο Next.js. Αυτά τα δεδομένα καθορίζουν το περιεχόμενο της σελίδας. Χρησιμοποιήστε το για να δημιουργήσετε τα μεταδεδομένα για τη σελίδα.

Για παράδειγμα, η δημιουργία των μεταδεδομένων για την εφαρμογή Next.js που αποδίδει αναρτήσεις ιστολογίου θα ήταν κουραστική.

Ο προτεινόμενος τρόπος είναι να δημιουργήσετε μια δυναμική σελίδα που λαμβάνει ένα αναγνωριστικό που μπορείτε να χρησιμοποιήσετε ανακτήστε το περιεχόμενο του ιστολογίου . Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το περιεχόμενο στο στοιχείο κεφαλής.

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

Η συνάρτηση getStaticProps μεταβιβάζει τα δεδομένα ανάρτησης στο στοιχείο Post ως στηρίγματα. Το στοιχείο Post καταστρέφει τον τίτλο, την περιγραφή και το περιεχόμενο από τα στηρίγματα. Το στοιχείο head χρησιμοποιεί στη συνέχεια τον τίτλο και την περιγραφή στις μετα-ετικέτες.

πώς να βρείτε βίντεο που σας αρέσουν στο youtube

Το Next.js είναι ένα βελτιστοποιημένο πλαίσιο

Μόλις μάθατε πώς να χρησιμοποιείτε το στοιχείο head για να προσθέτετε μετα τίτλους και περιγραφές σε ένα έργο Next.js. Χρησιμοποιήστε αυτή τη γνώση για να δημιουργήσετε κεφαλίδες φιλικές προς το SEO, να αναρριχηθείτε στα SERP και να προσελκύσετε περισσότερους επισκέπτες στον ιστότοπό σας.

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