Sidtitlar, metataggar och metabeskrivningar är viktiga för SEO. De är det första en användare ser på SERPS och avgör om de klickar sig vidare till din webbplats. Det är därför viktigt att optimera din webbplatss titlar, metataggar och beskrivningar.
I Next.js lägger du till dem genom den anpassade huvudkomponenten. Du kan antingen lägga till dem på alla sidor i applikationen eller anpassa dem för varje sida.
Lägga till en global head-tagg på alla Next.js-sidor
Next.js tillhandahåller _app.js för att initiera sidor. Du kan använda den för att skapa metataggar som delas på alla sidor.
importera '../styles/globals.css'
importera Huvud från 'nästa/huvud'fungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka <>
<Huvud>
<metanamn="författare" innehåll="John Doe"/>
</Head>
<Komponent {...pageProps} />
</>
}
exporterastandard MinApp
Om du vill att en sida ska ha en anpassad titel och beskrivning lägger du till head-komponenten till den, så kommer Next.js att använda den istället för standarden i app-komponenten.
Lägga till metataggar och beskrivning på en specifik Next.js-sida
Statiska metataggar och beskrivningar är lämpliga för sidor vars innehåll förblir detsamma, till exempel en startsida.
Öppna filen /pages/index.js och ändra head-taggen med lämplig titel och beskrivning.
importera Huvud från "nästa/huvud";konst Hem= () => {
lämna tillbaka (
<>
<Huvud>
<titel>Blogg</title>
<metanamn="utsiktsplats" innehåll="initial-scale=1.0, width=device-width" />
<metanamn='beskrivning' innehåll='Programmeringsartiklar'/>
</Head>
<huvud>
<h1>Välkommen till min blogg!</h1>
</main>
</>
);
};
exporterastandard Hem;
Du kommer åt Head-komponenten genom att importera den från nästa/huvud. Det fungerar genom att lägga till element till head-taggen för en HTML-sida. Beroende på var du placerar den här komponenten kommer metataggarna och beskrivningen att vara tillgängliga i hela applikationen eller på enskilda sidor.
Genom att lägga till titeln, visningsportens bredd och beskrivningen i filen _app.js säkerställs att alla sidor har samma metadata.
Den här sidan har statiskt innehåll, men ibland kanske du vill skapa sidor som konsumerar dynamiskt innehåll.
Lägga till dynamisk metatitel och beskrivningar på en Next.js-sida
Beroende på användningsfallet kan du använda getStaticProps(), getStaticPaths() eller getServerSideProps() för att hämta data i Next.js. Dessa data bestämmer sidans innehåll. Använd den för att skapa metadata för sidan.
Till exempel skulle det vara tråkigt att skapa metadata för Next.js-applikationen som renderar blogginlägg.
Det rekommenderade sättet är att skapa en dynamisk sida som får en identifierare som du kan använda till hämta blogginnehållet. Du kan sedan använda detta innehåll i head-komponenten.
importera { getAllPosts, getSinglePost } från "../../utils/mdx";
importera Huvud från "nästa/huvud";konst Inlägg = ({ titel, beskrivning, innehåll }) => {
lämna tillbaka (
<>
<Huvud>
<titel>{titel}</title>
<metanamn="beskrivning" content={description} />
</Head>
<huvud>{/* sidinnehåll */}</main>
</>
);
};exporterakonst getStaticProps = asynkron ({ params }) => {
// få ett enda inlägg
konst inlägg = vänta getSinglePost (params.id, "inlägg");lämna tillbaka {
rekvisita: { ...post },
};
};exporterakonst getStaticPaths = asynkron () => {
// Hämta alla inlägg
const paths = getAllPosts("inlägg").map(({ id }) => ({ params: { id } }));lämna tillbaka {
stigar,
Retirera: falsk,
};
};
exporterastandard Posta;
GetStaticProps-funktionen skickar postdata till Post-komponenten som rekvisita. Inläggskomponenten destrukturerar titeln, beskrivningen och innehållet från rekvisita. Head-komponenten använder sedan titeln och beskrivningen i metataggarna.
Next.js är ett optimerat ramverk
Du har precis lärt dig hur du använder head-komponenten för att lägga till metatitlar och beskrivningar till ett Next.js-projekt. Använd denna kunskap för att skapa SEO-vänliga rubriker, klättra upp för SERP: erna och locka fler besökare till din webbplats.
Förutom huvudkomponenten tillhandahåller Next.js andra komponenter som Link och Image. Dessa komponenter är optimerade direkt, vilket gör det lättare att skapa snabba SEO-vänliga webbplatser.