Naslovi strani, meta oznake in meta opisi so pomembni za SEO. So prve stvari, ki jih uporabnik vidi na SERPS in določajo, ali kliknejo do vaše spletne strani. Zato je pomembno, da optimizirate naslove, meta oznake in opis vašega spletnega mesta.
V Next.js jih dodate prek komponente glave po meri. Lahko jih dodate na vse strani v aplikaciji ali pa jih prilagodite za vsako stran.
Dodajanje globalne oznake Head na vse strani Next.js
Next.js ponuja _app.js za inicializacijo strani. Uporabite ga lahko za ustvarjanje metaoznak, ki so v skupni rabi na vseh straneh.
uvoz '../styles/globals.css'
uvoz glava od 'naprej/glava'funkcijoMyApp({ Komponenta, pageProps }) {
vrnitev <>
<glava>
<meta ime="avtor" vsebina="John Doe"/>
</Head>
<Komponenta {...pageProps} />
</>
}
izvozprivzeto MyApp
Če želite, da ima stran naslov in opis po meri, ji dodajte komponento glave in Next.js jo bo uporabil namesto privzete v komponenti aplikacije.
Dodajanje metaoznak in opisa na določeno stran Next.js
Statične meta oznake in opisi so primerni za strani, katerih vsebina ostaja enaka, na primer domača stran.
Odprite datoteko /pages/index.js in spremenite oznako head z ustreznim naslovom in opisom.
uvoz glava od "naprej/glava";konst Domov= () => {
vrnitev (
<>
<glava>
<naslov>Blog</title>
<meta ime="vidno polje" vsebina="začetna lestvica=1,0, širina=širina naprave" />
<meta ime='opis' vsebina='Članki o programiranju'/>
</Head>
<glavni>
<h1>Dobrodošli na mojem blogu!</h1>
</main>
</>
);
};
izvozprivzeto Domov;
Do komponente Head dostopate tako, da jo uvozite iz next/head. Deluje tako, da oznaki head doda elemente stran HTML. Odvisno od tega, kam postavite to komponento, bodo meta oznake in opis na voljo v celotni aplikaciji ali na posameznih straneh.
Če dodate naslov, širino vidnega polja in opis v datoteko _app.js, zagotovite, da imajo vse strani enake metapodatke.
Ta stran ima statično vsebino, včasih pa boste morda želeli ustvariti strani, ki uporabljajo dinamično vsebino.
Dodajanje dinamičnega meta naslova in opisov na stran Next.js
Odvisno od primera uporabe lahko uporabite getStaticProps(), getStaticPaths() ali getServerSideProps() za pridobivanje podatkov v Next.js. Ti podatki določajo vsebino strani. Uporabite ga za ustvarjanje metapodatkov za stran.
Na primer, ustvarjanje metapodatkov za aplikacijo Next.js, ki upodablja objave v spletnem dnevniku, bi bilo dolgočasno.
Priporočen način je ustvariti dinamično stran, ki prejme identifikator, ki ga lahko uporabite pridobi vsebino bloga. To vsebino lahko nato uporabite v glavni komponenti.
uvoz { getAllPosts, getSinglePost } od "../../utils/mdx";
uvoz glava od "naprej/glava";konst Objava = ({ naslov, opis, vsebina }) => {
vrnitev (
<>
<glava>
<naslov>{title}</title>
<meta ime="opis" vsebina={opis} />
</Head>
<glavni>{/* vsebina strani */}</main>
</>
);
};izvozkonst getStaticProps = asinh ({ params }) => {
// pridobite eno objavo
konst objava = čakati getSinglePost (params.id, "objave");vrnitev {
rekviziti: { ...objava },
};
};izvozkonst getStaticPaths = asinh () => {
// Pridobi vse objave
const poti = getAllPosts("objave").map(({ id }) => ({ params: { id } }));vrnitev {
poti,
pasti nazaj: lažno,
};
};
izvozprivzeto Post;
Funkcija getStaticProps posreduje podatke objave komponenti Post kot rekvizite. Komponenta objave odstrani naslov, opis in vsebino iz rekvizitov. Komponenta glave nato uporabi naslov in opis v metaoznakah.
Next.js je optimizirano ogrodje
Pravkar ste se naučili uporabljati komponento head za dodajanje meta naslovov in opisov v projekt Next.js. Uporabite to znanje za ustvarjanje SEO-prijaznih glav, povzpnite se po iskalnikih in privabite več obiskovalcev na svoje spletno mesto.
Poleg komponente glave Next.js ponuja druge komponente, kot sta povezava in slika. Te komponente so optimizirane takoj po namestitvi, kar olajša ustvarjanje hitrih spletnih strani, prijaznih do SEO.
