seo

Next.js 블로그에 SEO 완벽 적용하기

Next.js 블로그에 SEO 완벽 적용하기
0 views
views
5 min read
#seo
Table of Contents

SEO 개념도
검색 엔진 최적화의 3대 핵심 요소 (출처: Medium)

SEO(Search Engine Optimization)는 현대 웹 개발의 필수 요소입니다. 이 가이드에서는 Next.js 기반 블로그에 검색 엔진 친화적인 최적화를 적용하는 모든 단계를 상세히 설명합니다.

1. 기본 메타데이터 설정

1.1 Next.js SEO 기본 구성

next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          }
        ],
      },
    ]
  }
}

1.2 공통 메타태그 컴포넌트

components/SEO.tsx
import Head from 'next/head';
 
export default function SEO({ 
  title = "기본 제목",
  description = "기본 설명",
  keywords = "기본,키워드"
}) {
  return (
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta name="keywords" content={keywords} />
      <meta property="og:type" content="website" />
    </Head>
  )
}

2. 고급 SEO 기법

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

Schemas/ArticleSchema.tsx
export const ArticleSchema = ({ post }) => {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": post.title,
    "description": post.excerpt,
    "image": post.coverImage,
    "author": {
      "@type": "Person",
      "name": post.author.name
    },
    "publisher": {
      "@type": "Organization",
      "name": "내 블로그 이름",
      "logo": {
        "@type": "ImageObject",
        "url": "/logo.png"
      }
    },
    "datePublished": post.publishedAt
  };
 
  return (
    <script type="application/ld+json">
      {JSON.stringify(structuredData)}
    </script>
  );
};

3. 기술적 SEO 최적화

3.1 XML 사이트맵 자동 생성

yarn add next-sitemap
next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://yourdomain.com',
  generateRobotsTxt: true,
  exclude: ['/server-sitemap.xml'],
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
      }
    ],
    additionalSitemaps: [
      `${process.env.SITE_URL}/sitemap.xml`,
    ],
  },
};

3.2 robots.txt 설정

public/robots.txt
User-agent: *
Allow: /
Disallow: /private/
 
Sitemap: https://yourdomain.com/sitemap.xml

4. 콘텐츠 최적화 전략

4.1 키워드 매핑 예시

타겟 키워드관련 키워드LSI 키워드
"Next.js SEO""서버 사이드 렌더링", "메타 태그""웹 크롤링 최적화", "퍼포먼스 점수"
"블로그 최적화""콘텐츠 전략", "내부 링크""사용자 체류 시간", "이탈률 감소"

4.2 헤딩 구조 권장 사항

# H1: 주제 (페이지당 1개)
## H2: 주요 섹션
### H3: 하위 주제
#### H4: 상세 설명

5. SEO 분석 도구 연동

5.1 Google Search Console 설정

public/verification.html
<html>
  <head>
    <meta name="google-site-verification" content="your_verification_code" />
  </head>
  <body>Google Search Console Verification</body>
</html>

5.2 Google Analytics 4 연동

lib/gtag.js
export const GA_TRACKING_ID = 'G-XXXXXXXXXX';
 
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
    anonymize_ip: true,
    cookie_flags: 'SameSite=None;Secure'
  });
};

6. 성능 최적화

6.1 Lighthouse 점수 향상 팁

# 성능 검사 실행
yarn add -D lighthouse
npx lighthouse https://yourdomain.com --view

6.2 이미지 최적화 기법

next.config.js
const withOptimizedImages = require('next-optimized-images');
 
module.exports = withOptimizedImages({
  handleImages: ['jpeg', 'png', 'webp'],
  optimizeImagesInDev: true,
});

7. SEO 모니터링 및 유지보수

7.1 경쟁사 분석

1. SEMrush: 키워드 격차 분석
2. Ahrefs: 백링크 추적
3. Screaming Frog: 크롤링 진단

7.2 주기적 점검 체크리스트

마무리

SEO는 단순한 기술 적용이 아닌 지속적인 최적화 과정입니다. 본 가이드에서 소개한 기법을 적용한 후 Google Search Console의 데이터를 주기적으로 모니터링하며 전략을 수정해 나가는 것이 중요합니다.

SEO 학습 리소스