Sådan tilføjer du SEO-venlige overskrifter til et Next.js-websted

Sidetitler, metatags og metabeskrivelser er vigtige for SEO. De er de første ting, en bruger ser på SERPS og afgør, om de klikker sig videre til dit websted. Det er derfor vigtigt at optimere din hjemmesides titler, metatags og beskrivelse.

I Next.js tilføjer du dem gennem den brugerdefinerede hovedkomponent. Du kan enten tilføje dem på alle siderne i applikationen eller tilpasse dem til hver side.

MAKEUSE AF DAGENS VIDEO

Tilføjelse af et globalt hovedmærke til alle Next.js-sider

Next.js giver _app.js til at initialisere sider. Du kan bruge det til at oprette metatags, der deles på tværs af alle sider.

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

Hvis du ønsker, at en side skal have en tilpasset titel og beskrivelse, skal du tilføje head-komponenten til den, og Next.js vil bruge den i stedet for standarden i app-komponenten.

Tilføjelse af metatags og beskrivelse til en specifik Next.js-side

Statiske metatags og beskrivelser er velegnede til sider, hvis indhold forbliver det samme, for eksempel en startside.

hvordan man omgår administratoradgangskode windows xp

Åbn filen /pages/index.js og modificer head-tagget med den passende titel og beskrivelse.

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;

Du får adgang til Head-komponenten ved at importere den fra next/head . Det fungerer ved at tilføje elementer til head-tagget af en HTML-side . Afhængigt af hvor du placerer denne komponent, vil metatags og beskrivelse være tilgængelige på tværs af hele applikationen eller på individuelle sider.

hvorfor er min 4g så langsom

Tilføjelse af titlen, viewport-bredden og beskrivelsen i _app.js-filen sikrer, at alle sider har de samme metadata.

Denne side har statisk indhold, men nogle gange vil du måske oprette sider, der bruger dynamisk indhold.

Tilføjelse af dynamisk metatitel og beskrivelser til en Next.js-side

Afhængigt af use casen kan du bruge getStaticProps(), getStaticPaths() eller getServerSideProps() til at hente data i Next.js. Disse data bestemmer sidens indhold. Brug den til at oprette metadata for siden.

For eksempel ville det være kedeligt at oprette metadata til Next.js-applikationen, der gengiver blogindlæg.

Den anbefalede måde er at oprette en dynamisk side, der modtager en identifikator, du kan bruge til hente blogindholdet . Du kan derefter bruge dette indhold i hovedkomponenten.

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;

GetStaticProps-funktionen sender postdataene til Post-komponenten som rekvisitter. Indlægskomponenten destrukturerer titlen, beskrivelsen og indholdet fra rekvisitterne. Head-komponenten bruger så titlen og beskrivelsen i metataggene.

hvorfor bliver min telefon varm, når den oplades

Next.js er et optimeret rammeværk

Du har lige lært, hvordan du bruger head-komponenten til at tilføje metatitler og beskrivelser til et Next.js-projekt. Brug denne viden til at skabe SEO-venlige overskrifter, klatre op i SERP'erne og tiltrække flere besøgende til dit websted.

Udover hovedkomponenten leverer Next.js andre komponenter som Link og Image. Disse komponenter er optimeret ud af boksen, hvilket gør det nemmere at skabe hurtige SEO-venlige hjemmesider.