Paginatitels, metatags en metabeschrijvingen zijn belangrijk voor SEO. Het zijn de eerste dingen die een gebruiker ziet op de SERPS en bepalen of ze doorklikken naar jouw website. Het is daarom belangrijk dat u de titels, metatags en beschrijving van uw website optimaliseert.
In Next.js voegt u ze toe via de aangepaste kopcomponent. U kunt ze op alle pagina's in de toepassing toevoegen of ze voor elke pagina aanpassen.
Een Global Head-tag toevoegen aan alle Next.js-pagina's
Next.js biedt _app.js om pagina's te initialiseren. U kunt het gebruiken om metatags te maken die over alle pagina's worden gedeeld.
importeren '../styles/globals.css'
importeren Hoofd van 'volgende/hoofd'functieMijnApp({ Component, paginaProps }) {
opbrengst <>
<Hoofd>
<metanaam="auteur" inhoud="John Doe"/>
</Head>
<Onderdeel {...pageProps} />
</>
}
exporterenstandaard MijnApp
Als u wilt dat een pagina een aangepaste titel en beschrijving heeft, voegt u de head-component eraan toe en Next.js zal deze gebruiken in plaats van de standaardcomponent in de app-component.
Metatags en beschrijving toevoegen aan een specifieke Next.js-pagina
Statische metatags en beschrijvingen zijn geschikt voor pagina's waarvan de inhoud gelijk blijft, bijvoorbeeld een homepage.
Open het bestand /pages/index.js en wijzig de head-tag met de juiste titel en beschrijving.
importeren Hoofd van "volgende/hoofd";const Thuis= () => {
opbrengst (
<>
<Hoofd>
<titel>bloggen</title>
<metanaam="uitkijk postje" inhoud="beginschaal=1.0, breedte=apparaatbreedte" />
<metanaam='beschrijving' inhoud='Programmeerartikelen'/>
</Head>
<voornaamst>
<h1>Welkom op mijn blog!</h1>
</main>
</>
);
};
exporterenstandaard Thuis;
U krijgt toegang tot de Head-component door deze vanuit next/head te importeren. Het werkt door elementen toe te voegen aan de head-tag van een HTML-pagina. Afhankelijk van waar u deze component plaatst, zijn de metatags en beschrijving beschikbaar in de hele applicatie of op afzonderlijke pagina's.
Door de titel, de breedte van de viewport en de beschrijving in het bestand _app.js toe te voegen, zorgt u ervoor dat alle pagina's dezelfde metadata hebben.
Deze pagina bevat statische inhoud, maar soms wilt u misschien pagina's maken die dynamische inhoud gebruiken.
Dynamische metatitel en beschrijvingen toevoegen aan een Next.js-pagina
Afhankelijk van de use case kunt u getStaticProps(), getStaticPaths() of getServerSideProps() gebruiken om gegevens op te halen in Next.js. Deze gegevens bepalen de inhoud van de pagina. Gebruik het om de metadata voor de pagina te maken.
Het zou bijvoorbeeld vervelend zijn om de metadata te maken voor de Next.js-toepassing die blogposts weergeeft.
De aanbevolen manier is om een dynamische pagina te maken die een identifier ontvangt die u kunt gebruiken de bloginhoud ophalen. U kunt deze inhoud vervolgens gebruiken in de hoofdcomponent.
importeren { getAllPosts, getSinglePost } van "../../utils/mdx";
importeren Hoofd van "volgende/hoofd";const Bericht = ({ titel, beschrijving, inhoud }) => {
opbrengst (
<>
<Hoofd>
<titel>{titel}</title>
<metanaam="beschrijving" inhoud={beschrijving} />
</Head>
<voornaamst>{/* pagina inhoud */}</main>
</>
);
};exporterenconst getStaticProps = asynchroon ({ parameters }) => {
// krijg een enkele post
const plaatsen = wachten getSinglePost (params.id, "berichten");opbrengst {
rekwisieten: { ...post },
};
};exporterenconst getStaticPaths = asynchroon () => {
// Haal alle berichten op
const paden = getAllPosts("posten").map(({ id }) => ({ parameters: { id } }));opbrengst {
paden,
terugvallen: vals,
};
};
exporterenstandaard Na;
De functie getStaticProps geeft de postgegevens door aan de Post-component als rekwisieten. De Post-component ontleedt de titel, beschrijving en inhoud van de rekwisieten. De head-component gebruikt vervolgens de titel en beschrijving in de metatags.
Next.js is een geoptimaliseerd framework
Je hebt zojuist geleerd hoe je de head-component kunt gebruiken om metatitels en beschrijvingen toe te voegen aan een Next.js-project. Gebruik deze kennis om SEO-vriendelijke headers te maken, omhoog te klimmen in de SERP's en meer bezoekers naar uw site te trekken.
Afgezien van de hoofdcomponent, biedt Next.js andere componenten zoals Link en Image. Deze componenten zijn out-of-the-box geoptimaliseerd, waardoor het gemakkelijker wordt om snelle SEO-vriendelijke websites te maken.
