Naslovi stranica, meta oznake i meta opisi važni su za SEO. One su prve stvari koje korisnik vidi na SERPS-u i određuju hoće li kliknuti do vaše web stranice. Stoga je važno optimizirati naslove, meta oznake i opis svoje web stranice.

U Next.js ih dodajete kroz prilagođenu komponentu glave. Možete ih dodati na sve stranice u aplikaciji ili ih prilagoditi za svaku stranicu.

Dodavanje globalne oznake zaglavlja na sve Next.js stranice

Next.js pruža _app.js za inicijalizaciju stranica. Možete ga koristiti za stvaranje meta oznaka koje se dijele na svim stranicama.

uvoz '../styles/globals.css'
uvoz glava iz 'sljedeća/glava'
funkcijaMyApp({ Komponenta, pageProps }) {
 povratak <>
<glava>
<meta naziv="Autor" sadržaj="John Doe"/>
</Head>
<Komponenta {...pageProps} />
</>
}
izvozzadano MyApp

Ako želite da stranica ima prilagođeni naslov i opis, dodajte joj komponentu head i Next.js će je koristiti umjesto zadanog u App komponenti.

Dodavanje meta oznaka i opisa na određenu Next.js stranicu

Statičke meta oznake i opisi prikladni su za stranice čiji sadržaj ostaje isti, na primjer, početna stranica.

instagram viewer

Otvorite datoteku /pages/index.js i izmijenite oznaku head odgovarajućim naslovom i opisom.

uvoz glava iz "sljedeća/glava";
konst Početna= () => {
povratak (
<>
<glava>
<titula>Blog</title>
<meta naziv="prozor za prikaz" sadržaj="početna skala=1,0, širina=širina uređaja" />
<meta naziv='opis' sadržaj='Članci o programiranju'/>
</Head>
<glavni>
<h1>Dobrodošli na moj blog!</h1>
</main>
</>
 );
};
izvozzadano Dom;

Komponenti Head pristupate uvozom iz next/head. Funkcionira dodavanjem elemenata u oznaku glave HTML stranica. Ovisno o tome gdje postavite ovu komponentu, meta oznake i opis bit će dostupni u cijeloj aplikaciji ili na pojedinačnim stranicama.

Dodavanje naslova, širine okvira za prikaz i opisa u datoteci _app.js osigurava da sve stranice imaju iste metapodatke.

Ova stranica ima statički sadržaj, ali ponekad ćete možda htjeti izraditi stranice koje sadrže dinamički sadržaj.

Dodavanje dinamičkog meta naslova i opisa na Next.js stranicu

Ovisno o slučaju upotrebe, možete koristiti getStaticProps(), getStaticPaths() ili getServerSideProps() za dohvaćanje podataka u Next.js. Ovi podaci određuju sadržaj stranice. Koristite ga za stvaranje metapodataka za stranicu.

Na primjer, stvaranje metapodataka za aplikaciju Next.js koja renderira postove na blogu bilo bi zamorno.

Preporučeni način je stvaranje dinamičke stranice koja prima identifikator koji možete koristiti dohvaćanje sadržaja bloga. Zatim možete koristiti ovaj sadržaj u komponenti glave.

uvoz { getAllPosts, getSinglePost } iz "../../utils/mdx";
uvoz glava iz "sljedeća/glava";
konst Post = ({ naslov, opis, sadržaj }) => {
povratak (
<>
<glava>
<titula>{titula}</title>
<meta naziv="opis" sadržaj={opis} />
</Head>
<glavni>{/* sadržaj stranice */}</main>
</>
 );
};


izvozkonst getStaticProps = asinkroni ({params}) => {
// dobiti jednu objavu
konst post = čekati getSinglePost (params.id, "postovi");


povratak {
 rekviziti: { ...post },
 };
};


izvozkonst getStaticPaths = asinkroni () => {
// Dohvaćanje svih postova
 const paths = getAllPosts("postovi").map(({ id }) => ({ parametri: { id } }));


povratak {
 staze,
 zamjena: lažno,
 };
};
izvozzadano Post;

Funkcija getStaticProps prosljeđuje podatke objave u komponentu Post kao rekvizite. Komponenta Post uklanja naslov, opis i sadržaj iz rekvizita. Komponenta glave tada koristi naslov i opis u meta oznakama.

Next.js je optimizirani okvir

Upravo ste naučili kako koristiti komponentu head za dodavanje meta naslova i opisa Next.js projektu. Upotrijebite ovo znanje za stvaranje zaglavlja prilagođenih SEO-u, popnite se na SERP-ove i privucite više posjetitelja na svoju stranicu.

Osim komponente glave, Next.js nudi i druge komponente kao što su Link i Slika. Ove su komponente optimizirane odmah po koraku što olakšava stvaranje brzih web stranica prilagođenih SEO-u.