본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Infinite Scrolling이란?

무한 스크롤(Infinite Scrolling)은 사용자가 페이지를 계속 스크롤할 수 있게 하여, 페이지를 읽는 데에 있어서 매끄러운 경험을 제공해주는 인터렉션입니다. 하지만 이런 편리함 뒤에는 SEO(검색엔진 최적화)와 관련된 몇 가지 중요한 고려사항이 있는데요. 특히 Core Web Vital 중 하나인 CLS(Cumulative Layout Shift, 누적 레이아웃 변경)와 웹사이트의 크롤링(Crawling) 방식에 영향을 줄 수 있습니다.

이 때문에 Infinite Scrolling을 사용할 때에는 SEO 측면에서의 꼼꼼한 세팅이 필요한데요. 해당 가이드를 통해, SEO에 미치는 영향을 최소화 하며, 매끄러운 페이지 경험까지 챙길 수 있도록 도움을 받아보시길 바랍니다.

1. CLS란 무엇일까?

Google은 레이아웃 이동(Layout Shift)을 다음과 같이 정의합니다.

레이아웃 변경은 페이지에서 보여지는 요소의 크기나 위치가 변경되어, 주변 콘텐츠의 위치에 영향을 미칠 때에 발생합니다.

CLS는 페이지가 열려 있는 동안 발생하는 모든 예상치 못한 모든 레이아웃 변경의 총합을 측정하여, 수치로 나타내는 지표입니다.

예를 들어 Infinite Scrolling을 사용할 때, 새로운 콘텐츠가 로드되면서 페이지 하단의 Footer가 아래로 밀리는 현상이 발생한다면, 이 때에 CLS가 발생할 수 있습니다.

2. SEO에 미치는 영향을 최소화 하는 팁

Google은 안정적이고 사용자 친화적인 레이아웃을 갖춘 사이트를 우선적으로 평가하기 때문에, 사이트의 CLS 수치가 높으면 사이트 순위에 부정적인 영향을 줄 수 있습니다.

Infinite Scrolling을 사용할 때, 레이아웃이 불안정해지면 CLS가 높아지므로, 이를 방지하기 위해서는 Footer와 같이 위치가 고정된 요소를 로딩되는 콘텐츠 아래에 배치하지 않는 것이 좋습니다.

이렇게 하면, CLS의 수치를 낮게 유지하고 SEO 점수를 보호하는 데에 도움이 됩니다.

또한, Infinite Scrolling 기능을 사용할 때는 Google Search Console을 통해 CLS 수치와 사이트의 순위를 모니터링하는 것을 권장합니다.

3. 크롤링(Crawling)에 미치는 영향

Infinite Scrolling은 JavaScript를 기반으로 작동하기 때문에, JavaScript를 실행하지 않는 크롤러는 콘텐츠를 읽지 못할 수도 있는데요. 따라서, 링크 검색 엔진 및 크롤러가 사이트 내에 있는 링크의 중요도를 판단하는 방식에 부정적인 영향을 줄 수 있습니다.

하지만 다행히도 Google의 크롤러는 해당 규칙에서 예외인데요. Google은 웹사이트를 약 12,000픽셀 높이의 창으로 로드하기 때문입니다. Framer의 Infinite Scrolling 메커니즘은 Viewport 높이를 자동으로 고려하여, 최대한 많은 콘텐츠를 로드하는 방식입니다. 때문에, 해당 높이까지의 콘텐츠를 Google이 정상적으로 인식하여 크롤링 할 수 있습니다.

Note: Search Console에서 실제 크롤링된 페이지를 검사하여, Google이 몇 개의 아이템을 크롤링했는지 확인할 수 있어요.

4. 크롤링 문제를 줄이기 위한 팁

Infinite Scrolling을 사용할 때, 크롤링에 부정적인 영향을 최소화할 수 있도록 하는 팁을 참고해보세요.

• 주제 관련성에 기반한 내부 링크 구성하기: 각 페이지에서 주제와 연관된 다른 페이지로 링크를 연결해 두면, 크롤러가 사이트 구조를 쉽게 파악할 수 있도록 할 수 있습니다.

• 이전/다음 페이지 네비게이션 추가하기: 각 CMS 페이지 하단에 “이전 글”, “다음 글” 링크를 추가하면, 크롤러가 따라갈 수 있는 추가 경로를 제공해주는 동시에 사용자가 콘텐츠를 탐색하는 데에도 도움이 됩니다.

• HTML 사이트맵 생성 후 푸터에 연결하기: Framer가 제공하는 기존의 sitemap.xml과는 달리, "HTML 사이트맵"은 전체 웹사이트의 모든 링크에 대한 개요를 제공하는 일반적인 페이지입니다. 이렇게 하면 사용자와 크롤러 모두 관련되어 있는 링크 모두를 더 효과적으로 찾을 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Infinite scrolling and SEO’를 번역·각색한 콘텐츠입니다.