Az oldalcímek, a metacímkék és a metaleírások fontosak a SEO szempontjából. Ezek az első dolgok, amelyeket a felhasználó lát a SERPS-en, és meghatározza, hogy átkattintott-e az Ön webhelyére. Ezért fontos, hogy optimalizálja webhelye címét, metacímkéit és leírását.

A Next.js fájlban az egyéni fejkomponensen keresztül adhatja hozzá őket. Felveheti őket az alkalmazás összes oldalára, vagy személyre szabhatja őket az egyes oldalakhoz.

Globális fejcímke hozzáadása az összes Next.js oldalhoz

A Next.js _app.js-t biztosít az oldalak inicializálásához. Használhatja az összes oldalon megosztott metacímkék létrehozására.

import '../styles/globals.css'
import Fej tól től 'következő/fej'
funkcióMyApp({ Component, pageProps }) {
 Visszatérés <>
<Fej>
<meta név="szerző" tartalom="gipsz Jakab"/>
</Head>
<{...pageProps} komponens />
</>
}
exportalapértelmezett MyApp

Ha azt szeretné, hogy egy oldal egyéni címmel és leírással rendelkezzen, adja hozzá a head komponenst, és a Next.js ezt fogja használni az App összetevőben az alapértelmezett helyett.

instagram viewer

Metacímkék és leírás hozzáadása egy adott Next.js oldalhoz

A statikus metacímkék és leírások olyan oldalakhoz alkalmasak, amelyek tartalma változatlan marad, például egy kezdőlap.

Nyissa meg a /pages/index.js fájlt, és módosítsa a head címkét a megfelelő címmel és leírással.

import Fej tól től "következő/fej";
const Kezdőlap= () => {
Visszatérés (
<>
<Fej>
<cím>Blog</title>
<meta név="nézetablak" tartalom="kezdeti méretarány = 1,0, szélesség = eszköz szélessége" />
<meta név='leírás' tartalom='Programozási cikkek'/>
</Head>
<fő->
<h1>Üdvözöllek a blogomon!</h1>
</main>
</>
 );
};
exportalapértelmezett Itthon;

A Head összetevőt úgy érheti el, hogy importálja a next/head mappából. Úgy működik, hogy elemeket fűz hozzá a fej címkéjéhez egy HTML oldal. Attól függően, hogy hol helyezi el ezt az összetevőt, a metacímkék és a leírás elérhetők lesznek a teljes alkalmazásban vagy az egyes oldalakon.

Ha hozzáadja a címet, a nézetablak szélességét és a leírást az _app.js fájlban, akkor az összes oldal ugyanazokkal a metaadatokkal rendelkezik.

Ez az oldal statikus tartalommal rendelkezik, de néha érdemes lehet olyan oldalakat létrehozni, amelyek dinamikus tartalmat fogyasztanak.

Dinamikus metacím és leírások hozzáadása a Next.js oldalhoz

A használati esettől függően a getStaticProps(), a getStaticPaths() vagy a getServerSideProps() segítségével lekérheti az adatokat a Next.js fájlban. Ezek az adatok határozzák meg az oldal tartalmát. Használja az oldal metaadatainak létrehozásához.

A blogbejegyzéseket megjelenítő Next.js alkalmazás metaadatainak létrehozása például fárasztó lenne.

Az ajánlott módszer egy dinamikus oldal létrehozása, amely megkapja az Ön által használható azonosítót lekérni a blog tartalmát. Ezt a tartalmat ezután felhasználhatja a fejkomponensben.

import { getAllPosts, getSinglePost } tól től "../../utils/mdx";
import Fej tól től "következő/fej";
const Bejegyzés = ({ cím, leírás, tartalom }) => {
Visszatérés (
<>
<Fej>
<cím>{cím}</title>
<meta név="leírás" content={description} />
</Head>
<fő->{/* oldal tartalma */}</main>
</>
 );
};


exportconst getStaticProps = async ({ params }) => {
// egyetlen bejegyzést kap
const hozzászólás = várja getSinglePost (params.id, "posts");


Visszatérés {
 kellékek: { ...bejegyzés },
 };
};


exportconst getStaticPaths = async () => {
// Az összes bejegyzés lekérése
 const paths = getAllPosts("hozzászólások").map(({ id }) => ({ params: { id } }));


Visszatérés {
 utak,
 tartalék: hamis,
 };
};
exportalapértelmezett Posta;

A getStaticProps függvény kellékként továbbítja a bejegyzési adatokat a Post komponensnek. A bejegyzés komponens strukturálja a címet, a leírást és a tartalmat a kellékekből. A head komponens ezután a címet és a leírást használja a metacímkékben.

A Next.js egy optimalizált keretrendszer

Most tanulta meg, hogyan használhatja a head összetevőt metacímek és leírások hozzáadásához a Next.js projekthez. Használja ezt a tudást SEO-barát fejlécek létrehozásához, mássz fel a SERP-kben, és vonzzon több látogatót webhelyére.

A fejkomponensen kívül a Next.js további összetevőket is biztosít, például a hivatkozást és a képet. Ezek az összetevők már a dobozból optimalizálva vannak, így könnyebben hozhat létre gyors SEO-barát webhelyeket.