Content within Overlays on my website is not crawlable. How do I fix it?

Why content on overlays doesn’t get crawled

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

Without getting into too much detail about 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’s not available upon first load.

Overlays are not rendered on the page on first load, as this ensures better performance, a better HTML output and also allows animations based on Framer motion.

Based on that, everything that is on an overlay, be it a fixed or a relative one, is technically not on the page on first render, so it will not get crawled and, subsequently, indexed (aka used for ranking purposes).

How to fix this

Unfortunately, there’s no real way to change or overwrite this behaviour. If you have content or links that you want Google to discover, overlays are not a good place to store them.

This can also be relatively problematic for nav bars that use overlays to hide/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, then that page will technically be an orphan page, as there will be no detectable internal links that crawlers can follow.

If that’s the case, you may want to add those pages to the links in the footer, in some text that is not on overlays, or in an HTML sitemap.

Conclusion

Due to how Google crawls pages, content on overlays will not be discovered. Therefore, try to avoid using them for important content or links that you need Google to find and index.