[알토르] 9주차 추가과제 : SEO & AEO

[추가과제]

1. SEO란 무엇인가 (SEO 최적화 프로젝트에 적용하기)

2. AEO란 무엇인가 (llms.txt 등 생성하기)

---

1. SEO (Search Engine Optimization, 검색 엔진 최적화)

웹사이트가 검색 엔진의 결과 페이지에서 상위노출 되도록 최적화하는 과정

(광고 비용 없이도 검색을 통해 유입되는 유기적 트래픽을 늘리는게 목적)

 

# SEO 최적화 적용방법

1. 렌더링 전략(SSR/SSG) // 크롤러가 읽을 수 있는 HTML을 서버에서 미리 생성

2. Metadata API // title, description, OG태그를 페이지별로 설정
3. sitemap.xml / robots.txt // 크롤러에게 사이트 구조와 접근 규칙 제공

4. 이미지 최적화 // next/image, AVIF/WebP, lazy loading (Core Web Vitals)

     (이미지 크다 → 페이지 느림 → Core Web Vitals 점수 낮음 → 검색 순위 떨어짐)

5. 시맨틱 HTML // header, main, h1~h3 등 의미 있는 태그 사용

etc...

 

# 프로젝트 적용해보기

Next.js App Router(13버전 이후)는 모든 컴포넌트가 기본적으로 서버 컴포넌트(React Server Components)

'use client'라고 명시하지 않으면 컴포넌트가 서버에서 실행되고, 그 결과로 만들어진 HTML이 브라우저로 전송됨

// App Router로 그냥 페이지를 만들기만 해도, 별도 설정 없이 크롤러가 읽을 수 있는 HTML이 서버에서 생성됨

-> SEO 관점에서 1번은 이미 적용된 상태

 

파일 맨 위 'use client'를 쓰면 컴포넌트를 클라이언트(브라우저)에서 실행하라는 표시

// 페이지 전체를 'use client'로 만들면 서버에서 HTML이 안 만들어짐 -> 크롤러가 빈 페이지를 읽음

 

비유)

서버 컴포넌트 = 완성된 그림을 보내줌 (정적, 빠름, SEO 좋음)

클라이언트 컴포넌트 = 움직이는 영상을 보내줌 (인터랙티브, 무거움)

// 페이지는 서버 컴포넌트로 두고, useState/onClick 필요한 작은 부분만 클라이언트 컴포넌트로 분리하기

(버튼 하나 때문에 페이지 전체를 무겁게 만들지 마라)

 

=> 고로 2번 Metadata API 적용해보기

---

Metadata API 핵심 적용 (3단계)

1단계: 루트 레이아웃에 사이트 전체 메타데이터 설정

2단계: 개별 페이지에 고유 title, description 추가

3단계: OG 이미지 준비

 

1단계) 루트 레이아웃의 metadata 객체를 확장

-> layout.js에 다음을 추가(코드 적용은 클로드 활용)

title (기본/템플릿)	기본값 + 개별 페이지마다 자동 템플릿 적용
description	한국어 포트폴리오 설명
keywords	SEO용 핵심 키워드
authors	작가 정보
openGraph	SNS 공유 시 표시될 정보
robots	검색 엔진 크롤링 허용

---

2단계) 개별 페이지(예: page.js)에서 고유한 title, description을 export하면 자동으로 템플릿에 적용

-> export const metadata = { title: "Home" };

("Home | Portfolio" 로 표시됨)

 

1단계에서 layout.js에 아래 코드 작성

title: {
  default: 'OOO의 포트폴리오',
  template: '%s | OOO의 포트폴리오',  // ← 이게 "템플릿"
}

 

템플릿은 하위 페이지 제목을 만들 때 쓰는 툴. '%s'는 빈칸

2단계에서 page.js에 title: "Home"을 넣으면:

template: '%s | OOO의 포트폴리오'
              ↓ (%s 자리에 "Home"이 자동으로 들어감)
결과:    'Home | OOO의 포트폴리오'

 

이게 자동으로 템플릿에 적용되는 것. 

하나하나 다 안 적어도, "Home"만 적으면 알아서 뒤에 사이트명이 붙음

이렇게 표시되면 달라지는 것

 

1. 브라우저 탭

ex. [탭] Home | Portfolio
[탭] About | Portfolio
[탭] Projects | Portfolio

 

이런식으로 탭 여러개 띄어놨을 때 어떤 페이지인지 바로 확인 가능

 

2. Google 검색결과

┌─────────────────────────────────────┐
│ Home | Portfolio                    │  ← title이 여기 표시
│ https://your-domain.com │
│ 클라우드 엔지니어 OOO의 포트폴리오... │  ← description이 여기 표시
└─────────────────────────────────────┘

 

3. SNS/메신저 공유 미리보기

디스코드에 링크를 붙인다면?

┌─────────────────────────────────────┐
│ [썸네일 이미지]                     │
│ Home | Portfolio                    │  ← title 표시
│ 클라우드 엔지니어 OOO의 포트폴리오...│  ← description 표시
└─────────────────────────────────────┘

 

→ 사용자가 클릭하기 전에 어떤 사이트인지 파악 가능 → 클릭률 ↑ → 검색 순위 ↑

 

문제) page.js가 'use client'로 설정되어 있음

-> 메타데이터는 서버 컴포넌트에서만 export 가능

 

해결) 클라이언트 로직을 별도 컴포넌트로 분리

1. 먼저 HomeClient.jsx 새 파일 생성
   (다크모드 로직만 빼서 클라이언트 컴포넌트로 둠)
2. page.js는 서버 컴포넌트로 변경하고 메타데이터 추가

---

3단계) OG 이미지 준비

-> OG 이미지는 SNS에서 링크 공유할 때 표시되는 썸네일

 

OG(Open Graph)

웹페이지의 정보를 SNS나 메신저에서 예쁘게 미리보기로 보여주기 위한 메타데이터 규격

-> Facebook(Meta)이 2010년에 만든 표준. 페이스북에서 시작해서 지금은 거의 모든 플랫폼이 이 표준을 따름

 

기존 올려둔 프로필사진 활용

1. profile-img.png → og-image.png 복사
2. layout.js, page.js의 openGraph에 images 추가

OG 이미지 스펙:

• 이미지: /og-image.png (프로필 사진)
• 크기: 1200x630px (SNS 최적화)
• 적용: 사이트 전체 + 홈페이지

#적용 결과 확인

1. 브라우저 탭 제목 확인(npm run dev)

2. 배포 후 SNS 미리보기 확인

  2-1. 메신저에 직접 링크 붙여넣기

   2-2. 전용 미리보기 도구 활용

  http://opengraph.xyz -> URL 입력하면 페북,트위터,링크드인,디스코드 등 미리보기 한번에 보여줌

 

 

문제) 1번 확인 결과 현재 사이트가 SPA처럼 한 페이지로만 구성

 

http://localhost:3000/#top      ← 같은 페이지의 #top 섹션으로 이동
http://localhost:3000/#about    ← 같은 페이지의 #about 섹션으로 이동
http://localhost:3000/#contact  ← 같은 페이지의 #contact 섹션으로 이동

 

 

실제 페이지 구조:
/  (홈) — 한 페이지에 top, about, contact 섹션이 다 들어있음

 

문제 1: 검색엔진은 # 이후 부분을 무시함

문제 2: 페이지별 메타데이터가 의미 없어짐

문제 3: 공유할 때도 미리보기가 다 똑같음

 

해결) 포트폴리오를 별도 라우팅으로 분리

-> SEO 효과가 훨씬 큼

// Metadata API의 효과를 100% 발휘 (AEO에도 유리)

 

 

[분리 구조]

/         → 홈 (Hero: 페이지 맨 위, 들어왔을 때 가장 먼저 보이는 큰 영역)

/about    → 자기소개

/projects → 프로젝트 목록 (추가함)

/contact  → 연락처

 

[작업 내용]

- 한 페이지의 섹션들을 각각 별도 페이지로 분리

- <a href="#about"> → <Link href="/about">으로 변경

- 각 페이지마다 metadata export 추가

---

적용결과 1)

http://localhost:3000/about 

http://localhost:3000/projects 

http://localhost:3000/contact
-> 별도 라우팅으로 분리함

 

적용결과 2) 먼저 github에 push

(9주차 과제 설정해준것 때문에 디스코드 알림 옴)

opengraph.xyz에서 미리보기 확인

OG이미지 미리보기

---

2. AEO (Answer Engine Optimization)

AI 답변 엔진이 답변할 때 내 콘텐츠를 출처로 인용하도록 최적화하는 작업 (AI 엔진 최적화 작업)

// SEO는 검색결과 클릭 유도, AEO는 AI 답변 자체에 등장하는 게 목표

 

 1) robots.txt에 AI 크롤러 허용

 

robots.txt

검색엔진/크롤러에게 "어디는 들어와도 되고, 어디는 들어오지 마라"라고 알려주는 출입 규칙 파일

 

// 많은 사이트가 자기도 모르게 AI 크롤러를 차단해놓고 있음

-> ChatGPT/Claude 등 AI가 사이트를 읽지 못해서, 답변에 인용될 기회 자체가 없어짐

 

# 적용 방법(App Router)

app/robots.ts 파일 생성

 

주요 AI 크롤러

1. GPTBot (ChatGPT)

2. ClaudeBot (Claude)

3. Google-Extended (Gemini, AI Overviews)
4. PerplexityBot (Perplexity)

 

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

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      // 일반 검색엔진 (Google, Naver 등)
      {
        userAgent: '*',
        allow: '/',
      },
      // AI 크롤러들 명시적 허용
      {
        userAgent: 'GPTBot',          // ChatGPT (OpenAI)
        allow: '/',
      },
      {
        userAgent: 'ClaudeBot',       // Claude (Anthropic)
        allow: '/',
      },
      {
        userAgent: 'PerplexityBot',   // Perplexity
        allow: '/',
      },
      {
        userAgent: 'Google-Extended', // Google AI (Gemini, AI Overviews)
        allow: '/',
      },
    ],
    sitemap: 'https://본인도메인.com/sitemap.xml',
  }
}

 

문제) 기존 코드 중 경로 설정 문제 발생

기존 코드에서 @/assets/assets 경로를 사용했는데, 현재 프로젝트 설정에서는 이 alias가 빌드 시 제대로 해석되지 않음

-> About, Contact, Header, Navbar 등에서 Module not found: Can't resolve '@/assets/assets' 에러 발생

 

해결)

@/assets/assets 대신 ../../assets/assets 같은 상대 경로로 변경해서 경로 문제 해결

metadataBase와 OG URL을 내 도메인 주소로 맞춤

robots.ts, sitemap.ts 추가

 

의문) 포트폴리오 사이트는 AI한테 인용될만한 게 거의 없음
내 티스토리 블로그에 적용하는게 낫다는 생각이 듦
하지만 티스토리는 개별 블로그의 robots.txt 파일을 직접 수정할 수 있는 기능을 제공하지 않음

→ 그냥 적용해보는데 의의를 두기로 함
→ 추후 Next.js 등으로 직접 기술 블로그 운영하게 되면 그때 재활용

---

 2) #llms.txt 생성하기

'llms.txt'는 AI에게 사이트 구조와 핵심 페이지를 마크다운으로 안내해주는 파일

(요약 사이트 안내서 같은 역할)

 

*작성 규칙 

- '# 사이트명` (H1, 필수)

- `> 한 줄 요약` (blockquote)

- `## 섹션명`으로 그룹핑

- `- [페이지명](URL): 설명` 형식

 

배포 후 접속 확인

-> 브라우저에서 직접 접속

주소창에 직접 입력하면 마크다운 텍스트가 그대로 떠야함(가장 확실한 확인 방법)

 

https://내도메인주소/llms.txt

https://내도메인주소/robots.txt

https://내도메인주소/robots.txt

 

위와 같은 식으로 뜨면 완료.