mimizae 님의 블로그
SEO에 대한 고찰 본문
SEO란?
search engine optimization의 약자로 한국어로는 검색 엔진 최적화라고 한다.
이는 구글과 같은 검색 엔진이 웹 사이트나 웹 페이지를 더 잘 이해하고 평가할 수 있도록 구조와 콘텐츠를 개선해 최적화하는 과정을 의미한다.
그런데 왜 검색 엔진을 최적화 해야 하는 걸까?
우리는 궁금한 게 생기면 구글 창이나 네이버 창을 열고 특정 키워드를 입력해 검색한다.
대부분의 사람들은 보통 첫 페이지, 그것도 가장 상위에 노출된 페이지를 먼저 열람하게 된다.
따라서 어떤 사이트가 상위에 노출되느냐는 방문자 수, 브랜드 인지도, 매출 등과 직결된다.
이 상위 노출도를 높이려면 검색엔진 최적화를 진행해야만 한다. 그 이유는 구글 검색 엔진의 작동 원리와 관련이 있다.
이 과정을 간단히 말하자면,
우선적으로 구글 크롤러가 웹을 탐색하며 페이지들의 내용을 읽고 페이지의 정보들을 구글의 색인에 추가한다. (이 과정은 끊임 없이 진행된다.)
여기에서 색인에 추가한다는 것은, 웹 페이지의 모든 내용(텍스트, 이미지, 동영상 파일 등)이 분석되어 저장되는 것을 말한다.
여기에서!! 페이지의 제목(title), 메타 태그(meta tag), 구조화된 데이터(structured data) 등이 굉장히 중요한 역할을 한다.
이 정보를 사용하여 페이지의 주제와 내용을 이해하고 관련 키워드 검색에 대한 결과를 제공할 수 있도록 하기 때문이다.
마지막으로 검색 결과 게재 단계에서 사용자가 검색창에 키워드를 입력하면 구글은 색인된 (각 페이지에 대한 많은 정보가 저장된) DB를 검색해 그 검색 키워드와 가장 관련성 높고 유용한 웹 페이지들을 찾아낸다.
이 과정에서 구글은 알고리즘을 사용하여 페이지의 관련성, 인기도(백링크 수 등), 콘텐츠의 질, 사용자 경험 등 다양한 요소를 고려한다.
최종적으로, 구글은 이 모든 정보를 바탕으로 검색 결과 페이지에 웹 페이지를 순위별로 게재한다.
즉... 이 순위를 높이려면(=상위 노출을 위해서) 우리 사이트와 관련된 키워드들과 가장 연관성이 높도록, 알고리즘이 고려하는 요소들에 잘 부합하도록 페이지의 정보들을 잘 구성하고 구조를 잘 짜야 한다는 의미이다!
구글(Google) 검색엔진의 작동 원리: SEO를 위한 필수 가이드 | EXELIENT(엑셀리언트)
구글(Google) 검색엔진이 어떻게 웹을 크롤링하고, 색인을 생성하여 검색 결과를 제공하는지에 대한 전반적인 이해를 바탕으로 SEO(검색엔진 최적화)하는 방법을 알아보세요.
www.exelient.co.kr
그렇다면 SEO의 방법에는 어떤 것들이 있을까?
SEO의 종류에는 On-Page SEO, Off-Page SEO, 온서프 SEO, 콘텐츠 SEO, 블랙햇 SEO, 화이트햇 SEO 등등...
범위와 명칭 정말 다양한데, 해당 블로그에서는 Next.js의 SEO와 On-Page SEO만을 다루겠다!
개인적으로 Next.js를 공부하면서 왜 SEO 하면 다들 Next.js를 얘기하는지 깊이 파헤쳐 보고 싶었고, SEO가 이렇게나 명칭과 범위가 다양하다면 그에 맞게 글을 나누어 올리고 싶은 마음이다.
On-?? SEO
웹 사이트 내부에서 할 수 있는 최적화를 의미한다.
왜 On 뒤를 물음표로 적어놓았냐면, 구글링해 본 결과 prefix가 On인 것에는 On-page SEO와 On-Site SEO 이렇게 두 가지가 나왔는데,
- On-Page SEO (온페이지 SEO): 주로 개별 웹페이지의 요소(콘텐츠, 메타 태그 등) 최적화에 초점을 맞춘다는 관점.
- On-Site SEO (온사이트 SEO): 웹사이트 전체의 구조, 사용자 경험(UX), 기술적인 요소(사이트맵, Robots.txt, 웹사이트 속도, 모바일 친화성 등)를 최적화하는 더 넓은 개념으로 보기도 한다. (이 경우, 넓은 의미의 On-Site SEO가 좁은 의미의 On-Page SEO를 포함하는 형태로 해석될 수 있다.)
사실 위처럼 미묘하게 구분할 수도 있지만 대부분 이 두 용어를 같은 의미로 혼용하여 사용하며, 웹사이트 내부 최적화라는 큰 범주를 나타낸다고 한다. (On-Page SEO로 통합하겠습니다.)
On-Page SEO의 요소들
| 요소 | 중요한 이유 |
| 제목 태그 | 검색 엔진에게 페이지의 주제를 알리는 가장 중요한 요소이다. 사용자에게는 첫인상이며, 클릭률(CTR)에 직접적인 영향을 미쳐 유기적 트래픽을 결정한다. |
| 메타 디스크립션 | 직접적인 순위 요소는 아니지만, 사용자가 페이지를 클릭할지 결정하는 중요한 정보이다. 매력적인 설명은 클릭률(CTR)을 높여 간접적으로 순위 개선에 기여한다. |
| 콘텐츠 품질 및 관련성 | SEO의 핵심이다. Google은 사용자에게 가치를 제공하는 콘텐츠를 최우선으로 평가한다. 검색 의도를 정확히 파악하여 만족시키면 체류 시간과 순위가 높아진다. |
| URL 최적화 | 검색 엔진과 사용자에게 페이지의 내용과 사이트 계층 구조를 직관적으로 전달한다. 키워드를 포함한 간결한 URL은 검색 엔진의 크롤링 및 색인화에 유리하다. |
| 모바일 친화성 | Google이 모바일 우선 색인(Mobile-First Indexing)을 채택했기 때문에, 반응형을 통한 모바일 친화성은 순위를 결정하는 기본적인 필수 요소이다. |
| 페이지 로딩 속도 | 사용자 경험(UX)의 핵심 요소이자, Google의 공식 순위 결정 요소이다. 속도가 느리면 사용자가 이탈하여 순위 하락으로 이어질 가능성이 크다. |
| 이미지 최적화 | 검색 엔진은 Alt 텍스트를 통해 이미지의 내용을 파악하여 이미지 검색 순위에 활용한다. 또한, 파일 크기 최적화는 페이지 속도 개선에 필수적이다. |
| 내부 링크 | 웹사이트의 구조를 검색 엔진에 알려주고 크롤링을 용이한다. 사용자가 사이트 내에서 더 많은 페이지를 탐색하게 하여 체류 시간을 늘리고 이탈률을 낮춘다. |
| 헤딩 태그 | 콘텐츠의 논리적인 구조를 만들어 검색 엔진과 사용자가 내용을 쉽게 파악할 수 있게 한다. 가독성을 높이고, 중요 섹션을 구분하는 데 필수적이다. |
| 핵심 키워드 배치 | 검색 엔진이 페이지의 관련성을 명확하게 파악하도록 돕는다. 키워드를 전략적으로 배치해야 해당 검색어에 노출될 가능성이 커진다. (단, 과도한 키워드 반복은 지양해야 한다.) |
Next.js의 SEO
왜 Next.js하면 SEO가 연관지어 나오는 걸까? 이유는 Next.js의 렌더링 방식에서 온다.
(렌더링 방식이란? React 컴포넌트가 실제 HTML로 변환되어 사용자에게 보여지는 과정를 언제 어디에서 어떻게 처리하냐에 따라 달라지는 기법)
Next.js는 이러한 렌더링 방식을 다양하게 지원하는데, 대표적으로 SSR, SSG, ISR이 있다.
이제 각각의 특징과, 이들이 왜 SEO에 유리한지 알아보자.
SSR(Server-Side Rendering)?
React와 Next.js를 비교하며 이해해보자.
일반적으로 React로 만든 웹 애플리케이션은 SPA(Single Page Application) 구조를 따르며, CSR(Client-Side Rendering) 방식을 사용한다.
즉, 사용자가 웹 사이트에 처음 접속할 때 브라우저는 비어 있는 HTML 문서와 자바스크립트(JS) 번들 파일을 내려받는다.
이후 자바스크립트가 실행되면서 동적으로 콘텐츠(텍스트, 이미지, 리스트 등)를 렌더링하여 화면에 보여주는 방식이다.
이 구조는 사용자 경험(UX) 측면에서는 빠른 페이지 전환과 부드러운 인터랙션을 제공하지만, 검색 엔진 최적화(SEO) 측면에서는 단점이 있다.
왜냐하면 대부분의 검색 엔진(특히 구글을 제외한 많은 크롤러들)은 자바스크립트를 완벽하게 해석하지 못하기 때문이다.
결과적으로 초기 HTML이 비어 있는 경우, 검색 엔진은 페이지의 핵심 콘텐츠를 제대로 읽지 못해 인덱싱(검색 결과 등록)이 어렵게 된다.
즉, 아무리 좋은 콘텐츠를 만들어도 검색 엔진 입장에서는 “내용이 없는 페이지”처럼 보일 수 있는 것이다.
반면 Next.js는 이러한 한계를 극복하기 위해 SSR(Server-Side Rendering, 서버 사이드 렌더링)을 기본적으로 지원한다.
SSR은 사용자가 페이지를 요청하는 시점에 서버가 HTML을 완성된 형태로 만들어 응답하는 방식이다.
즉, 자바스크립트가 실행되기 전에도 이미 콘텐츠가 포함된 HTML이 브라우저에 전달된다.
이 덕분에 검색 엔진 크롤러는 별도의 자바스크립트 실행 과정 없이도 페이지의 텍스트, 이미지, 링크 등 주요 콘텐츠를 바로 인식할 수 있다.
그 결과, 페이지가 더 빠르게 인덱싱되고 검색 노출(랭킹)에서도 유리한 위치를 차지할 가능성이 높아진다.
요약하자면, Next.js는 서버에서 완성된 HTML을 전달함으로써 검색 엔진이 페이지 내용을 명확히 이해할 수 있게 도와주기 때문에 SEO 친화적인 프레임워크라고 할 수 있다.
SSG(Static Site Generation)와 ISR(Incremental Static Regeneration)?
SSG란 사용자가 페이지를 요청하기 전, 빌드 시점에 HTML을 미리 (정적으로) 생성하고 저장한 후,
만약 해당 페이지에 대한 요청이 발생하게 되면 서버에서 매 요청마다 HTML을 재생성하는 것이 아니라 빌드 때 만들어진 이미 생성이 된 정적 HTML을 반환하는 형태로 동작한다.
여기에서 핵심은 페이지들의 HTML이 미리 생성되어 정적 파일로 존재한다는 점과 사용자 요청 시 SSR처럼 서버에서 렌더링 비용이 들지 않는다는 점이다!
이 핵심 포인트가 SEO와 직결된다.
SSG는 완전한 HTML을 빌드 시점에 미리 생성하기 때문에, 사용자가 페이지에 접근할 때 서버가 새로 렌더링을 하지 않아도 즉시 완성된 HTML을 제공한다.
이 덕분에 검색 엔진 크롤러는 자바스크립트를 실행하지 않고도 페이지의 모든 콘텐츠를 바로 읽고 색인할 수 있다.
크롤러는 자바스크립트 실행에 제한이 있는 경우가 많기 때문에, 이렇게 완전한 HTML을 즉시 제공하는 구조는 색인 정확도를 높이고 검색 노출에 큰 이점을 준다!
또한 정적 페이지는 초기 로드 속도가 매우 빠르기에 사용자가 콘텐츠를 보기까지의 시간(LCP, Largest Contentful Paint)이 짧아지고, 이는 구글이 평가하는 핵심 UX 지표(Core Web Vitals)에 긍정적인 영향을 미친다.
이런 빠른 로딩 경험은 사용자 만족도를 높이고, 결과적으로 검색 순위 향상으로 이어진다.
마지막으로, 빌드 시 생성된 HTML은 서버나 외부 API의 상태에 의존하지 않기 때문에 크롤링 안정성이 높다.
예를 들어 외부 데이터 API가 일시적으로 실패하더라도, 이미 빌드된 정적 페이지는 그대로 유지되어 검색 엔진이 문제없이 접근할 수 있다.
다만, 너무 오래된 정보가 사용자에게 제공되지 않도록 ISR(Incremental Static Regeneration) 기능을 함께 사용해 주기적으로 최신 데이터를 반영하는 것이 좋다.
ISR(Incremental Static Regeneration)?
ISR은 SSG(Static Site Generation) 방식에서 일정한 주기마다 페이지를 자동으로 재생성하여 최신 데이터를 반영하는 기능이다. (최신성 유지!!)
이를 통해 SSG의 이점은 살리면서 전체 사이트를 다시 빌드하지 않고도, 개별 페이지의 콘텐츠를 업데이트 할 수 있다.
한 마디로, SSG의 빠른 속도와 SEO 친화성은 그대로 유지하면서도, ISR을 통해 콘텐츠의 최신성과 신뢰성을 동시에 확보할 수 있는 것이다!
덕분에 ISR은 대규모 웹사이트나 빈번히 업데이트되는 서비스에서도 효율적으로 동작하며, 검색 엔진과 사용자 모두에게 긍정적인 경험을 제공한다.
Next.js의 렌더링 방식 주요 비교표
지금까지 알아본 렌더링 방식의 주요 특징들을 한 눈에 알아보기 쉽게 표로 정리해보았다.
| CSR | SSR | SSG | ISR | |
| HTML 생성 시점 | 브라우저(클라이언트) 실행 시 | 요청 시 서버에서 즉시 생성 | 빌드 시점에 한 번 생성 | 빌드 시 생성 + 일정 주기마다 자동 재생성 |
| 렌더링 위치 | 브라우저(클라이언트) | 서버 | 서버(빌드 시점) | 서버(빌드 시 + 재생성 시) |
| 데이터 최신성 | 항상 최신(클라이언트에서 직접 fetch) | 항상 최신 (요청마다 새로 렌더링) | 고정됨(데이터 변경 시 전체 재빌드 필요) | revalidate 주기마다 자동 갱신 (부분 최신화 가능) |
| 첫 페이지 로드 속도 | 느림(JS 로드 후 렌더) | 보통 (서버 응답 후 렌더,CSR보다는 빠름) | 매우 빠름(정적 파일 즉시 제공) | 매우 빠름(정적 파일 + 주기적 최신화) |
| SEO 친화성 | 약함 (JS 실행 필요) | 매우 좋음 | 매우 좋음 | 매우 좋음 |
| 사용에 적합한 경우 | SPA, 대시보드, 로그인이 필요한 페이지 | 실시간 데이터 필요 및 사용자 맞춤 페이지 | 블로그, 문서, 소개 페이지 | 뉴스, 상품 상세, 블로그 등 주기적 업데이트가 필요한 페이지 |
| 대표 메서드 | 클라이언트 fetch / useEffect | getServerSideProps | getStaticProps | getStaticProps + revalidate |
이번 블로그에서는 SEO가 뭔지, 왜 중요한지, SEO의 방법들의 극히 일부를 개념적으로 공부해 봤다.
들어만 봤던 단어들(SEO, SSR, SSG...)이 뭘 의미하는지 왜 의미 있는 건지 이해할 수 있는 시간이었다!
다음은 Next.js의 SEO를 좀 더 파헤쳐볼 생각이다. Next.js가 SEO로 최적인 이유에 렌더링 기법 외 다른 요소들도 많을 것이기에, 각 렌더링 방식을 어떻게 구현하는지, 그 외 요소들에는 무엇이 있는지 등을 공부해보고 싶다!
읽어주셔서 감사합니다! ☺️
참고 자료 모음
https://www.promleeblog.com/blog/post/190-nextjs-isr
서버사이드렌더링 vs 클라이언트 사이드렌더링 (SSR과 CSR)
https://brunch.co.kr/@mobiinside/6773
SEO(검색엔진 최적화)의 범위 | 테크니컬 SEO, 콘텐츠 SEO, 블랙햇 SEO 등
'FE' 카테고리의 다른 글
| 낙관적 업데이트 적용하기 (0) | 2025.12.05 |
|---|---|
| 스크롤 감지 Tab-Bar 구현하기 (0) | 2025.11.26 |
| 실시간 알림 구현하기 (0) | 2025.11.16 |
| Virtual DOM이란? (0) | 2025.11.07 |
| aws lambda로 이미지 리사이징 기능 구현하기 (0) | 2025.10.12 |
