Infinite scrolling and SEO
Infinite scrolling offers a seamless reading experience, but there are a few SEO related concerns you should consider. Notably, the Core Web Vital “Cumulative Layout Shift” (CLS) and website crawling might be impacted.
What is Cumulative Layout Shift?
A layout shift is defined as follows by Google:
A layout shift occurs when a visible element on your page changes position or size, affecting the position of content around it.
CLS is a metric that measures the total of all unexpected layout shifts that occur during the page’s lifespan. When using infinite scrolling, for example, a CLS might occur if the footer is visibly pushed down by newly loaded content.
How can I minimize the impact on SEO?
High CLS can negatively affect your site’s rankings, as Google prioritizes sites with stable, user-friendly layouts. Infinite scrolling can lead to high CLS if not implemented with attention to layout stability. To reduce layout shifts, avoid placing key elements like footers or other fixed-position elements below the loading content. This approach will help keep CLS low and protect your SEO.
We recommend to monitor your Google Search Console when using the infinite scroll feature.
Impact on crawling
Infinite Scrolling requires JavaScript to be enabled, so any crawler that does not run JavaScript, will not process the content. This can have negative impact on link discovery and how crawlers determine same-site link importance.
The Google crawler is an exception to this rule, as it loads websites in a 12.000 px high window (source). Framer’s infinite scrolling mechanism automatically considers the viewport and loads as many items as it can fit. Up to that viewport height, you can expect Google to crawl links as expected. You can verify how many items it crawls by inspecting the crawled page in the Search Console.
To minimize the negative impact on crawling, here are a few tips you can follow:
Interlink pages based on topic relevance: Ensure that each page links to other relevant pages within your site to improve crawlability
Add a previous/next navigation at the end of each CMS page. This provides additional paths for crawlers to follow and helps users navigate your content.
Create an HTML “sitemap” and link it from the footer. Compared to the traditional sitemap.xml Framer offers, a “HTML sitemap” is a regular page, where you provide an overview to all links on the entire website. This allows both users and crawlers to find all relevant links.