Comment intégrer un lien sur une image dans Google Sites

Vous avez passé des heures à peaufiner votre Google Site. Les textes sont impeccables, la structure logique. Mais voilà : vous voulez transformer cette magnifique photo de produit en bouton cliquable. Sauf que l’option n’apparaît nulle part dans les menus. Frustrant, non ? Pourtant, la solution existe et elle est plus simple que vous ne l’imaginez.

Pourquoi vos images devraient être cliquables

Une image vaut mille mots, dit-on. Mais une image cliquable vaut mille clics. Sur le web actuel, l’internaute survole plus qu’il ne lit. Son œil capte d’abord les visuels. Une photo de bureau design pour votre page “Recrutement” ? Transformez-la en portail vers vos offres d’emploi. Un portrait d’équipe ? Liez-le aux profils LinkedIn. Cette gymnastique mentale voir, comprendre, cliquer devient un réflexe.

Les statistiques parlent d’elles-mêmes. Une étude de Nielsen Norman Group révèle que les utilisateurs accordent 80% de leur attention aux images contre seulement 20% au texte environnant. Ne pas exploiter cette réalité revient à laisser de l’argent sur la table.

La méthode recommandée : l’éditeur visuel

Google Sites privilégie la simplicité. Inutile de devenir développeur web pour réussir. Voici comment procéder sans toucher une ligne de code.

Insertion de l’image

Ouvrez votre page en mode édition. Cliquez sur “Insertion” dans la barre d’outils, puis sélectionnez “Image”. Trois options s’offrent à vous : importer depuis votre ordinateur, choisir dans Google Drive, ou coller une URL. Pour des performances optimales, privilégiez toujours l’hébergement sur Drive. Les images externes peuvent disparaître si leur serveur d’origine tombe.

Ajout du lien

Une fois l’image insérée, cliquez dessus pour faire apparaître la barre d’outils contextuelle. Repérez l’icône en forme de maillon elle représente le lien hypertexte. Cliquez. Une fenêtre s’ouvre.

Collez votre URL de destination. Attention : Google Sites vérifie la validité du lien. Si le site cible utilise un certificat SSL expiré ou pose des problèmes de sécurité, votre lien sera refusé. Cochez “Ouvrir dans un nouvel onglet” si vous souhaitez que vos visiteurs restent sur votre site en parallèle.

Le texte alternatif : non négociable

Dans la même fenêtre, remplissez impérativement le champ “Texte alternatif”. Écrivez une description concise : “Logo de l’entreprise redirigeant vers la page d’accueil” plutôt que simplement “logo”. Les lecteurs d’écran utilisés par les personnes malvoyantes lisent ce texte à voix haute. Sans lui, ces utilisateurs naviguent à l’aveugle.

D’ailleurs, saviez-vous que 15% de la population mondiale vit avec une forme de handicap ? Ignorer l’accessibilité, c’est exclure 1,3 milliard de personnes potentielles.

L’approche avancée : le mode HTML

Pour les utilisateurs à l’aise avec le code, Google Sites offre une porte dérobée. Cette méthode permet un contrôle total, mais exige de la rigueur.

Accéder au mode HTML

Insérez d’abord un bloc “Incorporer” sur votre page. Cliquez sur l’icône </> pour basculer en mode HTML. C’est ici que la magie opère.

La syntaxe à maîtriser

Voici la structure de base :

<a href="URL_de_destination">
    <img src="URL_de_l_image" 
         title="Titre de l'image" 
         alt="Description pour l'accessibilité">
</a>

Décortiquons. La balise <a> crée le lien. L’attribut href indique où mène ce lien. À l’intérieur, la balise <img> affiche l’image. L’attribut src pointe vers le fichier image. Title apparaît au survol de la souris. Alt sert l’accessibilité.

Exemple concret

Imaginons que vous vouliez lier le logo de votre entreprise (hébergé sur Drive) vers votre page contact :

<a href="https://sites.google.com/view/votresite/contact">
    <img src="https://drive.google.com/uc?id=1A2B3C4D5E6F" 
         alt="Logo de l'entreprise ABC menant à la page contact"
         style="width: 200px; height: auto;">
</a>

Notez l’ajout de l’attribut style pour contrôler les dimensions. Google Sites peut redimensionner vos images de manière imprévisible sans cette précaution.

Les pièges à éviter absolument

Le syndrome de l’image lourde

Une photo de 5 Mo prise avec votre smartphone ? Catastrophe. Le temps de chargement explose. Google pénalise les sites lents dans ses résultats de recherche. Utilisez un compresseur comme TinyPNG ou Squoosh avant téléversement. Visez moins de 200 Ko par image pour une fluidité optimale.

Les URLs relatives qui plantent

Si vous copiez votre code HTML d’un site à l’autre, attention aux chemins relatifs. Une URL relative type “/images/photo.jpg” fonctionne uniquement si le fichier existe à cet emplacement précis sur votre serveur. Dans Google Sites, privilégiez toujours les URLs absolues commençant par “https://”.

L’oubli du nouvel onglet

Un visiteur clique sur votre image-lien. Il est redirigé… et votre site disparaît de son navigateur. Ennuyeux. Pour éviter cela en HTML, ajoutez l’attribut target=”_blank” :

<a href="URL_externe" target="_blank" rel="noopener noreferrer">

Le rel=”noopener noreferrer” n’est pas anecdotique. Il protège contre certaines failles de sécurité exploitables via les liens externes.

Cas d’usage qui changent la donne

La galerie interactive

Vous gérez un site portfolio ? Transformez chaque miniature de projet en lien vers une page détaillée. Le visiteur navigue intuitivement, sans chercher où cliquer. L’agence web française Webflow a augmenté son taux d’engagement de 34% en appliquant cette technique.

Le call-to-action visuel

Les boutons standards ennuient. Une image créative attire l’œil. Pour une campagne de dons, une association a remplacé son bouton “Faire un don” par une photo émouvante d’enfants souriants, cliquable vers le formulaire. Résultat : +47% de conversions en trois semaines.

La carte géographique dynamique

Vous avez plusieurs points de vente ? Insérez une carte avec des marqueurs sous forme d’images cliquables. Chaque magasin renvoie vers sa page dédiée avec horaires et coordonnées. Simple. Efficace. Mémorable.

Optimiser pour le référencement

Google ne “voit” pas vos images comme vous. Il lit le code. D’où l’importance stratégique du texte alternatif. Mais allez plus loin. Nommez vos fichiers intelligemment. “DSC_1234.jpg” n’aide personne. “bureau-moderne-equipement-ergonomique.jpg” parle aux moteurs de recherche.

Les données structurées Schema.org peuvent aussi booster votre visibilité. En ajoutant quelques lignes de code, vous indiquez explicitement à Google qu’il s’agit d’une image cliquable menant vers un produit, un article ou un événement.

Tester avant de publier

Vous avez tout configuré ? Ne publiez pas encore. Testez sur différents appareils. Un lien qui fonctionne sur ordinateur peut échouer sur mobile si l’URL contient des caractères spéciaux mal encodés.

Utilisez le mode aperçu de Google Sites. Cliquez sur votre image. Le lien s’ouvre-t-il ? Dans le bon onglet ? Si quelque chose cloche, vérifiez ces points : URL correcte, image non corrompue, texte alternatif présent, syntaxe HTML valide.

Les limites de Google Sites

Soyons honnêtes : Google Sites n’est pas WordPress. Certaines URLs externes sont bloquées pour des raisons de sécurité. Les sites sans HTTPS, par exemple, sont souvent rejetés. Les services d’hébergement d’images gratuits peu fiables aussi.

Si vous rencontrez un blocage persistant, hébergez votre image sur Google Drive et utilisez son URL publique. Pour le lien de destination, assurez-vous que le site cible respecte les standards de sécurité modernes.

Au-delà de la technique : la psychologie du clic

Une image cliquable ne suffit pas. Elle doit donner envie de cliquer. Les chercheurs en ergonomie web ont démontré que certains éléments déclenchent l’action :

Les visages humains attirent le regard. Une personne qui regarde dans une direction guide inconsciemment l’œil du visiteur. Les contrastes de couleurs créent des points focaux. Le rouge, notamment, signale “important” dans notre cerveau.

Netflix utilise massivement cette science. Chaque vignette de film est optimisée pour maximiser les clics. Les expressions faciales sont choisies selon des critères précis. Le placement stratégique du titre aussi.

Maintenir la cohérence visuelle

Un site professionnel respire l’harmonie. Si vous transformez certaines images en liens, adoptez un code visuel. Un léger effet de survol, par exemple, signale la cliquabilité. En CSS, cela se code ainsi :

img:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

Cette subtile transparence au survol indique “je suis cliquable” sans agresser l’œil. L’utilisateur comprend sans réfléchir.

Quand privilégier un bouton classique

Les images-liens brillent dans certains contextes, échouent dans d’autres. Pour un formulaire d’inscription urgent, un bouton rouge vif “S’inscrire maintenant” bat n’importe quelle image artistique. La clarté prime.

Les tests A/B le prouvent : quand l’action demandée est simple et directe, le bouton texte traditionnel convertit mieux. Réservez les images-liens pour la navigation, la découverte de contenu, l’exploration.

L’avenir : vers des images encore plus intelligentes

Les technologies évoluent. Les images réactives (responsive images) s’adaptent automatiquement à la taille d’écran. Le format WebP réduit le poids de 30% sans perte visible. Les cartes thermiques analysent où les visiteurs cliquent réellement.

Google Sites intègrera probablement ces innovations. D’ici là, maîtriser les bases vous place déjà devant 90% des utilisateurs qui n’exploitent qu’une fraction du potentiel de la plateforme.

Votre site mérite mieux qu’une collection d’images statiques. Chaque visuel peut devenir une porte, un pont, une invitation. Il suffit de savoir tourner la clé ou plutôt, d’insérer le bon lien.