La mejor manera de elegir una imagen de HTML para usarla como miniatura/vista previa de la página

Question

Suponiendo que no hay nig: image o link rel img_source, ¿alguien tiene alguna experiencia o consejo en el mundo real sobre técnicas mejores que aleatorias? para elegir una imagen que mejor represente una página web?

Actualización: Todas las respuestas son buenas, por lo que las subí y seleccioné una, aunque parece que no hay una buena manera de hacerlo. Voy a experimentar con la imagen más grande y la captura de pantalla de lo que le gustaría en un cliente de baja resolución. ¡Gracias a todos!

PS: Me parece que bastantes páginas parecen tener og: image o link rel img_source de todos modos. Más de lo que esperaba

Answer 1

Tomar una captura de pantalla del sitio web en su forma más pequeña posible, cómo se vería en un portátil o incluso un móvil (pero no en la versión del sitio móvil), sería un enfoque no aleatorio.

La mayoría de los buenos diseñadores web tratarán de asegurarse de que los usuarios puedan ver de qué se trata la página inmediatamente después de la carga e incluir la información más importante y relevante 'arriba del pliegue', como dicen.

Answer 2

Elija el logotipo de su página como el og: imagen. De esta forma, su marca se asociará con todas sus publicaciones, sin tener que preocuparse por qué imagen define mejor cada página individual.

Para otras páginas, no puede controlar la imagen que tienen.

Puede investigar cómo funciona sharer.php, pero aparte de eso, no hay ninguna bala de plata para elegir qué imagen para una página web que no tiene una imagen definible.

Answer 3

No tengo ninguna experiencia con el Opengraph de Facebook, pero un truco que he usado antes es capturar favicons de sitios con los que me he vinculado y usarlos como iconos de botón de enlace ... Son pequeños y son generalmente siempre se asocia con el nombre y/o logotipo de la empresa, y son bastante universales en la mayoría de los sitios web profesionales. Y el nombre de archivo generalmente univeral favicon.ico hace que sea muy fácil seleccionar el html (o los atributos del enlace si cambian el nombre del archivo).

Podría darle una oportunidad si eso pudiera adaptarse a lo que está tratando de hacer. Si encuentra que no se ve muy bien, puede probar una toma más "web 2.0" y comprobar el botón de iPhone/iPad imágenes de png de apple-touch-icon (probablemente solo las encuentre en sitios de gran nombre)

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

Answer 4

I would normalmente sugieren que simplemente raspe la página de img etiquetas. Sin embargo, en estos días, las imágenes de fondo de CSS se aplican con frecuencia a h1/header/div/a/etc. etiquetas para mostrar logotipos en lugar de texto.

Una posible solución es tomar todos los elementos con 'logo' en su nombre ID/clase:

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

Si esto es/contiene una etiqueta img, es probable que tenga el logo del sitio. De lo contrario, si se trata de un contenedor div o de otro tipo, tendrá que profundizar en las propiedades CSS de los elementos secundarios para ver si tienen una imagen de fondo.

De esto se puede construir un conjunto de imágenes candidatas, que cuando se combina con una heurística basada en (por ejemplo) dimensiones de imagen, con suerte escupirá un logotipo cada vez.

Espero que esto te ayude en tu camino!

Answer 5

Por lo general, buscar el logotipo es incorrecto. Al verlo desde el punto de vista de un usuario de un sitio web, prefiero no tener ninguna imagen que un logotipo todo el tiempo. Esto es lo mismo que en los enlaces de Google+ o Facebook. Solo muestra imágenes cuando realmente tenga sentido.

Sin embargo, encontrar la imagen correspondiente puede no ser siempre trivial si no se proporcionan og:image o rel="image_source".

Un artículo generalmente tiene un título que se presenta como <h1> o <h2>. La imagen más cercana puede ser la correcta. Sin embargo, el más cercano también puede ser un logotipo, por lo que puede salir mal.

Lo haría muy pragmático. Buscaría la imagen más probable primero y leería los datos EXIF, si se trata de una imagen real, hay información provista. Si esto es solo un logotipo, separador u otro tipo de gráfico de diseño, no tiene datos EXIF ​​y, por lo tanto, no es relevante. Si la primera imagen no es la correcta, buscaría la siguiente y así sucesivamente.

Otra pista puede ser la etiqueta HTML5 <article> que generalmente tiene la imagen correspondiente anidada en la publicación.

Sin embargo hay varios diseñador de páginas web que no utilizan estándares y su página web puede no ser parábola muy bien.