줄글이 좀 많아 …. 오전에 정리할 수 있으면 더 정리해보려ㅏㅎ빈다 …… 😴😪🛏️

1. SEO (Search Engine Optimization)란

(예전보단 덜하지만) 보통 사람들은 인터넷에 검색을 통해 필요한 정보를 얻는다.

모르는 것이 생기면 Google이나 네이버에 검색하고, 검색 결과 상단에 노출된 사이트부터 확인한다.

그렇기 때문에 특정 사이트를 사용자에게 많이 노출시키기 위해서는 사이트가 검색 엔진에 잘 노출되도록 만드는 것이 중요하다. 이때 검색 엔진을 최적화하는 것을 SEO라고 한다.

SEO란 광고가 아닌 자연 검색 결과에서 내 웹사이트가 더 잘 보이도록 구조와 콘텐츠를 개선하는 작업이다.

즉, 검색엔진이 우리 사이트의 내용을 잘 이해하고, 사용자에게 “이 사이트가 가장 적절한 답이다”라고 판단하도록 돕는 과정이다.

위와 같은 검색엔진에 잘 노출 시키기는 방법을 알기 전, 우선 검색 엔진이 어떤 원리로 어떻게 작동하는지부터 알고 SEO 최적화 방식을 간단하게 공부하려고 한다.

2. 검색엔진은 페이지를 어떻게 이해할까?

이제 구글 검색을 기준으로 해서 검색 엔진이 어떻게 어떤 단계로 작동되는지를 알아보려고 한다.

1) 크롤링

가장 먼저 크롤링은 웹에 어떤 페이지들이 존재하는지 찾아내는 단계다.

인터넷에 존재하는 모든 웹사이트를 모아둔 저장소는 없기 때문에, 구글은 계속 웹을 돌아다니며 새로운 페이지와 업데이트된 페이지를 검색하고 파악한 후 목록에 추가한다.

이 과정들을 URL 검색 이라고 한다.

구글이 이미 방문한 적 있는 페이지는 기존 목록에 저장되어 있고,

새로운 페이지는 다음과 같은 방식으로 발견된다.

기존 페이지에 연결된 링크를 따라가며 발견
사이트 소유자가 직접 제출한 사이트맵(Sitemap)

예를 들어 카테고리 페이지처럼 내부 링크가 잘 연결된 구조는 새 콘텐츠가 빠르게 발견되는 데 도움이 된다.

이러한 크롤링을 돕는 방법은 간단하게 두 가지 정도가 있다

구글리 링크를 타고올 때까지 기다리는 것이 아닌 우리 사이트의 정보를 직접 알려주는 것이다.

사이트맵(Sitemap.xml)

“우리 사이트의 모든 페이지 주소는 여기 있어요” 하고
구글에 URL 목록을 직접 제공하는 역할

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.mysite.com/</loc>
    <lastmod>2026-01-16</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.mysite.com/record/123</loc>
    <lastmod>2026-01-15</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

<loc> (Location): 페이지의 절대 주소(URL)
<lastmod> (Last Modification): 페이지가 마지막으로 수정된 날짜

구글봇

구글에서 페이지의 URL을 발견하면 내용을 확인하고자 페이지를 방문(크롤링)한다. 구글은 여러 컴퓨터를 사용하여 많은 페이지를 크롤링하며, 이때 웹페이지를 가져오는 프로그램을 구글봇(크롤러, 로봇, 봇, 스파이더) 라고 한다.

구글봇은 어디를 얼마나 자주 방문할지는 알고리즘 프로세스를 사용해서 결정하지만,

모든 사이트를 동일하게 크롤링하지 않고, 기준에 따라 크롤링을 진행한다.

어떤 사이트를 방문할지 : 신뢰도와 정보 가치가 높은 사이트를 우선
방문 빈도: 자주 업데이트되는 사이트는 자주, 변화가 적은 사이트는 드물게
가져올 페이지 수: 이걸 크롤링 예산(Crawl Budget)이라 부른다.

또, 구글봇은 사이트의 서버에 과부하를 주지 않도록 설계되어 있다.

서버 응답이 느려지거나
HTTP 500 오류가 자주 발생하면

→ 서버가 힘들구나!라고 판단하여 크롤링 속도를 줄인다.

현재 구글봇은 최신 크롬 브라우저와 동일한 수준으로 JS를 실행할 수 있다.

따라서 렌더링이 제대로 되지 않으면 구글은 내용이 없는 빈페이지로 인식할 수도 있다.

React, Vue 같은 SPA 사이트도 자바스크립트 실행 후 화면을 직접 그려본 뒤 그 결과를 기준으로 콘텐츠를 수집한다

마지막으로 크롤링이 제한되거나 실패하는 경우도 있다.

로그인 필요 페이지: 접근 불가
robots.txt 차단: 사이트 소유자가 “여기는 크롤링하지 마”라고 명시한 영역
→ 이러한 규칙은 존중하여 크롤링이 제한되고

서버 다운 또는 과도하게 느린 응답
네트워크 장애

robots.txt 설정 실수로 중요한 페이지 차단

// 모든 접근 차단
User-agent: * -> 모든 로봇에게
Disallow: /   -> 특정 사이트의 루트부터 차단한다.

// 일부 페이지 차단
User-agent: *
Disallow: /admin/ -> /admin/.. 으로 시작하는 모든 페이지 차단
Disallow: /temp/  -> /temp/.. 으로 시작하는 모든 페이지 차단
Allow: /          -> 나머지는 모두 크롤링

→ 이러한 이유로 크롤링을 실패하기도 한다.

2) 색인 생성(Indexing)

크롤링으로 페이지를 가져왔다면, 이제 구글은 이 페이지가 어떤 내용인지 해석하고 데이터베이스에 정리한다. 이 과정을 색인 생성(Indexing) 이라고 한다.

이렇게 분석된 정보는 구글 색인에 저장이 된다.

페이지 내용 분석

구글은 단순히 텍스트만 읽는 것이 아니라, 페이지의 의미를 파악하기 위해 다양한 요소를 처리한다

핵심 태그 분석: <title> 요소와 같은 핵심 콘텐츠 태그 분석
시각적 요소 처리: 이미지와 동영상을 분석하며, 특히 이미지의 경우 Alt 속성(대체 텍스트)을 통해 내용 파악
속성 검토: 콘텐츠의 성격을 규정하는 다양한 HTML 속성들 처리 및 분석

중복 필터링 및 표준 페이지 결정

인터넷에는 비슷한 내용의 페이지가 많기 때문에, 구글은 검색 결과에 표시할 가장 대표적인 페이지(표준 페이지)를 선정한다.

클러스터링(Clustering): 비슷한 콘텐츠를 가진 페이지들을 하나의 그룹으로 묶는다.
표준 페이지(Canonical) 선택: 그룹 내에서 해당 콘텐츠를 가장 잘 대표하는 페이지를 하나 선택한다. 이 페이지가 주로 검색 결과에 노출된다.
대체 버전 활용: 그룹 내의 나머지 페이지들은 특정 상황에 따라 적절한 대체 버전으로 제공된다
→ 예) 사용자가 모바일로 검색 : m.naver.com, 인터넷으로 검색 : naver.com

따라서, 같은 내용의 URL을 여러 개 만들면 검색 노출이 줄어들 수 있다.

간단 예시

쇼핑몰의 제품 페이지 site.com/shoes / site.com/shoes?color=red / site.com/shoes?size=270

신호 수집 및 데이터베이스 저장

표준 페이지가 결정되면, 검색 결과의 품질을 높이기 위한 추가 정보를 수집하여 저장한다.

추가 신호 수집:
- 페이지의 언어, 콘텐츠가 속한 국가, 모바일에서의 사용성 등을 파악한다.
구글 색인(Google Index) 저장:
- 수집된 모든 정보는 '구글 색인'에 저장된다.

색인 생성이 제한되거나 실패하는 경우

구글이 페이지를 크롤링했다고 해서 모든 페이지의 색인이 생성되는 것은 아니다.

아래와 같은 이유로 색인 생성에서 제외될 수도 있다

저품질 콘텐츠:
- 페이지 내용의 품질이 너무 낮은 경우
색인 거부 설정 (Robots meta):
- 사이트 소유자가 메타 태그를 통해 "이 페이지는 색인하지 마"라고 설정한 경우
  예: <meta name="robots" content="noindex">
디자인 및 구조 문제:
- 웹사이트 디자인이 너무 복잡하여 구글이 내용을 파악하기 어려운 경우

3) 검색결과 게재

색인 생성이 완료된 수많은 페이지 중, 사용자가 검색어를 입력했을 때 가장 적합한 결과를 뽑아 화면에 보여주는 최종 단계이다

검색 결과의 선별 과정

사용자가 검색창에 단어를 입력하는 순간, 구글 컴퓨터는 다음의 과정을 거쳐 결과를 반환한다.

색인 검색
구글 색인(데이터베이스)에서 검색어와 일치하는 페이지들을 찾는다.
품질 및 관련성 판단
수집된 페이지 중 콘텐츠의 품질이 가장 높고, 사용자의 의도와 가장 관련이 깊은 결과를 우선순위로 둔다

사용자 맥락(Context)에 따른 맞춤형 결과

구글은 똑같은 검색어라도 검색하는 사람의 상황에 따라 다른 결과를 보여준다.

이를 결정하는 주요 요소는

위치: '자전거 수리점' 검색 시, 사용자에게는 각자의 주변 업체 정보가 표시된다
언어: 사용자가 주로 사용하는 언어 설정에 맞춘다
기기: 데스크톱인지 휴대전화인지에 따라 최적화된 페이지를 보여준다.

검색어에 따른 동적 UI 제공

검색어의 성격에 따라 검색 결과 페이지(SERP)의 구성과 기능도 달라진다.

지역 검색결과
'자전거 수리점'처럼 특정 장소가 중요한 경우 지도와 지역 정보가 우선 표시된다.
이미지/시각적 결과
'최신 자전거'처럼 시각적 확인이 중요한 경우 이미지 갤러리가 더 높은 비중으로 나타난다.

색인은 되었으나 검색 결과에 나오지 않는 이유

페이지가 구글 색인에는 등록되었지만, 실제 검색 결과에서 보이지 않는다면 아래 문제를 점검해봐야한다.

관련성 부족
페이지 내용이 사용자가 입력한 검색어의 의도와 맞지 않는 경우
콘텐츠 품질 저하
정보의 가치가 너무 낮아 사용자에게 보여줄 만한 품질이 아닌 경우
게재 차단 설정
Robots meta 규칙 등을 통해 검색 결과 노출을 직접 막아둔 경우
```
<meta name="robots" content="nosnippet"> //특정 노출 제한 설정
```

3. 온페이지 SEO(On-Page SEO)와 오프페이지 SEO(Off-Page SEO)

SEO는 크게 온페이지(On-Page)와 오프페이지(Off-Page) 최적화로 나눌 수 있다.

두 가지는 역할이 다르지만, 함께 작동할 때 검색 노출 효과가 커진다.

1. 온페이지 SEO (On-Page SEO)

온페이지 SEO는 내 웹페이지 자체를 최적화하는 작업을 의미한다.

즉, 검색엔진과 사용자가 페이지를 잘 이해할 수 있도록 구조와 콘텐츠를 개선하는 것이다.

페이지의 제목(title), 본문, 메타 태그(description), URL 등에 사용자가 검색할 법한 키워드를 포함시키는 방식이다.

다만 키워드를 무작정 반복한다고 해서 검색 순위가 올라가지는 않는다.

같은 키워드를 노린 콘텐츠가 많거나, 제목과 실제 내용이 맞지 않아 사용자가 바로 이탈하면

오히려 검색 순위가 떨어질 수 있다.

그래서 온페이지 SEO에서 중요한 것은

제목과 본문이 일관된 주제를 다루는지
사용자의 검색 의도에 맞는 답을 제공하는지
콘텐츠의 품질이 충분히 높은지

체류 시간과 페이지 만족도가 높을수록 검색엔진은 해당 페이지를 유용한 콘텐츠로 판단한다.

또한 내부 링크를 활용하는 것도 온페이지 SEO에 도움이 된다.

같은 사이트 내의 관련 콘텐츠를 연결해 주면 사용자는 더 오래 머물게 되고,

검색엔진은 사이트의 구조를 더 잘 이해할 수 있다.

2. 오프페이지 SEO (Off-Page SEO)

오프페이지 SEO는 내 웹페이지 외부에서 이루어지는 모든 최적화 활동을 말한다.

검색엔진은 한 페이지의 품질을 판단할 때 “이 페이지가 외부에서 얼마나 신뢰받고 있는가”도 함께 본다.

이때 가장 중요한 요소가 백링크(Backlink) 다.

백링크는 다른 웹사이트에서 내 웹페이지로 연결되는 링크를 의미한다.

오프페이지 SEO를 강화하는 방법에는 다음과 같은 것들이 있다.

소셜 미디어에서 공유될 만한 콘텐츠 제작
브런치, 오픈애즈 같은 콘텐츠 플랫폼에 게스트 포스팅
유튜브, 블로그 등 인플루언서 협업
언론 홍보, 커뮤니티 언급
업계 관련 웹사이트와의 파트너십

다만 단순히 링크 수를 늘리는 것보다, 관련성과 신뢰도가 높은 사이트에서의 언급이 훨씬 중요하다.

4. AI 시대에 SEO의 변화

아무래도 이제는 AI를 통해 검색을 대체하는 경우가 많아서 검색 결과만 고려하기에는 노출을 보장할 수 없다.

그래서 최근에는 AI가 이해하고, 요약하고, 추천하기 쉬운 콘텐츠 구조가 SEO만큼이나 중요해지고 있다. 이 시기에 등장한 개념이 바로 AEO와 GEO다.

SEO: 검색엔진에 잘 노출되기 위한 최적화
AEO: AI·검색엔진이 “정답”으로 선택하도록 최적화
GEO: 생성형 AI가 요약·추천할 때 인용하도록 최적화

1) AEO (Answer Engine Optimization)

AEO는 답변 엔진 최적화라고 볼 수 있다.

AI 챗봇, 음성 검색 등에서 질문에 대한 정답으로 콘텐츠가 선택되도록 만드는 전략이다.

AEO의 핵심은 콘텐츠를 정답 단위로 명확하게 구조화하는 것이다.

2) GEO (Generative Engine Optimization)

GEO는 생성형 AI 최적화 전략이다.

ChatGPT, Google Gemini, Perplexity 같은 생성형 AI가 콘텐츠를 학습·요약·추천할 때 인용하기 쉬운 형태로 웹페이지를 구성하는 것을 목표로 한다.

SEO나 AEO가 검색 결과 중심이라면, GEO는 AI가 직접 답변을 생성하는 환경을 전제로 한다.

위와 관련해서 더 자세한 내용들도 있었는데.. 제가 완전히 이해하지 못해 개념적인 부분으로만 넣었습니다 궁금하시면 참고해도 좋을 것 같아요. https://www.nhn-commerce.com/main/blog/25/%EC%87%BC%ED%95%91%EB%AA%B0-SEO%EB%B6%80%ED%84%B0-AI-%EA%B2%80%EC%83%89-%EC%B5%9C%EC%A0%81%ED%99%94%EA%B9%8C%EC%A7%80-%EB%85%B8%EC%B6%9C-%EC%98%AC%EB%A6%AC%EB%8A%94-%EC%8B%A4%EC%A0%84-%EB%B0%A9%EB%B2%95-4725?gad_source=1&gad_campaignid=23466922237&gbraid=0AAAAAqcoPiLIGForjfBLHg_dLaLRTCJiD&gclid=EAIaIQobChMIrI-imM-QkgMVXs0WBR0IFxo_EAAYAiAAEgIAcPD_BwE

5. 개발자가 알면 좋을 SEO 관련 정보

1) 렌더링 방식과 SEO

CSR vs SSR vs SSG vs ISR (각 방식이 크롤러에 미치는 영향)

앞에서 살펴본 것처럼

검색엔진은 크롤링 → 렌더링 → 색인 생성이라는 단계를 거쳐 페이지를 이해한다.

이때 페이지가 어떻게 렌더링되는지(Rendering 방식)에 따라

검색엔진이 콘텐츠를 언제, 얼마나 쉽게 이해할 수 있는지가 크게 달라진다.

프론트엔드에서 자주 사용하는 렌더링 방식은 크게 네 가지가 있다.

CSR (Client-Side Rendering)
SSR (Server-Side Rendering)
SSG (Static Site Generation)
ISR (Incremental Static Regeneration)

이 방식들은 단순한 구현 차이를 넘어,

검색엔진 입장에서 이 페이지를 어떻게 보게 되는가의 차이이기도 하다.

① CSR (Client-Side Rendering)

CSR은 브라우저에서 JavaScript를 실행해 화면을 그리는 방식이다.

React, Vue로 만든 SPA(Single Page Application)가 대표적인 예다.

동작 방식

서버가 내려주는 초기 HTML에는 실제 콘텐츠가 거의 없음
JavaScript가 실행된 이후에야 화면에 내용이 나타남

<body>
	<div id="root"></div>
	<script src="app.js"></script>
</body>

구글봇 관점

URL을 발견하고 크롤링은 가능
200 OK 응답이면 렌더링 대기열(Rendering Queue)에 추가
이후 리소스 여유가 생겼을 때 JavaScript 실행
JS 실행이 끝난 결과를 다시 파싱해서 콘텐츠와 링크를 수집

SEO 관점의 특징

초기 HTML만 보면 내용이 없는 빈 페이지
렌더링 지연 → 색인 생성 지연
JavaScript가 robots.txt로 차단되면 콘텐츠를 아예 못 봄
Core Web Vitals(LCP, INP)에서 불리한 경우가 많음

구글은 CSR 페이지도 렌더링할 수 있지만,
나중에 해석해야 하는 페이지가 된다.

② SSR (Server-Side Rendering)

SSR은 요청이 올 때마다 서버에서 HTML을 완성해서 내려주는 방식이다.

Next.js의 getServerSideProps가 대표적인 예다.

getServerSideProps 예시

// pages/stock-price.js

export default function StockPage({ stockData }) {
  return (
    <div>
      <h1>실시간 주식 정보

동작 방식

사용자가 요청 → 서버가 데이터를 가져와 HTML 생성
브라우저와 크롤러 모두 완성된 HTML을 받음

구글봇 관점

크롤링 즉시 실제 콘텐츠가 담긴 HTML 확인
링크, 텍스트, 메타 정보 등을 바로 파악 가능
이후 JavaScript 렌더링은 보조적인 단계

SEO 관점의 특징

초기 HTML에 콘텐츠 포함
JavaScript 실행 실패 시에도 최소한의 콘텐츠 확보 가능
서버 부하 증가할 수 있음

③ SSG (Static Site Generation)

SSG는 빌드 시점에 HTML을 미리 만들어 두는 방식이다.

Next.js의 getStaticProps가 여기에 해당한다.

getStaticProps 예시

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}<

동작 방식

배포 전에 모든 페이지 HTML을 미리 생성
사용자는 CDN에서 정적 HTML을 바로 전달받음

구글봇 관점

요청 즉시 완성된 HTML 수신
별도의 렌더링 대기 없이 콘텐츠와 링크 파악 가능

SEO 관점의 특징

검색엔진이 가장 이해하기 쉬운 구조
색인 생성 속도 빠름
Core Web Vitals에 매우 유리
실시간 데이터에는 부적합

④ ISR (Incremental Static Regeneration)

ISR은 SSG의 장점을 유지하면서, 콘텐츠를 점진적으로 갱신하는 방식이다.

동작 방식

기본은 SSG처럼 정적 HTML 제공
일정 시간이 지나면 백그라운드에서 페이지 재생성

구글봇 관점

항상 200 OK와 완성된 HTML을 받음
페이지가 언제 재생성되는지는 SEO에 거의 영향 없음

SEO 관점의 특징

SSG와 동일한 수준의 SEO 안정성
콘텐츠 최신성 유지 가능
대규모 페이지에 적합

2) SEO 최적화 방법

아래 내용들은 여러 사이트에서 정리해둔 것들을 기반으로 일부 가져온 것이며,

이 외에도 더 고려해야할 것들이 많을 수 있다!!! (많다!!)

(1) 문법에 맞는 시맨틱 태그 사용하기

각 구조에 적합한 시맨틱 태그를 사용하면 검색 엔진이 더 정확하게 페이지 구조를 파악할 수 있다.

<header>, <main>, <footer>와 같은 시맨틱 태그들을 통해 검색 엔진이 더 명확하게 페이지의 구조를 파악하여 중요도에 따라 데이터를 분류할 수 있도록 해준다.
이미지 요소는 <img> 태그를 사용하여 표현되어야 하며, 다른 태그로 사용했을 때는 색인을 탐색할 때 인식하지 못한다
특정 두 사이트가 동일한 키워드를 가지고 있을 때, <h1> 태그와 <div> 태그는 우선순위를 다르게 가진다. ( h1이 더 높은 우선순위!)
또한 구글은 헤딩 등의 title 태그들을 페이지의 내용을 요약할 대에도 사용된다. 이러한 내용이 메타데이터와는 별개로 또 검색 결과에 노출될 수 있다.

(2) 메타태그를 설정한다

검색 엔진이 가장 먼저 탐색하는 영역이기에, 해당 페이지의 정보를 표현해주면 좋다

구체적인 페이지 제목 <title>
- 검색 결과에서 사용자가 가장 먼저 클릭하게 되는 정보로, 구체적이면서도 간결해야 좋다.
- 키워드 반복 금지
  동일하거나 유사한 단어를 나열하면 스팸으로 취급할 수 있다. (예: 카페, cafe, 카 페...)
- 구분자 활용 하이픈(), 콜론(:), 막대(|)를 사용하여 사이트 이름과 페이지 내용을 분리한다.
- 독창성: 모든 페이지에 똑같은 제목을 쓰지 말고, 각 페이지의 성격을 담아야 한다
메타데이터 설명 description
- 검색 결과 제목 아래에 표시되는 요약문
- 페이지별 고유 정보 웹사이트 내 모든 페이지에 같은 설명을 넣기 보단, 각 페이지의 핵심 내용을 넣을 것
- 제목과 중복 지양 제목(title)에 이미 들어간 정보 나열보단, 더 상세한 보충 설명을 넣는 것이 좋음

<title>위치 기반 기록 공유 서비스</title>

<meta name="description" content="우리 동네의 숨겨진 명소와 소중한 기록">

(3) 이미지 파일의 이름과 대체 텍스트(alt)로 이미지를 설명하기

alt 속성은, 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트이다.

주로 홈페이지 내부에는 다양한 정보를 이미지로 제공하는데,

이때 반드시 <img> 태그에 alt 속성을 넣어 적절한 대체 텍스트를 기재해야 한다. 이미지 속에 그려진 문자는 검색엔진에 의해 인식되지 않으니!!

alt 속성을 붙이면 HTML 코딩과 유용성 측면에서도 좋고, 시각장애인용 스크린리더가 사용될 때 이미지 대신 alt 속성 값을 읽어 대략 어떤 이미지인지 파악할 수 있도록 도움을 준다.

검색엔진도 alt 속성 안의 텍스트를 통해 인덱싱 작업을 하기 때문에 SEO에 좋다.

(4) 캐노니컬 태그

동일한 콘텐츠가 여러 URL로 나뉘어 있거나 연재물 형태로 제공될 때, 검색 엔진에게 대표 페이지를 알려주려는 용도이다

중복 URL 통합 접속 경로가 다르더라도(예: PC 버전과 m.으로 시작하는 모바일 버전) 크롤러가 이를 별개의 페이지가 아닌 하나의 페이지로 인식하게 만든다.
최종 최적화 단계 페이지 구조가 완전히 잡힌 후 적용하는 작업이며, 너무 남발하거나 잘못 정의할 경우 스팸으로 간주될 수 있으므로 주의가 필요하다.
예시 - 전체보기 페이지 제공 각각의 나뉜 페이지(1부, 2부, 3부)에 rel="canonical" 링크를 삽입하여 '전체보기' 페이지를 대표 URL로 지시한다. 이를 통해 어떤 주소로 접속하든 검색 점수는 전체보기 페이지로 통합된다.
```
// 모바일 페이지에서 PC 주소를 대표로 둠
<link rel="canonical" href="https://www.site.com/post/123" /> 

// 연재물 전체보기 통합 예시
// 2번 페이지에서 전체보기를 가리킴
<link rel="canonical" href="https://site.com/series/all-view" />
```

(5) 페이지 속도 최적화

Google이 고려하는 요인 중 하나는 페이지 속도나 로딩 시간이다

웹사이트가 느리면 사람들은 내 사이트의 콘텐츠를 보기도 전에 페이지를 이탈할 것이기에, 웹사이트 속도를 최적화하는 것도 중요하다

웹 필수 핵심 요소
- LCP(Largest Contentful Paint) URL을 클릭한 후 사용자가 웹페이지의 가장 중요한 콘텐츠를 볼 수 있을 때까지 소요되는 시간.
- FID(First Input Delay) URL 클릭한 시점 및 사용자가 사이트 요소와 상호 작용하는 시점의 간격. 즉, 사용자가 내 페이지에서 무언가를 클릭할 수 있는 시점
- CLS(Cumulative Layout Shift) 페이지를 불러오는 동안의 사이트 요소가 안정적인 정도. 수치가 낮다는 것은 페이지의 로딩이 완전히 끝나면 요소들이 원래 위치에 있다는 것을 뜻함

(6) robots.txt 및 사이트맵 설정

검색 봇이 가장 빠르고 정확하게 콘텐츠를 수집할 수 있도록 가이드를 제공하는 단계이다. 1. robots.txt

검색 로봇에게 "어느 곳은 들어가도 되고, 어느 곳은 들어가면 안 되는지"를 알려주는 텍스트 파일이다.

크롤링 예산 절약 로봇이 중요하지 않은 페이지를 훑느라 시간을 낭비하지 않게 하여, 중요한 페이지를 더 빨리 수집하게 돕는다.
보안 및 관리
작업 중이거나 오픈 대기 중인 사이트는 robots.txt를 통해 접근을 차단하여 미완성 상태가 노출되는 것을 방지한다
위치
반드시 웹사이트의 루트 디렉토리(최상위 경로)에 위치해야 한다.

User-agent: * # 모든 검색 로봇에게 적용
Disallow: /admin/      # 관리자 페이지 수집 금지
Disallow: /temp/       # 임시 폴더 수집 금지
Allow: /               # 나머지 모든 페이지 수집 허용

Sitemap: https://site.com/sitemap.xml  # 사이트맵 위치를 명시

2. 사이트맵 (Sitemap.xml)

우리 사이트에 존재하는 모든 URL의 목록을 담은 XML 파일이다.

새로운 페이지 발견 검색 로봇이 내부 링크를 타고 들어오길 기다리는 대신, 사이트맵을 통해 모든 주소를 한꺼번에 제공하여 수집 속도를 높인다.
업데이트 정보 전달 각 페이지의 마지막 수정일(lastmod)을 포함하여, 로봇이 변경된 내용만 효율적으로 다시 읽어갈 수 있게 한다.
복잡한 구조 보완 내부 링크 구조가 복잡하거나 깊숙한 곳에 있는 페이지도 누락 없이 색인되도록 돕는다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://site.com/</loc>
    <lastmod>2026-01-17</lastmod>
    <priority>1.0

사실 원래 공유하고 싶었던 건 리액트에서 AWS 람다함수를 활용하여 동적인 SEO 최적화를 제공하는 방식이다 .. 하지만 시간 이슈로 제대로 적용하지 못했다 ㅜㅜ

간단하게 정리해보자면

AWS 람다함수를 통한 메타 태그 주입 방식

사람에게는 빈 리액트 앱을 주고, 봇에게는 내용이 채워진 HTML을 준다는 핵심이다.

사용자/봇의 요청
사용자가 특정 URL(예: /record/125)로 접속
CloudFront(또는 람다)에서 감지
요청자의 User-Agent를 확인하여 구글봇, 카톡 봇 등인지를 판별
람다 함수 실행
봇일 경우 람다 함수가 실행됨
데이터 페칭 & HTML 조립
람다가 DB에서 해당 기록(record/125)의 데이터를 가져와서 index.html의 <title>, <meta> 태그를 동적으로 갈아끼움
응답
봇은 메타 데이터가 꽉 찬 HTML을 받아가고, 일반 사용자는 평소처럼 리액트 앱을 받아 클라이언트 사이드 렌더링을 진행함

참고하면 좋을 블로그
- https://velog.io/@blue03183/SPA-에-SEO-를-적용해보자-with-LambdaEdge

근데 사실 아직까지도 잘 모르겠다. 분명 sitemap 과 RSS 에 등록을 했는데 다른 것들이 검색 결과에 나오기도 하고 … 너무 어렵다 …………

참고 문서