この文書はFramerを学ぶ国内ユーザーが韓国語の資料不足で困難を感じることを解決するために、公式ブログの内容を韓国語から翻訳し、実務で有用な情報を追加しました。Framerを使用する皆さんに少しでもお役に立てれば幸いです。

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公式ブログの‘Framerで複数のH1タグは問題になるか？’を翻訳・アレンジしたコンテンツです。