SEO, 검색 엔진 최적화

2024. 6. 20. 15:47ㆍ기타

SEO

SEO는 Search Engine Optimozation의 약어로 구글, 네이버, 다음 등의 검색엔진에 검색이 잘되도록(상위에 노출되도록) 사이트를 수정하는 것을 말합니다.

여기서 검색엔진이란 웹 상의 수많은 데이터를 미리 수집하고 정리하여 유저가 관련된 내용을 검색했을 때 찾을 수 있도록 해주는 DB 관리 시스템을 말합니다.

 

검색 엔진이 웹 사이트를 크롤링하고 인덱싱하는 방법

검색 엔진 크롤링 과정 (출처 : https://www.ascentkorea.com/seo-for-spa/)

1. 크롤링

  • 크롤링 bot이 크롤링 대기열에 URL을 가져옵니다.
  • robots.txt 파일을 확인해서 크롤링을 허용하는지 확인합니다.
    (크롤링을 허용하지 않으면 해당 URL은 무시)
  • bot은 HTML의 href 속성에서 URL을 파싱해서 허용된 URL을 크롤링 대기열에 추가

2. 렌더링

  • 일반적으로 정적인 HTML 페이지의 경우 바로 분석하는 것으로 충분하지만, 동적 콘텐츠가 포함되어 있는(JavaScript로 구현된) 웹페이지의 경우 초기 HTML에 콘텐츠가 포함되어 있지 않을 수 있어서 JavaScript를 실행시켜줘야 합니다.
  • bot이 Chromium 기반으로 자체적으로 렌더링 하여 페이지를 렌더링 합니다.
  • 렌더링 된 HTML을 분석해 주요 콘텐츠(텍스트, 이미지, 링크 등)를 파악합니다.

3. 인덱싱

  • bot이 추출한 페이지의 구조와 내용을 기반으로 각 페이지를 색인화합니다.
    이 과정에서 페이지의 주요 키워드, 문맥, 링크 등이 중요한 요소로 간주됩니다.
  • 생성된 색인 데이터를 검색 엔진의 데이터베이스에 저장합니다.
    검색 엔진의 데이터베이스는 검색 쿼리에 신속하게 응답할 수 있는 구조를 가지고 있습니다.

SPA와 SEO

저희 서비스는 Angular 프레임워크를 사용합니다.

Angular는 대표적인 SPA 중 하나인데, SPA는 SEO에 친화적이지 못하다는 문제가 있습니다.

 

동적 콘텐츠 로딩

SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식입니다. (CSR)

<!-- 초기 HTML 문서 -->
<!DOCTYPE html>
<html>
<head>
  <title>My Angular App</title>
  <meta name="description" content="This is a sample Angular application.">
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="main.js"></script>
</body>
</html>

위의 HTML 문서는 Angular 애플리케이션의 초기상태입니다.

<app-root> 요소 내부는 브라우저가 JavaScript를 실행해야 콘텐츠가 로딩됩니다.


자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되기 때문에 문제가 있을 수 있습니다.

Googlebot은 JavaScript를 실행하여 인덱싱을 하지만 많은 시간이 소요되고 검색 엔진이 페이지를 부정확하게 렌더링 하여
검색순위가 낮아질 수 있습니다.

 

초기 로딩 속도가 느림

SPA는 초기 로딩 시 큰 JavaScript 번들을 불러와야 하므로 초기 로딩 속도가 느리다는 단점이 있는데 로딩 속도가 느리다는 점은 검색 엔진의 랭킹에 부정적인 영향을 미칠 수 있습니다.

 

메타 태그 설정

<app-root>에 콘텐츠가 동적으로 생성되다 보니 다른 페이지로 이동하여 동적으로 <meta>를 설정해 줘도

검색 엔진이 이를 제대로 수집하지 못할 가능성이 있습니다.

렌더링 방식

SSR

SSR은 Server-Side Rendering(서버 측 렌더링)의 약자로 서버에서 HTML 페이지를 완전히 렌더링 하여 클라이언트(브라우저)에 전달하는 방식을 말합니다.

즉, 사용자가 페이지를 요청하면 서버에서 해당 페이지의 HTML 완전히 생성한 후 사용자에게 반환합니다.

  • 장점
    • 초기 HTML에 모든 콘텐츠가 포함되므로, 검색 엔진 크롤러가 페이지의 콘텐츠를 쉽게 인덱싱 할 수 있어서
      SEO에 친화적
    • 초기 페이지의 로딩 속도가 빠름
  • 단점
    • 서버에서 모든 요청에 대해 페이지를 렌더링 해야 하기 때문에 서버 자원이 많이 필요
    • 페이지 이동 시마다 서버에 요청을 하고 서버가 렌더링 해서 응답을 하다 보니 CSR에 비해서 초기 로딩 이후 페이지 이동시 속도가 느림

 

CSR

CSR은 Client-Side Rendering(클라이언트 측 렌더링)의 약자로 초기 HTML 파일은 최소한의 콘텐츠만 포함하고, 대부분의 콘텐츠는 JavaScript가 실행되면서 브라우저에서 렌더링 되는 방식을 말합니다.

  • 장점
    • 서버는 단지 초기 HTML파일과 JavaScript파일만 제공하므로 서버 자원이 적게 소모
    • 렌더링을 브라우저에게 담당시키므로 사용자에게 빠른 반응성을 제공
  • 단점
    • 첫 요청 시 필요한 모든 JavaScript파일을 받아야 하므로 초기페이지 로딩속도가 느림
    • 초기 HTML에 콘텐츠가 없으므로 검색 엔진 크롤러가 페이지 콘텐츠를 인덱싱 하는데 어려움이 있음

Dynamic Rendering

서버에서 요청을 분석해서 검색 엔진 크롤러와 같은 봇에게는 SSR로 HTML을 제공하고
일반 사용자에게는 CSR로 HTML을 제공하는 방식을 말합니다.

  • 장점
    • SEO 및 성능을 모두 충족할 수 있음
  • 단점
    • 크롤러와 일반 사용자에 대해서 서로 다른 콘텐츠를 구성해야 하므로, 구현 및 유지/관리가 복잡

 

 

문제 해결을 위해서 Angular Universal을 이용해 SSR을 구현하기로 하였습니다.

 

 

 

https://asperbrothers.com/blog/angular-seo/

https://asperbrothers.com/blog/javascript-seo/

 

'기타' 카테고리의 다른 글

Spring Securiy ROLE_ 에러  (0) 2025.01.07
컴퓨터가 문자를 인식하는 방법 (ASCII, 유니코드)  (0) 2024.08.24
해시  (0) 2024.04.11

관련글

티스토리툴바