セマンティックタグとは何ですか？

セマンティック（semantic）とは「意味の、意味論的な」という意味があります。つまり、セマンティックタグとは、単に文字の大きさや形を変えるのではなく、該当コンテンツがウェブサイト内でどのような役割を果たすかを、ブラウザや検索エンジンに明確な意味を伝えるタグのことです。

Framerのセマンティックタグ

Framerでは、テキストスタイルを作成する際にh1～h6、pのようなセマンティックタグが自動的に割り当てられます。

これらのタグは、Accessibilityパネルを使用して特定の要素ごとに個別に設定を変更することができます。これにより、あなたが望むとおりにサイトの意味論的構造を細やかにカスタマイズすることができます。

セマンティックタグを利用すべき理由

よく構成されたレイアウトは、検索エンジン最適化（SEO）とウェブアクセシビリティを同時に改善します。ヘディングやサブヘディングを適切に使用することで、視覚障害や認知障害のあるユーザーの可読性を高めることができます。さらに、スクリーンリーダーを使用する方々が情報をより簡単に見つけてナビゲートできる環境を作ります。

セマンティックタグの活用法

明確なヘディング構造を使用することは、ウェブサイト制作において非常に重要なプロセスです。
一番重要なメインタイトルには<h1>タグを付け、その次の内容は<h2>や<h3>ヘディングを使って体系的に整理してみましょう。

このようなアプローチは、ユーザビリティを向上させ、大きすぎるテキストの塊を防ぎます。また、検索エンジンがあなたのコンテンツの階層構造と重要性を正確に理解するのに大いに役立ちます。

よくある質問（FAQ）

Q. 1ページに<h1>タグを複数使用できますか？

• はい。技術的には可能ですが、推奨しません。セマンティック構造の原則上、<h1>はページの最も重要なテーマを表しているため、検索エンジン最適化（SEO）の観点から、ページごとに1つだけ使用することをお勧めします。

Q. テキスト以外のフレーム(Frame)要素にもセマンティックタグを指定できますか？

• はい。Framerでは、テキストだけでなく、フレームレイヤーを選択した後にAccessibilityパネルでタグを設定できます。

Q. 画像内に含まれた文字もセマンティックタグとして認識されますか？

• いいえ。画像ファイル（JPG、PNGなど）に含まれた文字は、検索エンジンやスクリーンリーダーがテキストデータとして読むことができません。画像に含まれる重要なテキスト情報は、Alt Textフィールドに入力すれば検索エンジンがその画像の意味を理解し、SEOに反映させることができます。

本記事は、Framer公式ブログの『Text styles and semantic tags』を翻訳・脚色したコンテンツです。