Next.js에서 SEO와 RSS 메타데이터 점검하기

웹사이트가 Google에 검색되거나, RSS 피드가 제대로 보이려면, 메타데이터가 정확하고 구조화되어야 한다.

HTML head 메타데이터 확인

실제 공개 URL에서 HTML 소스를 본다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:' | head -20

필수 항목:

• <title>: 페이지 제목
• <meta name="description">: 설명
• <link rel="canonical">: 정정 URL (SEO 중복 방지)
• <meta property="og:*">: Open Graph (SNS 공유시 표시)
• <meta property="twitter:*">: Twitter 카드

Next.js Metadata API 확인

next.config.js와 각 페이지의 metadata 설정을 본다.

// app/page.tsx
export const metadata: Metadata = {
  title: 'My Blog',
  description: 'A personal blog about web development',
  openGraph: {
    url: 'https://example.com',
    type: 'website',
    title: 'My Blog',
    description: 'A personal blog about web development',
    images: [{
      url: 'https://example.com/og-image.png',
      width: 1200,
      height: 630
    }]
  }
};

static 메타데이터는 빌드 타임에 생성되고, dynamic 메타데이터는 요청 타임에 생성된다.

SEO 빌드 확인

Production 빌드 후 실제로 메타데이터가 포함되는지 본다.

npm run build
npm run start

# 브라우저에서 View Page Source로 확인
# 또는
curl -s http://localhost:3000 | grep '<title>'

CSR(Client-Side Rendering)으로만 구성되면, 초기 HTML에 메타데이터가 없다. SSR이나 Static Generation을 사용해야 한다.

Sitemap 생성

Next.js 13+에서는 자동으로 sitemap을 생성할 수 있다.

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
    },
    {
      url: 'https://example.com/posts',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ]
}

배포 후:

curl -s https://example.com/sitemap.xml | head -20

RSS 피드 확인

RSS 피드가 있다면, 유효한 XML 형식인지 확인한다.

curl -s https://example.com/feed.xml | head -30

# 또는 XML 검증
wget -q -O - https://example.com/feed.xml | xmllint --noout -

RSS 구조:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>My Blog</title>
    <link>https://example.com</link>
    <description>A personal blog</description>
    <item>
      <title>Post Title</title>
      <link>https://example.com/posts/post-slug</link>
      <description>Post excerpt</description>
      <pubDate>Tue, 01 Jun 2026 12:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

Robots.txt와 Meta Tags

검색 로봇이 크롤링하지 말아야 할 페이지를 지정한다.

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: '/admin/',
      },
    ],
    sitemap: 'https://example.com/sitemap.xml',
  }
}

또는 HTML 메타 태그로:

<meta name="robots" content="index, follow">
<!-- noindex면 검색 결과에서 제외 -->
<meta name="robots" content="noindex">

Open Graph 이미지 검증

SNS에 공유할 때 보이는 이미지가 제대로 설정되어 있는지 확인한다.

curl -s https://example.com | grep 'og:image'

# 이미지가 실제로 존재하고 접근 가능한지
curl -I https://example.com/og-image.png

Facebook Sharing Debugger에 URL을 입력해서 미리보기를 본다: https://developers.facebook.com/tools/debug/sharing

모바일 친화성 확인

Google Mobile-Friendly Test를 사용한다: https://search.google.com/test/mobile-friendly

또는:

# Lighthouse로 모바일 성능 검사
npm install -g lighthouse
lighthouse https://example.com --view

색인 요청 (Google Search Console)

사이트가 Google에 등록된 후, 새로운 페이지나 업데이트를 Search Console에서 요청할 수 있다.

https://search.google.com/search-console

배포 후 몇 시간은 검색 결과에 반영되지 않을 수 있으니, 기다리거나 수동으로 인덱싱을 요청한다.