web-dev-qa-db-fra.com

Existe-t-il un moyen de montrer à Google et aux autres robots une URL vers une image de taille originale sans ancre?

Supposons que j'ai une image.

<img src="book_thumb.jpg">

Et je veux qu'il soit indexé dans Google et d'autres moteurs de recherche, mais dans sa taille normale, pas sous forme de vignette. Je souhaite donc simplement que Google visualise book.jpg au lieu de book_thumb.jpg, mais souhaite continuer à afficher des vignettes aux utilisateurs.

Et je ne veux pas créer d'ancrage à une autre image, car il existe déjà un lien vers des informations sur ce livre:

<a href="book.html><img src="book_thumb.jpg"></a>

Existe-t-il un attribut img qui le permette? Ou une autre balise?

googlehtmlindexing
7
Damian

Il y avait jadis l'attribut lores - mais cela pointe dans la direction opposée, je suppose. Comme toujours, il n'y a pas d'attribut correspondant hires.

Vous pouvez cependant creuser dans l'élément html5 <picture>/images adaptatives, ce qui pourrait également être utile si vous travaillez sur une mise en page réactive:

<picture alt="screen-image.jpg">
   <source src=original-image.jpg media="min-width:1200px">
   <source src=screen-image.jpg media="min-width:480px">
   <source src=small-image.jpg>
      <!-- fallback for browsers without support of picture-element -->
      <img src=screen-image.jpg alt="screen-image.jpg">
</picture>

Je suppose que Google connaît et respecte les spécifications html5 - de sorte que puisse être un moyen de pointer sur l'image d'origine/embaucher tout en affichant l'autre image au navigateur. .

Ici sont les spécifications sur w3.org et ici est un bref tutoriel sur les images adaptines.

PS: vous allez ensuite envelopper le lien autour de l’élément picture.

3
tillinberlin

Utilisez le balisage de données structurées pour indiquer la contentUrl de l’objet image .

Voici un exemple utilisant la syntaxe Microdata :

<div itemscope itemtype="http://schema.org/ImageObject">
    <a href="book.jpg" itemprop="contentUrl" itemprop="contentUrl" style="display:none;"></a>
    <img src="book_thumb.jpg" itemprop="thumbnailUrl">
</div>

Notez que, même si une balise d'ancrage est présente, il n'est pas nécessaire qu'elle soit un parent de la balise img.

Testez vos données structurées avec l'outil de test de données structurées .

Connexes: https://stackoverflow.com/a/20014387/2014893

2
Robert K. Bell

Google indexe deux types principaux d'informations en ligne pour lesquelles vous pouvez soumettre des plans de site pour: les pages et les images.

Accédez aux outils Google pour les webmasters et vérifiez votre site avec eux, puis créez un plan du site avec la liste des URL de vos grandes images et des autres images que vous souhaitez voir affichées par Google.

Suivez l'exemple à:

https://support.google.com/webmasters/answer/178636?hl=fr

et remplacer:

<image:loc>http://example.com/image.jpg</image:loc>

avec http://example.com/path/to/wther/pic/to/be/indexed.jpghttp://example.com/path/to/wheel/pic /to/be/indexed.jpg

où

http://example.com/path/to/whatever/pic/to/be/indexed.jpg

est bien sûr l'URL complète de la grande image que vous voulez que Google voie.

Une fois le sitemap terminé, téléchargez-le sur votre serveur pour pouvoir y accéder en saisissant une URL dans un navigateur, puis envoyez-le dans les outils pour les webmasters de Google. Puis, environ 48 heures plus tard, revenez dans la section Plan du site des outils pour les webmasters pour voir combien de grandes images il a indexées (mises à la disposition du public).

Il existe peut-être un protocole similaire dans d'autres moteurs de recherche, mais je ne sais pas s'ils prennent en charge la recherche d'images à la manière de Google.

1
Mike