Une image qui ne mène nulle part, c’est une occasion manquée. Ajouter un lien sur une image, c’est transformer un élément visuel passif en point d’entrée actif : vers une page produit, un article, un formulaire, ou n’importe quelle destination utile. Techniquement, l’opération prend deux minutes. Mais entre une balise mal fermée, un attribut alt oublié et un lien qui n’ouvre pas au bon endroit, les erreurs s’accumulent vite.
Ce qui suit couvre la mécanique complète : la syntaxe HTML de base, les variantes selon les contextes (CMS, réseaux sociaux, emails), et les points d’attention qui font la différence entre un lien fonctionnel et un lien vraiment bien construit.
La syntaxe HTML pour créer un lien sur image
La structure de base : balise <a> autour de <img>
Le principe repose sur l’imbrication de deux balises. La balise <a> enveloppe la balise <img> — c’est tout. En HTML, cela donne :
<a href="https://exemple.com/page-cible">
<img src="image.jpg" alt="Description de l'image" width="600" height="400">
</a>L’attribut href de la balise <a> définit la destination du lien. L’image devient alors la zone cliquable, exactement comme un texte ancré classique. L’utilisateur clique sur l’image, le navigateur suit le lien — logique, propre, et compatible avec tous les navigateurs depuis les années 1990.
💡 Notre conseil
Ne laissez jamais l’attribut alt vide sur une image liée. Les lecteurs d’écran annoncent l’image ET sa destination : un alt vide donne à l’utilisateur un lien sans nom, ce qui est inutilisable. Décrivez l’action ou la destination : alt="Voir la collection printemps" vaut mieux que alt="image".
Ouvrir le lien dans un nouvel onglet
Ajouter target="_blank" ouvre la destination dans un nouvel onglet. Utile pour des liens externes, moins pertinent pour une navigation interne. Quand on utilise cette option, il faut systématiquement ajouter rel="noopener noreferrer" pour éviter une faille de sécurité connue (le reverse tabnapping) :
<a href="https://exemple.com" target="_blank" rel="noopener noreferrer">
<img src="image.jpg" alt="Description" width="600" height="400">
</a>⚠️ À garder en tête
Sans rel="noopener", une page malveillante ouverte via target="_blank" peut accéder à la fenêtre parente via window.opener. Ce n’est pas théorique : des attaques de phishing ont exploité cette faille sur des sites grand public.
Image réactive et lien : les précautions en CSS
Une image liée doit rester cliquable quelle que soit la taille d’écran. Sur mobile, une image trop petite ou un lien mal dimensionné génère des clics ratés. Deux règles simples :
- Appliquer
display:blockà l’image pour supprimer l’espace blanc parasite que les navigateurs ajoutent sous les éléments inline. - Définir
max-width:100%pour que l’image s’adapte à son conteneur sans déborder.
En pratique, la plupart des frameworks CSS (Bootstrap, Tailwind) gèrent ça nativement. Sur un site codé à la main, ces deux propriétés suffisent à éviter 80 % des problèmes d’affichage.
Lien sur image : SEO, accessibilité et cas pratiques
Ce que Google comprend (et ce qu’il ne voit pas)
Google indexe les images liées et suit les liens qu’elles contiennent, comme n’importe quel lien textuel. Mais il utilise l’attribut alt comme ancre de texte de substitution — le alt joue donc le même rôle que le texte ancré dans un lien classique. Un alt pertinent contribue au référencement de la page cible.
« Quand Google ne trouve pas de texte ancré, il utilise le texte alternatif de l’image comme signal pour comprendre la destination du lien. »
— John Mueller, Google Search Central, 2021
Trois bonnes pratiques concrètes pour un lien image bien optimisé :
- Rédiger un
altqui décrit l’image ET reflète le contexte de la page cible. - Éviter de lier une image vers une URL non indexée ou derrière une redirection longue chaîne.
- Vérifier que l’image elle-même est compressée et dotée d’un nom de fichier descriptif (
collection-printemps-robes.jpgplutôt queIMG_4521.jpg).
Pour aller plus loin sur les formats et dimensions à respecter selon les plateformes, le référentiel Tailles d’images réseaux sociaux : le référentiel à jour couvre les spécifications en détail, réseau par réseau.
✅ À retenir
Un lien image sans alt est pénalisant à la fois pour le SEO et pour l’accessibilité. Google l’interprète comme un lien sans texte ancré — un signal faible. Les lecteurs d’écran l’annoncent comme « lien image », sans contexte. Les deux problèmes se règlent avec une seule ligne bien rédigée.
Intégrer un lien sur image dans un CMS
Sous WordPress, l’éditeur Gutenberg permet de lier une image directement depuis le bloc image : on clique sur l’icône de lien dans la barre d’outils, on colle l’URL, c’est plié. Le HTML généré est propre et respecte la structure standard. Sous Elementor ou Divi, l’option se trouve dans les paramètres du widget image, généralement sous l’onglet Lien.
Sur Shopify, les sections de bannière génèrent des images liées automatiquement à partir du champ URL configuré dans le thème. Le alt se renseigne séparément dans les paramètres du fichier média — pensez à le faire, ce champ est souvent laissé vide par défaut.
Dans la bibliothèque média de votre CMS, ajoutez le fichier image avec un nom descriptif et renseignez le texte alternatif.
Ajoutez le bloc ou widget image à votre page, sélectionnez le fichier uploadé.
Dans les options du bloc, collez l’URL de destination. Activez « Nouvel onglet » si la cible est externe, ajoutez
noopener si votre CMS ne le fait pas automatiquement.Prévisualisez la page sur smartphone avant de publier : vérifiez que la zone cliquable est suffisamment grande et que l’image ne déborde pas.
Cas particulier : les images cliquables dans les emails
Dans un email HTML, la syntaxe reste identique — balise <a> autour de <img>. Mais deux contraintes s’ajoutent. D’abord, certains clients mail (Outlook en tête) ajoutent une bordure bleue autour des images liées par défaut. On la supprime avec border:0 sur la balise img. Ensuite, beaucoup d’utilisateurs désactivent le chargement automatique des images : si l’image ne s’affiche pas, le lien doit quand même être accessible. La solution ? Doubler l’image d’un lien texte visible en dessous, ou intégrer un bouton CTA séparé.
| 🌐 Web / CMS | 📧 Email HTML |
|---|---|
CSS externe possible, responsive natif, target="_blank" standard, pas de bordure parasite. |
Styles inline obligatoires, border:0 sur img, images souvent bloquées, CTA texte conseillé en complément. |
Pour d’autres ressources sur la création de contenu web et les usages numériques, explorez la rubrique Autres qui regroupe des articles complémentaires sur ces sujets.
Questions fréquentes
Comment rendre une image entièrement cliquable en HTML ?
Il suffit d’envelopper la balise <img> dans une balise <a href="URL">. Toute la surface de l’image devient alors cliquable. Pour que cela fonctionne correctement sur mobile, appliquez display:block et max-width:100% à l’image via CSS.
L’attribut alt influence-t-il le SEO d’un lien image ?
Oui. Google utilise le texte de l’attribut alt comme équivalent du texte ancré pour les liens textuels. Un alt descriptif et pertinent renforce le signal envoyé vers la page de destination. Un alt vide, c’est un lien sans ancre — peu informatif pour les moteurs de recherche.
Quelle différence entre un lien image et une image-map ?
Un lien image simple rend toute l’image cliquable vers une seule URL. Une image-map (<map> + <area>) découpe l’image en zones cliquables distinctes, chacune pouvant pointer vers une URL différente. Les image-maps sont utiles pour des infographies interactives, mais plus complexes à maintenir et moins adaptées au responsive design.
Comment supprimer la bordure bleue autour d’une image liée ?
Cette bordure est un vestige des anciens navigateurs et persiste surtout dans les clients mail comme Outlook. Ajoutez border:0 ou border:none directement sur la balise <img> (en style inline pour les emails). Sur le web, une règle CSS globale comme img { border: 0; } règle le problème une fois pour toutes.
Est-ce qu’un lien sur image est suivi par Google comme un lien classique ?
Oui, Google suit les liens contenus dans les balises <a> qu’elles entourent du texte ou une image. Le PageRank se transfère normalement. Les attributs rel="nofollow" ou rel="sponsored" fonctionnent de la même façon que sur un lien textuel.