This document is intended to help domestic users learning Framer overcome the difficulties caused by the lack of resources in Korean. We have translated content from the official blog and added practical information. We hope this will be of some small assistance to those of you using Framer.

What is overlay content?

Overlay content refers to windows or panels that appear over the screen when a user clicks a button or performs a specific action. Simply put, it's content that pops up over an existing page, like a popup window or a sliding menu.

• Tooltips or sidebar panels: Information windows that appear next to an element when a user hovers over or clicks it

• Modal windows: A popup that appears in the center and blurs the background when a button is clicked

• Mobile menus: A menu that covers the entire screen when the hamburger button is clicked

In Framer, overlays are usually implemented by giving a Frame component a Fixed Position and toggling the Visible property On/Off based on specific triggers, or by using the Overlay component to control visibility in a state-based way.

Why isn't overlay content searchable?

While Google is quite adept at understanding web pages these days, it still does not view them like a person would. Specifically, content that is not visible when a page first loads is rarely crawled. Since Framer overlays are not rendered when a page first opens for performance and animation reasons, Google considers any text or links within them as “initially non-existent information.” As a result, content inside overlays does not get exposed to search engines and therefore does not contribute to the site's SEO at all.
Note : Crawling refers to the process by which search engines (like Google or Naver) automatically collect and analyze the text, images, links, and structure of website pages.

Navigation bars are no exception.

If you use overlays to hide and show menus or links in a navigation bar, this could also be problematic. For instance, if a page is only accessible via links within an overlay menu, it may appear to have no internal links, rendering the page an ‘Orphan Page’ that search engines can't discover.

Is there a solution?

Unfortunately, there is no direct way to make Google crawl content inside overlays, but the following workarounds can help mitigate the issue:

• Ensure important links are also placed in normal areas
  Example: Add text links to the footer of the page

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

This article is an adapted translation of Framer's official blog post ‘Fixing uncrawlable overlay content.’