Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Comment optimiser le rĂ©fĂ©rencement d’une image dans Google

En 2001, Google a lancĂ© Google Images, un service qui permet de regrouper sur Internet des photos liĂ©es Ă  un sujet prĂ©cis. L’indexation des images est rĂ©alisĂ©e par un robot qui analyse les images d’un site web selon de nombreux critĂšres. La plupart sont liĂ©s Ă  l’expĂ©rience utilisateur, mais aussi aux Ă©lĂ©ments qui entourent les images.

Bonnes pratiques pour une indexation optimale des images

Vous devez savoir que les robots d’exploration de Google chargĂ©s d’indexer les images ne peuvent pas comprendre les Ă©lĂ©ments qui composent les images. C’est pourquoi l’environnement d’une image, et notamment le texte, sera d’une importance primordiale en SEO. Plusieurs bonnes pratiques peuvent vous aider Ă  y parvenir :

le nom de l’image

Donner un nom qui indique Ă  Google ce que l’image reprĂ©sente aide Ă  favoriser le rĂ©fĂ©rencement naturel. Cette simple optimisation augmente les chances d’apparaĂźtre dans les requĂȘtes pertinentes du navigateur. Attention Ă  ne pas utiliser de caractĂšres spĂ©ciaux ou d’accents. Il est recommandĂ© de sĂ©parer les diffĂ©rents termes par des traits d’union.

L’attribut ALT

Autre critĂšre important Ă  prendre en compte : l’attribut ALT ou texte alternatif. IntĂ©grĂ© dans l’Ă©tiquette dans un document HTML, cet attribut permet de donner une description courte et prĂ©cise de l’image. Ce texte alternatif remplace l’image si elle n’est pas affichĂ©e. L’attribut ALT est Ă©galement trĂšs utile lorsque le robot d’indexation de Google analyse une image, il lui permet de comprendre son sujet et de le catĂ©goriser. Il est prĂ©fĂ©rable d’Ă©crire une courte phrase Ă  partir de mots-clĂ©s. Il est dĂ©conseillĂ© d’opter pour une succession de mots clĂ©s.

La contextualisation de l’image.

Pour ĂȘtre bien rĂ©fĂ©rencĂ©e, une image doit ĂȘtre placĂ©e correctement sur une page web et doit ĂȘtre cohĂ©rente avec son contenu. Lorsque Google analyse une page, il doit comprendre le lien entre les diffĂ©rents Ă©lĂ©ments qui la composent. Plus la cohĂ©rence est Ă©levĂ©e, meilleur est le rĂ©fĂ©rencement de votre image.

Titres et sous-titres

Tout d’abord, gardez Ă  l’esprit que le titre d’une image est diffĂ©rent du nom. Le titre d’une image correspond Ă  ce qui est prĂ©sent dans l’attribut optionnel

intĂ©grĂ© dans l’Ă©tiquette <img/>. Ce titre apparaĂźt lorsqu’un utilisateur survole une image, Ă©galement appelĂ©e info-bulle. Il est recommandĂ© de ne pas utiliser les mĂȘmes mots-clĂ©s que ceux de l’attribut ALT, celui-ci doit fournir des informations supplĂ©mentaires sur l’image. Si l’attribut title n’a pas une forte rĂ©sonance en SEO, il facilite l’expĂ©rience utilisateur, qui est un critĂšre clĂ© pour Google.</p> <div class='code-block code-block-6' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-6-2' data-info='WyI2LTIiLDJd' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="blogging-techies.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('blogging-techies.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="blogging-techies.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('blogging-techies.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> </div> </div> <p>Aussi, Ă©crire une lĂ©gende est important. Ce texte, qui apparaĂźt sous une image, contribue Ă  une meilleure expĂ©rience utilisateur et Ă  contextualiser l’image dans le contenu. Les sous-titres sont Ă©galement utilisĂ©s pour indiquer les licences et les droits d’auteur.</p> <h3><span class="ez-toc-section" id="Le_format_la_taille_et_le_poids_de_limage"></span>Le format, la taille et le poids de l’image.<span class="ez-toc-section-end"></span></h3> <p>Les formats privilĂ©giĂ©s restent JPG, PNG et GIF, qui sont les plus lisibles par les navigateurs. La taille et le poids contribuent au bon affichage d’une page, critĂšre non nĂ©gligeable en terme de performance web. Par consĂ©quent, il est important de saisir la hauteur et la largeur directement dans votre CMS. IdĂ©alement, la taille de l’image doit correspondre Ă  la taille de l’Ă©cran, afin de rĂ©duire le poids de l’image et le temps de chargement de la page.</p> <h2><span class="ez-toc-section" id="Limportance_dun_bon_referencement"></span>L’importance d’un bon rĂ©fĂ©rencement<span class="ez-toc-section-end"></span></h2> <p>L’optimisation de ces critĂšres permet d’amĂ©liorer votre classement sur Google Images. Ce service, utilisĂ© par de nombreux internautes dans le cas de demandes spĂ©cifiques, joue un rĂŽle essentiel dans la visibilitĂ© de votre site internet, notamment pour les sites de e-commerce. Un rĂ©fĂ©rencement optimal de vos images aura un impact sur l’action d’achat, l’engagement et le taux de conversion.</p> <div class='code-block code-block-7' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-7-2' data-info='WyI3LTIiLDJd' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="blogging-techies.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('blogging-techies.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="blogging-techies.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('blogging-techies.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> </div> </div> <p>