SEO와 SSG, 그리고 Gatsby.js

SEO란?

Search Engine Optimization (검색엔진 최적화)

검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책

SEO의 목적

• 광고 비용을 들이지 않고 자신의 콘텐츠를 검색 결과의 상위에 표시함으로써 사이트 유입을 늘림
• 검색 키워드에 관련된 콘텐츠를 제공해, 검색에 대한 니즈를 만좀시켜줌으로써 브랜드 인지도 향상 및 신뢰도 상승, 상품 구매까지 이어지게 할 수 있는 전략.

SEO에서 중요한 2가지는 검색 니즈에 맞춘 콘텐츠 (contents)와 기술적 요소

SEO의 과정

검색엔진이 검색 결과를 제공하는 주요 프로세스에는 크롤링(Crawling), 인덱싱(Indexing), 랭킹(Ranking)이 있는데 이러한 관점에서 SEO의 정의는

“웹사이트를 웹 검색 크롤러가 잘 읽어갈 수 있도록 만들고, 각 페이지가 트래픽 유입을 일으킬 수 있는 주제로 색인될 수 있도록 하며, 검색 결과에서 높은 랭킹을 얻을 수 있도록 페이지별로 태깅과 콘텐츠를 최적화하는 것"

 

SSG란?

Static Site Generator (정적 사이트 생성기)

• 정적사이트(static site) : HTML, CSS, JavaScript로만 만들어진 사이트.

ex) 가장 많이 사용하는 방식은 Markdown으로 글을 쓰고 정적사이트 생성기를 통해서 블로그로 만드는 것

사용하는 곳

정적인 정보를 다루는데에 적합

• 정보 변화가 크지 않은 프로젝트 홈페이지, 튜토리얼등.
  • 개인 블로그나 Github 프로젝트 소개
• 사이트 소유자만이 생성/수정할 수 있는 곳

웹페이지의 모양이 정적이라는 것은 아니며 Javascript가 동작되므로 애니메이션이나 각종 효과는 동작 가능하다. 다만 해당 웹페이지 내에서 제공한 정보 이외의 변형이 쉽지 않다는 뜻이다. 동적 컨텐츠도 플러그인이나 각종 연동을 하면 불가능하지는 않다. 많은 곳에서 댓글 시스템은 주로 Disqus라는 서비스를 사용하고 있다.

SSG의 장점

모든 사이트가 동적일 필요는 없으며, 이로 인해 얻는 장점 중에

• html만 제공하면 되므로 웹서버 설정이 간편하다.
• DB관리등 운영에 필요한 자원 소모가 거의 없다.
• 기본 컨텐츠가 md 파일이므로, 다른 플랫폼으로 이전이 쉽다.

 

Gets by

React 컴포넌트를 사용할 수 있다는 점에서 매우 큰 인기를 얻은 것으로 보인다. 홈페이지 정보를 보니, 정적 컨텐츠 외에 동적 데이타를 GraphQL을 사용해서 다룰 수 있다.

Gatsby는 React를 사용하는데 웹사이트를 쉽게 제작할 수 있도록 편의 기능을 많이 제공하고 있다.

 

동작방식

웹사이트를 만들려면 데이터가 필요하다. Gatsby에서는 이 데이터를 가져오는 곳을 데이터소스라고 부르는데 여기서 데이터 소스는 Wordpress같은 CMS 도구가 될 수도 있고 다른 정적 사이트 생성기처럼 Markdown 파일이 될 수도 있고 API 등을 통해서 다른 곳에서 가져올 수도 있다. 플러그인 시스템이 잘 되어 있어서 다양한 데이터소스에서 데이터를 가져올 수 있다.

Gatsby는 기본적으로 GraphQL을 사용해서 데이터소스에서 데이터를 가져온다. 플러그인을 이용해 RESTful API에서 데이터를 가져올 수도 있지만 GraphQL이 Gatsby에 포함되어 있어서 훨씬 쉽게 쓸 수 있고 원하는 데이터를 선택해서 가져올 수 있다.

웹사이트는 React를 이용해서 만든다. 코드는 React를 이용해서 컴포넌트 작성하듯이 사용하지만, 공통 레이아웃을 관리하거나 페이지를 생성하거나 데이터소스와 컴포넌트를 연결하거나 하는 기능을 Gatsby에서 제공하고 있어서 쉽게 만들 수 있다.

이를 빌드하면 정적 사이트로 만들어 준다. 여기서 SPA라고 하지 않고 정적사이트로 만든다는 부분이 중요한데 CMS나 파일 등의 데이터 소스에서 GraphQL로 가져온 데이터를 빌드할 때 모두 가져와서 정적파일의 데이터로 포함한다. SPA라고 한다면 API로 가져오는 로직이 소스에 들어있고 사용자가 SPA 사이트를 실행할 때 API로 가져오게 되지만 Gatsby는 정적 사이트를 만들어주므로 빌드 시에 GraphQL로 데이터를 가져와서 빌드된 배포 파일에 포함 시킨다. 그러므로 사이트를 운영할 때 데이터소스로 이용한 API 서버나 파일은 제공하지 않아도 된다. 이 부분이 다른 도구들과 Gatsby를 가장 다르게 만들어주는 특징이라고 생각한다.

⇒ 정적사이트는 GraphQL로 가져온 데이터를 빌드할 때 모두 가져와 정적 배포파일을 만듦.

SPA는 소스에 API로 데이터를 가져오는 로직이 들어있고 SPA실행시 API로 데이터가 들어옮.

 

 

---

[참고]

SEO

https://www.ascentkorea.com/what-is-seo/

https://myseolabo.com/seo/what-is-seo/

SSG

https://62che.com/blog/vuepress/정적-사이트-생성기란.html

Getsby

https://blog.outsider.ne.kr/1426