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

• 무한 스크롤
• 단점
• 해결 방법
  • 다만 좀 더 복잡해질 수 있어요

출처: https://im-developer.tistory.com/196

무한 스크롤

웹 혹은 앱을 사용하다보면 위와 같은 방식의 페이징 기법을 많이 볼 수 있습니다.
핀터레스트, 페이스북 등 많은 서비스들이 이를 채택하고 있어요. 방대한 양의 컨텐츠들을 복잡한 공수 없이 사용자 친화적인 UX를 이용해 보여줄 수 있다는 것이 가장 큰 장점이죠.

1. 세로 혹은 가로 방향으로 우선순위가 높은 컨텐츠부터 낮은 컨텐츠까지 배치한다.
2. 스크롤이 가능하게 만든다.
3. 스크롤이 끝에 거의 도달하면 다음 컨텐츠들을 불러와서 스크롤 영역을 확장한다.
4. 불러 올 컨텐츠가 없어질 때 까지 반복한다.

위와 같은 로직을 이용합니다.

단점

아마 웹을 어느정도 개발해보신 분들이라면 위 로직을 보고 한가지 의문을 가질 것입니다.
SEO는 어떻게 충족하면 되지? 라고 말입니다.
검색 엔진들은 서비스 되고 있는 웹사이트에 크롤러 봇이 방문하여 현재 로드 된 컨텐츠들의 HTML 코드를 읽어서 이를 검색 엔진에 뿌려주는 형태로 동작합니다.
그런데 컨텐츠들이 페이지 호출 시 전부 로드 된 상태가 아니라, 스크롤을 할수록 점진적으로 나타난다면 크롤러는 이를 이해하지 못하고 초기 로드 된 컨텐츠를 제외한 나머지 컨텐츠들을 검색 엔진에서 제외할 것입니다.

해결 방법

위 이슈를 해결하기 위한 방법은 <a> 태그를 이용하는 것입니다.
크롤러 봇은 웹 서비스의 진입점으로 진입하여 사이트를 탐방하는데, 이 진입점에 존재하는 각종 링크 정보들을 읽어들여서 크롤링 할 다른 페이지들에 대한 정보를 받아옵니다.
이를 계속 반복하여 더 이상 탐색할 링크가 없을 때까지 진행하게 됩니다.
이러한 점을 이용하여, 무한 스크롤 페이지 어딘가에 눈에 안보이는 <a> 태그를 사용하여 다음 컨텐츠가 로드 되는 페이지의 URL을 기입하면 됩니다.

  const InfiniteScroll = () => {
    return (
      <div>
        <Card />
        <Card />
        <Card />
        ...
        <InfiniteScrollTrigger />
        <a href="/infinite-scroll?page=5">
        <a href="/infinite-scroll?page=7">
      </div>
    );
  };

  export default InfiniteScroll;
  // 현재 페이지는 6페이지

다만 좀 더 복잡해질 수 있어요

일반적인 페이지 스크롤 로직을 구현한다고 한다면 현재 보여지는 페이지만 대응하면 되는 일이지만, SEO를 대응하려 한다면 URL에 넘기는 페이지 쿼리에 따라 SSR 로직을 따로 구현해야하고 중간 페이지부터 진입하는 사람들을 위해 양방향 스크롤 페이징도 지원해야 하는 추가적인 비용이 들어갈 수 있습니다.