Lapu nosaukumi, metatagi un metaapraksti ir svarīgi SEO. Tās ir pirmās lietas, ko lietotājs redz SERPS un nosaka, vai viņi noklikšķina uz jūsu vietni. Tāpēc ir svarīgi optimizēt savas vietnes nosaukumus, metatagus un aprakstu.
Programmā Next.js varat tos pievienot, izmantojot pielāgoto galvas komponentu. Varat tos pievienot visām lietojumprogrammas lapām vai pielāgot katrai lapai.
Globālās Head Tag pievienošana visām Next.js lapām
Next.js nodrošina _app.js, lai inicializētu lapas. Varat to izmantot, lai izveidotu metatagus, kas tiek koplietoti visās lapās.
imports '../styles/globals.css'
imports Galva no "nākamais/galva"funkcijuMyApp({ Component, pageProps }) {
atgriezties <>
<Galva>
<meta nosaukums ="autors" saturs="Džons Dū"/>
</Head>
<Komponents {...pageProps} />
</>
}
eksportētnoklusējuma MyApp
Ja vēlaties, lai lapai būtu pielāgots nosaukums un apraksts, pievienojiet tai head komponentu, un Next.js to izmantos lietotnes komponenta noklusējuma vietā.
Metatagu un apraksta pievienošana noteiktai Next.js lapai
Statiskie metatagi un apraksti ir piemēroti lapām, kuru saturs paliek nemainīgs, piemēram, mājas lapai.
Atveriet failu /pages/index.js un modificējiet head tagu ar atbilstošu nosaukumu un aprakstu.
imports Galva no "nākamais/galva";konst Sākums= () => {
atgriezties (
<>
<Galva>
<virsraksts>Emuārs</title>
<meta nosaukums ="skata logs" saturs="sākuma mērogs = 1,0, platums = ierīces platums" />
<meta nosaukums ='apraksts' saturs='Programmēšanas raksti'/>
</Head>
<galvenais>
<h1>Laipni lūgti manā emuārā!</h1>
</main>
</>
);
};
eksportētnoklusējuma Mājas;
Jūs varat piekļūt komponentam Head, importējot to no nākamās/galvas. Tas darbojas, pievienojot elementus galvas tagam HTML lapa. Atkarībā no tā, kur ievietosiet šo komponentu, metatagi un apraksts būs pieejami visā lietojumprogrammā vai atsevišķās lapās.
Virsraksta, skata loga platuma un apraksta pievienošana failā _app.js nodrošina, ka visām lapām ir vienādi metadati.
Šai lapai ir statisks saturs, taču dažreiz jūs varat izveidot lapas, kurās tiek izmantots dinamisks saturs.
Dinamiskā meta virsraksta un aprakstu pievienošana lapai Next.js
Atkarībā no lietošanas gadījuma varat izmantot getStaticProps(), getStaticPaths() vai getServerSideProps(), lai ielādētu datus vietnē Next.js. Šie dati nosaka lapas saturu. Izmantojiet to, lai izveidotu lapas metadatus.
Piemēram, izveidot metadatus lietojumprogrammai Next.js, kas atveido emuāra ziņas, būtu apnicīgi.
Ieteicamais veids ir izveidot dinamisku lapu, kas saņem identifikatoru, kuru varat izmantot ielādēt emuāra saturu. Pēc tam varat izmantot šo saturu galvas komponentā.
imports { getAllPosts, getSinglePost } no "../../utils/mdx";
imports Galva no "nākamais/galva";konst Ziņa = ({ virsraksts, apraksts, saturs }) => {
atgriezties (
<>
<Galva>
<virsraksts>{title}</title>
<meta nosaukums ="apraksts" saturs={description} />
</Head>
<galvenais>{/* lapas saturs */}</main>
</>
);
};eksportētkonst getStaticProps = asinhrons ({ parametri }) => {
// iegūt vienu ziņu
konst ziņa = gaidīt getSinglePost (params.id, "posts");atgriezties {
rekvizīti: { ...post },
};
};eksportētkonst getStaticPaths = asinhrons () => {
// Izgūt visas ziņas
const ceļi = getAllPosts("ziņas").map(({ id }) => ({ parametri: { id } }));atgriezties {
ceļi,
atkāpties: viltus,
};
};
eksportētnoklusējuma Pasts;
Funkcija getStaticProps nodod ziņas datus komponentam Post kā rekvizītus. Komponents Post iznīcina nosaukumu, aprakstu un saturu no rekvizītiem. Galvas komponents pēc tam izmanto nosaukumu un aprakstu meta tagos.
Next.js ir optimizēts ietvars
Jūs tikko uzzinājāt, kā izmantot head komponentu, lai Next.js projektam pievienotu meta virsrakstus un aprakstus. Izmantojiet šīs zināšanas, lai izveidotu SEO draudzīgas galvenes, uzkāptu pa SERP un piesaistītu savai vietnei vairāk apmeklētāju.
Papildus galvenajam komponentam Next.js nodrošina citus komponentus, piemēram, saiti un attēlu. Šie komponenti ir optimizēti, lai atvieglotu ātru SEO draudzīgu vietņu izveidi.
