ウェブサイトの見出しにテキストを画像として含めることを検討すべき場合
画像として見出しがあるサイトがたくさんあります。これの利点は何ですか？ htmlにテキストを入れるのではなく、テキストを画像として使用するのがベストプラクティスです。これは、非標準フォントをサポートするためだけのものですか？
テキスト付きの画像ヘッダーを使用する理由：
- テキストはSEOには必要ありません。
- フォントはWeb上で再現できません。
- テキストはロゴとあまりにも密接に統合されているため、2つを分離できません。
テキストをヘッダーとして使用する理由：
- テキストはSEOに必要です。
- テキストは、ブラウザウィンドウに合わせて拡大縮小する必要があります。
- テキストはemベースのフォントサイズに応じて拡大縮小する必要があります。
- テキストは何らかの形で動的である必要があります。
画像を使用する場合は、CSS画像ではなくalt属性を持つタグの使用を検討してください。これは、アクセシビリティの目的にとって重要ですが、SEOにも寄与する可能性があります。
IMO、この種のことで、あなたはSEOよりもユーザビリティ/アクセシビリティに関心を持つべきです（なぜならSEOはそれ自身の面倒を見る傾向があるからです）。ページ見出しは、ドキュメントの非常に重要な部分です。誰もがアクセスできるようにしたいのです。
とは言っても、altテキストを使用するか、JSを使用してテキスト見出しを画像/フラッシュに置き換えることは、良い妥協です。アクセシビリティを維持しながら、きれいできれいなテキストが表示されます。
これを行う最も一般的な正当な理由は次のとおりです。
- Webフォントの埋め込みに関するライセンス/変換/サポートの問題に対処することなく、非標準フォントを使用するため。 Webフォントのサポートは今や独自のものになり始めており、埋め込みWebフォントの取得を簡素化する商用/無料サービスがいくつかありますが、モバイルブラウザでのサポートは制限されています。
- 標準テキストでは不可能な高度に様式化された見出し。ほとんどのブラウザでまだサポートされていないCSS3であっても、定型化されたテキストで達成できることには制限があります。これは通常、広告、コールアウト/プルクォート、またはその他のコンテンツ以外のテキストには良い言い訳ですが、情報提供の目的ではなく、プロモーション/ブランディング/エンターテイメントの目的のサイトには言い訳になります。
これを行う最も一般的な非正当な理由は、Web開発者の無能です。これらは、本文テキストも画像にするWeb開発者、または完全にFlashからeコマースサイトを作成するWeb開発者です。
考慮事項：
- これらの見出しを強調表示またはコピーアンドペーストすることはできません。そのため、代替テキストまたはJS置換を使用している場合でも、使いやすさが大きく影響を受けます。見出しが短くシンプルな場合（「About Us」、「Contact」、「News」など）、これは問題ではなく、Flashを使用してこれを減衰させることができますが、独自の問題があります。
- 個人的には、「コンテキスト検索」と呼ばれるプラグインを使用します。これにより、ページ上のテキストを強調表示し、Firefox用にインストールした検索ツールを使用してコンテキストメニューから簡単に検索できます。同様に、多くの人が辞書ツールチッププラグインを使用して、ダブルクリックするだけでページ上のWordをすばやく検索できるようにします。 Flashはこれを完全に無効にしますが、これは非常に迷惑です。
- 一部の人が好むように、テキストのサイズを動的に変更することはできません。したがって、誰かがフォントサイズを小さくして画面に表示するテキストを増やしたい場合、またはフォントサイズを大きくしてテキストを読みやすくしたい場合は、SOLです。これは、視覚障害者やモバイルブラウザを使用している人に特に当てはまります。
- 画像はうまく折り返されません。そのため、低解像度の画面を使用する場合、レイアウトに大きな問題が生じる可能性があります。何らかのJS回避策と組み合わせると、Flashが少し良くなる場合があります。
- 代替テキストを含めても、ページのセマンティック構造を変更しています。これは、Webクローラー、スクリーンリーダー、およびWebページを処理するその他のソフトウェアに影響を与える可能性があります。繰り返しになりますが、JS置換を使用すると、これを大幅に軽減できます。
サーバー側でいつでもテキスト画像を生成できるので、動的な見出しについては心配しませんが、これを行う前に長い間一生懸命に考える多くの理由があります。そして、あなたがそれをするつもりなら、sIFRのような十分にテストされたJSおよびFlashベースのソリューションを使用することをお勧めします。
編集：
もう1つ-多くの人が使用している回避策の1つ（ただし、倫理に不一致があります）は、画像を使用し、画像の背後またはオフのテキストを含むspan要素を非表示にすることです-画面。これは、クローラーがテキスト、さらにはスクリーンリーダーを表示できることを意味し、これにはCSSのみが必要であり、JSサポートは不要です。一部の人々はこれを「スパム」と考えていますが、キーワードスタッフィングやベイトアンドスイッチSEOではなく、この手法を使用してテキスト画像を記述する方が妥当だと思います。