Názvy stránek, meta tagy a meta popisy jsou pro SEO důležité. Jsou to první věci, které uživatel uvidí na SERPS a určí, zda se prokliká na váš web. Je proto důležité optimalizovat názvy, meta tagy a popis vašeho webu.
V Next.js je přidáte prostřednictvím komponenty custom head. Můžete je buď přidat na všechny stránky v aplikaci, nebo je přizpůsobit pro každou stránku.
Přidání značky Global Head na všechny stránky Next.js
Next.js poskytuje _app.js pro inicializaci stránek. Můžete jej použít k vytvoření meta tagů sdílených na všech stránkách.
import '../styles/globals.css'
import Hlava z 'další/hlava'funkceMoje aplikace({ Component, pageProps }) {
vrátit se <>
<Hlava>
<meta jméno="autor" obsah ="John Doe"/>
</Head>
<Komponenta {...pageProps} />
</>
}
vývoznívýchozí Moje aplikace
Pokud chcete, aby stránka měla vlastní název a popis, přidejte k ní komponentu head a Next.js ji použije místo výchozího v komponentě App.
Přidání meta tagů a popisu na konkrétní stránku Next.js
Statické meta tagy a popisy jsou vhodné pro stránky, jejichž obsah zůstává stejný, například domovská stránka.
Otevřete soubor /pages/index.js a upravte tag head s příslušným názvem a popisem.
import Hlava z "další/hlava";konst Home= () => {
vrátit se (
<>
<Hlava>
<titul>Blog</title>
<meta jméno="výřez" obsah ="initial-scale=1.0, width=device-width" />
<meta jméno='popis' obsah ='Články o programování'/>
</Head>
<hlavní>
<h1>Vítejte na mém blogu!</h1>
</main>
</>
);
};
vývoznívýchozí Domov;
Ke komponentě Head se dostanete tak, že ji importujete z next/head. Funguje to tak, že přidá prvky ke značce head of stránku HTML. V závislosti na tom, kam tuto komponentu umístíte, budou meta tagy a popis dostupné v celé aplikaci nebo na jednotlivých stránkách.
Přidáním názvu, šířky zobrazované oblasti a popisu do souboru _app.js zajistíte, že všechny stránky budou mít stejná metadata.
Tato stránka má statický obsah, ale někdy můžete chtít vytvořit stránky, které využívají dynamický obsah.
Přidání názvu a popisů dynamických metadat na stránku Next.js
V závislosti na případu použití můžete použít getStaticProps(), getStaticPaths() nebo getServerSideProps() k načtení dat v Next.js. Tato data určují obsah stránky. Použijte jej k vytvoření metadat pro stránku.
Například vytváření metadat pro aplikaci Next.js, která vykresluje blogové příspěvky, by bylo zdlouhavé.
Doporučeným způsobem je vytvořit dynamickou stránku, která obdrží identifikátor, který můžete použít načíst obsah blogu. Tento obsah pak můžete použít v komponentě head.
import { getAllPosts, getSinglePost } z "../../utils/mdx";
import Hlava z "další/hlava";konst Příspěvek = ({ název, popis, obsah }) => {
vrátit se (
<>
<Hlava>
<titul>{titul}</title>
<meta jméno="popis" content={description} />
</Head>
<hlavní>{/* obsah stránky */}</main>
</>
);
};vývozníkonst getStaticProps = asynchronní ({ params }) => {
// získat jeden příspěvek
konst příspěvek = čekat getSinglePost (params.id, "příspěvky");vrátit se {
rekvizity: { ...příspěvek },
};
};vývozníkonst getStaticPaths = asynchronní () => {
// Načíst všechny příspěvky
const paths = getAllPosts("příspěvky").map(({ id }) => ({ params: { id } }));vrátit se {
cesty,
ustoupit: Nepravdivé,
};
};
vývoznívýchozí Pošta;
Funkce getStaticProps předá data příspěvku komponentě Post jako rekvizity. Komponenta Post destruuje název, popis a obsah z rekvizit. Komponenta head pak používá název a popis v metaznačkách.
Next.js je optimalizovaný rámec
Právě jste se naučili, jak používat komponentu head k přidávání meta názvů a popisů do projektu Next.js. Použijte tyto znalosti k vytvoření záhlaví vhodných pro SEO, vyšplhejte se na SERP a přilákejte na své stránky více návštěvníků.
Kromě komponenty head poskytuje Next.js další komponenty jako Link a Image. Tyto komponenty jsou optimalizovány ihned po vybalení, což usnadňuje vytváření rychlých webových stránek vhodných pro SEO.
