5

og:image または link rel img_source がないと仮定すると、Web ページを最もよく表す画像を選択するためのランダムよりも優れた手法について、実際の経験やアドバイスを持っている人はいますか?

更新：すべての回答は良いので、すべてに賛成票を投じて1つを選択しましたが、これを行う素晴らしい方法はないようです. 低解像度のクライアントで必要な最大の画像とスクリーンショットを試してみます。皆さんありがとう！

PS : とにかくかなりの数のページに og:image または link rel img_source があるようです。期待以上

4

5 に答える 5

2

ウェブサイトのスクリーンショットを可能な限り最小の形で撮ること、つまりノートパソコンやモバイル (ただしモバイル サイト バージョンではない) でどのように見えるかは、非ランダムなアプローチです。

ほとんどの優れた Web デザイナーは、ユーザーがページを読み込んだ直後にそのページが何であるかを確認できるようにし、最も重要で関連性の高い情報を「スクロールせずに見える範囲」に含めるようにします。

于 2012-07-18T22:45:12.067 に答える
1

Facebookのopengraphの経験はありませんが、以前に使用したトリックの1つは、リンクしたサイトのファビコンを取得して、リンクボタンのアイコンとして使用することです...それらは小さく、通常は常に関連付けられています会社名やロゴ、そしてそれらはほとんどのプロのウェブサイトでかなり普遍的です。また、通常は一意のファイル名favicon.icoを使用すると、html（またはファイル名が変更された場合はリンク属性）を簡単に選択できます。

それがあなたがやろうとしていることに適応することができれば、そのショットを与えるかもしれません。見た目があまり良くない場合は、もっと「Web 2.0」を試して、iPhone /iPadボタンのapple-touch-iconpng画像を確認してください（おそらく有名なサイトでしか見つかりません）。

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfigureWebApplications/ConfigureWebApplications.html

于 2012-07-18T08:41:43.533 に答える
1

ロゴを探すのは通常間違った方法です。あなたのウェブサイトの視点のユーザーからそれを見ると、私は常にロゴよりも画像を望んでいません。これは、Google+またはFacebookのリンクと同じです。本当に意味のある場合にのみ画像を表示します。

og:imageただし、対応する画像がないか提供されていない場合、対応する画像を見つけることは必ずしも簡単ではない場合がありrel="image_source"ます。

記事には通常、<h1>または<h2>タグとして表示されるタイトルがあります。最も近い画像が正しい画像である可能性があります。ただし、最も近いものもロゴである可能性があるため、これはうまくいかない可能性があります。

私はそれを非常に実用的にします。最も可能性の高い画像を最初に取得し、指定されたEXIFデータを読み取ります。これが実際の画像である場合は、情報が提供されます。これが単なるロゴ、スペーサー、またはその他の種類のレイアウトグラフィックである場合、EXIFデータがないため、関係ありません。最初の画像が適切にタフでない場合は、次の画像を取得します。

もう1つの手がかりは、<article>通常、投稿に対応する画像がネストされているHTML5タグです。

それにもかかわらず、標準を使用していないWebデザイナーが何人かいて、それらのWebページはうまく比較できない可能性があります。

于 2012-07-19T13:13:06.937 に答える
1

ページのロゴを og:image として選択します。そうすれば、個々のページをどの画像が最もよく定義しているかを気にすることなく、ブランドがすべての投稿に関連付けられます。

他のページについては、それらの画像を制御することはできません。

sharer.phpがどのように機能するかを調べることはできますが、それ以外には、定義可能な画像がない Web ページの画像を選択するための特効薬はありません。

于 2012-07-10T05:31:53.427 に答える
1

通常はimg、タグのページをスクレイピングすることをお勧めします。しかし、最近はCSSの背景画像を////etcに適用することが多くなりh1ました。テキストの代わりにロゴを表示するタグ。headerdiva

考えられる解決策の 1 つは、ID/クラス名に「logo」が含まれるすべての要素を取得することです。

var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');

これがimgタグである/含まれている場合、サイトのロゴを持っている可能性があります。それ以外の場合、divまたは他のそのようなコンテナーの場合は、子要素の CSS プロパティを掘り下げて、背景画像があるかどうかを確認する必要があります。

これから、一連の候補画像を構築できます。これを (たとえば) 画像のサイズに基づくヒューリスティックと組み合わせると、毎回ロゴを吐き出すことが期待されます。

これがあなたの道に役立つことを願っています！

于 2012-07-18T09:50:32.410 に答える