Next.js 블로그 SEO 최적화

메타데이터와 구조화된 데이터로 검색 노출 개선하기

블로그를 운영하다 보면 이런 고민이 들곤 합니다.

“블로그 이름으로는 검색되는데, 내가 쓴 글은 왜 안 뜨지?”

그래서 이번에 Next.js 기반 블로그에서 SEO 최적화를 직접 적용해봤고, 그 경험을 공유해보려고 합니다.

---

🔍 검색 결과에 영향을 주는 주요 요소들

1. 제목 (Title) - 가장 중요한 요소

검색 결과의 파란색 링크 부분.
포스트 작성 시 입력한 제목이 그대로 반영됩니다.

2. 설명 (Description) - 두 번째로 중요

제목 아래 회색 글씨로 보이는 설명 문구인데요,
여기서 검색 클릭률에 큰 영향을 주기 때문에 꼭 신경 써야 할 부분입니다.

3. URL 구조

https://도메인.com/posts/포스트슬러그
SEO에 유리한 형태로 이미 잘 구성되어 있습니다.

4. 대표 이미지

소셜 미디어 공유나 이미지 검색 결과에 노출되는 시각적 요소입니다.

5. 태그

해당 포스트의 주제를 검색 키워드로 알려주는 역할을 합니다.

---

⚠️ 기존 코드에서 발견된 문제

export async function generateMetadata({ params }) {
  const post = await getPost(resolvedParams.slug)
  return {
    title: `${post.title} | codedot 블로그`,
    description: post.excerpt || post.title,
  }
}

위 코드에서 보듯이, 사용자가 meta_description을 입력해도
실제로는 excerpt나 title만 사용되고 있었던 상황이었습니다.

---

✅ SEO 최적화 솔루션

1. 메타데이터 우선순위 수정

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  try {
    const resolvedParams = await params
    const post = await getPost(resolvedParams.slug)
    
    const description = post.meta_description || post.excerpt || post.title
    
    return {
      title: `${post.title} | codedot 블로그`,
      description,
      keywords: post.tags?.join(', '),
      openGraph: {
        title: post.title,
        description,
        type: 'article',
        publishedTime: post.published_at,
        authors: [post.author_name || 'Unknown'],
        tags: post.tags || [],
        images: post.featured_image_url
          ? [{
              url: post.featured_image_url,
              width: 1200,
              height: 630,
              alt: post.title,
            }]
          : undefined,
      },
      twitter: {
        card: 'summary_large_image',
        title: post.title,
        description,
        images: post.featured_image_url ? [post.featured_image_url] : undefined,
      },
    }
  } catch (error) {
    return {
      title: 'Post Not Found | codedot 블로그',
      description: '요청하신 포스트를 찾을 수 없습니다.',
    }
  }
}

---

💡 주요 개선 포인트:

• meta_description이 최우선으로 반영
• keywords 메타태그로 태그를 검색 키워드로 활용
• OpenGraph 정보 강화 (작성자, 태그, 이미지 포함)
• Twitter 카드 최적화로 공유 시 시각적 완성도 향상

---

2. 구조화된 데이터(JSON-LD) 추가

구글 등 검색엔진이 포스트 내용을 더 잘 이해할 수 있도록
BlogPosting 스키마를 활용해 구조화된 데이터를 삽입했습니다.

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": post.title,
      "description": post.meta_description || post.excerpt || post.title,
      "image": post.featured_image_url ? [post.featured_image_url] : undefined,
      "author": {
        "@type": "Person",
        "name": post.author_name || "Unknown"
      },
      "publisher": {
        "@type": "Organization",
        "name": "codedot 블로그",
        "logo": {
          "@type": "ImageObject",
          "url": "https://codedot-blog.vercel.app/favicon.png"
        }
      },
      "datePublished": post.published_at,
      "dateModified": post.updated_at || post.published_at,
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": `https://codedot-blog.vercel.app/posts/${resolvedParams.slug}`
      },
      "keywords": post.tags?.join(', '),
      "articleSection": post.categories?.[0]?.name,
      "wordCount": post.content?.split(' ').length,
      "timeRequired": post.reading_time ? `PT${post.reading_time}M` : undefined,
    })
  }}
/>

---

🔎 구조화된 데이터의 효과:

• 검색엔진이 포스트 내용을 더 정확히 파악
• 리치 스니펫(작성일, 작성자 등)이 검색결과에 표시될 가능성↑
• 소셜미디어 공유 시 정보가 더 깔끔하게 보임

---

📝 포스트 작성 시 챙겨야 할 항목

---

🚀 추가로 개선할 수 있는 SEO 팁

✅ 이미 적용된 항목

• robots.txt 설정 완료 (크롤링 최적화)
• sitemap.xml 자동 생성
• 구글 서치콘솔 / 네이버 서치어드바이저 연동 완료

✍ 앞으로 더 보완할 부분

• 내부 링크 강화: 관련 포스트 간 연결성 확보
• 외부 링크 확보: 신뢰할 수 있는 출처 인용
• 이미지 alt 텍스트 추가
• 콘텐츠 주기적 업데이트: 오래된 글도 최신 정보로 개선

---

📊 SEO 반영 상태 확인 방법

즉시 확인

• 페이지 소스 보기: 메타태그와 JSON-LD 구조 확인
• SNS 공유 테스트: 제목, 설명, 이미지가 잘 표시되는지 확인

며칠 후 확인

• 구글 서치콘솔: URL 검사 → 색인 상태 체크
• 네이버 서치어드바이저: 수집 요청 → 반영 여부 확인
• 직접 검색 테스트:
  site:도메인.com 포스트제목 으로 확인해보기

---

✅ 마무리

이번 SEO 최적화의 핵심은

"작성자의 의도를 검색엔진이 정확히 이해하도록 돕는 것" 입니다.

• meta_description이 무시되던 문제를 해결했고,
• 구조화된 데이터로 포스트 정보를 명확하게 전달하게 만들었습니다.

앞으로는 글을 작성할 때
제목 / 설명 / 태그 / 이미지 / 카테고리
이 다섯 가지를 꼭 의식하면서 작성하기!

작은 변화들이 쌓여
검색 노출, 클릭률, 체류 시간까지 긍정적인 영향을 줄 수 있습니다!

---