Next.js 15로 SEO 최적화하기: 2025년 완벽 가이드

서론

Next.js 15가 출시되면서 SEO 최적화는 더욱 강력하고 간편해졌습니다. App Router의 안정화, 향상된 메타데이터 API, 그리고 자동 최적화 기능들이 추가되어 검색엔진 최적화가 한층 쉬워졌죠.




이 가이드에서는 Next.js 15의 새로운 기능들을 활용하여 SEO를 극대화하는 실전 방법을 상세히 다룹니다. 실제 프로덕션 환경에서 검증된 기법들과 함께, 구글 검색 순위를 획기적으로 개선할 수 있는 전략들을 소개합니다.

목차

1. Next.js 15의 새로운 SEO 기능
2. 메타데이터 API 완벽 가이드
3. 구조화된 데이터 구현
4. 동적 사이트맵 생성
5. 이미지 최적화
6. 성능 최적화 (Core Web Vitals)
7. 국제화 SEO
8. 모니터링과 분석
9. 실전 체크리스트
10. 고급 팁과 트릭

---

1. Next.js 15의 새로운 SEO 기능

Next.js 15는 SEO를 위한 혁신적인 기능들을 대거 도입했습니다. 이전 버전 대비 성능이 40% 향상되었고, 새로운 App Router는 검색엔진 크롤링을 더욱 효율적으로 만들었습니다.

1.1 향상된 메타데이터 API

Next.js 15의 메타데이터 API는 이전보다 훨씬 직관적이고 강력해졌습니다. 정적 메타데이터와 동적 메타데이터를 모두 지원하며, 타입 안정성까지 제공합니다.

// app/layout.tsx
import { Metadata } from 'next';

// 정적 메타데이터 정의
export const metadata: Metadata = {
  title: {
    template: '%s | 럿지 AI',
    default: '럿지 AI - AI 솔루션 전문 기업',
    absolute: '럿지 AI', // 템플릿 무시하고 절대값 사용
  },
  description: 'Next.js 15로 구축한 SEO 최적화 웹사이트',
  metadataBase: new URL('https://ludgi.ai'),
  keywords: ['AI', '인공지능', 'Next.js', 'SEO', '럿지'],
  authors: [{ name: '럿지 AI 팀', url: 'https://ludgi.ai/team' }],
  creator: '럿지 AI',
  publisher: '주식회사 럿지',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  openGraph: {
    type: 'website',
    locale: 'ko_KR',
    alternateLocale: ['en_US', 'ja_JP'],
    url: 'https://ludgi.ai',
    siteName: '럿지 AI',
    title: '럿지 AI - AI 솔루션 전문 기업',
    description: 'BKNIL 백링크 자동화 플랫폼과 AI 솔루션을 제공합니다',
    images: [
      {
        url: 'https://ludgi.ai/og-image.jpg',
        width: 1200,
        height: 630,
        alt: '럿지 AI 메인 이미지',
      }
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: '럿지 AI - AI 솔루션 전문 기업',
    description: 'BKNIL 백링크 자동화 플랫폼과 AI 솔루션',
    site: '@ludgi_ai',
    creator: '@ludgi_ai',
    images: ['https://ludgi.ai/twitter-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/icon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/icon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-icon.png' },
      { url: '/apple-icon-180x180.png', sizes: '180x180' },
    ],
    other: [
      {
        rel: 'mask-icon',
        url: '/safari-pinned-tab.svg',
        color: '#5bbad5',
      },
    ],
  },
  manifest: '/manifest.json',
  alternates: {
    canonical: 'https://ludgi.ai',
    languages: {
      'ko-KR': 'https://ludgi.ai/ko',
      'en-US': 'https://ludgi.ai/en',
      'ja-JP': 'https://ludgi.ai/ja',
    },
    media: {
      'only screen and (max-width: 640px)': 'https://m.ludgi.ai',
    },
    types: {
      'application/rss+xml': 'https://ludgi.ai/feed.xml',
    },
  },
  category: 'technology',
  classification: 'AI, Software Development',
  referrer: 'origin-when-cross-origin',
  colorScheme: 'dark light',
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#000000' },
  ],
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 5,
    userScalable: true,
  },
  verification: {
    google: 'google-site-verification-code',
    yandex: 'yandex-verification-code',
    yahoo: 'yahoo-verification-code',
    other: {
      me: ['my-email@example.com', 'https://my-link.com'],
    },
  },
  appleWebApp: {
    capable: true,
    title: '럿지 AI',
    statusBarStyle: 'black-translucent',
    startupImage: [
      {
        url: '/startup-1920x1080.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
  appLinks: {
    ios: {
      url: 'https://apps.apple.com/app/ludgi-ai',
      app_store_id: 'app-store-id',
    },
    android: {
      package: 'com.ludgi.app',
      app_name: 'Ludgi AI',
    },
    web: {
      url: 'https://ludgi.ai',
      should_fallback: true,
    },
  },
};

1.2 동적 메타데이터 생성

각 페이지별로 동적 메타데이터를 생성할 수 있으며, 비동기 데이터 페칭도 지원합니다.

// app/blog/[slug]/page.tsx
import { Metadata, ResolvingMetadata } from 'next';

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

// 동적 메타데이터 생성 함수
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise {
  // 포스트 데이터 가져오기
  const post = await getPost(params.slug);
  
  // 부모 메타데이터 가져오기 (선택적)
  const previousImages = (await parent).openGraph?.images || [];
  
  // 읽기 시간 계산
  const readingTime = Math.ceil(post.content.split(' ').length / 200);
  
  return {
    title: post.title,
    description: post.excerpt,
    keywords: [...post.tags, ...post.seo?.keywords || []],
    authors: [{ name: post.author, url: https://ludgi.ai/author/${post.authorSlug} }],
    openGraph: {
      type: 'article',
      title: post.seo?.ogTitle || post.title,
      description: post.seo?.ogDescription || post.excerpt,
      url: https://ludgi.ai/blog/${params.slug},
      siteName: '럿지 AI 블로그',
      images: [
        {
          url: post.ogImage || 'https://ludgi.ai/default-og.jpg',
          width: 1200,
          height: 630,
          alt: post.title,
        },
        ...previousImages,
      ],
      article: {
        publishedTime: post.publishDate,
        modifiedTime: post.updateDate,
        expirationTime: post.expirationDate,
        authors: [https://ludgi.ai/author/${post.authorSlug}],
        section: post.category,
        tags: post.tags,
      },
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
    alternates: {
      canonical: https://ludgi.ai/blog/${params.slug},
      languages: {
        'ko-KR': https://ludgi.ai/ko/blog/${params.slug},
        'en-US': https://ludgi.ai/en/blog/${params.slug},
      },
    },
    other: {
      'article:reading_time': ${readingTime} min read,
      'article:word_count': post.content.split(' ').length.toString(),
    },
  };
}

1.3 Viewport 설정

모바일 최적화를 위한 viewport 설정도 메타데이터 API로 관리할 수 있습니다.

// app/layout.tsx
export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  userScalable: true,
  viewportFit: 'cover', // iPhone X 노치 대응
  interactiveWidget: 'resizes-visual', // 가상 키보드 대응
};

---

2. 메타데이터 API 완벽 가이드

2.1 계층적 메타데이터 관리

Next.js 15는 레이아웃 계층 구조를 따라 메타데이터를 병합합니다.

// app/layout.tsx (루트 레이아웃)
export const metadata = {
  title: {
    template: '%s | 럿지 AI',
    default: '럿지 AI',
  },
};

// app/blog/layout.tsx (블로그 레이아웃)
export const metadata = {
  title: {
    template: '%s | 블로그 | 럿지 AI', // 오버라이드
  },
  description: '럿지 AI 기술 블로그',
};

// app/blog/[slug]/page.tsx (개별 페이지)
export async function generateMetadata({ params }) {
  return {
    title: post.title, // "Next.js 15 가이드 | 블로그 | 럿지 AI"로 렌더링
  };
}

2.2 조건부 메타데이터

환경이나 조건에 따라 다른 메타데이터를 제공할 수 있습니다.

export async function generateMetadata({ params, searchParams }) {
  const isDraft = searchParams.preview === 'true';
  const post = await getPost(params.slug, { draft: isDraft });
  
  return {
    title: isDraft ? [초안] ${post.title} : post.title,
    robots: isDraft ? 'noindex, nofollow' : 'index, follow',
    // A/B 테스트를 위한 조건부 설정
    openGraph: {
      title: searchParams.variant === 'b' 
        ? 놓치지 마세요! ${post.title} 
        : post.title,
    },
  };
}

2.3 파일 기반 메타데이터

특별한 파일들을 통해 메타데이터를 정의할 수도 있습니다.

// app/opengraph-image.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const alt = '럿지 AI';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';

export default async function Image() {
  const font = await fetch(
    new URL('./NotoSansKR-Bold.otf', import.meta.url)
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
              style={{
          background: 'linear-gradient(to right, #667eea, #764ba2)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        
럿지 AI

        
AI 솔루션의 미래

      

3. 구조화된 데이터 (JSON-LD) 구현

3.1 조직(Organization) 스키마

// components/StructuredData/OrganizationSchema.tsx
export function OrganizationSchema() {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    '@id': 'https://ludgi.ai/#organization',
    name: '주식회사 럿지',
    alternateName: 'Ludgi Inc.',
    url: 'https://ludgi.ai',
    logo: {
      '@type': 'ImageObject',
      url: 'https://ludgi.ai/logo.png',
      width: '600',
      height: '60',
    },
    contactPoint: [
      {
        '@type': 'ContactPoint',
        telephone: '+82-2-1234-5678',
        contactType: 'customer service',
        areaServed: 'KR',
        availableLanguage: ['Korean', 'English'],
        contactOption: 'TollFree',
        hoursAvailable: {
          '@type': 'OpeningHoursSpecification',
          dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          opens: '09:00',
          closes: '18:00',
        },
      },
    ],
    sameAs: [
      'https://www.facebook.com/ludgiai',
      'https://twitter.com/ludgi_ai',
      'https://www.linkedin.com/company/ludgi',
      'https://github.com/ludgi',
    ],
    address: {
      '@type': 'PostalAddress',
      streetAddress: '강남대로 123',
      addressLocality: '서울특별시',
      addressRegion: '강남구',
      postalCode: '06234',
      addressCountry: 'KR',
    },
    founder: {
      '@type': 'Person',
      name: '홍길동',
      jobTitle: 'CEO',
    },
    foundingDate: '2020-01-01',
    numberOfEmployees: {
      '@type': 'QuantitativeValue',
      minValue: 10,
      maxValue: 50,
    },
    slogan: 'AI로 비즈니스를 혁신합니다',
    description: 'BKNIL 백링크 자동화 플랫폼과 AI 솔루션을 제공하는 기술 기업',
    knowsAbout: ['Artificial Intelligence', 'SEO', 'Link Building', 'Machine Learning'],
    owns: {
      '@type': 'Product',
      name: 'BKNIL',
      description: '화이트햇 백링크 자동화 플랫폼',
    },
  };

  return (
          type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  );
}

3.2 블로그 포스트 스키마

// components/StructuredData/BlogPostingSchema.tsx
export function BlogPostingSchema({ post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    '@id': https://ludgi.ai/blog/${post.slug}#article,
    headline: post.title,
    alternativeHeadline: post.subtitle,
    description: post.excerpt,
    image: {
      '@type': 'ImageObject',
      url: post.featuredImage,
      width: 1200,
      height: 630,
    },
    datePublished: post.publishDate,
    dateModified: post.updateDate || post.publishDate,
    author: {
      '@type': 'Person',
      name: post.author,
      url: https://ludgi.ai/author/${post.authorSlug},
      image: post.authorImage,
      sameAs: [
        https://twitter.com/${post.authorTwitter},
        https://linkedin.com/in/${post.authorLinkedIn},
      ],
    },
    publisher: {
      '@type': 'Organization',
      '@id': 'https://ludgi.ai/#organization',
      name: '럿지 AI',
      logo: {
        '@type': 'ImageObject',
        url: 'https://ludgi.ai/logo.png',
        width: 600,
        height: 60,
      },
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': https://ludgi.ai/blog/${post.slug},
    },
    wordCount: post.content.split(' ').length,
    commentCount: post.commentCount,
    potentialAction: {
      '@type': 'CommentAction',
      name: 'Comment',
      target: {
        '@type': 'EntryPoint',
        urlTemplate: https://ludgi.ai/blog/${post.slug}#comments,
        actionPlatform: [
          'http://schema.org/DesktopWebPlatform',
          'http://schema.org/MobileWebPlatform',
        ],
      },
    },
    articleSection: post.category,
    articleBody: post.content,
    backstory: post.backstory,
    keywords: post.tags.join(', '),
    speakable: {
      '@type': 'SpeakableSpecification',
      cssSelector: ['.article-summary', '.article-content'],
    },
    video: post.video ? {
      '@type': 'VideoObject',
      name: post.video.title,
      description: post.video.description,
      thumbnailUrl: post.video.thumbnail,
      uploadDate: post.video.uploadDate,
      duration: post.video.duration,
      contentUrl: post.video.url,
    } : undefined,
    isAccessibleForFree: true,
    isPartOf: {
      '@type': 'Blog',
      '@id': 'https://ludgi.ai/blog#blog',
      name: '럿지 AI 블로그',
      description: 'AI와 SEO에 대한 인사이트',
    },
    about: {
      '@type': 'Thing',
      name: post.topic,
      description: post.topicDescription,
    },
    mentions: post.mentions?.map(mention => ({
      '@type': mention.type,
      name: mention.name,
      url: mention.url,
    })),
    citation: post.citations?.map(citation => ({
      '@type': 'CreativeWork',
      name: citation.title,
      url: citation.url,
    })),
  };

  return (
          type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  );
}

3.3 FAQ 스키마

// components/StructuredData/FAQSchema.tsx
export function FAQSchema({ faqs }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqs.map(faq => ({
      '@type': 'Question',
      name: faq.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: faq.answer,
        author: {
          '@type': 'Organization',
          name: '럿지 AI',
        },
        dateCreated: faq.dateCreated,
        upvoteCount: faq.upvotes,
      },
    })),
  };

  return (
          type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  );
}

3.4 제품 스키마 (BKNIL)

// components/StructuredData/ProductSchema.tsx
export function ProductSchema() {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareApplication',
    name: 'BKNIL',
    applicationCategory: 'BusinessApplication',
    operatingSystem: 'Web',
    offers: {
      '@type': 'Offer',
      price: '290000',
      priceCurrency: 'KRW',
      priceValidUntil: '2025-12-31',
      availability: 'https://schema.org/InStock',
      seller: {
        '@type': 'Organization',
        name: '럿지 AI',
      },
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: '4.8',
      bestRating: '5',
      worstRating: '1',
      ratingCount: '234',
      reviewCount: '189',
    },
    review: [
      {
        '@type': 'Review',
        reviewRating: {
          '@type': 'Rating',
          ratingValue: '5',
        },
        author: {
          '@type': 'Person',
          name: '김철수',
        },
        datePublished: '2025-01-05',
        reviewBody: 'BKNIL 덕분에 도메인 권한이 50% 상승했습니다.',
      },
    ],
    featureList: '백링크 자동화, AI 콘텐츠 매칭, 실시간 모니터링, 화이트햇 SEO',
    screenshot: 'https://www.bknil.com/screenshot.jpg',
    softwareVersion: '2.1.0',
    softwareHelp: {
      '@type': 'CreativeWork',
      url: 'https://www.bknil.com/help',
    },
  };

  return (
          type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  );
}

4. 동적 사이트맵 생성

4.1 기본 사이트맵

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

export default async function sitemap(): Promise {
  const baseUrl = 'https://ludgi.ai';
  
  // 정적 페이지
  const staticPages = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 1,
    },
    {
      url: ${baseUrl}/about,
      lastModified: new Date(),
      changeFrequency: 'monthly' as const,
      priority: 0.8,
    },
    {
      url: ${baseUrl}/products/bknil,
      lastModified: new Date(),
      changeFrequency: 'weekly' as const,
      priority: 0.9,
    },
  ];
  
  // 블로그 포스트 동적 생성
  const posts = await getAllPosts();
  const blogPages = posts.map(post => ({
    url: ${baseUrl}/blog/${post.slug},
    lastModified: new Date(post.updateDate || post.publishDate),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
    images: post.images?.map(img => img.url),
  }));
  
  // 카테고리 페이지
  const categories = await getAllCategories();
  const categoryPages = categories.map(category => ({
    url: ${baseUrl}/blog/category/${category.slug},
    lastModified: new Date(),
    changeFrequency: 'daily' as const,
    priority: 0.6,
  }));
  
  // 태그 페이지
  const tags = await getAllTags();
  const tagPages = tags.map(tag => ({
    url: ${baseUrl}/blog/tag/${tag.slug},
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: 0.5,
  }));
  
  return [...staticPages, ...blogPages, ...categoryPages, ...tagPages];
}

4.2 분할 사이트맵 (대규모 사이트)

// app/sitemap.ts (인덱스 사이트맵)
export default async function sitemap(): Promise {
  const baseUrl = 'https://ludgi.ai';
  
  // 각 섹션별 사이트맵 참조
  return [
    {
      url: ${baseUrl}/sitemap-posts-1.xml,
      lastModified: new Date(),
    },
    {
      url: ${baseUrl}/sitemap-posts-2.xml,
      lastModified: new Date(),
    },
    {
      url: ${baseUrl}/sitemap-products.xml,
      lastModified: new Date(),
    },
    {
      url: ${baseUrl}/sitemap-static.xml,
      lastModified: new Date(),
    },
  ];
}

// app/sitemap-posts-1.xml/route.ts
export async function GET() {
  const posts = await getPostsPage(1, 1000); // 첫 1000개
  
  const xml = 
                xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
            xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
      ${posts.map(post => 
        
          https://ludgi.ai/blog/${post.slug}
          ${post.updateDate || post.publishDate}
          weekly
          0.7
          ${post.images?.map(img => 
            
              ${img.url}
              ${img.caption}
            
          ).join('')}
        
      ).join('')}
    ;
  
  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
}

4.3 동적 robots.txt

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

export default function robots(): MetadataRoute.Robots {
  const baseUrl = 'https://ludgi.ai';
  
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/api/', '/admin/', '/private/'],
        crawlDelay: 1,
      },
      {
        userAgent: 'Googlebot',
        allow: '/',
        disallow: '/api/',
        crawlDelay: 0,
      },
      {
        userAgent: 'Bingbot',
        allow: '/',
        disallow: '/api/',
        crawlDelay: 2,
      },
    ],
    sitemap: [
      ${baseUrl}/sitemap.xml,
      ${baseUrl}/sitemap-news.xml,
    ],
    host: baseUrl,
  };
}

5. 이미지 최적화

5.1 Next.js Image 컴포넌트 고급 활용

// components/OptimizedImage.tsx
import Image from 'next/image';
import { useState } from 'react';

interface OptimizedImageProps {
  src: string;
  alt: string;
  title?: string;
  priority?: boolean;
  className?: string;
}

export function OptimizedImage({ 
  src, 
  alt, 
  title, 
  priority = false,
  className = '',
}: OptimizedImageProps) {
  const [isLoading, setIsLoading] = useState(true);
  
  // 이미지 크기별 srcSet 생성
  const imageLoader = ({ src, width, quality }) => {
    return https://ludgi.ai/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75};
  };
  
  return (
    
relative overflow-hidden ${className}}>
              loader={imageLoader}
        src={src}
        alt={alt}
        title={title}
        width={1920}
        height={1080}
        priority={priority}
        quality={85}
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."
        loading={priority ? 'eager' : 'lazy'}
        sizes="(max-width: 640px) 100vw,
               (max-width: 1024px) 75vw,
               (max-width: 1280px) 50vw,
               33vw"
        onLoadingComplete={() => setIsLoading(false)}
        className={
          transition-all duration-700 ease-in-out
          ${isLoading ? 'scale-110 blur-xl' : 'scale-100 blur-0'}
        }
      />
      {isLoading && (
        

      )}
    

  );
}

5.2 반응형 이미지 최적화

// components/ResponsiveImage.tsx
export function ResponsiveImage({ image }) {
  return (
    
      {/* WebP 포맷 (최신 브라우저) */}
              type="image/webp"
        srcSet={
          ${image.src}?w=640&fm=webp 640w,
          ${image.src}?w=1024&fm=webp 1024w,
          ${image.src}?w=1920&fm=webp 1920w
        }
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 50vw"
      />
      
      {/* AVIF 포맷 (차세대 포맷) */}
              type="image/avif"
        srcSet={
          ${image.src}?w=640&fm=avif 640w,
          ${image.src}?w=1024&fm=avif 1024w,
          ${image.src}?w=1920&fm=avif 1920w
        }
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 50vw"
      />
      
      {/* 기본 JPEG (폴백) */}
              src={${image.src}?w=1920&fm=jpg}
        alt={image.alt}
        loading="lazy"
        decoding="async"
        className="w-full h-auto"
      />
    
  );
}

5.3 이미지 SEO 최적화

// utils/imageOptimization.ts
export function generateImageMetadata(image: {
  url: string;
  alt: string;
  title?: string;
  caption?: string;
}) {
  return {
    // 파일명 SEO 최적화
    fileName: image.url
      .split('/')
      .pop()
      ?.replace(/[^a-zA-Z0-9-]/g, '-')
      .toLowerCase(),
    
    // 구조화된 데이터용 정보
    structuredData: {
      '@type': 'ImageObject',
      url: image.url,
      caption: image.caption,
      representativeOfPage: true,
      width: '1920',
      height: '1080',
    },
    
    // 메타데이터
    metadata: {
      alt: image.alt,
      title: image.title || image.alt,
      loading: 'lazy',
      decoding: 'async',
      fetchpriority: 'auto',
    },
  };
}

6. 성능 최적화 (Core Web Vitals)

6.1 LCP (Largest Contentful Paint) 최적화

// components/HeroSection.tsx
import { Suspense } from 'react';
import dynamic from 'next/dynamic';

// 중요한 컴포넌트는 즉시 로드
const HeroImage = dynamic(() => import('./HeroImage'), {
  ssr: true,
  loading: () => 
,
});

export function HeroSection() {
  return (
    

      {/* 우선순위 높은 이미지 */}
      
      
      {/* 중요한 텍스트는 인라인으로 */}
      

        럿지 AI - AI 솔루션의 미래
      

      
      {/* 덜 중요한 콘텐츠는 지연 로드 */}
      Loading...
}>