[Web] SEO에 대한 고찰

목차

1. SEO란?

2. SEO를 유리하게 만드는 방법

3. SEO를 위한 작업들

 

1. SEO란?

• Search Engine Optimization
• 검색 엔진 최적화로, 검색 엔진에서 웹 사이트가 상위에 노출될 수 있도록(=접근성을 높일 수 있도록) 최적화하는 과정
• HTML 문서를 분석하여 사용자가 검색 결과를 빠르게 얻을 수 있게 도와준다.
  • 사용된 html 태그를 바탕으로 분석한다. (때문에 Semantic tag를 적절히 사용하는 것이 좋다)
  • CSR에서 사용되고있는 HTML의 body는 비어 있다가(<div id="root">의 리액트 특성), 사용자가 해당 도메인을 가진 페이지에 접근하면, 클라이언트가 서버에서 js & HTML 태그를 불러오는 형식이기 때문에 사전에 html 정보를 가지고 있지 않는다. 따라서 검색 엔진이 해당 도메인에 접근할 때 어렵기 때문에 SEO에 불리하다.
  • SSR을 사용해 사전에 html 문서를 검색 엔진이 찾을 수 있도록 제공하여 SEO에 유리하다.
    • SSR은 서버에서 필요한 데이터를 가져와 사전에 html 파일을 만들게 되고, 만들어진 HTML 파일을 일부 초기 세팅에 필요한 js와 함께 클라이언트에게 보내준다.
    • 클라이언트 측에서는 서버에서 만들어준 HTML을 받아 와서 바로 사용자에게 보여줄 수 있다.
    • 즉, SSR을 사용하게 되면 사전에 HTML 문서를 클라이언트 측으로 전달했기 때문에, 페이지 로딩이 빨라지고, 검색 엔진이 사용자의 요청에 따라 검색어를 찾을 때(데이터를 크롤링할 때), 웹사이트에 해당 검색어가 포함되어 있다면 우리 페이지를 보여주는 효율적인 SEO가 될 수 있다.
• 검색 엔진이 해당 페이지가 무슨 컨텐츠를 갖는지, 무엇에 대한 것인지 판단하기 위해 크롤러라는 자동화 로봇을 이용한다.

 

 

 

2. SEO를 유리하게 만들려면?

(1) pre-rendering을 지원하는 라이브러리를 사용한다.

react-snap이라는 라이브러리를 사용한다.

GitHub - stereobooster/react-snap: 👻 Zero-configuration framework-agnostic static prerendering for SPAs

 

(2)  SPA를 SSR 방식으로 구축한다.

React의 SPA는 대부분 CSR 방식으로 렌더링되지만, SEO 구축이 중요한 서비스라면 SSR 방식으로 할 수 있다.

따라서 첫 페이지만 SSR로 구축한 뒤, 이후 CSR을 하는 방식으로 SPA를 구축한다.

 

(3) history API

SPA가 싱글페이지이므로 사실상 주소는 바뀌지 않아 SSR로 구축하더라도 크롤러가 모든 페이지의 내용을 크롤링하지 못한다.

history API와 pushState() 방법을 통해 정적인 url과 같은 주소를 설정할 수 있다.

 

 

 

3. SEO를 위한 작업

페이지와 컨텐츠가 무슨 내용인지 잘 설명해야 한다.

(1) 메타 태그 사용하기

title, description 태그 등, 페이지를 설명할 수 있는 메타 태그를 설정한다.

 

(2) open graph 태그 사용하기

요즘엔 페이지 공유를 통해 여러 SNS에 공유하는 일이 많다. 마찬가지로 공유카드에 보일 페이지 소개를 잘 꾸민다.

 

(3) 페이지 속도 최적화하기

TTV와 TTI를 고려하여 로딩 속도를 개선시킨다.

 

✅TTV와 TTI

• TTV(Time To View): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점 (사용자가 화면을 보는 시점)
• TTI(Time to Interact): 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점 (사용자가 실제로 서비스를 이용하는 시점)
  • CSR은 사용자에게 보여짐과 동시에 모든 html과 js를 불러와서 TTV와 TTI가 동시에 일어난다.
  • SSR은 서버에서 미리 렌더링된 html과 이를 실제로 동적으로 연결하는 과정(hydration)이 따로 있기 때문에 TTV와 TTI 간에 시간 차가 있다.

 

(4) 이미지의 대체 텍스트 추가하기

image 태그의 alt 속성으로 이미지가 제대로 로드되지 않았을 시, 이미지가 무슨 내용인지 설명한다.

 

 

(5) 모바일 친화적인 사이트를 개발

 

 

 

참고 사이트

SPA의 SEO, 어떻게 해야할까? - 어센트 코리아

검색엔진 최적화(SEO)란 무엇일까? 완벽 가이드

검색엔진 최적화(SEO)란? | 요즘IT

TTV (Time To View) & TTI (Time To Interact)