Kuidas lisada Next.js veebisaidile SEO-sõbralikke päiseid

Lehekülje pealkirjad, metasildid ja metakirjeldused on SEO jaoks olulised. Need on esimesed asjad, mida kasutaja SERPS-is näeb ja määrab, kas nad klõpsavad teie veebisaidile. Seetõttu on oluline optimeerida oma veebisaidi pealkirjad, metasildid ja kirjeldus.

Teenuses Next.js lisate need kohandatud peakomponendi kaudu. Saate need lisada kõigile rakenduse lehtedele või kohandada neid iga lehe jaoks.

Globaalse peasildi lisamine kõigile Next.js lehtedele

Next.js pakub lehtede lähtestamiseks faili _app.js. Saate seda kasutada metasiltide loomiseks, mida jagatakse kõigil lehtedel.

importida '../styles/globals.css'
importida Pea alates 'järgmine/pea'
funktsiooniMinuApp({ Component, pageProps }) {
 tagasi <>
<Pea>
<meta nimi="autor" sisu="John Doe"/>
</Head>
<Komponent {...pageProps} />
</>
}
eksportidavaikimisi MinuApp

Kui soovite, et lehel oleks kohandatud pealkiri ja kirjeldus, lisage sellele peakomponent ja Next.js kasutab seda rakenduse komponendi vaikekomponendi asemel.

Metasiltide ja kirjelduse lisamine konkreetsele Next.js-lehele

Staatilised metasildid ja kirjeldused sobivad lehtedele, mille sisu jääb samaks, näiteks koduleht.

Avage fail /pages/index.js ja muutke head märgendit sobiva pealkirja ja kirjeldusega.

importida Pea alates "järgmine/pea";
konst Kodu= () => {
tagasi (
<>
<Pea>
<pealkiri>Blogi</title>
<meta nimi="vaateava" sisu="esialgne skaala = 1,0, laius = seadme laius" />
<meta nimi='kirjeldus' sisu='Programmeerimisartiklid'/>
</Head>
<peamine>
<h1>Tere tulemast minu blogisse!</h1>
</main>
</>
 );
};
eksportidavaikimisi Kodu;

Peakomponendile pääsete juurde, importides selle järgmisest/peast. See toimib, lisades elemendid peasildile HTML-leht. Sõltuvalt sellest, kuhu selle komponendi paigutate, on metasildid ja kirjeldus saadaval kogu rakenduses või üksikutel lehtedel.

Pealkirja, vaateava laiuse ja kirjelduse lisamine faili _app.js tagab, et kõigil lehtedel on samad metaandmed.

Sellel lehel on staatiline sisu, kuid mõnikord võite soovida luua lehti, mis tarbivad dünaamilist sisu.

Dünaamilise metapealkirja ja kirjelduste lisamine Next.js-lehele

Olenevalt kasutusjuhtumist saate rakenduses Next.js andmete toomiseks kasutada getStaticProps(), getStaticPaths() või getServerSideProps(). Need andmed määravad lehe sisu. Kasutage seda lehe metaandmete loomiseks.

Näiteks blogipostitusi renderdava rakenduse Next.js metaandmete loomine oleks tüütu.

Soovitatav on luua dünaamiline leht, mis saab identifikaatori, mida saate kasutada tooge ajaveebi sisu. Seejärel saate seda sisu kasutada peakomponendis.

importida { getAllPosts, getSinglePost } alates "../../utils/mdx";
importida Pea alates "järgmine/pea";
konst Postitus = ({ pealkiri, kirjeldus, sisu }) => {
tagasi (
<>
<Pea>
<pealkiri>{title}</title>
<meta nimi="kirjeldus" sisu={kirjeldus} />
</Head>
<peamine>{/* lehe sisu */}</main>
</>
 );
};
eksportidakonst getStaticProps = asünkr ({ params }) => {
// saada üks postitus
konst postitus = ootama getSinglePost (params.id, "postitused");
tagasi {
 rekvisiidid: { ...postitus },
 };
};
eksportidakonst getStaticPaths = asünkr () => {
// Too kõik postitused
 const paths = getAllPosts("postitusi").map(({ id }) => ({ params: { id } }));
tagasi {
 teed,
 tagavara: vale,
 };
};
eksportidavaikimisi Postitus;

Funktsioon getStaticProps edastab postituse andmed komponendile Postitus rekvisiididena. Komponent Postitus hävitab rekvisiidist pealkirja, kirjelduse ja sisu. Peakomponent kasutab seejärel metasiltide pealkirja ja kirjeldust.

Next.js on optimeeritud raamistik

Õppisite just, kuidas kasutada peakomponenti, et lisada Next.js projekti metapealkirju ja kirjeldusi. Kasutage neid teadmisi SEO-sõbralike päiste loomiseks, SERP-i tõusmiseks ja oma saidile rohkem külastajate meelitamiseks.

Lisaks peakomponendile pakub Next.js ka muid komponente, nagu link ja pilt. Need komponendid on juba karbist välja optimeeritud, muutes kiirete SEO-sõbralike veebisaitide loomise lihtsamaks.