How do I fix content within overlays that is not crawlable on my website?

Why Content on Overlays Doesn’t Get Crawled

Google has made tremendous progress in the way it “understands” web pages, but it is still not as effective as a normal user.

Without delving too deeply into the details of how the crawling process works or how Google renders JavaScript files, the simple rule of thumb is that search engines will not see anything that isn’t available upon the first load.

Overlays are not rendered on the page during the initial load, which ensures better performance, improved HTML output, and allows for animations based on Framer Motion.

As a result, everything contained within an overlay, whether it is fixed or relative, is technically not present on the page during the first render. Consequently, it will not be crawled and, subsequently, indexed (i.e., used for ranking purposes).

How to Fix This

Unfortunately, there is no effective way to change or override this behavior. If you have content or links that you want Google to discover, overlays are not an ideal place to store them.

This can also pose problems for navigation bars that use overlays to hide or show links, as Google will not pick up those links.

If you have a page on your website that is only linked to from an overlay in the navbar, that page will technically be an orphan page, as there will be no detectable internal links for crawlers to follow.

In such cases, you may want to add links to those pages in the footer, in text that is not part of overlays, or in an HTML sitemap.

Conclusion

Due to the way Google crawls pages, content on overlays will not be discovered. Therefore, it is advisable to avoid using overlays for important content or links that you need Google to find and index.