This document aims to alleviate the difficulties experienced by domestic users learning Framer due to the lack of Korean resources by translating the content of the official blog into Korean and adding practical information. We hope this will be of some help to those using Framer.

What is overlay content?

Overlay content is a window or panel that appears over the screen when the user clicks a button or performs a specific action. Simply put, it's content like a popup or sliding menu that appears floating over the existing page.

• Tooltips or sidebar panels: Information windows that appear next to an element when you hover over it or click

• Modal windows: A popup that appears in the center when a button is clicked, with the background blurring

• Mobile menus: Menus that open and cover the entire screen when the hamburger button is pressed

In Framer, overlays are typically implemented by giving the Frame component a Fixed Position and toggling the Visible property On/Off based on specific triggers, or you can directly use the Overlay component to control visibility based on state.

Why isn’t overlay content indexed?

Google is quite adept at understanding web pages these days, but it still doesn't view pages like a human. Particularly, it hardly crawls content not visible on the screen when the page first loads. Since Framer overlays aren't rendered when the page initially loads for performance and animation reasons, even if there are texts or links within an overlay, Google considers it “information that isn’t initially present.” As a result, content within overlays doesn't get exposed to search engines, providing no SEO benefit to the site.
Note: Crawling is the process by which search engines (like Google, Naver, etc.) automatically collect and analyze a website's text, images, links, and structure.

Navigation bars are no exception.

If navigation bars use overlays to hide and show menus or links, this can also be problematic. For example, if a page can only be accessed via links in an overlay menu, it might appear to have no internal links, making that page an “Orphan Page” that search engines cannot find.

Is there a solution?

Unfortunately, there isn't a way to make Google crawl content within overlays, but you can mitigate the issue with these workarounds:

• Ensure important links are also placed in regular areas
  Example: Add text links in the Footer

• Provide a sitemap or collection of links outside of the overlay
  Example: Create a separate HTML sitemap page

This article is a translated and adapted content from Framer's official blog, ‘Fixing uncrawlable overlay content’.