This document aims to help Korean users learn Framer by addressing the challenges posed by the lack of Korean materials. We've translated content from the official blog into Korean and added practical information. We hope this provides some assistance to those using Framer.

Why does the warning about multiple H1 tags appear?

When you run an SEO analysis after creating a page with Framer, you may receive a warning message saying, 'There are multiple H1 tags.' This message appears because Framer duplicates the same elements in different locations to implement responsive web design.
For example, to show the same title in different positions on desktop and mobile, H1 elements are placed redundantly. Although HTML might have multiple H1 tags, only one title is displayed on the actual screen, so it doesn't significantly affect SEO.

How does Google analyze a page?

Google doesn't just look at HTML code; it actually renders the page using a tool called Headless Chromium browser. Simply put, it analyzes the page exactly as we see it in a browser. Google automatically ignores hidden elements (display: none, etc.), so hidden duplicate H1 tags don't affect search engine analysis.

Note: A Headless Chromium browser is a tool to open and analyze websites without a display screen (it's used for programs to automatically read and process pages instead of a person).

Is it okay to ignore SEO tool warnings?

Since SEO tools are not as sophisticated as Google, they perform a simple analysis based solely on HTML code. That's why you might get warnings about multiple H1 tags. However, these warnings differ from Google's actual page evaluation methods, so if you understand Framer's design intent, you can safely ignore them.
If the warning bothers you, try the methods below.

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

• Use aria-hidden="true" or display: none for semantic override (to make sure the tags are ignored by Google while maintaining accessibility standards).

aria-hidden="true" Settings (Accessibility Attribute)

While you can't directly input HTML attributes in Framer elements, you can use Code Components to do so.

1. Click the Assets tab at the top left of the Framer editing screen (or find the “Code” item on the top right + button)

2. Click the Code item near the bottom

3. Select New Code Component

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

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

display:none Settings (Completely Hide)

1. Select the element you want to hide

2. In the right properties panel, find the Visibility or Display section and set to Hidden

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

It will render in HTML as style="display: none", and Google will recognize and ignore it.

This article is an adaptation and translation from Framer's official blog content, ‘Are multiple H1 tags in Framer a problem?’.