Sidetitler, metakoder og metabeskrivelser er viktige for SEO. De er de første tingene en bruker ser på SERPS og bestemmer om de klikker seg videre til nettstedet ditt. Det er derfor viktig at du optimaliserer nettstedets titler, metakoder og beskrivelse.
I Next.js legger du dem til gjennom den tilpassede hodekomponenten. Du kan enten legge dem til på alle sidene i applikasjonen eller tilpasse dem for hver side.
Legge til en global head-tag på alle Next.js-sidene
Next.js gir _app.js for å initialisere sider. Du kan bruke den til å lage metakoder som deles på alle sider.
import '../styles/globals.css'
import Hode fra 'neste/hode'funksjonMin App({ Component, pageProps }) {
komme tilbake <>
<Hode>
<metanavn="forfatter" innhold="John Doe"/>
</Head>
<Komponent {...pageProps} />
</>
}
eksportmisligholde Min App
Hvis du vil at en side skal ha en egendefinert tittel og beskrivelse, legg til head-komponenten til den, og Next.js vil bruke den i stedet for standarden i app-komponenten.
Legge til metakoder og beskrivelse på en spesifikk Next.js-side
Statiske metakoder og beskrivelser er egnet for sider hvis innhold forblir det samme, for eksempel en hjemmeside.
Åpne filen /pages/index.js og endre head-taggen med riktig tittel og beskrivelse.
import Hode fra "neste/hode";konst Hjem= () => {
komme tilbake (
<>
<Hode>
<tittel>Blogg</title>
<metanavn="viewport" innhold="initial-scale=1.0, width=device-width" />
<metanavn='beskrivelse' innhold='Programmeringsartikler'/>
</Head>
<hoved->
<h1>Velkommen til bloggen min!</h1>
</main>
</>
);
};
eksportmisligholde Hjem;
Du får tilgang til Head-komponenten ved å importere den fra next/head. Det fungerer ved å legge til elementer til head-taggen til en HTML-side. Avhengig av hvor du plasserer denne komponenten, vil metakodene og beskrivelsen være tilgjengelig i hele applikasjonen eller på individuelle sider.
Å legge til tittelen, visningsportens bredde og beskrivelsen i _app.js-filen sikrer at alle sidene har samme metadata.
Denne siden har statisk innhold, men noen ganger vil du kanskje lage sider som bruker dynamisk innhold.
Legge til dynamisk metatittel og beskrivelser til en Next.js-side
Avhengig av brukstilfellet kan du bruke getStaticProps(), getStaticPaths() eller getServerSideProps() for å hente data i Next.js. Disse dataene bestemmer sidens innhold. Bruk den til å lage metadata for siden.
For eksempel vil det være kjedelig å lage metadata for Next.js-applikasjonen som gjengir blogginnlegg.
Den anbefalte måten er å lage en dynamisk side som mottar en identifikator du kan bruke til hente blogginnholdet. Du kan deretter bruke dette innholdet i head-komponenten.
import { getAllPosts, getSinglePost } fra "../../utils/mdx";
import Hode fra "neste/hode";konst Innlegg = ({ tittel, beskrivelse, innhold }) => {
komme tilbake (
<>
<Hode>
<tittel>{tittel}</title>
<metanavn="beskrivelse" content={description} />
</Head>
<hoved->{/* sideinnhold */}</main>
</>
);
};eksportkonst getStaticProps = asynkron ({ params }) => {
// få et enkelt innlegg
konst innlegg = avvente getSinglePost (params.id, "posts");komme tilbake {
rekvisitter: { ...post },
};
};eksportkonst getStaticPaths = asynkron () => {
// Hent alle innlegg
const paths = getAllPosts("innlegg").map(({ id }) => ({ params: { id } }));komme tilbake {
stier,
falle tilbake: falsk,
};
};
eksportmisligholde Post;
GetStaticProps-funksjonen sender postdataene til Post-komponenten som rekvisitter. Innlegg-komponenten destrukturerer tittelen, beskrivelsen og innholdet fra rekvisittene. Head-komponenten bruker deretter tittelen og beskrivelsen i metakodene.
Next.js er et optimalisert rammeverk
Du har nettopp lært hvordan du bruker head-komponenten til å legge til metatitler og beskrivelser til et Next.js-prosjekt. Bruk denne kunnskapen til å lage SEO-vennlige overskrifter, klatre opp SERP-ene og tiltrekke flere besøkende til nettstedet ditt.
Bortsett fra hodekomponenten, tilbyr Next.js andre komponenter som Link og Image. Disse komponentene er optimalisert ut av esken, noe som gjør det enklere å lage raske SEO-vennlige nettsteder.
