検索エンジンでインデックス付けされるテキストを含む画像を取得するにはどうすればよいですか？

私は友人のために小さなポートフォリオWebサイトを構築していますが、広告やその他すべてに携わっています。彼女は標準フォントが嫌いで、すべてをカスタムフォントで書くことを望んでいます。

CSSフォント埋め込みは現時点では実際にはオプションではないため、すべてのテキスト（残念ながら多くはありません）は画像として配置されます。

どうすれば画像コンテンツのインデックスを作成できますか？小さなテキスト（リンク、メニューなど）の場合、テキストをalt属性に入れますが、それより長いものについては、それが解決策ではないと思います。私に何ができる ？テキストを画像の横にある非表示のdivに入れますか？

フォントを埋め込む！

いいえ、しかし実際には、埋め込み可能フォントは現在のすべてのブラウザー（FF、Chrome、Safari、Opera）およびIE5.5 +（はい、90年代からIEで動作しています）で動作します。

TTFのアップロードをここから入手してください：http : //www.kirsle.net/wizards/ttf2eot.cgi

コードと2つのファイル（TTF、次にEOT [M $ web font]）が返されます。コピー、貼り付け、アップロード、完了。勝ち勝ち！

そして、画像を使用しないでください:)

ただし、画像を使用していないかのようにマークアップを記述し、すべての要素に背景画像を追加し、text-indent：-9999pxを使用してテキストを非表示にします。ただし、埋め込み可能なフォントを使用してください。さらに、あなたがクライアント/友人である場合、彼女はおそらく古代ブラウザ（つまり、本当に古代、IE4など）を使用している（そうするべきではない）カメラマンです。

彼女がこのWebサイトで彼女自身のフォントを販売しているのでなければ、両方ともCSS埋め込みにもっと取り組むことができると思います（はい、これは今あなたのためのオプションではないが、私は主張します）。

ケースがフォントのより重いグラフィック作品である場合（グラデーションカラー、ねじれた配置、光沢、エンボス、彫刻...）、必要に応じて徹底したCSSオプションをレンダリングすることが本当に不可能な場合は、次のことをお勧めします。

CSS（おそらくスプライト）を介して画像を使用し、アンカーテキストをtext-identで非表示にします。html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

CSS

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

これは1つの手法です。ええ、私はグーグルがそれを罰することができることを知っています、しかし、あなたは知っています、私はこれを使用することによって罰せられる1つのサイトについて聞いたことがありません。

もう1つの方法は、アンカータグ内でimgタグをテキストとともに使用し、CSSを使用してテキストを非表示にし、必要に応じてimgを修正することです。この最後のオプションを使用すると、alt、title、longdescを画像に追加して、インデックス付けされる情報の量と質を高めることができます。

この最後のオプションでさらに進んで、さらに優れた新鮮な解決策を見つけることもできます。HTML5で利用可能なfigureタグとfigcaptionを使用します。アイデアは、アンカー->図-> img + figcaptionを維持することです。

Figcaptionはアンカーテキストロールを作成し、CSSを使用して非表示にできます。

さて、3つのソリューション。一つを選ぶ。最後に行きます。

うん 彼女は自分のサイトのアクセシビリティを破壊し、ページのレンダリングを遅くするなど、他のすべての種類の問題を引き起こしているため、フォントの問題を克服する必要があります。

longdesc画像に属性を追加してみることができると言いました。検索エンジンがどれだけの重みを与えているかを言うのは難しいですが、おそらくゼロよりも大きいでしょう。

Webフォントは現在、すべての主要なブラウザーでほぼ標準となっていますが、さまざまなフォント形式の複雑なクロスブラウザーを把握するのは難しい場合があります。

Googleは、便利なWebフォントAPIとフォントディレクトリを提供しています。

サイト内の他のページにアクセスする唯一の方法としてaltタグを使用しても画像を使用しても、Googleに大きな明瞭さを提供することはできません。

最善の策は、問題を解決するためにページまたはサイトのどこかにテキストリンクが必要であることを友人に納得させることです。たとえば、すべてのテキストリンクを使用してサイトマップページを設定したり、機能するすべてのテキストリンクを使用して各ページにドロップダウンを設定したりできる場合。リンク画像に加えて、それがダメージを与えることはありません。

Googleはこれを悪意のあるものと見なし、サイトのランクを下げるか、スパムとしてマークするため、非表示リンクを使用しないことをお勧めします。

他の人が示唆しているように、標準の「ウェブセーフ」フォントを使用する必要はありません。現在、クロスブラウザで機能する多くのフォント置換技術が利用可能です。概要については、「フォントの置換方法に関するWebデザイナーガイド」を参照してください。SEOを放棄したり、イメージSEOに頼ったりする必要はありません。ケーキを食べて食べることもできます。

私はこれを背景画像と隠されたネストされたスパンで行っていました。テキストブラウザーと検索エンジンに最適で、リッチなブラウザー用のカスタムフォントがあります。

HTML：

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS：

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

出力：

実際にご覧ください。

このメソッドで置き換えることができるテキストの量に制限はありません（適切なタグと隠されたスタイルをスマートな方法で）。しかし、正直なところ、クライアントが使用したいカスタムフォントは、一般的なWebフォントよりもはるかに読みにくいでしょう。あなたは本当に彼女を話そうとするべきです。

sFIR はこの目的で機能する可能性がありますが、クライアント側で使用するとリソースを大量に消費し、テキストにリンクを埋め込む必要がある場合は注意が必要になります。

1. webfontsを使用してください。事実上、ブラウザはそれらを正しく表示します（別の形式で配置した場合）。それらを通常のファイルとしてホストします（これがファイルです）。これは本当に良いチュートリアルです。もう1つの利点：Googleをだます方法を考える必要はありません。

2. sIFR、Cufón、FLIRまたは他の画像スプライト-それは本当に古いスタイルの雄牛で、未知の理由で発明されました;）それを使用しないでください。

3. いくつかの画像に入力された多くのテキストは次のとおりです。

   • 長いロード時間
   • アンチソ（もちろん、クローキングを使用して、Googleボットとユーザーにさまざまなコンテンツを提供できますが、それは単なる作業とテストであり、リスクもあります

typeface.jsライブラリを使用してみてください！ページの上部にライブラリを含め、特別なフォント要素に特別なクラスを指定するだけで、任意のカスタムTrueTypeまたはOpenTypeフォントを使用できます。それは無料で、オープンソース、クロスプラットフォームであり、検索エンジンもあなたのテキストを見るでしょう。画像は必要ありません。ライブラリはそのすべてを処理し、典型的なWebページのように設計するだけです。

答えを得るための多くの素晴らしいオプションがここにあります。Font Squirrel（http://www.fontsquirrel.com/fontface/generator）は言及に値します。そして、もちろん、Google Font APIも素晴らしいです。

画像の置換については、個人的に要素のスパンをお勧めします。画像をスパンの親の背景として使用します。ただし、スパンのdisplay：noneの代わりに、position：absoluteを画面外に表示します。そうすれば、スクリーンリーダーはまだそのコンテンツを取得できます。

私は画面から離れてインデントに勝つことを覚えているようですが、たぶん愚かなズボンを着ています。

しかし、ダブルもそうです-それらのフォントを埋め込みます。

Font Squirrelの Font-Faceキットのいずれかを使用します。キットには、4つの異なるフォント形式と、それらを使用するために必要な正しいCSSが用意されています。すべての最新のブラウザーとレガシーIEバージョンでも動作します！

画像でサイトを構築します。それから露の月に、彼女がエンジンに見つからないという不満を言って戻ってきて、テキストでサイトを再構築し、別の料金を請求します！