SEO란 무엇인가

CS면접 준비하면서 처음으로 SEO라는 개념을 알게 되었는데요 

검색엔진이 웹사이트의 컨텐츠를 더 잘 인식하고 더 많은 사용자에게 노출되도록 만드는 작업이란 것은 알지만 어떻게 적용하는지와 검색엔진의 작동원리에 대해서는 공부한 적이 없어서 SEO에 대해서 글을 써보게 되었습니다. 

글이 깔끔하게 정리되어 있다기보다는 꼬리에 꼬리를 무는 스타일로 작성해보앗음.. 

 

일단 검색엔진의 작동원리를 알아야 어떻게 잘 노출되게 하는지 알겟죠

I. 검색엔진 작동원리

우리가 검색 결과를 보는 경로는 다음과 같습니다. 

검색 키워드를 입력하면 검색엔진 봇이 검색 의도를 파악하여 키워드를 명확하게 설명하고 있는 페이지를 우선적으로 노출합니다. 

그럼 이때 봇은 어떻게 활동하게 되는 걸까요? 

크게 세 단계로 나누어서 보면 이해하기 쉽습니다. 

1. 크롤링:

구글봇은 웹페이지를 탐색하면서 내용을 읽습니다. 링크를 통해 페이지를 왔다갔다 하면서 수십억 개의 페이지를 크롤링하여 구글의 색인에 추가합니다. 

2. 색인: 

페이지의 내용이 크롤링되어 자체 DB인 색인에 저장이 되었다면,

페이지의 텍스트, 사진, 동영상과 같은 내용들을 분석하여 저장합니다. 

이때 페이지의 제목, 메타 태그, HTML 구조, 구조화 데이터들이 분석되면서 검색어와의 관련성이 판단됩니다. 

(그래서 태그를 잘 작성하고 구조를 간단하게 만들어야겠죠?)

3. 랭킹:

마지막으로 분석한 것을 종합하여 SERP(Search Engine Result Page, 검색결과 페이지)에서 순위를 결정합니다. 

---

II. SEO 최적화 방법

그럼 어떻게 해야 SEO를 최적화 할 수 있을까요? 

- 메타 태그 최적화 

- 내부 링크 구조 : 복잡하지 않아야 하며 페이지 로딩 속도 빠르게 구현 

- 사이트 속도 빠르게

- 고품질 외부 링크와 백 링크 

- 키워드 선택 : 관련 분야의 키워드 조사하여 선정 

 

뭐 당연한 말이겠죠.. SEO에 여러 종류가 있는데요 하나씩 간단히 설명해보겠습니다.

✅ 테크니컬 SEO : 웹사이트의 구조적인 토대 마련 

1) HTTP 대신 HTTPS 사용 

HTTPS는 HTTP와 다르게 S, Secure이 추가된만큼 기존 프로토콜에 SSL 인증서를 사용하여 데이터를 암호화해 전송합니다. 

보안이 적용된 사이트는 크롤링과 색인이 더 안정적으로 이루어지고, 브라우저 경고 없이 접속되어 사용자 이탈률이 낮아집니다. 

 

2. 크롤링/색인 최적화

로봇텍스트(robots.txt)로 불필요한 페이지 크롤링을 차단하고, 사이트맵(sitemap.xml)을 통해 핵심 페이지를 명확하게 안내하는 방식으로 크롤링의 우선순위를 조절할 수 있다.... 라고 하는데 먼 말인지 바로 안 와닿네요.ㅋ 

그래서 로봇텍스트와 사이트맵은 멀까요 

Robots.txt

검색엔진이 우리 웹사이트에 접근할 때 가장 먼저 도달하는 곳이 바로 robots.txt파일입니다.

봇에게 페이지 수집을 허락하거나 불허하는 장소이죠 

아니! 어차피 다 검색되는 게 좋으니까 다 허락하면 되는 거 아니야? 생각할 수 있겠지만 

이탈률이 높은 페이지를 차단하는 경우가 있습니다. 페이지 접속하면서 로그인 페이지에 도착한다면 너무 이탈하고 싶지 않나요? 이탈률이 높은 페이지의 경우 구글 랭킹을 하락시키기 대문에 비공개 페이지는 차단해주는 게 좋습니다. 

또 예산이 있기 때문에,, 중요한 페이지에 더 많은 예산을 지출하는 게 맞습니다. 

Sitemap.xml 

웹페이지 안의 목록들을 체계적으로 나열한 XML 파일입니다. 

사이트맵은 사이트 구조를 효율적으로 파악할 수 있게 도와줌으로써 봇에게 목차와 같은 역할을 합니다. 

마지막 수정일, 업데이트 빈도, 우선 순위 등의 정보를 함께 제공하여 크롤링과 색인에 힌트를 제공합니다. 

-> 이제 위의 문장이 이해가 잘되죠 ?? 

 

3. 사이트 속도

사이트 속도를 저하하는 것들은 여러가지가 있는데요, 

대용량 이미지를 사용한다거나, 사용하지 않는 자바스크립트, 무거운 플러그인 등이 그 예시입니다. 

- 이미지 최적화 

JPEG이나 PNG 대신 WebP를 사용하는 방법입니다. 

WebP가 머지.. 찾아봤더니 구글이 개발한 차세대 이미지 포맷으로 JPEG보다 25~35% 작은 용량으로 같은 품질을 제공하며 PNG처럼 투명도도 지원한다고 합니다. 

이미지를 압축하거나, 스크롤 시 이미지 로딩을 적용하여 사용자 경험을 개선하는 방법 또한 있습니다. 

 

4개째되니까 집중도가 떨어지네요.. 요약하면 

- 사이트 2~3 클릭 안에 주요 페이지에 도달해야 함 

- 모바일 환경 가독성 키우기 (구글이 모바일 환경 우선 크롤링함) 

 

✅ 온페이지 SEO

드디어 온페이지입니다.. 아까 태그 잘 쓰라고 했잖아요 그 얘길 해봅시다 

"온"페이지 말그대로 사이트 내부에서 최적화 해 볼 겁니다. 

<title> 제목 <description> 핵심 설명 으로 페이지에 대한 간단 소개를 포함해주면 됩니다. 

파란 글씨가 title, 밑에 회색 글씨가 description이게 되는거죠. 

제가 좀 찾아보니 너무 과도하게 링크 삽입하지 말고 적절한 태그를 잘 해주면 되는 것 같네요 

 

뭐 오프페이지 SEO도 있고 Core Web Vitals를 높게 유지해야 한다는 개념적인 내용들이 많던데요 

이제 슬슬 Next.js가 SEO최적화에 좋다는 데 왜?가 궁금해지네요 

---

III. Next.js와 SEO

Next.js는 성능을 위한 다양한 내장 최적화 기능을 제공합니다. 

기능 중 하나가 <자동 코드 분할> 인데요 

사용자가 페이지를 방문할 때 해당 페이지에 필요한 JavaScript만 다운로드 하게 되어 로딩 시간과 성능을 크게 향상시킵니다. SSR 많이 들어보셨을텐데요, 봇이 크롤링 할 때 이미 렌더링된 HTML을 받아가기 때문에 SEO에 유리한 것입니다.  

CSR은 브라우저에서 JS를 실행해야 내용이 보이고 SSR은 서버에서 데이터를 fetch합니다. 

CSR과 다르게 SSR은 컴포넌트에 데이터가 이미 있기 때문에 바로 렌더링이 가능한 것이죠. 

 

<Image 컴포넌트>

이미지를 최적화하고 지연 로딩 방식으로 이미지를 로드합니다. 

https://oliveyoung.tech/2023-06-09/nextjs-image-optimization/

NEXT.JS의 이미지 최적화는 어떻게 동작하는가? | 올리브영 테크블로그

위의 올리브영 테크블로그를 보면 현재 Next.js에서 제공하는 기능이 장치의 크기에 맞춘 적절한 이미지 사이즈와 Web Vitals의 CLS 발생 방지, 등등이 있다고 하는데요 

일단 CLS는 페이지 로딩 중에 요소가 얼마나 예상치 못하게 이동했는지 측정하는 값을 의미합니다.

CLS가 낮을수록 시각적 안정성이 높다고 볼 수 있는데요 

예를 들면, 

광고 x버튼 누르려고 했는데 갑자기 내려가면서 광고를 클릭한다거나,, 그런거잇죠? 

 

다시 돌아와서 Nextjs가 제공하는 기능을 사용해서 이미지 최적화하는 방법을 소개하고 있습니다. 

<img> 태그보다 Next/image 컴포넌트를 사용했을 때 시간을 11초 정도 단축한 것을 확인할 수 있습니다. 

= Next/image를 쓰면 이미지를 그냥 가져오는 것이 아니라 가공해서 더 빠르게 만들어서 준다 

고 생각하면 더 쉬울 것 같습니다. 

 

내부에서 어떻게 작동되는지 자세하게 설명이 나와있는데요, 

원래
/cat.jpg

 

바뀐 요청
/_next/image?url=/cat.jpg&w=828&q=75

URL이 다음과 같이 바뀐 것을 확인할 수 있습니다. 

url이 원본 이미지이고

w=828 -> 828px로 줄여줘!! 

q=75 -> 75로 압축해줘!! 

=> Next.js 서버가 이미지를 가공하고 있다는 것을 보여주죠. 

만들고 나서 .next/cache/images에 저장하게 됩니다. 

캐시에 저장하게 되면 이미지를 재사용 할 수 있기 때문에 다음에 더 빠르게 가져올 수 있게 되는것! 

물론 모든 이미지를 최적화하는 것은 아니기에 unoptimized를 사용하는 것도 고민 중 하나가 되겠습니다. 

마지막에는 내부 라이브러리 중 sharp와 squoosh에 대해서 설명하고 있습니다. 

 

글이 뒤죽박죽인데 뭐 라이브러리랑 여러 기능으로 Next.js가 seo최적화를 잘 하고 있구나 ~ 정도 알고 싶었습니다. 

개념 공부하고 테크 블로그 참고하니 좀 이해가 될듯말듯하네요 

밑에 참고한 글들 링크 첨부해놓았습니다. 

 

https://238lab.kr/blog-seo-seoguide

SEO란? 원리부터 실전까지 검색엔진최적화 가이드

https://seo.tbwakorea.com/blog/core-web-vitals/

코어 웹 바이탈 (Core Web Vitals)이란?

https://wikidocs.net/197689

09) Next.js에서 성능 및 SEO 최적화