web-dev-qa-db-ja.com

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

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

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

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

seoindexingimagestext
20
Wookai

フォントを埋め込む！

いいえ、しかし実際には、埋め込み可能フォントは現在のすべてのブラウザー（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など...）

17
Oscar Godson

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

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

cSS（おそらくSprite）を介して画像を使用し、アンカーテキストを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つのソリューション。一つを選ぶ。最後に行きます。

6
Dave

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

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

5
John Conde

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

Googleは、役に立つ WebフォントAPIおよびフォントディレクトリ を提供しています。

3
Phil Mander

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

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

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

2
Ben Hoffman

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

2
Virtuosi Media

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

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; }

出力：

Welcome to Hell on Wheels

実際の動作を参照 。

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

2
Annika Backstrom

sFIRmightこの目的のために動作しますが、それを使用するとクライアント側でリソースを大量に消費し、テキストにリンクを埋め込む必要があります。

1
danlefree

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

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

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

    • 長いロード時間
    • アンチソ（もちろん、クローキングを使用してGoogleボットとユーザーにさまざまなコンテンツを提供できますが、それは単なる作業とテストであり、リスクもあります[ライバルサイトの所有者がGoogleにあなたに伝えるかもしれません：]）
1
Alex Bolotov

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

1
Rick Curran

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

1
Ricket

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

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

インデントで勝つために画面から移動したことを思い出すようですが、多分私は私の愚かなズボンを着ています。

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

1
folktrash

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

0
David Heffernan