This document aims to address the challenges faced by Korean users learning Framer due to the lack of Korean resources. It translates official blog content into Korean and adds practical information. We hope it provides some help to those using Framer.

Why do I get a warning about multiple H1 tags?

When you create a page with Framer and run an SEO analysis tool, you might receive a warning that says 'There are multiple H1 tags.' This occurs because Framer duplicates the same elements in multiple locations to implement responsive web design.
For example, to display the same title in different positions on desktop and mobile, the H1 element is duplicated, and media queries (CSS) control which elements are hidden or shown. Although multiple H1 tags appear in the HTML code, only one title is displayed on the screen, so it doesn't significantly affect SEO.

How does Google analyze pages?

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

Note: The Headless Chromium browser is a tool that opens and analyzes websites through code without a screen (it’s like a program automatically reading and processing the page instead of a person).

Can SEO tool warnings be ignored?

SEO tools are not as sophisticated as Google and perform a simple analysis based only on HTML code. This is why you might get a warning about having multiple H1 tags. However, this warning differs from Google's actual page evaluation method, so if you understand Framer's design intent, it's okay to ignore it.
If the warning still bothers you, try using the methods below.

• Use tags other than H1 (like h2, h3, etc.) for the same text and adjust the style.

• Use aria-hidden="true" or display: none to semantically disregard the element (you can keep accessibility standards while making Google ignore the tag).

aria-hidden="true" Setting Method (Accessibility Attribute)

Although you can't directly input HTML attributes in Framer, you can use a code component to do so.

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

2. Click the Code item at 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, it is visible on the screen but ignored by screen readers and search engines.

display:none Setting Method (Completely Hiding)

1. Select the element you want to hide

2. In the right property panel, find Visibility or Display and set it to Hidden.
   Or, you can specify Visible/Hidden differently for specific breakpoints (mobile/desktop, etc.).

It is rendered in HTML as style="display: none", and Google recognizes and ignores it.

This article is a translated and adapted version of Framer’s official blog post ‘Are multiple H1 tags in Framer a problem?’.