소개
JAMstack은 JavaScript, APIs, Markup의 약자로, 웹 개발 방식의 한 가지입니다. 이 방식은 정적 사이트 생성기와 클라이언트 측 JavaScript, 마크업 언어 등을 활용하여 동적인 웹사이트를 구축하는 것을 지향합니다. JAMstack은 서버리스 아키텍처를 사용하므로 확장성과 보안성이 뛰어납니다.
그러나 JAMstack을 적용한 웹사이트를 검색 엔진 최적화(SEO)하기 위해서는 몇 가지 기법을 알고 있어야 합니다. 이번 블로그 포스트에서는 JAMstack과 SEO를 함께 고려하여 웹사이트를 최적화하는 방법에 대해 알아보겠습니다.
정적 사이트 생성기 사용하기
JAMstack에서 가장 일반적으로 사용되는 방법은 정적 사이트 생성기를 통해 사이트를 만드는 것입니다. 정적 사이트 생성기는 사전에 사이트의 모든 페이지를 미리 생성하고 HTML 파일로 저장합니다. 이렇게 생성된 정적 파일은 서버에 호스팅되고 클라이언트에게 전송됩니다.
정적 사이트 생성기를 사용하면 검색 엔진이 사이트의 모든 페이지를 크롤링하고 색인할 수 있습니다. 이는 SEO에 매우 중요한 요소입니다. 대부분의 정적 사이트 생성기는 사이트맵을 자동으로 생성하여 검색 엔진에 사이트를 제출하는 기능을 제공합니다.
Meta 태그 사용하기
Meta 태그는 HTML 페이지의 메타 데이터를 정의하는 데 사용됩니다. 검색 엔진은 Meta 태그를 활용하여 웹사이트의 내용과 구조를 이해하고 해석합니다. 따라서 Meta 태그를 올바르게 사용하는 것은 SEO에 매우 중요합니다.
Meta 태그 중에서도 “description” 태그는 웹사이트의 요약 설명을 제공합니다. 이 설명은 검색 결과에 표시되므로 사용자에게 웹사이트의 내용을 미리 알려줄 수 있습니다. 또한, “title” 태그는 페이지의 제목을 정의하고, “keywords” 태그는 페이지와 관련된 키워드를 정의합니다.
사전 렌더링(pre-rendering)과 클라이언트 사이드 렌더링(CSR)의 적절한 조합
JAMstack에서는 사이트의 일부분은 사전 렌더링으로 생성하고, 나머지는 클라이언트 사이드 렌더링으로 처리하는 방식을 사용할 수 있습니다. 사전 렌더링은 검색 엔진이 HTML을 크롤링하고 색인하기 쉽도록 합니다. 반면, 클라이언트 사이드 렌더링은 동적인 콘텐츠를 로딩하거나 상호작용을 위해 사용됩니다.
이 두 가지 방식을 적절하게 조합하면 검색 엔진 최적화를 할 수 있습니다. 예를 들어, 사이트의 주요 컨텐츠는 사전 렌더링으로 생성하여 검색 엔진이 크롤링할 수 있도록 하고, 동적인 요소는 클라이언트 사이드 렌더링으로 처리합니다.
요약
JAMstack은 효율적인 웹 개발 방식으로서 많은 장점을 가지고 있습니다. 그러나 SEO 관점에서는 몇 가지 고려사항이 필요합니다. 이번 포스트에서는 JAMstack과 SEO를 함께 고려하여 웹사이트를 최적화하는 몇 가지 기법을 살펴보았습니다. JAMstack을 사용하면서도 검색 엔진에서 웹사이트를 잘 검색할 수 있도록 중요한 요소들을 고려하는 것이 필요합니다.
References: