Are multiple H1 tags in Framer a problem?

Why does this happen?

The issue occurs because Framer duplicates certain elements and uses CSS media queries to dynamically hide or show them at different breakpoints. This approach is intentional and essential for optimal performance and accessibility.

In other words, the duplicated H1 tags are present in the rendered HTML, which is why SEO tools detect this "issue." However, it's important to note that SEO tools perform a much simpler HTML analysis compared to Google.

How Google "reads" a page

Google uses Chromium in a headless environment to run pages, rendering both CSS and JavaScript files like a normal browser. This process ensures Google accurately understands and indexes a website’s visible content, including responsive and dynamic elements.

As a result, Google can detect elements hidden by CSS but generally ignores them since they are not visible to users. Spotting hidden content is a key mechanism in Google’s algorithm, allowing it to identify manipulative techniques used to deceive search engines.

Conclusion

Googlebot uses a headless Chromium browser to render pages, processing both CSS and JavaScript files. This ensures Google accurately understands a website’s content, including visible and hidden elements.

Thus, issues like multiple <h1> tags from CSS media queries are generally not a problem, as Googlebot can discern which elements are visible and relevant.