SEO(검색 엔진 최적화)

프로젝트를 진행할 때 백엔드 팀원이 이런 질문을 했었다. "우리 프로젝트도 구글에 롤링페이퍼를 검색하면 나오게 못 만드나? 검색 되면 사용자가 더 많아질 것 같은데..." 이 질문에 SEO를 향상시키면 된다는 답변을 했지만 왜 그런지, 그리고 어떻게 하는지에 대해 제대로 설명하지 못했던 기억이 있다. SEO란 무엇인지 그리고 어떻게 이를 향상시킬 수 있을지 알아보자. (사실 우리 프로젝트의 경우에는 회원끼리의 메시지라 SEO를 향상시킬 필요가 없다. 메타테그만 추가해주면 충분하다)

SEO란

---

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 엔진 최적화를 진행하면 사이트의 사이트의 가시성이 향상되고, 더 많은 사용자가 사이트를 방문하도록 유도할 수 있다.

크롤링 & 인덱싱

---

검색 엔진들이 어떻게 작동하는지 알아보자. 가장 많이 사용하는 google의 작동 방식에 대해 알아보겠다. 검색 엔진마다 동작 방식은 다르지만 큰 흐름을 이해하는데에는 문제가 없을 것이다. 검색은 크게 세 가지 과정을 따른다
1. 크롤링(Crawling)
2. 인덱싱(Indexing)
3. 검색 결과 게제

크롤링

검색 결과를 가져오기 전에, 크롤링을 통해 웹에서부터 최대한 많은 정보를 가져온다. HTML과 HTML에 있는 이미지, 비디오, Javascipt와 같은 모든 컨텐츠들을 확인한다. HTML에 있는 링크들을 뽑아 크롤러가 연결된 링크에 방문할 수 있도록 한다. 제출된 sitemap을 참고하기도 한다.

인덱싱

크롤링한 페이지의 내용을 파악하고자 한다. <title> 요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업이 이루어진다.

검색 결과 기제

사용자가 검색어를 입력하면 Google 컴퓨터는 색인에서 일치하는 페이지를 검색한 다음 품질이 가장 높고 사용자의 검색어와 가장 관련성이 크다고 판단되는 결과를 반환한다. 사용자의 위치, 언어 등 많은 요인에 의해 결정된다.

SEO 개선 방법

sitemap 추가, robot.txt 작성, 메타 데이터 추가, 상태 코드 에러 해결, 웹 사이트 성능 개선 등이 SEO를 개선하는데 도움이 된다. SEO 점수는 lighthouse를 통해 확인할 수 있다.

sitemap

사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일. 검색 엔진에게 제공하여 이 파일을 읽고 사이트를 더 효율적으로 크롤링할 수 있게 한다. 대부분의 경우 크롤러가 사이트를 잘 찾을 수 있지만, 크기가 큰 프로젝트나 페이지간 연결이 잘 안되어 있는 사이트의 경우 원활한 크롤링을 위해 이를 제공할 수 있다.

robot.txt

웹사이트에서 크롤링하며 정보를 수집하는 검색엔진 크롤러(또는 검색 로봇)가 액세스 하거나 정보수집을 해도 되는 페이지가 무엇인지, 해서는 안 되는 페이지가 무엇인지 알려주는 역할을 하는 .txt (텍스트) 파일

왜 검색이 안되는거야?

---

결론부터 말하자면 React의 CSR 특성 때문이다. 크롤링 시 HTML 파일을 확인한다고 했다. 렌더링이 되기 전까지(javascript가 실행되기 전까지)는 index.html만 있어, 검색 엔진에 올라가기 어렵다. 즉 크롤러는 빈 HTML 파일만을 보게 되는 것이다.

CSR (Client Side Rendering)

브라우저에서 javascript를 사용하여 렌더링을 하는 방법. data fetching, 라우팅 등의 모든 로직이 client에서 이루어진다. javascript 코드량이 늘어남에 따라 이를 불러오는데 오래 걸릴 수 있어 code-splitting으로 필요한 코드만을 가져오기를 필요로 할 수 있다.

Universal SSR

CSR과 기존의 SSR을 합쳐서 사용하는 방식이다. 그냥 SSR이라고 부르기도 한다.SSR 방식은 전통적인 웹 어플리케이션에서 사용하던 방법이다. Multi Page(MSA) SSR의 경우 매 라우팅마다 새로운 HTML 파일을 다시 받는다.

최근에 사용하는 SSR의 경우에는 SPA와 기존의 SSR의 장점을 섞은 형식이다. 사용자의 첫 요청에만 SSR을 사용하고, 그 이후는 SPA처럼 동적인 렌더링을 수행하는 것이다. 이를 통해 SEO와 초기 렌더링 속도 문제를 해결할 수 있다. React에서의 SSR을 쉽게 구현해주는 프레임워크로 Next.js가 있다.

Pre-render

---

말 그대로 페이지를 미리 로드한다는 뜻이다. next.js의 경우 pre render를 위해 아래 두 가지 방법을 사용하고 있다.

SSG (Static Site Generation)

빌드 타임에 HTML 파일을 만들어내는 방식이다. 만들어진 파일들은 CDN에 저장되어 캐싱될 수 있다. 캐시될 수 있기 때문에 빠른 응답이 가능하다. (사용자의 요청마다 바뀌는 정보와 같이) 사용자의 요청이 있기 전까지 pre-render 할 수 없다면 불가능한 방식이다

SSR (Server Side Rendering)

매 요청마다 HTML 파일이 만들어지는 방식이다.

참고

---

https://developer.mozilla.org/ko/docs/Glossary/SEO
https://web.dev/how-search-works/
https://web.dev/pass-lighthouse-seo-audit/
https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview
https://web.dev/rendering-on-the-web
https://evan-moon.github.io/2018/09/25/universal-ssr/