Sidetitler, metatags og metabeskrivelser er vigtige for SEO. De er de første ting, en bruger ser på SERPS og afgør, om de klikker sig videre til dit websted. Det er derfor vigtigt at optimere din hjemmesides titler, metatags og beskrivelse.
I Next.js tilføjer du dem gennem den brugerdefinerede hovedkomponent. Du kan enten tilføje dem på alle siderne i applikationen eller tilpasse dem til hver side.
Tilføjelse af et globalt hovedmærke til alle Next.js-sider
Next.js giver _app.js til at initialisere sider. Du kan bruge det til at oprette metatags, der deles på tværs af alle sider.
importere '../styles/globals.css'
importere Hoved fra 'næste/hoved'fungereMin App({ Komponent, pageProps }) {
Vend tilbage <>
<Hoved>
<metanavn="forfatter" indhold="John Doe"/>
</Head>
<Komponent {...pageProps} />
</>
}
eksportStandard Min App
Hvis du ønsker, at en side skal have en tilpasset titel og beskrivelse, skal du tilføje head-komponenten til den, og Next.js vil bruge den i stedet for standarden i app-komponenten.
Tilføjelse af metatags og beskrivelse til en specifik Next.js-side
Statiske metatags og beskrivelser er velegnede til sider, hvis indhold forbliver det samme, for eksempel en startside.
Åbn filen /pages/index.js og modificer head-tagget med den passende titel og beskrivelse.
importere Hoved fra "næste/hoved";konst Hjem= () => {
Vend tilbage (
<>
<Hoved>
<titel>Blog</title>
<metanavn="viewport" indhold="initial-scale=1,0, width=enhed-width" />
<metanavn='beskrivelse' indhold='Programmeringsartikler'/>
</Head>
<vigtigste>
<h1>Velkommen til min blog!</h1>
</main>
</>
);
};
eksportStandard Hjem;
Du får adgang til Head-komponenten ved at importere den fra next/head. Det fungerer ved at tilføje elementer til head-tagget af en HTML-side. Afhængigt af hvor du placerer denne komponent, vil metatags og beskrivelse være tilgængelige på tværs af hele applikationen eller på individuelle sider.
Tilføjelse af titlen, viewport-bredden og beskrivelsen i _app.js-filen sikrer, at alle sider har de samme metadata.
Denne side har statisk indhold, men nogle gange vil du måske oprette sider, der bruger dynamisk indhold.
Tilføjelse af dynamisk metatitel og beskrivelser til en Next.js-side
Afhængigt af use casen kan du bruge getStaticProps(), getStaticPaths() eller getServerSideProps() til at hente data i Next.js. Disse data bestemmer sidens indhold. Brug den til at oprette metadata for siden.
For eksempel ville det være kedeligt at oprette metadata til Next.js-applikationen, der gengiver blogindlæg.
Den anbefalede måde er at oprette en dynamisk side, der modtager en identifikator, du kan bruge til hente blogindholdet. Du kan derefter bruge dette indhold i hovedkomponenten.
importere { getAllPosts, getSinglePost } fra "../../utils/mdx";
importere Hoved fra "næste/hoved";konst Indlæg = ({ titel, beskrivelse, indhold }) => {
Vend tilbage (
<>
<Hoved>
<titel>{titel}</title>
<metanavn="beskrivelse" content={description} />
</Head>
<vigtigste>{/* sideindhold */}</main>
</>
);
};eksportkonst getStaticProps = asynkron ({ params }) => {
// få et enkelt indlæg
konst indlæg = vente getSinglePost (params.id, "indlæg");Vend tilbage {
rekvisitter: { ...post },
};
};eksportkonst getStaticPaths = asynkron () => {
// Hent alle indlæg
const paths = getAllPosts("indlæg").map(({ id }) => ({ params: { id } }));Vend tilbage {
stier,
Falde tilbage: falsk,
};
};
eksportStandard Stolpe;
GetStaticProps-funktionen sender postdataene til Post-komponenten som rekvisitter. Indlægskomponenten destrukturerer titlen, beskrivelsen og indholdet fra rekvisitterne. Head-komponenten bruger så titlen og beskrivelsen i metataggene.
Next.js er et optimeret rammeværk
Du har lige lært, hvordan du bruger head-komponenten til at tilføje metatitler og beskrivelser til et Next.js-projekt. Brug denne viden til at skabe SEO-venlige overskrifter, klatre op i SERP'erne og tiltrække flere besøgende til dit websted.
Udover hovedkomponenten leverer Next.js andre komponenter som Link og Image. Disse komponenter er optimeret ud af boksen, hvilket gør det nemmere at skabe hurtige SEO-venlige hjemmesider.
