본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

H1 태그가 여러 개라는 경고, 왜 뜨는 걸까요?

Framer로 페이지를 제작한 후 SEO 분석 도구를 돌려보면, 'H1 태그가 여러 개 있습니다'라는 경고 메시지를 받는 경우가 있습니다. 이러한 메시지가 나타나는 이유는 Framer가 반응형 웹 디자인을 구현하기 위해 동일한 요소를 여러 위치에 복제해서 사용하기 때문입니다.
예를 들어, 데스크톱과 모바일 환경에서 각각 다른 위치에 같은 제목을 보여주기 위해 H1 요소를 중복해서 배치하고, 미디어 쿼리(CSS)를 통해 상황에 따라 요소를 숨기거나 표시하는 과정에서 HTML 코드에는 H1 태그가 여러 개 존재하는 것으로 보이지만, 실제 화면에는 하나의 제목만 노출되므로 SEO에는 큰 문제가 되지 않습니다.

Google은 페이지를 어떻게 분석할까요?

Google은 단순히 HTML 코드만 보는 것이 아니라, Headless Chromium 브라우저라는 도구를 사용해 페이지를 실제로 렌더링합니다. 쉽게 말해서 우리가 브라우저로 보는 모습 그대로 페이지를 분석한다는 것입니다. 이때 Google은 숨겨진 요소(display: none 등)는 자동으로 무시하기 때문에 CSS로 숨긴 중복된 H1 태그는 검색엔진 분석에 영향을 주지 않습니다.

Note : Headless Chromium 브라우저란 화면 없이 코드를 통해 웹사이트를 열고 분석하는 도구입니다.(사람이 보는 대신, 프로그램이 자동으로 페이지를 읽고 처리하는 용도)

SEO 툴의 경고, 무시해도 괜찮을까요?

SEO 툴은 Google만큼 정교하지 않기 때문에 HTML 코드만 보고 단순 분석을 합니다. 그래서 H1 태그가 여러 개라는 경고가 뜰 수 있습니다. 하지만 이 경고는 Google의 실제 페이지 평가 방식과는 달라서, Framer의 설계 의도를 이해하고 있다면 무시해도 괜찮습니다.
혹시 경고가 마음에 걸리신다면 아래의 방법을 사용해보세요.

• 같은 텍스트라도 H1 대신 다른 태그(h2, h3 등)를 쓰고 스타일만 조정

• aria-hidden="true"나 display: none으로 시멘틱 무시 처리 (접근성 기준을 지키면서도 Google이 해당 태그를 무시하도록 설정할 수 있습니다.)

aria-hidden="true" 설정 방법 (접근성 속성)

Framer에서 요소에 직접 HTML 속성을 입력할 수 없지만, 코드 컴포넌트(Code Component)를 사용하면 가능합니다.

1. 프레이머 편집화면 좌측 상단의 Assets 탭 클릭 (혹은 우측 상단의 + 버튼 → “Code” 항목 찾기)

2. 아래쪽에 있는 Code 항목 클릭

3. New Code Component 선택

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

이 컴포넌트를 디자인 캔버스에 배치하면, 해당 요소는 화면에는 보이지만 스크린 리더나 검색엔진에선 무시됩니다.

display:none 설정 방법 (완전히 숨기기)

1. 숨기고 싶은 요소를 선택

2. 오른쪽 속성 패널에서 Visibility 또는 Display 관련 항목을 찾아 Hidden으로 설정

   또는 특정 브레이크포인트(모바일/데스크톱 등)에서만 Visible/Hidden을 다르게 지정할 수도 있습니다.

HTML에서 style="display: none"으로 렌더링 되며, Google도 이를 인식하고 무시합니다.

본 글은 Framer 공식 블로그의 ‘Are multiple H1 tags in Framer a problem?’을 번역·각색한 콘텐츠입니다.