This document aims to resolve the difficulties faced by local users learning Framer due to the lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope this is of some help to Framer users.

What is Infinite Scrolling?

Infinite Scrolling is an interaction that allows users to continuously scroll through a page, providing a smooth reading experience. However, there are several important SEO (Search Engine Optimization) considerations to keep in mind. In particular, it can affect CLS (Cumulative Layout Shift), one of the Core Web Vital metrics, and the way search engines crawl websites.

Therefore, when using Infinite Scrolling, meticulous SEO settings are needed. This guide will help minimize SEO impact while maintaining a seamless page experience.

1. What is CLS?

Google defines a Layout Shift as follows:

A layout shift occurs when a visible element on a page changes its size or position, affecting the location of surrounding content.

CLS is a metric that quantifies the total sum of all unexpected layout shifts that occur while a page is open.

For example, when using Infinite Scrolling, if new content loads and pushes the page footer down, CLS may occur.

2. Tips to Minimize SEO Impact

Google prioritizes sites with stable, user-friendly layouts, so a high CLS score can negatively impact site rankings.

When using Infinite Scrolling, prevent the layout from becoming unstable, which can increase CLS, by avoiding the placement of fixed-position elements like the footer below loading content.

This helps maintain a low CLS score and protect your SEO rating.

Additionally, when using the Infinite Scrolling feature, it is recommended to monitor the CLS score and site rankings through the Google Search Console.

3. Impact on Crawling

Since Infinite Scrolling is based on JavaScript, crawlers that do not execute JavaScript may not read the content. As a result, it can negatively impact the way search engines and crawlers determine the importance of links within a site.

Fortunately, Google's crawler is an exception as Google loads a website in a window approximately 12,000 pixels tall. Framer's Infinite Scrolling mechanism takes viewport height into account and loads as much content as possible, allowing Google to properly recognize and crawl content up to that height.

Note: You can verify how many items Google has crawled by inspecting the actual crawled page in the Search Console.

4. Tips to Reduce Crawling Issues

Refer to these tips to minimize negative impact on crawling when using Infinite Scrolling.

• Build internal links based on topic relevance: Connecting links from each page to other pages related by topic helps crawlers easily understand the site structure.

• Add previous/next page navigation: Adding “Previous Post” and “Next Post” links at the bottom of each CMS page provides additional paths for crawlers to follow while also aiding users in navigating content.

• Create an HTML sitemap and link it in the footer: Unlike the existing sitemap.xml provided by Framer, an “HTML sitemap” is a general page that provides an overview of all links on the website, helping both users and crawlers find related links more effectively.

This article is translated and adapted from Framer's official blog content, ‘Infinite scrolling and SEO’.