생성형 엔진 최적화(GEO)

[!NOTE] 기존 검색 엔진 최적화에 관한 내용을 찾고 있나요? SEO 가이드를 참고합니다.

GEO란 무엇인가요?

**생성형 엔진 최적화(Generative Engine Optimization, GEO)**는 ChatGPT, Claude, Perplexity 및 기타 LLM 기반 도구와 같은 AI 시스템이 콘텐츠를 정확하게 이해하고 인용하며 추천할 수 있도록 콘텐츠와 데이터를 구조화하는 방식입니다.

기존 SEO는 검색 엔진 결과 페이지에서 높은 순위를 차지하는 데 중점을 두지만, GEO는 AI가 생성한 응답에 정확하게 나타나는 데 중점을 둡니다. 기존 검색 대신 AI 어시스턴트를 통해 정보를 얻는 사용자가 늘어나면서 GEO의 중요성이 점점 커지고 있습니다.

GEO와 SEO의 차이점

측면	SEO	GEO
목표	검색 결과에서 높은 순위 차지	AI가 인용/추천하도록 함
대상	검색 엔진 크롤러	LLM 학습 및 검색 시스템
핵심 신호	링크, 키워드, 페이지 속도	구조화된 데이터, 명확성, 권위
콘텐츠 형식	스니펫에 최적화	추출 및 종합에 최적화

다행히도 GEO 모범 사례 중 상당수는 SEO와 겹칩니다. 명확한 구조, 신뢰할 수 있는 콘텐츠, 우수한 메타데이터는 모두 두 방식에 도움이 됩니다.

TanStack Start가 제공하는 기능

GEO를 지원하는 TanStack Start의 기능:

• 서버 측 렌더링 - AI 크롤러가 완전히 렌더링된 콘텐츠를 볼 수 있도록 합니다
• 구조화된 데이터 - 기계 판독 가능 콘텐츠를 위한 JSON-LD를 지원합니다
• 문서 Head 관리 - AI 시스템이 파싱할 수 있는 메타 태그를 제공합니다
• 서버 라우트 - 기계 판독 가능 엔드포인트(API, 피드)를 생성합니다

AI를 위한 구조화된 데이터

schema.org 어휘를 사용하는 구조화된 데이터는 AI 시스템이 콘텐츠의 의미와 맥락을 이해하는 데 도움이 됩니다. 이는 아마도 가장 중요한 GEO 기법입니다.

아티클 스키마

// src/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    const post = await fetchPost(params.postId)
    return { post }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData.post.title }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: loaderData.post.title,
          description: loaderData.post.excerpt,
          image: loaderData.post.coverImage,
          author: {
            '@type': 'Person',
            name: loaderData.post.author.name,
            url: loaderData.post.author.url,
          },
          publisher: {
            '@type': 'Organization',
            name: 'My Company',
            logo: {
              '@type': 'ImageObject',
              url: 'https://myapp.com/logo.png',
            },
          },
          datePublished: loaderData.post.publishedAt,
          dateModified: loaderData.post.updatedAt,
        }),
      },
    ],
  }),
  component: PostPage,
})

제품 스키마

전자상거래에서 제품 스키마는 AI 어시스턴트가 정확한 제품 정보를 제공하는 데 도움이 됩니다:

export const Route = createFileRoute('/products/$productId')({
  loader: async ({ params }) => {
    const product = await fetchProduct(params.productId)
    return { product }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData.product.name }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Product',
          name: loaderData.product.name,
          description: loaderData.product.description,
          image: loaderData.product.images,
          brand: {
            '@type': 'Brand',
            name: loaderData.product.brand,
          },
          offers: {
            '@type': 'Offer',
            price: loaderData.product.price,
            priceCurrency: 'USD',
            availability: loaderData.product.inStock
              ? 'https://schema.org/InStock'
              : 'https://schema.org/OutOfStock',
          },
          aggregateRating: loaderData.product.rating
            ? {
                '@type': 'AggregateRating',
                ratingValue: loaderData.product.rating,
                reviewCount: loaderData.product.reviewCount,
              }
            : undefined,
        }),
      },
    ],
  }),
  component: ProductPage,
})

조직 및 웹사이트 스키마

사이트 전체의 맥락을 제공하려면 루트 라우트에 조직 스키마를 추가합니다:

// src/routes/__root.tsx
export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          name: 'My App',
          url: 'https://myapp.com',
          publisher: {
            '@type': 'Organization',
            name: 'My Company',
            url: 'https://myapp.com',
            logo: 'https://myapp.com/logo.png',
            sameAs: [
              'https://twitter.com/mycompany',
              'https://github.com/mycompany',
            ],
          },
        }),
      },
    ],
  }),
  component: RootComponent,
})

FAQ 스키마

FAQ 스키마는 GEO에 특히 효과적입니다. AI 시스템은 종종 질문과 답변 쌍을 추출합니다:

export const Route = createFileRoute('/faq')({
  loader: async () => {
    const faqs = await fetchFAQs()
    return { faqs }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: 'Frequently Asked Questions' }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: loaderData.faqs.map((faq) => ({
            '@type': 'Question',
            name: faq.question,
            acceptedAnswer: {
              '@type': 'Answer',
              text: faq.answer,
            },
          })),
        }),
      },
    ],
  }),
  component: FAQPage,
})

기계 판독 가능 엔드포인트

AI 시스템과 개발자가 직접 사용할 수 있는 API 엔드포인트를 생성합니다:

// src/routes/api/products.ts
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/api/products')({
  server: {
    handlers: {
      GET: async ({ request }) => {
        const url = new URL(request.url)
        const category = url.searchParams.get('category')

        const products = await fetchProducts({ category })

        return Response.json({
          '@context': 'https://schema.org',
          '@type': 'ItemList',
          itemListElement: products.map((product, index) => ({
            '@type': 'ListItem',
            position: index + 1,
            item: {
              '@type': 'Product',
              name: product.name,
              description: product.description,
              url: `https://myapp.com/products/${product.id}`,
            },
          })),
        })
      },
    },
  },
})

콘텐츠 모범 사례

기술적 구현뿐 아니라 콘텐츠 구조도 GEO에 중요합니다:

명확하고 사실에 기반한 문장

AI 시스템은 사실에 기반한 주장을 추출합니다. 핵심 정보를 명시적으로 표현합니다:

// Good: Clear, extractable facts
function ProductDetails({ product }) {
  return (
    <article>
      <h1>{product.name}</h1>
      <p>
        {product.name} is a {product.category} made by {product.brand}. It costs
        ${product.price} and is available in {product.colors.join(', ')}.
      </p>
    </article>
  )
}

계층 구조

올바른 제목 계층 구조를 사용합니다. AI 시스템은 이를 통해 콘텐츠 구성을 이해합니다:

function DocumentationPage() {
  return (
    <article>
      <h1>Getting Started with TanStack Start</h1>

      <section>
        <h2>Installation</h2>
        <p>Install TanStack Start using npm...</p>

        <h3>Prerequisites</h3>
        <p>You'll need Node.js 18 or later...</p>
      </section>

      <section>
        <h2>Configuration</h2>
        <p>Configure your app in your build tool config...</p>
      </section>
    </article>
  )
}

신뢰할 수 있는 출처 명시

작성자 정보와 출처를 포함합니다. AI 시스템은 권위 신호를 고려합니다:

export const Route = createFileRoute('/posts/$postId')({
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData.post.title },
      { name: 'author', content: loaderData.post.author.name },
      {
        property: 'article:author',
        content: loaderData.post.author.profileUrl,
      },
      {
        property: 'article:published_time',
        content: loaderData.post.publishedAt,
      },
    ],
  }),
  component: PostPage,
})

llms.txt

일부 사이트에서는 AI 시스템에 지침을 제공하기 위해 robots.txt와 유사한 llms.txt 파일을 도입하고 있습니다:

// src/routes/llms[.]txt.ts
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/llms.txt')({
  server: {
    handlers: {
      GET: async () => {
        const content = `# My App

> My App is a platform for building modern web applications.

## Documentation
- Getting Started: https://myapp.com/docs/getting-started
- API Reference: https://myapp.com/docs/api

## Key Facts
- Built with TanStack Start
- Supports React and Solid
- Full TypeScript support

## Contact
- Website: https://myapp.com
- GitHub: https://github.com/mycompany/myapp
`

        return new Response(content, {
          headers: {
            'Content-Type': 'text/plain',
          },
        })
      },
    },
  },
})

AI 인용 모니터링

확립된 분석 체계를 갖춘 기존 SEO와 달리 GEO 모니터링은 아직 발전 중입니다. 다음을 고려합니다:

• AI 어시스턴트로 테스트합니다 - ChatGPT, Claude, Perplexity에 제품/콘텐츠에 관해 질문합니다
• 브랜드 언급을 모니터링합니다 - AI 시스템이 제공 항목을 어떻게 설명하는지 추적합니다
• 구조화된 데이터를 검증합니다 - Google의 Rich Results Test와 Schema.org Validator를 사용합니다
• AI 검색 엔진을 확인합니다 - Perplexity, Bing Chat, Google AI Overviews에서의 노출 여부를 모니터링합니다