Webflow sync, pageviews & more.
NEW

Can search engines crawl text that is visually hidden with a "Show More" or "Read More" button in Webflow?

TL;DR
  • Ensure hidden content is present in the initial HTML and only hidden with CSS or Webflow Interactions, not dynamically injected via JavaScript.
  • Avoid loading content on user interaction and confirm crawlability using Google's URL Inspection Tool.

Text hidden behind a "Show More" or "Read More" button in Webflow is typically still crawlable by search engines—depending on how it’s implemented.

1. Use of Display vs. Rendering

  • If hidden with CSS (e.g., display: none, visibility: hidden): Search engines like Google can still crawl the content, assuming it's present in the page’s initial HTML and not loaded dynamically later.
  • If loaded via JavaScript (e.g., fetched on click): It may not be indexed, especially if the content is added to the DOM only after a user interaction.

2. Best Practices for SEO-Friendly “Show More” Interactions

  • Include all expandable content in the page’s initial HTML.
  • Use minimal JavaScript to toggle visibility (e.g., adding/removing a class that controls opacity or max-height).
  • Avoid dynamically injecting content on click, unless you're using server-side rendering or prerendering solutions.
  • Test with Google’s URL Inspection Tool inside Search Console to confirm visibility.

3. Webflow Implementations That Are Crawlable

  • When you use Webflow’s built-in Interactions to show/hide elements (e.g., toggling a div’s visibility or height), the content remains in the DOM and is indexed by search engines.
  • This method is SEO-safe because the content is delivered on initial page load.

4. What to Avoid

  • Don't rely on dynamic embeds or CMS item loads on click (e.g., using custom JavaScript to load more blog posts on demand).
  • Avoid hiding vital SEO content if it’s not immediately available without user action.

Summary

Search engines can crawl hidden content—as long as it's loaded in the initial DOM and just hidden using CSS or Webflow Interactions. To ensure crawlability, avoid dynamically loading hidden text after user interaction.

Rate this answer

Other Webflow Questions