Pre SEO sú dôležité názvy stránok, meta tagy a meta popisy. Sú to prvé veci, ktoré používateľ vidí na SERPS a určujú, či sa prekliknú na vašu webovú stránku. Preto je dôležité optimalizovať názvy, meta tagy a popis vašej webovej stránky.
V Next.js ich pridáte prostredníctvom komponentu custom head. Môžete ich pridať na všetky stránky v aplikácii alebo ich prispôsobiť pre každú stránku.
Pridanie značky Global Head na všetky stránky Next.js
Next.js poskytuje _app.js na inicializáciu stránok. Môžete ho použiť na vytváranie metaznačiek zdieľaných na všetkých stránkach.
importovať '../styles/globals.css'
importovať Hlava od 'ďalší/hlava'funkciuMyApp({ Component, pageProps }) {
vrátiť <>
<Hlava>
<meta meno="autora" obsah ="John Doe"/>
</Head>
<Komponent {...pageProps} />
</>
}
exportpredvolená MyApp
Ak chcete, aby stránka mala vlastný názov a popis, pridajte k nej komponent head a Next.js ho použije namiesto predvoleného komponentu App.
Pridanie metaznačiek a popisu na konkrétnu stránku Next.js
Statické metaznačky a popisy sú vhodné pre stránky, ktorých obsah zostáva rovnaký, napríklad domovská stránka.
Otvorte súbor /pages/index.js a upravte značku head s príslušným názvom a popisom.
importovať Hlava od "ďalší/hlava";konšt Domov= () => {
vrátiť (
<>
<Hlava>
<titul>Blog</title>
<meta meno="výrez" obsah ="počiatočná mierka=1,0, šírka=šírka zariadenia" />
<meta meno='popis' obsah ='Články o programovaní'/>
</Head>
<Hlavná>
<h1>Vitajte na mojom blogu!</h1>
</main>
</>
);
};
exportpredvolená Domov;
Ku komponentu Head sa dostanete tak, že ho importujete z next/head. Funguje to tak, že sa prvky pripájajú k značke hlavy stránku HTML. V závislosti od toho, kam tento komponent umiestnite, budú meta tagy a popis dostupné v celej aplikácii alebo na jednotlivých stránkach.
Pridaním názvu, šírky zobrazenej oblasti a popisu do súboru _app.js zaistíte, že všetky stránky budú mať rovnaké metadáta.
Táto stránka má statický obsah, ale niekedy možno budete chcieť vytvoriť stránky, ktoré využívajú dynamický obsah.
Pridanie dynamického meta názvu a popisu na stránku Next.js
V závislosti od prípadu použitia môžete použiť getStaticProps(), getStaticPaths() alebo getServerSideProps() na načítanie údajov v Next.js. Tieto údaje určujú obsah stránky. Použite ho na vytvorenie metadát pre stránku.
Napríklad vytváranie metadát pre aplikáciu Next.js, ktorá vykresľuje blogové príspevky, by bolo únavné.
Odporúčaný spôsob je vytvoriť dynamickú stránku, ktorá dostane identifikátor, ktorý môžete použiť načítať obsah blogu. Tento obsah potom môžete použiť v komponente hlavy.
importovať { getAllPosts, getSinglePost } od "../../utils/mdx";
importovať Hlava od "ďalší/hlava";konšt Príspevok = ({ názov, popis, obsah }) => {
vrátiť (
<>
<Hlava>
<titul>{title}</title>
<meta meno="popis" content={description} />
</Head>
<Hlavná>{/* obsah stránky */}</main>
</>
);
};exportkonšt getStaticProps = async ({ params }) => {
// získať jeden príspevok
konšt príspevok = čakať getSinglePost (params.id, "príspevky");vrátiť {
rekvizity: { ...príspevok },
};
};exportkonšt getStaticPaths = async () => {
// Načítať všetky príspevky
const paths = getAllPosts("príspevky").map(({ id }) => ({ params: { id } }));vrátiť {
cesty,
záložný: falošný,
};
};
exportpredvolená Príspevok;
Funkcia getStaticProps odovzdá údaje príspevku komponentu Post ako rekvizity. Komponent Príspevok deštrukturuje názov, popis a obsah z rekvizít. Komponent head potom používa názov a popis v metaznačkách.
Next.js je optimalizovaný rámec
Práve ste sa naučili, ako používať komponent head na pridávanie meta názvov a popisov do projektu Next.js. Využite tieto znalosti na vytvorenie hlavičiek vhodných pre SEO, vyšplhajte sa na vyššiu úroveň SERP a prilákajte na svoje stránky viac návštevníkov.
Okrem komponentu head poskytuje Next.js ďalšie komponenty ako Link a Image. Tieto komponenty sú optimalizované hneď po vybalení, čo uľahčuje vytváranie rýchlych webových stránok vhodných pre SEO.