Why does the warning about multiple H1 tags appear?

After creating a page with Framer and running an SEO analysis tool, you may sometimes receive a warning message that says, 'There are multiple H1 tags.' This message appears because Framer replicates the same element in multiple locations to implement responsive web design.
For instance, in order to display the same title differently for desktop and mobile environments, H1 elements are duplicated and placed in distinct locations. CSS media queries then hide or display elements conditionally, resulting in multiple H1 tags in the HTML code. However, only one title is exposed on the actual screen, so it does not significantly impact SEO.

How does Google analyze pages?

Google does more than just look at the HTML code; it uses a tool called Headless Chromium browser to render the page. Simply put, it analyzes the page exactly as it appears in the browser. Google automatically ignores hidden elements (such as those set to display: none), so hidden, duplicated H1 tags do not affect search engine analysis.

Note: The Headless Chromium browser is a tool that opens and analyzes a website via code without a screen (instead of a person viewing it, a program automatically reads and processes the page).

Is it okay to ignore SEO tool warnings?

SEO tools are not as sophisticated as Google, so they analyze only the HTML code, possibly issuing a warning for multiple H1 tags. However, this warning is different from Google's actual page evaluation method, so if you understand Framer's design intent, you can safely ignore it.
If the warning bothers you, consider the methods below.

• Use different tags (h2, h3, etc.) instead of H1 for the same text and adjust the style.

• aria-hidden="true" or display: none to semantically ignore elements (you can set Google to ignore these tags while still meeting accessibility standards).

aria-hidden="true" setup method (accessibility attribute)

While you cannot directly input HTML attributes to elements in Framer, it is achievable using Code Component.

1. Click the Assets tab in the upper left corner of the Framer editor screen (or find the “Code” item via the + button in the upper right)

2. Click the Code item at the bottom

3. Select New Code Component

export function HiddenHeading() {
  return <h1 aria-hidden="true">숨겨진 제목</h1>;
}

Once you place this component on the design canvas, the element is visible on the screen but ignored by screen readers and search engines.

display:none setup method (completely hide)

1. Select the element you want to hide.

2. Find and set the Visibility or Display field to Hidden in the right properties panel.

   You can also set Visible/Hidden differently for specific breakpoints (such as mobile/desktop).

   
   

This renders with style="display: none" in HTML, which Google recognizes and ignores.

This article is adapted from Framer's official blog content titled 'Are multiple H1 tags in Framer a problem?'.