Hur man lägger till SEO-vänliga rubriker på en Next.js-webbplats

Sidtitlar, metataggar och metabeskrivningar är viktiga för SEO. De är det första en användare ser på SERPS och avgör om de klickar sig vidare till din webbplats. Det är därför viktigt att optimera din webbplatss titlar, metataggar och beskrivningar.

I Next.js lägger du till dem genom den anpassade huvudkomponenten. Du kan antingen lägga till dem på alla sidor i applikationen eller anpassa dem för varje sida.

MAKEUSE AV DAGENS VIDEO

Lägga till en global head-tagg på alla Next.js-sidor

Next.js tillhandahåller _app.js för att initiera sidor. Du kan använda den för att skapa metataggar som delas på alla sidor.

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

Om du vill att en sida ska ha en anpassad titel och beskrivning lägger du till head-komponenten till den, så kommer Next.js att använda den istället för standarden i app-komponenten.

Lägga till metataggar och beskrivning på en specifik Next.js-sida

Statiska metataggar och beskrivningar är lämpliga för sidor vars innehåll förblir detsamma, till exempel en startsida.

Öppna filen /pages/index.js och ändra head-taggen med lämplig titel och beskrivning.

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 kommer åt Head-komponenten genom att importera den från nästa/huvud . Det fungerar genom att lägga till element till head-taggen för en HTML-sida . Beroende på var du placerar den här komponenten kommer metataggarna och beskrivningen att vara tillgängliga i hela applikationen eller på enskilda sidor.

Genom att lägga till titeln, visningsportens bredd och beskrivningen i filen _app.js säkerställs att alla sidor har samma metadata.

Den här sidan har statiskt innehåll, men ibland kanske du vill skapa sidor som konsumerar dynamiskt innehåll.

Lägga till dynamisk metatitel och beskrivningar på en Next.js-sida

Beroende på användningsfallet kan du använda getStaticProps(), getStaticPaths() eller getServerSideProps() för att hämta data i Next.js. Dessa data bestämmer sidans innehåll. Använd den för att skapa metadata för sidan.

kan jag se vem som blockerade mig på facebook

Till exempel skulle det vara tråkigt att skapa metadata för Next.js-applikationen som renderar blogginlägg.

Det rekommenderade sättet är att skapa en dynamisk sida som får en identifierare som du kan använda till hämta blogginnehållet . Du kan sedan använda detta innehåll i head-komponenten.

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 skickar postdata till Post-komponenten som rekvisita. Inläggskomponenten destrukturerar titeln, beskrivningen och innehållet från rekvisita. Head-komponenten använder sedan titeln och beskrivningen i metataggarna.

Next.js är ett optimerat ramverk

Du har precis lärt dig hur du använder head-komponenten för att lägga till metatitlar och beskrivningar till ett Next.js-projekt. Använd denna kunskap för att skapa SEO-vänliga rubriker, klättra upp för SERP:erna och locka fler besökare till din webbplats.

Förutom huvudkomponenten tillhandahåller Next.js andra komponenter som Link och Image. Dessa komponenter är optimerade direkt, vilket gör det lättare att skapa snabba SEO-vänliga webbplatser.