Sayfanın küçük resmi/önizlemesi olarak kullanılacak HTML'den bir görüntü seçmenin en iyi yolu

Question

Herhangi bir og: image veya link rel img_source olmadığı varsayıldığında, herhangi birinin herhangi bir gerçek dünya deneyimi veya rastgele tekniklerle ilgili tavsiyesi var mı? Bir web sayfasını en iyi temsil eden bir görüntü seçmek için?

Güncelleştirme: Tüm yanıtlar iyiymiş, bu yüzden hepsini kaldırdı ve seçili olsa da, bunu yapmanın harika bir yolu yok gibi görünüyor. Düşük çözünürlüklü bir istemcide ne istediğinin en büyük resmini ve ekran görüntüsünü deneyeceğim. Hepinize teşekkürler!

PS: Şu anda birkaç sayfanın og gibi göründüğünü buluyorum: image veya link rel img_source anyway. Beklediğimden çok daha fazla

Answer 1

bir dizüstü dizüstü bilgisayar veya hatta bir cep (ancak mobil site sürümü) nasıl görüneceğini, onun mümkün olan en küçük form sitesinde bir ekran alarak, rastgele olmayan bir yaklaşım olacaktır.

En iyi web tasarımcıları Kullanıcılara sayfa yükleme esnasında yaklaşık derhal ne olduğunu görebilirler ve dedikleri gibi 'ekranın üst' en önemli ve ilgili bilgileri de yapmaya çalışacaktır.

Answer 2

Sayfanızın logosunu og: image olarak seçin. Bu sayede markanız, her bir sayfanın hangi görüntünün en iyi tanımladığı konusunda endişelenmenize gerek kalmadan tüm yayınlarınızla ilişkilendirilir.

Diğer sayfalarda sahip oldukları resmi denetleyemezsiniz. Hiçbir tanımlanabilir görüntüsü olan bir web sayfası için hangi görüntüyü seçmek için hiçbir gümüş kurşun olduğunu daha

Sen nasıl sharer.php çalışır ancak diğer araştırabilir.

Answer 3

Ben Facebook opengraph ile herhangi bir deneyimi yok, ama daha önce kullandım bir hüner ben bağladıysanız sitelerin faviconları kapmak ve bağlantı düğmesi simgeleri olarak kullanmaktır ... Onlar küçük ve vardır genellikle her zaman şirket adı ve/veya logosu ile ilişkilidir ve çoğu profesyonel web sitesinde oldukça yaygındırlar. Ve genellikle univeral dosya adı favicon.ico, html'den (veya dosya adını değiştirdiyse bağlantı özniteliklerinden) çıkmayı gerçekten kolaylaştırır.

Bunu yapmaya çalıştığınız şeye uyarlanabiliyorsa, şut yapın. Eğer çok iyi görünmüyor fark ederseniz, sizi daha "web 2.0" deneyebilirsiniz ve

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

(muhtemelen sadece rağmen büyük isim sitelerinde onları bulmak) iPhone/iPad düğmesi elma-touch-icon png resimler için kontrol

Answer 4

ben olur normalde sadece img etiketleri sayfasını kazımak olduğunu düşündürmektedir. Ancak, bu günlerde, CSS arka plan görüntüleri sıklıkla h1/header/div/a/etc'ye uygulanır. Logoları metin yerine görüntülemek için

Olası bir çözüm kimlik/sınıf adında 'logo' ile tüm öğeleri kapmak için geçerli:

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

bu şans sitenin logosu vardır,/bir img etiketi içerir ise. Aksi takdirde, bu bir div veya başka bir kapsayıcıysa, arka plan resmi olup olmadığını görmek için alt öğe öğelerinin CSS özelliklerini kazmanız gerekir. (örneğin) görüntü boyutlara dayalı bir sezgisel birleştirildiğinde umarım logosunu her zaman dışarı tüküreceksin aday görüntüler, bir dizi inşa edebilirsiniz Bundan

.

Umarım bu size yardımcı olur!

Answer 5

logosunu gidiş genellikle yanlış bir yoldur. Web sitenizin bakış açısının bir kullanıcısından görmek, her zaman bir logodan daha çok görüntü istemez. Bu, Google+ veya Facebook bağlantılarındakiyle aynı. Sadece gerçekten mantıklı olduğunda görüntüleri gösterin. Bununla birlikte, ilgili görüntüyü bulmak, og:image veya rel="image_source" sağlanmışsa her zaman önemsiz olmayabilir.

bir yazı genellikle <h1> veya <h2> etiket olarak sunulmuştur bir başlık vardır. En yakın görüntü doğru olabilir. Ancak en yakın da bir logo olabilir, bu yüzden yanlış gidebilir.

Bunun çok pragmatik yapardı. Önce en olası görüntüyü alır ve verilen EXIF verisini okurdum, eğer bu gerçek bir görüntü ise, verilen bilgiler vardır. Eğer bu sadece bir logo, aralayıcı veya başka bir düzen grafiği ise, EXIF ​​verisi yoktur ve bu nedenle ilgili değildir. İlk resim doğru değil ise, bir sonrakini alırdım.

Başka bir ipucu genellikle iç içe yazılan gelen imajı vardır HTML5 <article> etiketi olabilir.

Yine standartlarını ve bunların web sayfası güzel kıssa olmayabilir kullanmayan birçok web tasarımcısı vardır.