[Next.js] 직접 해 본 SEO 최적화 방법

Sara Jo·2024년 9월 24일

SSR english-with-suits meta tag next.js open graph robots.txt seo sitemap

English with Suits 프로젝트를 기획할 때 신경쓰고자 했던 부분 중 하나가 SEO(검색엔진 최적화)였다. Suits, 미드영어, 비즈니스영어, 슈츠 와 같은 키워드들이나, 드라마 속 대사를 검색했을 때 이 서비스가 노출되도록 구축하고 싶었다.

Next.js에서 제공하는 SEO 최적화를 위한 기능들 뿐 아니라 효율적인 페이지 노출을 위한 여러가지 설정에 대해 정리해보고자 한다.

검색엔진 최적화(SEO) 점수 100점!

SEO란?

먼저, 개념에 대해 간략하게 정의하고 넘어가보자. SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진에서 상위에 노출되도록 최적화하는 과정이다. 이를 통해 검색 결과에서 더 많은 트래픽을 얻을 수 있다. Next.js에서는 SSR(서버 사이드 렌더링)과 함께 SEO 최적화를 쉽게 구현할 수 있도록 지원하고 있다.

1. SSR (서버 사이드 렌더링)

Next.js의 SSR은 페이지 로드 전에 HTML을 서버에서 미리 렌더링하여 클라이언트가 완성된 HTML을 받도록 한다. 이를 통해 검색 엔진이 더 쉽게 페이지를 크롤링할 수 있다.

// SSR을 통해 HTML을 서버에서 미리 렌더링
export default async function List() {
  const episodes = await fetchAllEpisodes();
  return (
    // 컨텐츠 렌더링
  );
}

데이터 페칭을 서버 컴포넌트 (Server Component)에서 하도록 해서 서버에서 응답받은 데이터가 포함된 HTML을 검색 엔진이 크롤링할 수 있도록 설정했다.

// SSR을 통해 HTML을 서버에서 미리 렌더링
export async function generateStaticParams() {
  const episode = await fetchAllEpisodes();
  return episode.map((episode) => ({
    episode: episode.episode.toString(),
  }));
}

export default async function Expressions({
  params,
}: {
  params: { episode: number };
}) {
  const expressions = await fetchExpressions(params.episode);

  return (
    // 컨텐츠 렌더링
  );
}

2. Meta Tags

메타 태그는 웹페이지에 대한 정보를 검색 엔진에 전달하는 중요한 요소이다.

Meta tag는 유저가 보게되는 웹페이지의 컨텐츠에는 아무런 영향도 주지 않지만, 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미한다. 검색엔진이 웹페이지를 읽어야할 때 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 핵심적인 요소이다.

next/head를 사용하여 각 페이지에 적절한 메타 태그를 추가했다.

import Head from "next/head";

<Head>
  <title>English with Suits: Season 1</title>
  <meta
    name="description"
    content="Learn business English with English with Suits"
  />
  <meta
    name="keywords"
    content="English with Suits, Season 1, Suits, 미드영어, 슈츠, 슈츠영어"
  />
</Head>

3. Open Graph 태그

Open Graph 태그로 소셜 미디어에서 링크가 공유될 때 콘텐츠의 미리보기를 설정하고, 이를 통해 클릭률을 높일 수 있다.

export const metadata: Metadata = {
  openGraph: {
    title: "English With Suits",
    description: "Suits로 배우는 비즈니스 영어회화",
    images: [
      {
        url: process.env.POSTER_IMAGE as string,
        width: 800,
        height: 600,
        alt: "Suits Poster",
      },
    ],
  },
  twitter: {
    title: "English With Suits",
    description: "Suits로 배우는 비즈니스 영어회화",
    images: {
      url: process.env.POSTER_IMAGE as string,
      alt: "Suits Poster",
    },
  },
};

카카오톡으로 링크를 공유 할 때 Open Graph 태그로 설정해 둔 title, description, image가 미리보기로 노출된다.

4. robots.txt

robots.txt 파일은 검색 엔진이 사이트에서 어떤 페이지를 크롤링하고 어떤 페이지를 제외할지에 대한 규칙을 설정한다. Next.js에서는 public/robots.txt에 파일을 생성하여 설정할 수 있다.

# *
User-agent: *
Allow: /

# Host
Host: https://english-with-suits.vercel.app/

# Sitemaps
Sitemap: https://english-with-suits.vercel.app/sitemap.xml

이 코드는 검색 엔진에게 전체 사이트를 크롤링하도록 허용하며, 사이트맵의 경로를 제공해 검색 엔진이 사이트 구조를 알 수 있게 한다.

Disallow 항목에 특정 주소를 넣으면 써치엔진이 그 주소로는 접근하지 않는다.

User-agent: *
Disallow: /private-page

5. Sitemap

Sitemap은 사이트의 구조를 검색 엔진에 알려주는 XML 파일이다.

Next.js에서는 public/sitemap.xml에 사이트맵을 설정할 수 있으며,
Sitemap을 통해 검색 엔진은 사이트의 구조를 이해하고, 더 효율적으로 인덱싱할 수 있다.

Sitemap 파일은 next-sitemap 패키지를 사용하면 간편하게 생성할 수 있다.

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap><loc>https://english-with-suits.vercel.app/sitemap-0.xml</loc></sitemap>
</sitemapindex>

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://english-with-suits.vercel.app/list</loc><lastmod>2024-06-19T02:50:23.569Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
<url><loc>https://english-with-suits.vercel.app/mypage</loc><lastmod>2024-06-19T02:50:23.570Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
<url><loc>https://english-with-suits.vercel.app/login</loc><lastmod>2024-06-19T02:50:23.570Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
<url><loc>https://english-with-suits.vercel.app/error</loc><lastmod>2024-06-19T02:50:23.570Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
...
</urlset>

Sara Jo

이전 포스트

[Supabase] 백엔드 빠르게 구축하기 2. 인증 기능 구현하기 (+소셜로그인)

다음 포스트