내 웹사이트가 ChatGPT Search에서 #1에 오르는 방법 (당신도 가능)

Source: Dev.to

나는 ChatGPT에서 순위를 올리려는 목적이 없었다. 포트폴리오를 만들고, GitHub에 푸시한 뒤 그냥 넘어갔다.

그때 누군가가 나에게 메시지를 보냈다:

“친구, 내가 ChatGPT에 Next.js 포트폴리오 템플릿을 물어보면 네 템플릿이 가장 먼저 나와.”

그들이 장난치는 줄 알았다—내가 직접 시도해 보기 전까지는.

내 포트폴리오 템플릿은 ChatGPT 검색에서 *“best Next.js portfolio template GitHub”*에 대한 #1 결과였다. 광고도, 백링크 캠페인도, SEO 에이전시도 없었다.

그래서 호기심 많은 개발자라면 누구나 하듯 역공학을 해봤다.

알고 보니 나는 우연히 AEO(Answer Engine Optimization)와 GEO(Generative Engine Optimization)라는 것을 정확히 맞춘 셈이었다.

아래는 내가 배운 모든 내용이다.

TL;DR (플레이북을 원한다면)

• AI가 사이트의 “누구/무엇”을 이해할 수 있도록 JSON‑LD 스키마를 추가하세요.
• 크롤러가 콘텐츠를 읽고 재사용할 수 있도록 메타데이터를 설정하세요(합리적인 범위 내에서).
• 구체적이고 검증 가능한 콘텐츠를 작성하세요(엔터티 + 숫자 + 링크).
• 사이트를 크롤링 가능하게 유지하세요(사이트맵 + robots + 깨끗한 구조).

게임이 바뀌었다 (대다수 개발자들이 놓쳤다)

Google만이 이제 유일한 검색 엔진이 아니다.

ChatGPT, Perplexity, Claude… 이들은 단순한 챗봇이 아니라 검색 엔진이다.

중요한 변화는 숫자가 아니라 행동 변화이다: 사람들은 AI에게 묻는다, 키워드를 입력하지 않는다.

AI 검색 작동 방식

큰 차이점이다.

비밀 소스: JSON‑LD 스키마

AI에게 내 포트폴리오를 “보이게” 만든 #1 요소는 구조화 데이터, 특히 JSON‑LD 마크업입니다.

예시 스키마 (app/(root)/page.tsx에 추가)

// app/(root)/page.tsx

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Naman Barkiya",
  url: "https://nbarkiya.xyz",
  image: "https://res.cloudinary.com/.../og-image.png",
  jobTitle: "Applied AI Engineer",
  sameAs: [
    "https://github.com/namanbarkiya",
    "https://x.com/namanbarkiya",
  ],
};

const softwareSchema = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  name: "Next.js Portfolio Template",
  applicationCategory: "DeveloperApplication",
  operatingSystem: "Web",
  offers: {
    "@type": "Offer",
    price: "0",
    priceCurrency: "USD",
  },
  author: {
    "@type": "Person",
    name: "Naman Barkiya",
    url: "https://nbarkiya.xyz",
  },
};

왜 이것이 작동하는가

크롤러가 페이지에 접근하면, 명시적으로 다음과 같은 구조화 데이터를 확인합니다:

• “이 사람은 Naman Barkiya라는 Person입니다”
• “그의 직업은 Applied AI Engineer입니다”
• “그는 이 GitHub와 X 프로필과 동일합니다”
• “그는 이 소프트웨어 애플리케이션을 작성했습니다”

이렇게 AI는 지식 그래프를 구축하고 인용될 수 있게 됩니다.

알아두면 좋은 스키마 유형

모든 것을 바꾼 한 줄

대부분의 웹사이트는 AI 검색에 보이지 않습니다—콘텐츠가 나쁘기 때문이 아니라, 크롤러가 보통 스니펫만 수집하기 때문입니다.

문제를 해결하는 한 줄은 app/layout.tsx 메타데이터에 있습니다:

// app/layout.tsx
export const metadata = {
  // ... other metadata
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1, // ← This is the magic line
    },
  },
};

max-snippet: -1

“내 콘텐츠를 원하는 만큼 사용할 수 있습니다.”

이 지시는 Google(googleBot)에 널리 인식되고 여러 다른 크롤러에서도 존중됩니다. -1을 설정하면 AI가 전체 페이지를 인용할 수 있습니다. 작은 변화이지만, 엄청난 영향을 줍니다.

실제로 중요한 메타데이터

아래는 내 전체 메타데이터 설정입니다 (Next.js 13+ 스타일):

export const metadata = {
  metadataBase: new URL("https://nbarkiya.xyz"),

  title: {
    default: "Naman Barkiya - Applied AI Engineer",
    template: "%s | Naman Barkiya - Applied AI Engineer",
  },

  description:
    "Naman Barkiya - Applied AI Engineer working at the intersection of AI, data, and scalable software systems.",

  keywords: [
    "Naman Barkiya",
    "Applied AI Engineer",
    "Next.js Developer",
    "XYZ Inc",
    "Databricks",
    // …more keywords
  ],

  authors: [
    {
      name: "Naman Barkiya",
      url: "https://nbarkiya.xyz",
    },
  ],

  alternates: {
    canonical: "https://nbarkiya.xyz",
  },

  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://nbarkiya.xyz",
    title: "Naman Barkiya - Applied AI Engineer",
    description: "Applied AI Engineer working at...",
    siteName: "Naman Barkiya - Applied AI Engineer",
    images: [
      {
        url: "https://res.cloudinary.com/.../og-image.png",
        width: 1200,
        height: 630,
        alt: "Naman Barkiya - Applied AI Engineer",
      },
    ],
  },

  robots: {
    index: true,
    follow: true,
    googleBot: {
      "max-snippet": -1,
      "max-image-preview": "large",
    },
  },
};

요점

1. Add JSON‑LD for the entities you want AI to recognize. → JSON‑LD 추가 AI가 인식하길 원하는 엔터티를 위해.
2. Expose the full content to crawlers with max-snippet: -1. → 전체 콘텐츠 노출 크롤러에게 max-snippet: -1 로.
3. Provide rich metadata (Open Graph, keywords, authors, etc.) so AI can reuse your data confidently. → 풍부한 메타데이터 제공 (Open Graph, 키워드, 저자 등) AI가 데이터를 자신 있게 재사용할 수 있도록.
4. Keep the site crawlable (sitemap, clean URLs, proper robots.txt). → 사이트를 크롤링 가능하게 유지 (사이트맵, 깔끔한 URL, 올바른 robots.txt).

Implement these steps, and you’ll start showing up as the answer rather than just another link. Happy optimizing!

전체 화면 모드로 전환

전체 화면 모드 종료

패턴을 보셨나요?

나는 “Naman Barkiya” + “Applied AI Engineer” 를 모든 곳에 반복합니다:

• title.default
• description
• keywords
• authors
• openGraph.title
• openGraph.siteName

이것은 키워드 스터핑이 아닙니다. 엔터티 강화입니다.

AI는 여러 신호에 걸쳐 동일한 엔터티가 일관되게 설명되는 것을 봐야 여러분에 대해 “알고 있는” 내용에 대한 확신을 가질 수 있습니다.

AI가 실제로 활용할 수 있는 콘텐츠 작성

대부분의 사람들이 놓치는 점:

AI는 모호한 주장에 신뢰를 두지 않습니다.

이것은 인용되지 않을 것입니다

❌ “다양한 웹 개발 프로젝트에 참여함”
❌ “경험 많은 소프트웨어 엔지니어”
❌ “많은 애플리케이션을 구축함”

이것은 인용될 것입니다

✅ “글로벌 트레이더를 위한 XYZ 클라이언트 대시보드 구축”
✅ “API 로드 시간을 30 % 감소”
✅ “플랫폼을 3,000+ 일일 사용자 규모로 확장”

AI 모델은 다음을 식별하도록 훈련됩니다:

• 명명된 엔터티 (XYZ, Databricks, Next.js)
• 정량화된 결과 (30 %, 3,000 사용자, 첫 달)
• 검증 가능한 링크 (회사 URL, GitHub 레포)

내가 경험 데이터를 구조화하는 방법

// config/experience.ts
{
  id: "xyz",
  position: "Software Development Engineer",
  company: "XYZ",
  location: "Mumbai, India",
  startDate: new Date("2024-08-01"),
  endDate: "Present",
  achievements: [
    "Shipped production features within the first month for a trader‑facing P&L dashboard",
    "Won XYZ AI Venture Challenge by building data transformation pipelines",
    "Led a 12‑member team in an internal hackathon",
  ],
  companyUrl: "https://www.xyz.com",
  skills: ["Typescript", "React", "Databricks", "Python"],
}

모든 주장은:

• 구체적 (모호하지 않음)
• 정량적 (가능한 경우)
• 검증 가능 (회사 URL 포함)

기술적 기반

Sitemap

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

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://nbarkiya.xyz",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 1.0,
    },
    {
      url: "https://nbarkiya.xyz/projects",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    // ... more routes
  ];
}

Robots.txt

User-agent: *
Allow: /

Sitemap: https://nbarkiya.xyz/sitemap.xml

간단합니다. 개방적입니다. 크롤링 가능합니다.

전체 체크리스트

스키마 및 구조화 데이터

• 홈페이지에 JSON‑LD Person 스키마 적용
• 콘텐츠 유형에 대한 추가 스키마 (SoftwareApplication, Article 등)

메타데이터

• robots 설정에 max-snippet: -1 포함
• 모든 페이지에 정규화 URL 지정
• authors 필드에 이름과 URL 포함
• 엔터티가 풍부한 설명

콘텐츠

• 구체적이고 수치화된 성과
• 명시된 엔터티(회사, 도구, 기술)
• 외부 검증 링크
• 시맨틱 HTML(올바른 헤딩 계층 구조, 리스트)

기술

• 동적 사이트맵
• 공개 robots.txt
• 빠른 페이지 로드(AI 크롤러도 타임아웃이 있음)

최종 생각

검색의 미래는 AI‑first입니다.

Google은 사라지지 않지만, 이제는 유일한 선택이 아닙니다. 여러분의 콘텐츠가 LLM에 의해 이해되지 못한다면, 인터넷의 점점 커지는 부분에 대해 보이지 않게 됩니다.

좋은 소식은? 고치기가 그리 어렵지 않습니다.

1. 스키마 마크업을 추가하세요.
2. 스니펫을 열어두세요.
3. 구체적이고 검증 가능한 콘텐츠를 작성하세요.

그게 전부입니다. 전체 전략은 여기까지입니다.

내 전체 포트폴리오 템플릿을 오픈소스했습니다. 구현된 모든 내용을 확인할 수 있습니다:

github.com/namanbarkiya/minimal-next-portfolio

포크하세요. 사용하세요. 여러분만의 것으로 만드세요.

그리고 언젠가 ChatGPT에게 포트폴리오 템플릿을 요청하고 여러분의 사이트가 #1에 오르는 모습을 볼 수도 있겠네요. 정말 멋질 거예요.

질문이 있나요? Twitter/X 또는 GitHub 로 연락 주세요.