H1タグが複数という警告、なぜ出るのでしょうか？

Framerでページを制作した後、SEO分析ツールをかけると「H1タグが複数あります」という警告メッセージを受けることがあります。このようなメッセージが表示される理由は、Framerがレスポンシブウェブデザインを実現するために同じ要素を複数の位置に複製して使用するからです。
例えば、デスクトップとモバイル環境でそれぞれ異なる位置に同じタイトルを表示するためにH1要素を重複して配置し、メディアクエリ（CSS）で状況に応じて要素を隠したり表示したりする過程で、HTMLコードにはH1タグが複数存在しているように見えても、実際の画面では1つのタイトルだけが露出するため、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. Framer編集画面左上の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?』を翻訳・アレンジしたコンテンツです。