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ă.

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.

import '../styles/globals.css'
import Cap din „următorul/cap”
funcţieMyApp({ Componentă, pageProps }) {
 întoarcere <>
<Cap>
<meta nume="autor" continut="John Doe"/>
</Head>
<Componenta {...pageProps} />
</>
}
exportMod implicit 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.

instagram viewer

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 Cap din „următorul/cap”;
const Acasă= () => {
întoarcere (
<>
<Cap>
<titlu>Blog</title>
<meta nume="fereastra" continut="scară inițială=1,0, lățime=lățime-dispozitiv" />
<meta nume='Descriere' continut='Articole de programare'/>
</Head>
<principal>
<h1>Bine ati venit pe blogul meu!</h1>
</main>
</>
 );
};
exportMod implicit Acasă;

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.

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 } din „../../utils/mdx”;
import Cap din „următorul/cap”;
const Postare = ({ titlu, descriere, conținut }) => {
întoarcere (
<>
<Cap>
<titlu>{titlu}</title>
<meta nume="Descriere" continut={descriere} />
</Head>
<principal>{/* conținutul paginii */}</main>
</>
 );
};


exportconst getStaticProps = asincron ({ parametri }) => {
// obține o singură postare
const post = așteaptă getSinglePost (params.id, „postări”);


întoarcere {
 recuzită: { ...post },
 };
};


exportconst getStaticPaths = asincron () => {
// Preluați toate postările
 const paths = getAllPosts("postări").map(({ id }) => ({ parametri: { id } }));


întoarcere {
 poteci,
 da înapoi: fals,
 };
};
exportMod implicit 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.

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.