Comment afficher le code source d’une page web ?

Vous voulez vérifier une balise de titre, repérer un lien ou comprendre comment une page est construite ? Afficher le code source permet de voir le document envoyé par le serveur à votre navigateur. C’est une manipulation rapide, utile en SEO comme en développement web.

Mais attention : le code source n’est pas toujours identique à la page affichée à l’écran. Les scripts peuvent modifier le contenu après son chargement. Voici comment accéder au code source sur ordinateur et sur mobile, puis comment l’exploiter sans vous perdre dans une suite de lignes qui semble, au premier abord, assez peu accueillante.

Qu’est-ce que le code source d’une page web ?

Le code source est le contenu textuel d’une page web transmis par le serveur à votre navigateur. Il contient généralement du HTML, qui organise les éléments de la page, ainsi que des références vers des fichiers de mise en forme et des scripts.

On peut y trouver, par exemple, le titre de la page, ses textes, ses liens, des images, des indications destinées aux moteurs de recherche et des informations de suivi. Le navigateur interprète ce contenu pour afficher la page que vous consultez.

Pour le SEO, le code source aide notamment à vérifier la présence d’une balise de titre, d’une description, d’un titre principal ou d’un lien. Pour un développeur, il peut servir à repérer une erreur ou à comprendre la structure d’une page. Il permet aussi de satisfaire une curiosité très légitime : « Mais comment cette page est-elle faite ? »

Afficher le code source dans un navigateur sur ordinateur

La méthode la plus rapide consiste à utiliser le raccourci clavier de votre navigateur. Ouvrez la page concernée, puis appuyez sur les touches adaptées à votre ordinateur.

• Sur Windows ou Linux, utilisez Ctrl + U dans la plupart des navigateurs.

• Sur Mac, utilisez généralement ⌘ + Option + U.

Une nouvelle page ou un nouvel onglet s’ouvre avec le code source. Vous pouvez ensuite utiliser la recherche de votre navigateur avec Ctrl + F sur Windows ou ⌘ + F sur Mac pour retrouver un mot, une balise ou une adresse.

Vous préférez passer par les menus ? Faites un clic droit sur la page, puis choisissez l’option Afficher le code source de la page. Le nom exact peut varier légèrement selon le navigateur. Sur certains appareils, un clic droit s’effectue en maintenant deux doigts sur le pavé tactile ou en utilisant le bouton droit de la souris.

Si le clic droit est désactivé sur un site, le raccourci clavier reste souvent disponible. Et si ce n’est pas le cas, vous pouvez généralement utiliser le menu du navigateur pour ouvrir les outils de développement, puis consulter le document HTML.

Une autre méthode : passer par la barre d’adresse

Il est aussi possible d’ouvrir le code source en ajoutant une commande au début de l’adresse de la page. Dans la barre d’adresse, écrivez view-source:, puis l’adresse complète de la page. Par exemple, pour consulter la page d’accueil d’un site, saisissez view-source:https://exemple.fr, puis validez.

Cette méthode fonctionne dans certains navigateurs, mais pas dans toutes les situations. Si elle ne donne rien, utilisez plutôt le raccourci clavier ou le menu contextuel. Il n’est pas nécessaire d’essayer les trois méthodes à chaque fois : choisissez simplement celle qui vous fait gagner du temps.

Afficher le code source sur téléphone ou tablette

Sur mobile, les raccourcis clavier sont moins pratiques et le menu permettant d’afficher le code source n’est pas toujours proposé. La commande view-source: peut fonctionner dans certains navigateurs : saisissez-la devant l’adresse de la page dans la barre d’adresse.

Si votre navigateur ne prend pas cette méthode en charge, vous pouvez ouvrir la page sur un ordinateur ou utiliser un outil d’analyse en ligne fiable. Évitez toutefois de copier une adresse contenant des données personnelles, un jeton d’accès ou un contenu privé dans un service que vous ne connaissez pas.

Pour une vérification ponctuelle, l’ordinateur reste généralement le moyen le plus simple. L’affichage du code sur téléphone peut être difficile à lire, surtout sur une page longue. Vous risquez de passer plus de temps à zoomer qu’à trouver l’information recherchée.

Code source ou outils de développement : quelle différence ?

Afficher le code source vous montre le document reçu par le navigateur. Les outils de développement, eux, permettent d’examiner la page telle qu’elle existe après son chargement et après les éventuelles modifications apportées par des scripts.

Pour ouvrir ces outils, faites un clic droit sur un élément de la page et choisissez Inspecter, ou utilisez le menu du navigateur. Vous pourrez alors examiner la structure d’un bouton, d’un titre ou d’une image. Vous pouvez aussi modifier temporairement certains éléments pour tester une présentation. Ces changements ne sont pas enregistrés sur le site : ils disparaissent lorsque vous rechargez la page.

La distinction est importante. Le code source correspond au document initial, tandis que l’inspection montre l’état courant de la page dans le navigateur. Si un texte apparaît à l’écran mais ne se trouve pas dans le code source, il a peut-être été ajouté après le chargement. Un contenu peut aussi être présent dans le document initial, puis modifié ou masqué ensuite.

En pratique, commencez par le code source pour contrôler ce qui est livré au navigateur. Passez aux outils de développement si vous cherchez à comprendre l’affichage final ou le fonctionnement d’un élément interactif.

Que chercher dans le code source pour le SEO ?

Inutile de lire toutes les lignes. Le code source peut être volumineux, et la plupart des éléments ne vous seront pas utiles pour une vérification simple. Utilisez la recherche du navigateur pour aller directement aux informations importantes.

• Le titre de la page : cherchez l’élément <title>. Il correspond au titre défini dans le document et peut être utilisé par le moteur de recherche dans ses résultats.

• La description : recherchez description. Vous pourrez repérer la balise qui fournit un résumé de la page aux moteurs de recherche.

• Les titres de contenu : cherchez les éléments de titre, notamment <h1>. Vérifiez que le sujet principal de la page est identifiable et cohérent avec son contenu.

• Les liens : recherchez une partie de l’adresse ou le texte d’ancrage. Vous pourrez vérifier si un lien pointe vers la bonne page.

• Les images : cherchez le nom du fichier ou un texte descriptif associé à l’image. Cela peut vous aider à vérifier si une description est fournie.

• Les indications pour les moteurs de recherche : recherchez des termes comme robots ou canonical. Ces éléments peuvent donner des informations sur l’exploration ou la version de référence d’une page.

Un exemple concret : vous venez de publier un article et souhaitez vérifier son titre. Ouvrez son code source, lancez la recherche, puis saisissez une partie du titre attendu. Si vous ne trouvez rien, vérifiez que vous êtes bien sur la bonne adresse et que la page s’est chargée correctement. Cette vérification ne remplace pas un audit SEO, mais elle permet de détecter rapidement une erreur évidente.

Pourquoi le code affiché ne correspond-il pas toujours à la page ?

Le cas le plus fréquent concerne les pages qui chargent une partie de leur contenu après l’ouverture. Un script peut ajouter des produits, des avis, un menu ou des résultats de recherche une fois que le navigateur a reçu le document initial.

Dans cette situation, le code source peut ne pas contenir le texte que vous voyez à l’écran. Les outils de développement sont alors plus adaptés pour examiner la page après son chargement. Si vous vérifiez l’indexation d’un contenu, vous devez aussi tenir compte de la façon dont les moteurs de recherche accèdent à ce contenu, et pas seulement de son apparence dans votre navigateur.

Autre cause possible : vous consultez une version en cache ou une page qui n’a pas été actualisée. Rechargez la page et vérifiez son adresse. Une différence entre le code et l’affichage n’est donc pas automatiquement le signe d’une erreur ; elle peut simplement venir du fonctionnement du site.

Erreurs fréquentes à éviter

• Confondre le code source et le contenu visible. Le code contient des informations techniques qui ne s’affichent pas directement, et l’affichage peut évoluer après le chargement.

• Modifier le code en pensant changer le site. Une modification faite dans les outils de développement est locale et temporaire. Elle n’est pas publiée sur le serveur.

• Copier tout le code sans savoir quoi chercher. Commencez par une question précise : vérifier un titre, une adresse, une balise ou un lien. La recherche du navigateur vous évitera de parcourir des centaines de lignes.

• Prendre une balise isolée pour un diagnostic complet. Trouver un titre ou une description ne garantit pas que toute la page est bien optimisée. Il faut aussi examiner le contenu, la structure et l’expérience proposée aux visiteurs.

• Partager des informations confidentielles. Le code source peut révéler des identifiants de suivi ou des données techniques. Ne publiez pas de copie complète sans vérifier ce qu’elle contient.

Une méthode simple pour aller droit au but

Pour une vérification rapide, suivez ces étapes :

• Ouvrez la page dans votre navigateur.

• Affichez son code source avec le raccourci clavier ou le menu contextuel.

• Lancez une recherche avec le terme qui correspond à votre objectif : titre, adresse, description ou texte.

• Si l’information manque ou ne correspond pas à l’affichage, ouvrez les outils de développement et examinez la page après son chargement.

• Notez ce que vous avez observé, puis vérifiez le problème dans votre système de gestion de contenu ou auprès de votre développeur.

Cette démarche évite de tirer des conclusions trop rapides. Par exemple, l’absence d’un texte dans le code source ne signifie pas forcément qu’il est inaccessible aux moteurs de recherche. Elle indique surtout qu’il faut vérifier comment et quand ce texte est ajouté à la page.

À retenir

Afficher le code source est une opération simple : utilisez le raccourci clavier, le menu du navigateur ou, si votre navigateur le permet, la commande view-source: devant l’adresse. Servez-vous ensuite de la recherche intégrée pour trouver rapidement l’élément qui vous intéresse.

Pour une vérification SEO de base, regardez notamment le titre, la description, les titres de contenu et les liens. Si la page affichée diffère du document initial, les outils de développement vous aideront à examiner son état après chargement. Le bon réflexe est de partir d’une question précise : vous trouverez plus vite la réponse, sans vous noyer dans le code.