Vous cherchez un moyen simple d'afficher la source d'une page ?
Lorsque j'ai commencé à créer des sites web WordPress, je ne savais pas pourquoi il était important d'afficher le code source des pages, ni à quel point c'était facile à faire. Comme beaucoup de propriétaires de sites web, j'avais entendu d'autres développeurs parler de vérifier le code source des pages, mais je pensais que c'était quelque chose dont seuls les programmeurs avancés devaient se préoccuper.
Après avoir géré plusieurs sites WordPress et aidé des clients à améliorer leur référencement, j'ai découvert que la visualisation de la source des pages est en fait un outil simple mais puissant. Il m'aide à repérer les problèmes techniques de référencement, à vérifier si mes balises méta fonctionnent correctement et même à tirer des enseignements des sites Web de concurrents performants - tout cela sans avoir besoin d'être un expert en codage.
Je partagerai également avec vous des moyens pratiques d'utiliser ces connaissances pour améliorer le référencement de votre site web, même si vous n'avez jamais regardé de code HTML auparavant. Croyez-moi, si j'ai pu apprendre cela, vous le pouvez aussi. Et cela vaut bien les quelques minutes qu'il faut pour le maîtriser.
Tout le monde peut accéder au code d'une page web en utilisant la méthode de visualisation de la source de la page . Et il y a quelques bonnes raisons pour lesquelles cela peut être utile dans le cadre du référencement.
Dans ce guide, je vous montrerai exactement comment afficher le code source de n'importe quelle page web - et c'est super facile !
Dans cet article
- Qu'est-ce que le code source d'une page web ?
- Comment afficher la source d'une page dans Google Chrome
- Comment utiliser le retour à la ligne et le code de recherche
- Comment utiliser les outils de développement de Chrome pour afficher la source d'une page
- Utilisations courantes de View Page Source
- Optimiser les Meta Tags avec All in One SEO (AIOSEO)
Qu'est-ce que le code source d'une page web ?
Les pages web sont des fichiers de code. Et les sites web sont des collections de fichiers de code organisés en dossiers.
Ce code définit le format, le style et l'interactivité de la page.
Par exemple,
- HTML fournit des formats tels que des titres et des paragraphes.
- CSS fournit le style, y compris les couleurs et la mise en page.
- JavaScript fournit des éléments interactifs tels que des fenêtres contextuelles.
Les navigateurs chargent et interprètent instantanément ces fichiers de code, ce qui donne une page web visible.
Tout le monde peut consulter le code source d'un site web. Les spécialistes du marketing et les développeurs web sont parmi ceux qui utilisent la fonction "voir la source de la page".
Vous pouvez également l'utiliser pour effectuer des vérifications simples en matière de référencement.
Comment afficher la source d'une page dans Google Chrome
Nous utiliserons Google Chrome pour notre exemple, car c'est le navigateur qui détient la plus grande part de marché. Les raccourcis clavier que nous partagerons avec Chrome sont également valables pour la plupart des autres navigateurs, y compris Safari et Brave d'Apple.
Il existe plusieurs façons d'afficher le code d'une page web dans Chrome. En voici trois, en commençant par la méthode la plus rapide.
Méthode 1 : Raccourci clavier
- Mac : ⌘ + option + u
- Windows/Linux : Ctrl + U
Méthode 2 : Cliquer avec le bouton droit de la souris, sélectionner
- Cliquez avec le bouton droit de la souris sur une page web. (Sur un Macbook, appuyez sur le pavé tactile avec les deux doigts).
- Sélectionnez View Page Source dans la fenêtre contextuelle qui s'affiche.
Méthode 3 : Menu App Apple
- Lorsque Chrome est ouvert, accédez au menu de l'application Apple et sélectionnez View . Dans le menu déroulant, sélectionnez Développeur " Voir la source
Utiliser le retour à la ligne et le code de recherche
Lorsque la page de code s'ouvre dans un nouvel onglet, cochez la case "retour à la ligne" en haut à gauche. Ainsi, vous n'aurez pas à faire défiler la page horizontalement pour voir le code.
Utilisez les touches ⌘ + f pour ouvrir une boîte de recherche pour le code.
Comment utiliser les outils de développement de Chrome pour afficher la source d'une page
Outre l'affichage d'une seule page de code source, vous pouvez accéder aux outils de développement de Chrome à partir de n'importe quelle page web pour obtenir des informations plus détaillées sur le code. Ces outils sont utilisés par les concepteurs et les développeurs de sites web.
Pour accéder à Chrome Developer Tools, utilisez Chrome pour naviguer sur une page web.
Utilisez ensuite le raccourci clavier approprié :
- Mac : ⌘ + option + i
- Windows/Linux : F12 ou Control + Shift + I
Cela ouvrira une nouvelle fenêtre dans le même onglet du navigateur, révélant le code de la page.
Cette vue affiche notamment les récepteurs d'événements CSS et JavaScript.
Conseil : Tous les principaux navigateurs web, y compris Mozilla Firefox et Microsoft Edge, proposent une fenêtre "outils de développement", et le même raccourci Chrome fonctionne pour ceux-ci.
Utilisations courantes de View Page Source
Il y a deux raisons courantes pour lesquelles les non-développeurs veulent voir le code source d'une page.
L'une d'elles consiste à vérifier les liens de retour des messages d'invités. Et l'autre par curiosité : pour voir à quoi ressemblent les métabalises en HTML.
Utilisation 1 : Vérifier les backlinks des billets d'invité
Les backlinks, liens d'autres sites vers le vôtre, sont un facteur de classement.
Un moyen courant pour les sites web d'obtenir des liens retour consiste à rédiger des articles pour d'autres sites en échange d'un lien.
Cette stratégie de liens retour aide les individus à renforcer leur présence en ligne et à communiquer leur expertise.
Il est cependant important de vérifier le code de chaque lien que vous recevez. Pourquoi ? Parfois, le propriétaire d'un site ajoute accidentellement un attribut de lien, comme "sponsorisé" ou "nofollow", qui annule toute valeur SEO.
Ces attributs de lien, également appelés balises, ne sont visibles que dans le code source de la page.
Comment vérifier la présence d'attributs de liens dans le code HTML : Méthode 1
- Naviguez jusqu'à la page liée à la vôtre.
- Cliquez avec le bouton droit de la souris sur n'importe quelle zone de la page.
- Sélectionnez "Voir la source de la page".
Le code HTML de la page s'ouvrira dans une nouvelle fenêtre.
Recherchez le texte de l'ancre et vérifiez que le lien environnant ne comporte pas d'attributs nofollow, sponsorisé ou UGC.
A titre d'exemple, nous utiliserons un article de ReadWrite.com.
En faisant défiler l'article jusqu'en bas, nous constatons que la bio de l'auteur invité comprend un lien vers son site web, Ditto Transcripts.
Cliquez avec le bouton droit de la souris n'importe où sur la page et sélectionnez Voir la source de la page.
Cela ouvrira le code HTML de la page dans un nouvel onglet. (N'oubliez pas de cocher la case "retour à la ligne").
Maintenant, vous pouvez rechercher sur la page "Ditto Transcripts". Voici ce que nous voyons.
Il s'agit d'un lien "dofollow", ce qui est optimal pour le référencement. Remarquez l'absence de tout attribut nofollow, sponsorisé ou UGC dans le code du lien.
Comment vérifier la présence d'attributs de liens dans le code HTML : Méthode 2
Vous pouvez également accéder au code du lien en utilisant les outils de développement de Chrome. Sachez toutefois que cet outil affiche un code plus détaillé, ce qui peut être déroutant pour les débutants.
Voici comment vérifier un lien à l'aide de Chrome Dev Tools.
- Naviguez jusqu'à la page liée à la vôtre.
- Cliquez avec le bouton droit de la souris sur le lien retour.
- Sélectionnez Inspecter dans la petite fenêtre qui s'affiche.
Cela ouvrira les outils de développement de Chrome.
Cette action met en évidence le lien (en bleu), de sorte que vous sachiez exactement où regarder.
Nous utiliserons ici le même ReadWrite.com comme exemple.
Pour afficher le code du lien, nous allons cliquer avec le bouton droit de la souris sur le lien et sélectionner "Inspecter" dans la fenêtre contextuelle.
En sélectionnant "Inspecter", les outils de développement de Chrome s'ouvrent. Le lien sera surligné en bleu.
Zoomons sur cette partie en surbrillance.
Bien que ce code de lien puisse contenir des choses que vous ne comprenez pas, vous pouvez voir qu'il n'y a pas de balise nofollow, sponsorisée ou UGC.
Utilisation 2 : voir à quoi ressemblent les métabalises
La deuxième raison pour laquelle les non-développeurs peuvent utiliser l'affichage de la source de la page est qu'ils sont curieux de voir à quoi ressemblent les métabalises dans le code.
Vous avez peut-être entendu dire que les balises de titre et les méta-descriptions sont importantes pour le référencement.
Des plugins, comme All in One SEO (AIOSEO), permettent de les modifier et de les optimiser facilement.
Mais vous vous demandez peut-être à quoi ressemblent ces deux balises méta dans le code source.
Pour le savoir,
- Naviguer vers une page.
- Aller à Voir la source de la page.
- Cochez la case "retour à la ligne" en haut à gauche.
- Use ⌘ + f to search for <title or <meta name=”description”.
Voici un exemple de balise de titre.
Et voici la méta-description du même article.
Optimiser les Meta Tags avec All in One SEO (AIOSEO)
L'optimisation de ces balises méta est facile avec le plugin All in One SEO (AIOSEO ) pour WordPress.
Vous n'aurez pas besoin de consulter la source de la page pour vérifier les balises méta.
Ce plugin bien établi a reçu des milliers d'avis 5 étoiles sur WordPress.org et compte plus de 3 millions d'utilisateurs.
AIOSEO est facile à utiliser pour les débutants et donne des résultats professionnels.
Vous pouvez télécharger All in One SEO ici.
Vous verrez un aperçu de votre titre et de votre méta-description dans les résultats de recherche de Google.
Vous trouverez également des moyens simples d'optimiser ces balises, par exemple en limitant la longueur de votre méta-description.
En outre, All in One SEO fournit des recommandations pour améliorer le référencement de vos pages web individuelles.
Les autres avantages sont les suivants
- Installation facile pour le référencement local (pour les petites entreprises).
- Recommandations sur l'utilisation des mots-clés.
- Transformez vos pages en snippets riches en quelques clics.
Q&R sur l'affichage de la source de la page
Comment afficher la source d'une page dans Safari ?
Pour afficher la source de la page dans Safari, cliquez avec le bouton droit de la souris sur la page et choisissez Afficher la source de la page. Ou, dans le menu du navigateur, sélectionnez Développer " Afficher la source de la page.
Les touches Option + Commande (⌘) + U permettent d'ouvrir la fenêtre des outils de développement.
Comment trouver le code HTML et CSS d'un site web ?
Il existe plusieurs façons de trouver le code HTML et CSS d'un site web. Pour trouver le code HTML, vous pouvez utiliser les différentes méthodes d'affichage de la source de la page décrites ici.
Pour voir le code HTML et CSS, vous pouvez utiliser la fonction "Developer Tools" de votre navigateur web.
Vous pouvez également trouver le(s) fichier(s) de code CSS cliquable(s) pour un site web dans l'élément head du HTML.
Quelle est la prochaine étape ?
Nous espérons que cet article vous a aidé à comprendre comment visualiser le code source d'une page et pourquoi les gens l'utilisent.
Vous voudrez peut-être aussi en savoir plus sur le rôle des liens retour dans le référencement et obtenir des informations sur les liens payants et la création de liens. Et n'oubliez pas de capturer ces prospects.
Si cet article vous a été utile, n'hésitez pas à vous abonner à notre chaîne YouTube pour obtenir des tutoriels sur le référencement. Vous pouvez également nous suivre sur Twitter, LinkedIn ou Facebook pour rester informé.
Vous voulez essayer AIOSEO gratuitement ?
Entrez l'URL de votre site WordPress pour installer AIOSEO Lite.
Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.
