Jak dodać przyjazne nagłówki SEO do witryny Next.js?

Tytuły stron, metatagi i opisy meta są ważne dla SEO. Są to pierwsze rzeczy, które użytkownik widzi w SERPS i określa, czy klika na Twoją witrynę. Dlatego ważne jest, aby zoptymalizować tytuły, metatagi i opis swojej witryny.

wifi nie ma prawidłowej konfiguracji IP 2018

W Next.js dodajesz je za pomocą niestandardowego komponentu nagłówka. Możesz dodać je na wszystkich stronach w aplikacji lub dostosować je dla każdej strony.

MAKEUSEOF WIDEO DNIA

Dodawanie globalnego tagu Head do wszystkich stron Next.js

Next.js udostępnia _app.js do inicjowania stron. Możesz go użyć do tworzenia metatagów udostępnianych na wszystkich stronach.

import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

Jeśli chcesz, aby strona miała niestandardowy tytuł i opis, dodaj do niej komponent head, a Next.js użyje go zamiast domyślnego komponentu App.

Dodawanie metatagów i opisu do określonej strony Next.js

Statyczne metatagi i opisy są odpowiednie dla stron, których zawartość pozostaje taka sama, na przykład strony głównej.

Otwórz plik /pages/index.js i zmodyfikuj tag head z odpowiednim tytułem i opisem.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

Dostęp do komponentu Head uzyskujesz, importując go z next/head . Działa poprzez dołączanie elementów do tagu głowy strona 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 zapewnia, że wszystkie strony mają te same metadane.

Ta strona ma zawartość statyczną, ale czasami warto utworzyć strony wykorzystujące zawartość dynamiczną.

Dodawanie dynamicznego tytułu i opisów meta do strony Next.js

W zależności od przypadku użycia możesz użyć getStaticProps(), getStaticPaths() lub getServerSideProps() do pobrania danych w Next.js. Te dane decydują o zawartości strony. Użyj go, aby utworzyć metadane dla strony.

przekonwertuj jpg na ilustrator wektorowy cc

Na przykład tworzenie metadanych dla aplikacji Next.js, która renderuje posty na blogu, byłoby żmudne.

Zalecanym sposobem jest stworzenie dynamicznej strony, która otrzyma identyfikator, którego możesz użyć do pobrać zawartość bloga . Możesz następnie użyć tej zawartości w składniku głównym.

jak zapisać wideo z internetu

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

Funkcja getStaticProps przekazuje dane post do komponentu Post jako props. Komponent Post destrukturyzuje tytuł, opis i treść z rekwizytów. Komponent head następnie używa tytułu i opisu w metatagach.

Next.js to zoptymalizowany framework

Właśnie dowiedziałeś się, jak używać komponentu head do dodawania tytułów i opisów meta do projektu Next.js. Wykorzystaj tę wiedzę, aby tworzyć nagłówki przyjazne SEO, wspinać się po SERP i przyciągać więcej odwiedzających do Twojej witryny.

Oprócz komponentu head, Next.js dostarcza inne komponenty, takie jak Link i Image. Te komponenty są zoptymalizowane po wyjęciu z pudełka, co ułatwia tworzenie szybkich stron internetowych przyjaznych SEO.