Cum să adăugați anteturi compatibile cu SEO pe un site web Next.js

Titlurile paginilor, etichetele meta și descrierile meta sunt importante pentru SEO. Sunt primele lucruri pe care un utilizator le vede pe SERPS și determină dacă face clic pe site-ul dvs. Prin urmare, este important să optimizați titlurile, metaetichetele și descrierea site-ului dvs.

În Next.js, le adăugați prin componenta head personalizată. Puteți fie să le adăugați pe toate paginile din aplicație, fie să le personalizați pentru fiecare pagină.

REALIZAREA VIDEOCLIPULUI ZILEI

Adăugarea unei etichete globale Head la toate paginile Next.js

Next.js oferă _app.js pentru a inițializa paginile. Îl puteți folosi pentru a crea metaetichete partajate pe toate paginile.

conectat la internet, dar nu funcționează Windows 10

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

Dacă doriți ca o pagină să aibă un titlu și o descriere personalizate, adăugați componenta head la ea, iar Next.js o va folosi în loc de cea implicită din componenta App.

Adăugarea de meta-etichete și descriere la o anumită pagină Next.js

Metaetichetele și descrierile statice sunt potrivite pentru paginile al căror conținut rămâne același, de exemplu, o pagină de pornire.

Deschideți fișierul /pages/index.js și modificați eticheta head cu titlul și descrierea corespunzătoare.

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;

Accesați componenta Head importând-o din next/head . Funcționează prin adăugarea de elemente la eticheta head of o pagină HTML . În funcție de locul în care plasați această componentă, metaetichetele și descrierea vor fi disponibile în întreaga aplicație sau pe pagini individuale.

unde sunt salvate toate documentele dvs.

Adăugarea titlului, a lățimii ferestrei de vizualizare și a descrierii în fișierul _app.js asigură că toate paginile au aceleași metadate.

Această pagină are conținut static, dar uneori, poate doriți să creați pagini care consumă conținut dinamic.

Adăugarea unui metatitlu dinamic și descrieri la o pagină Next.js

În funcție de caz de utilizare, puteți utiliza getStaticProps(), getStaticPaths() sau getServerSideProps() pentru a prelua date în Next.js. Aceste date determină conținutul paginii. Folosiți-l pentru a crea metadatele pentru pagină.

De exemplu, crearea metadatelor pentru aplicația Next.js care redă postări de blog ar fi plictisitoare.

Metoda recomandată este să creați o pagină dinamică care să primească un identificator pe care îl puteți folosi preluați conținutul blogului . Puteți utiliza apoi acest conținut în componenta cap.

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;

Funcția getStaticProps transmite datele postării către componenta Post ca elemente de recuzită. Componenta Post desstructurează titlul, descrierea și conținutul din recuzită. Componenta head folosește apoi titlul și descrierea în metaetichetele.

cum se folosește îndrăzneala pentru a elimina vocea

Next.js este un cadru optimizat

Tocmai ați învățat cum să utilizați componenta head pentru a adăuga meta titluri și descrieri la un proiect Next.js. Folosiți aceste cunoștințe pentru a crea anteturi prietenoase cu SEO, pentru a urca în SERP-urile și pentru a atrage mai mulți vizitatori pe site-ul dvs.

În afară de componenta cap, Next.js oferă și alte componente precum Link și Image. Aceste componente sunt optimizate din fabricație, ceea ce face mai ușoară crearea de site-uri web rapide, prietenoase cu SEO.