SEO 친화적인 인피니티 스크롤

심재철
4 min readDec 11, 2020

요즘 웹사이트나 앱을 보면 인피니티 스크롤로 구현된것들이 많습니다.

인피니티 스크롤은 UX측면에서 엄청나게 많은 컨텐츠를 최소한의 노력으로 소비하게 만드는데 아주 큰 장점이 있습니다. 덕분에 유저의 이탈률과 리텐션에 아주 긍정적인 역할을 합니다. 반면 스크롤을 해야만 다음 컨텐츠가 나오기 때문에 SEO에는 안좋습니다.

페이지네이션 방식은 유저가 특정 컨텐츠를 찾으러 사이트에 들어왔을때 좋은 방법입니다. 예를들면, 구글 검색 페이지 하단, 이커머스 사이트를 생각해보시면 됩니다. 무언가 검색하러 들어왔고, 특정 상품을 찾으러 들어왔기 때문에 인피니티 스크롤 보다는 페이지네이션이 더 좋은 방법인 것이죠.

근데, 이거 잘 모르고 사용하면 SEO에 안좋은걸 알고 계셨나요?

검색엔진은 페이지에 들어온 후에 a태그의 내부링크를 타고 사이트 내부를 돌아다니면서 각 페이지를 색인하게 됩니다. 올바르게 각 페이지가 색인 되면 검색엔진에서 각 페이지들이 노출되게 되는거죠.

그런데, 아무런 처리 없이 인피니티 스크롤을 구현하게 되면 이런 문제가 생깁니다.

인피니티 스크롤의 첫페이지를 제외한 나머지 페이지들은 검색엔진이 제대로 읽어가지 못할 확률이 큽니다. 왜냐면, 봇은 유저의 행동까지는 시뮬레이션 하기가 힘들기 때문입니다.

즉, 스크롤이 바닥에 닿아야만 컨텐츠가 나오는 방식인 인피니티 스크롤은 그냥 사용했을때 SEO에 안좋을 수 밖에 없습니다.

그래서 헤드 태그 내부에

<link rel="next" href="https://website.com/page/3/>
<link rel="prev" href="https://website.com/page/1/>

이런식으로 이전페이지와 다음페이지의 URL을 넣어놓고 봇이 읽어갈 수 있도록 하는 방법을 사용합니다.

그러나, 이 트윗에도 보시다시피 2019년에 구글에서 prev, next를 사용하지 않기로 했답니다.. 유저가 단일 페이지의 컨텐츠를 선호해서 그렇게 결정했다고 합니다. (정확히는, 광고 수익을 노리고 컨텐츠를 여러 페이지로 고의로 분산시킨 사이트들이 많아지면서 UX를 저하시키고 있기 때문이라고 함.)

그렇다면 이전에 구현해놨던 prev, next를 제거해야 하는가? 하면 그렇지 않다.

bing tweet

여전히 bing과 같은 브라우저는 prev, next를 사용하며 사이트 구조를 이해하기 위한 힌트로 사용한다고 합니다. 각 브라우저마다 봇이 동작하는 방식이 다르기 때문에 웬만하면 넣는게 좋을 것 같긴 합니다.

올바른 pagination 방법

이런식으로 다음페이지, 이전페이지로 넘어갈 수 있도록 내부 링크를 만드는 방법이 있습니다.

또는 전체보기 버튼을 만들어서 구글 봇에게 노출 시키고 싶은 컨텐츠를 한번에 불러올수있도록 하는 방법도 있다고는 하는데.. 양이 엄청 많을텐데 이게 가능할지 모르겠네요.

--

--