React

NextJS 에서 SEO 설정하기

노야근 2025. 3. 31. 17:32
반응형

SEO 를 설정하면 Google, Bing 과 같은 검색 엔진에 노출시켜 클롤링과 색인화 할 수 있습니다. 즉, 검색을 할때 잘 나타납니다. 주의할 점은 개발 중일때는 검색이 되면 안되니 주로 설정하지 않고 운영에만 설정해서 배포하도록 합니다. 또한 Facebook이나 Twitter, Kakaotalk 등 소셜 미디어에 링크를 공유할때도 어떤 페이지를 공유 했냐에 따라 썸네일 이미지나 제목등의 미리보기를 커스텀 할 수도 있습니다. 또한 검색 엔진에 의해 페이지의 성능과 접근성에 대한 적절한 판단을 받아 사용자 경험도 함께 향상되기 때문에 좋은 사이트가 됩니다. 😀

 

요즘은 다양한 라이브러리가 나와있기 때문에 손쉽게 설정이 가능합니다. 

다양한 방법이 있지만 크게 header에 직접 추가하거나 next-seo 라이브러리를 사용합니다. 

 

1. Header 에 직접 추가하기 

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>내 블로그 제목</title>
        <meta name="description" content="이 블로그는 SEO를 최적화한 Next.js 예제입니다." />
        <meta name="keywords" content="Next.js, SEO, React, 웹개발" />
        <meta name="author" content="작성자 이름" />

        {/* Open Graph (Facebook, 카카오톡 등) */}
        <meta property="og:title" content="내 블로그 제목" />
        <meta property="og:description" content="이 블로그는 SEO를 최적화한 Next.js 예제입니다." />
        <meta property="og:image" content="/og-image.png" />
        <meta property="og:url" content="https://myblog.com" />
        
        {/* Twitter Card (트위터 공유) */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="내 블로그 제목" />
        <meta name="twitter:description" content="이 블로그는 SEO를 최적화한 Next.js 예제입니다." />
        <meta name="twitter:image" content="/twitter-image.png" />
      </Head>

      <h1>SEO 최적화된 블로그</h1>
      <p>이 페이지는 검색 엔진 최적화가 적용되었습니다.</p>
    </>
  );
}

 

📌 next/head 주의사항

  • title과 meta 태그는 페이지별로 맞춤 설정하는 것이 좋음.
  • 이미지(og:image, twitter:image 등)는 절대 경로로 설정해야 함.

2. next/seo 라이브러리 사용하기 

npm i next-seo

 

npm 으로 간단한게 설치가 가능합니다. 기전에 header 에 직접 추가하는 것보다 컴포넌트 단위로 수월하게 setting이 가능해서 실제 프로젝트에서 많이 사용합니다.

 

import { NextSeo } from "next-seo";

export default function Home() {
  return (
    <>
      <NextSeo
        title="내 블로그 제목"
        description="이 블로그는 SEO를 최적화한 Next.js 예제입니다."
        canonical="https://myblog.com"
        openGraph={{
          url: "https://myblog.com",
          title: "내 블로그 제목",
          description: "이 블로그는 SEO를 최적화한 Next.js 예제입니다.",
          images: [{ url: "https://myblog.com/og-image.png", width: 800, height: 600, alt: "Og Image Alt" }],
          site_name: "MyBlog",
        }}
        twitter={{
          handle: "@mytwitterhandle",
          site: "@site",
          cardType: "summary_large_image",
        }}
      />

      <h1>SEO 최적화된 블로그</h1>
      <p>이 페이지는 검색 엔진 최적화가 적용되었습니다.</p>
    </>
  );
}

 

하나의 컴포넌트에 다양한 옵션을 줄 수 있어서 meta  태그를 일일이 선언하지 않아서 편리합니다. defaultSeo 를 사용하면 모든 페이지에 공통 적용도 가능합니다. 

 

반응형