SEO 최적화, 생각보다 간단하다!

들어가며

프로젝트를 진행하면서 사이트를 검색 엔진에 노출시키기 위해 SEO(Search Engine Optimization) 최적화 작업을 진행했습니다.

초기에는 단순히 meta 태그만 추가하면 되는 줄 알았지만, 알아보면서 sitemap.xml, robots.txt까지 SEO 최적화를 위한 설정이 필요하다는 걸 깨달았습니다.

어떤 설정을 적용해야할까?

title 태그

title 태그는 브라우저 탭 상단과 검색 결과의 제목에 표시됩니다.
사용자 클릭 유도에 직접적인 영향을 주기 때문에, 사이트 주제나 브랜드명을 명확히 드러내는 문구로 구성하는 것이 좋습니다.

최근에는 "사이트명 - 주제" 형식으로도 많이 확인할 수 있습니다.
이번 프로젝트에서는 간단하게 사이트명만 나타냈습니다.

• 적용 방법

<title>빵대빵</title>

• 적용 화면
  
  

Meta 태그

기본적으로 적용한 태그

SEO에 기본적으로 사용되는 속성은 다음과 같습니다.

• description: 페이지를 간략하게 설명하는 내용으로, 검색 결과 하단에 표시됩니다.
• keywords: 페이지 관련 키워드를 나열합니다.

최근 검색 엔진은 keywords를 거의 참고하지 않는다는 정보를 찾아볼 수 있는데, 기본적인 정보라고 생각되어 추가했습니다.

<meta name="description" content="지역별 맛있는 빵집 정보 제공, 추천 서비스 제공해준다 냥">
<meta name="keywords" content="빵대빵,빵,빵집,대전빵집,대전 빵집 추천,빵집 정보,빵 추천,빵 맛집,빵 커뮤니티,맛있는 빵집,빵지순례,대전 빵집순례,대전,맛있는 빵">

🔗 MDN: meta 태그 속성 더보기

Open Graph 태그

Open Graph 태그를 적용하면 카카오톡와 같은 외부 SNS 공유 시 미리보기 정보를 설정할 수 있습니다.
기본적으로 title, url, site_name, type을 설정해야합니다. 추가로 description, image도 많이 사용됩니다.

이미지 크기는 카카오톡 기준 800x400 정도가 적당합니다.

🔗 The Open Graph protocol에서 속성 더보기

• 적용 방법

<meta property="og:title" content="빵대빵">
<meta property="og:description" content="지역별 맛있는 빵집 정보 제공, 추천 서비스 제공해준다 냥">
<meta property="og:url" content="https://bbangdaebbang.com">
<meta property="og:site_name" content="빵대빵">
<meta property="og:image" content="https://bbangdaebbang.com/assets/images/thumb.png">
<meta property="og:type" content="website">

• 적용 화면
  

Twitter Card 태그

X(구 트위터) 공유 시 사용할 미리보기 정보도 별도로 설정할 수 있습니다.
Open Graph만으로도 미리보기는 제공되지만, Twitter에서는 twitter 태그를 우선적으로 참조합니다.

해당 태그는 추가하지 않아도 되지만, Vercel 배포를 통해 Open Graph 적용을 확인할 때 기본적으로 확인하는 요소라 Open Graph 태그와 같이 추가해주었습니다.

🔗 twitter-developer-platform에서 속성 더보기

• 적용 방법

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="빵대빵">
<meta name="twitter:description" content="지역별 맛있는 빵집 정보 제공, 추천 서비스 제공해준다 냥">
<meta name="twitter:image" content="https://preview.bbangdaebbang.com/assets/images/thumb.png">

sitemap.xml

검색 엔진 크롤러가 페이지 구조를 파악할 수 있도록 돕기 위해 작성합니다.
페이지 주소, 마지막 수정 날짜, 변경 주기, 우선순위를 설정할 수 있습니다.

• 적용 방법

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.bbangdaebbang.com</loc>
    <lastmod>2025-03-14T10:14:48.525Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1</priority>
    </url>
  <url>
    <loc>https://www.bbangdaebbang.com/balanceGame</loc>
    <lastmod>2025-03-14T10:14:48.525Z</lastmod>
    <changefreq>never</changefreq>
    <priority>0.8</priority>
  </url>
  ...
</urlset>

robots.txt

크롤러가 페이지 탐색 시 허용할 경로와, 차단할 경로에 대해 설정합니다.
이번 프로젝트에서는 모든 경로를 허용했습니다.

• 적용 방법

User-Agent: *
Allow: /

Sitemap: https://www.bbangdaebbang.com/sitemap.xml

검색 노출 등록하기

Google

1. Google Search Console 접속
2. 도메인 또는 URL 접두어 등록
3. 소유자 인증
4. 왼쪽 메뉴 도구 중 '색인 생성 > Sitemaps'에서 sitemap 주소 등록
5. 필요한 경우 'URL 검사'로 직접 색인 요청 가능

✅ 구글에 색인 신청한 후 일정 시간이 지나면,
아래와 같은 화면을 통해 색인이 정상적으로 등록되었는지 확인할 수 있습니다.

Naver

1. 네이버 서치어드바이저 접속
2. 웹마스터 도구에서 사이트 등록
3. 소유자 인증
4. sitemap.xml 및 robots.txt 등록
5. 사이트 진단을 통해 누락된 설정 확인 가능

✅ 네이버에 사이트를 등록하고 일정 시간이 지나면,
'웹마스터 도구 > 사이트 관리 > 리포트 - 사이트 진단'을 통해 색인 여부를 확인할 수 있습니다.

Next.js에서 SEO 최적화하기

기본 설정

Next.js의 App Router 환경에서는 파일 기반으로 metadata, robots.txt, sitemap.xml을 쉽게 설정할 수 있습니다

🔗 Next.js 공식 문서

• Metadata 설정
• robots.txt 설정
• sitemap.xml 설정

공통 Metadata 관리

페이지마다 metadata 내용을 일일이 구성하는게 번거로워, 반복되는 설정을 함수화하여 간단하게 적용했습니다.

• Metadata 생성 함수화

import { Metadata } from "next";

type GenMetadataProps = {
  title: string;
  imageUrl?: string;
  url: string;
};

export const genMetadata = ({
  title,
  imageUrl = "/assets/images/thumb.png",
  url,
}: GenMetadataProps): Metadata => ({
  title: title,
  openGraph: {
    siteName: APP_INFO.NAME,
    title: title,
    images: {
      url: imageUrl,
    },
    url: `${process.env.NEXT_PUBLIC_BASE_URL}${url}`,
  },
  twitter: {
    title: title,
    images: {
      url: imageUrl,
    },
  },
  alternates: {
    canonical: url,
  },
});

• 사용 예시

// page.ts
export const metadata: Metadata = genMetadata({
  title: "밸런스 게임",
  imageUrl: "/assets/images/thumb_share_balance.png",
  url: "/balanceGame",
});

마무리하며

처음 SEO 작업을 했을땐 meta 태그와 Open Graph 태그만으로 마무리했었습니다.
하지만 이번 작업을 통해 sitemap.xml과 robots.txt까지 살펴보면서, 검색 엔진 크롤러가 페이지 구조를 더욱 잘 파악하고, 불필요한 경로를 차단함으로써 서비스 신뢰도 향상에도 도움이 될 수 있다는 것을 알 수 있었습니다.