Tytuły stron, metatagi i metaopisy są ważne dla SEO. Są to pierwsze rzeczy, które użytkownik widzi w SERWACH i decydują o tym, czy kliknie na Twoją witrynę. Dlatego ważne jest, aby zoptymalizować tytuły, metatagi i opis witryny.
W Next.js dodajesz je za pomocą niestandardowego komponentu head. Możesz dodać je na wszystkich stronach w aplikacji lub dostosować je dla każdej strony.
Dodawanie globalnego tagu Head do wszystkich stron Next.js
Next.js zapewnia _app.js do inicjowania stron. Możesz go użyć do tworzenia metatagów wspólnych dla wszystkich stron.
import '../styles/globals.css'
import Głowa z „następny / głowa”funkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót <>
<Głowa>
<metanazwa="autor" zawartość="nieznany z nazwiska"/>
</Head>
<Komponent {...pageProps} />
</>
}
eksportdomyślny MojaAplikacja
Jeśli chcesz, aby strona miała własny tytuł i opis, dodaj do niej komponent head, a Next.js użyje go zamiast domyślnego w komponencie App.
Dodawanie metatagów i opisu do określonej strony Next.js
Statyczne metatagi i opisy są odpowiednie dla stron, których treść pozostaje taka sama, na przykład strona główna.
Otwórz plik /pages/index.js i zmodyfikuj tag head, dodając odpowiedni tytuł i opis.
import Głowa z „następny / głowa”;konst Strona główna= () => {
powrót (
<>
<Głowa>
<tytuł>Blog</title>
<metanazwa="rzutnia" zawartość="skala początkowa = 1,0, szerokość = szerokość urządzenia" />
<metanazwa='opis' zawartość='Artykuły dotyczące programowania'/>
</Head>
<główny>
<h1>Witam na moim blogu!</h1>
</main>
</>
);
};
eksportdomyślny Dom;
Dostęp do komponentu Head uzyskujesz, importując go z next/head. Działa poprzez dołączanie elementów do tagu head stronę HTML. W zależności od tego, gdzie umieścisz ten komponent, metatagi i opis będą dostępne w całej aplikacji lub na poszczególnych stronach.
Dodanie tytułu, szerokości widocznego obszaru i opisu w pliku _app.js gwarantuje, że wszystkie strony będą miały te same metadane.
Ta strona zawiera zawartość statyczną, ale czasami możesz chcieć utworzyć strony korzystające z zawartości dynamicznej.
Dodawanie dynamicznego meta tytułu i opisów do strony Next.js
W zależności od przypadku użycia możesz użyć getStaticProps(), getStaticPaths() lub getServerSideProps() do pobierania danych w Next.js. Te dane określają zawartość strony. Użyj go, aby utworzyć metadane dla strony.
Na przykład tworzenie metadanych dla aplikacji Next.js, która renderuje posty na blogu, byłoby żmudne.
Zalecanym sposobem jest utworzenie strony dynamicznej, która otrzyma identyfikator, którego możesz użyć pobrać zawartość bloga. Następnie możesz użyć tej zawartości w komponencie head.
import { pobierz wszystkie posty, pobierz pojedynczy post } z "../../narzędzia/mdx";
import Głowa z „następny / głowa”;konst Post = ({ tytuł, opis, treść }) => {
powrót (
<>
<Głowa>
<tytuł>{tytuł}</title>
<metanazwa="opis" treść={opis} />
</Head>
<główny>{/* zawartość strony */}</main>
</>
);
};eksportkonst getStaticProps = asynchroniczny ({ parametry }) => {
// uzyskaj pojedynczy post
konst poczta = czekać na getSinglePost (params.id, "posty");powrót {
rekwizyty: { ...post },
};
};eksportkonst getStaticPaths = asynchroniczny () => {
// Pobierz wszystkie posty
const ścieżki = getAllPosts("posty").map(({ id}) => ({ parametry: { id } }));powrót {
ścieżki,
awaryjna: FAŁSZ,
};
};
eksportdomyślny Post;
Funkcja getStaticProps przekazuje dane posta do komponentu Post jako rekwizyty. Komponent Post usuwa strukturę tytułu, opisu i treści z rekwizytów. Komponent head używa następnie tytułu i opisu w metatagach.
Next.js to zoptymalizowany framework
Właśnie nauczyłeś się, jak używać komponentu head do dodawania tytułów meta i opisów do projektu Next.js. Wykorzystaj tę wiedzę do tworzenia nagłówków przyjaznych dla SEO, wspinania się w górę SERP i przyciągania większej liczby odwiedzających do Twojej witryny.
Oprócz komponentu head, Next.js udostępnia inne komponenty, takie jak Link i Image. Te komponenty są zoptymalizowane od razu po wyjęciu z pudełka, co ułatwia tworzenie szybkich stron internetowych przyjaznych dla SEO.
