Next.js 웹사이트에 SEO 친화적 헤더를 추가하는 방법

Next.js 웹사이트에 SEO 친화적 헤더를 추가하는 방법

페이지 제목, 메타 태그 및 메타 설명은 SEO에 중요합니다. 사용자가 SERPS에서 가장 먼저 보는 항목이며 클릭하여 귀하의 웹사이트로 연결되는지 여부를 결정합니다. 따라서 웹사이트의 제목, 메타 태그 및 설명을 최적화하는 것이 중요합니다.





Next.js에서는 사용자 정의 헤드 구성 요소를 통해 추가합니다. 응용 프로그램의 모든 페이지에 추가하거나 각 페이지에 대해 사용자 지정할 수 있습니다.



MAKEUSEOF 오늘의 비디오

모든 Next.js 페이지에 글로벌 헤드 태그 추가하기

Next.js는 페이지를 초기화하기 위해 _app.js를 제공합니다. 이를 사용하여 모든 페이지에서 공유되는 메타 태그를 만들 수 있습니다.





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

페이지에 사용자 정의 제목과 설명이 포함되도록 하려면 헤드 구성 요소를 추가하세요. 그러면 Next.js는 App 구성 요소의 기본 구성 요소 대신 이 구성 요소를 사용합니다.

휴대전화로 컴퓨터 제어

특정 Next.js 페이지에 메타 태그 및 설명 추가

정적 메타 태그 및 설명은 콘텐츠가 동일하게 유지되는 페이지(예: 홈 페이지)에 적합합니다.



/pages/index.js 파일을 열고 적절한 제목과 설명으로 head 태그를 수정합니다.

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;

다음/헤드에서 가져와서 헤드 구성 요소에 액세스합니다. . 의 head 태그에 요소를 추가하여 작동합니다. HTML 페이지 . 이 구성 요소를 배치하는 위치에 따라 메타 태그와 설명은 전체 애플리케이션 또는 개별 페이지에서 사용할 수 있습니다.



_app.js 파일에 제목, 표시 영역 너비 및 설명을 추가하면 모든 페이지에 동일한 메타데이터가 포함됩니다.

이 페이지에는 정적 콘텐츠가 있지만 때로는 동적 콘텐츠를 사용하는 페이지를 만들고 싶을 수도 있습니다.



Next.js 페이지에 동적 메타 제목 및 설명 추가

사용 사례에 따라 getStaticProps(), getStaticPaths() 또는 getServerSideProps()를 사용하여 Next.js의 데이터를 가져올 수 있습니다. 이 데이터는 페이지의 내용을 결정합니다. 이를 사용하여 페이지에 대한 메타데이터를 생성합니다.

예를 들어 블로그 게시물을 렌더링하는 Next.js 애플리케이션의 메타데이터를 만드는 것은 지루할 것입니다.

권장되는 방법은 사용할 수 있는 식별자를 수신하는 동적 페이지를 만드는 것입니다. 블로그 콘텐츠 가져오기 . 그런 다음 헤드 구성 요소에서 이 콘텐츠를 사용할 수 있습니다.

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 함수는 포스트 데이터를 props로 포스트 컴포넌트에 전달합니다. Post 구성 요소는 소품에서 제목, 설명 및 콘텐츠를 구조화합니다. 그러면 head 구성 요소는 메타 태그의 제목과 설명을 사용합니다.

Next.js는 최적화된 프레임워크입니다

방금 헤드 구성 요소를 사용하여 Next.js 프로젝트에 메타 제목과 설명을 추가하는 방법을 배웠습니다. 이 지식을 사용하여 SEO 친화적 헤더를 만들고 SERP를 높이고 더 많은 방문자를 사이트로 유치하십시오.

헤드 구성 요소 외에도 Next.js는 Link 및 Image와 같은 다른 구성 요소를 제공합니다. 이러한 구성 요소는 기본적으로 최적화되어 있어 SEO 친화적인 빠른 웹사이트를 더 쉽게 만들 수 있습니다.