Vous cherchez un moyen simple d'afficher le code source d'une page ?
Lorsque j'ai commencé à créer des sites Web WordPress, j'ignorais pourquoi l'affichage du code source d'une page était important ou à quel point il était facile de le faire. Comme beaucoup de propriétaires de sites Web, j'entendais d'autres développeurs parler de la vérification du code source des pages, mais je pensais que c'était quelque chose dont seuls les programmeurs avancés devaient se soucier.
Après avoir géré plusieurs sites WordPress et aidé des clients à améliorer leur SEO, j'ai découvert que l'affichage du code source d'une page est en réalité un outil simple mais puissant. Il m'aide à repérer les problèmes techniques de SEO, à vérifier si mes balises méta fonctionnent correctement, et même à apprendre des sites Web de concurrents performants – le tout sans avoir besoin d'être un expert en codage.
Je partagerai également des moyens pratiques d'utiliser ces connaissances pour améliorer le SEO de votre site Web, même si vous n'avez jamais regardé de code HTML auparavant. Faites-moi confiance, si j'ai pu apprendre cela, vous le pouvez aussi. Et cela vaut la peine de passer quelques minutes pour le maîtriser.
N'importe qui peut accéder au code d'une page Web en utilisant la méthode d'affichage du code source . Et il y a de bonnes raisons pour lesquelles cela peut être utile en SEO.
Dans ce guide, je vais vous montrer 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 ?
- How to View Page Source in Google Chrome
- Comment utiliser le retour à la ligne et la recherche de code
- Comment utiliser les outils de développement Chrome pour afficher le code source de la page
- Common Uses for View Page Source
- Optimize Meta Tags with 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 fournit le format, le style et l'interactivité de la page.
Par exemple,
- HTML fournit le formatage tel que les titres et les paragraphes.
- CSS fournit le style, y compris les couleurs et la mise en page.
- JavaScript fournit des éléments interactifs tels que des pop-ups.
Les navigateurs chargent et interprètent instantanément ces fichiers de code, rendant une page Web visible.
N'importe qui peut afficher le code source d'un site Web. Les spécialistes du marketing et les développeurs Web font partie de ceux qui utilisent « l'affichage du code source de la page ».
Vous pouvez également l'utiliser pour quelques vérifications SEO simples.
Comment afficher le code source d'une page dans Google Chrome
Nous utiliserons Google Chrome pour notre exemple, car il détient la plus grande part de marché de tous les navigateurs. Et les raccourcis clavier que nous partagerons pour Chrome fonctionnent également pour la plupart des autres navigateurs, y compris Apple Safari et Brave.
Il existe plusieurs façons d'afficher le code d'une page Web dans Chrome. Voici 3 méthodes, la plus rapide étant la première.
Méthode 1 : Raccourci clavier
- Mac : ⌘ + option + u
- Windows/Linux : Ctrl + U
Méthode 2 : Clic droit, Sélectionner
- Cliquez avec le bouton droit sur une page Web. (Sur un Macbook, appuyez sur le pavé tactile avec deux doigts.)
- Sélectionnez Afficher le code source dans la fenêtre contextuelle qui apparaît.
Méthode 3 : Menu de l'application Apple
- Avec Chrome ouvert, accédez au menu de l'application Apple et sélectionnez Affichage. Dans ce menu déroulant, sélectionnez Développeur » Afficher la source
Utiliser le retour à la ligne et la recherche de code
Lorsque la page de code s'ouvre dans un nouvel onglet, cochez la case « retour à la ligne » en haut à gauche. Cela vous évitera de devoir faire défiler horizontalement pour voir le code.
Utilisez ⌘ + f pour ouvrir une boîte de recherche pour le code.
Comment utiliser les outils de développement Chrome pour afficher le code source de la page
En plus de voir une seule page de code source, vous pouvez accéder aux outils de développement Chrome depuis n'importe quelle page Web pour obtenir des informations de code plus détaillées. Les concepteurs et développeurs Web utilisent ces outils.
Pour accéder aux outils de développement Chrome, utilisez Chrome pour naviguer vers 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 derrière la page.
Cette vue affiche notamment les écouteurs d'événements CSS et JavaScript.
Astuce : Tous les principaux navigateurs Web, y compris Mozilla Firefox et Microsoft Edge, offrent une fenêtre « outils de développement », et le même raccourci Chrome fonctionne pour ceux-ci.
Utilisations courantes de l'affichage du code source de la page
Il y a 2 raisons courantes pour lesquelles les non-développeurs souhaitent voir le code source d'une page.
L'une est de vérifier les backlinks des articles invités. Et l'autre est la curiosité : voir à quoi ressemblent les balises méta en HTML.
Utilisation 1 : Vérifier les backlinks des articles invités
Les backlinks, liens d'autres sites vers le vôtre, sont un facteur de classement.
Une façon courante pour les sites Web d'obtenir des backlinks est d'écrire des articles invités pour d'autres sites en échange d'un lien.
Cette stratégie de backlink aide les individus à élever leur présence en ligne et à communiquer leur expertise.
Il est cependant important de vérifier le code de chaque lien que vous obtenez. Pourquoi ? Parfois, le propriétaire d'un site ajoutera accidentellement un attribut de lien, comme « sponsorisé » ou « nofollow », ce qui annulera toute valeur SEO.
Ces attributs de lien, également appelés balises, ne peuvent être vus que dans le code source de la page.
Comment vérifier le HTML pour les attributs de lien : Méthode 1
- Accédez à la page qui est liée à la vôtre.
- Faites un clic droit sur n'importe quelle zone de la page.
- Sélectionnez « Afficher le code source de la page ».
Le code HTML de la page s'ouvrira dans une nouvelle fenêtre.
Recherchez le texte d'ancrage et vérifiez le lien environnant pour les attributs de lien nofollow, sponsorisé ou UGC.
À titre d'exemple, nous utiliserons un article de ReadWrite.com.
En faisant défiler jusqu'en bas de cet article, nous voyons que la biographie de l'auteur invité comprend un lien vers son site Web, Ditto Transcripts.
Faites un clic droit n'importe où sur la page et sélectionnez Afficher le code source.
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 « Ditto Transcripts » sur la page. C'est ce que nous voyons.
Le lien est un lien « dofollow », ce qui est optimal pour le SEO. Remarquez l'absence de tout attribut nofollow, sponsored ou UGC dans le code du lien.
Comment vérifier le HTML des attributs de lien : Méthode 2
Vous pouvez également accéder au code du lien en utilisant les outils de développement Chrome. Cependant, sachez que cet outil affiche un code plus détaillé, ce qui pourrait être déroutant pour les débutants.
Voici comment vérifier un lien à l'aide des outils de développement Chrome.
- Accédez à la page qui est liée à la vôtre.
- Faites un clic droit sur le backlink.
- Sélectionnez Inspecter dans le petit menu contextuel qui apparaît.
Cela ouvrira les outils de développement Chrome.
Heureusement, cette action mettra en surbrillance le lien (en bleu), vous saurez donc exactement où regarder.
Ici, nous utiliserons le même ReadWrite.com comme exemple.
Pour afficher le code du lien, nous allons cliquer dessus avec le bouton droit et sélectionner « Inspecter » dans le menu contextuel.
La sélection de « Inspecter » ouvrira les outils de développement Chrome. Le lien sera mis en surbrillance en bleu.
Zooms sur cette partie mise en surbrillance.
Bien que ce code de lien puisse contenir des éléments que vous ne comprenez pas, vous pouvez voir qu'il n'y a pas de balise nofollow, sponsored ou UGC.
Utilisation 2 : Voir à quoi ressemblent les balises méta
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 balises méta dans le code.
Vous avez peut-être entendu dire que les balises de titre et les descriptions méta sont importantes pour le SEO.
Et les plugins, comme All in One SEO (AIOSEO), facilitent la modification et l'optimisation de ceux-ci.
Mais vous pourriez vous demander à quoi ressemblent ces 2 balises méta dans le code source.
Pour le savoir,
- Accédez à une page.
- Allez à Afficher la source de la page.
- Cochez la case « retour à la ligne » en haut à gauche.
- Utilisez ⌘ + f pour rechercher <title ou <meta name=”description”.
Voici un exemple de balise de titre.
Et voici la méta-description du même article.
Optimiser les balises méta 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.
Et vous n'aurez pas besoin d'afficher la source de la page pour vérifier les balises méta.
Ce plugin établi compte des milliers d'avis 5 étoiles sur WordPress.org et plus de 3 millions d'utilisateurs.
Bien qu'il soit facile à utiliser pour les débutants, AIOSEO offre 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 Google.
Et vous bénéficiez de moyens simples pour optimiser ces balises, comme le maintien de votre méta-description dans une longueur définie.
De plus, All in One SEO fournit des recommandations pour améliorer le SEO de vos pages Web individuelles.
Autres avantages
- Configuration facile pour le SEO local (pour les petites entreprises).
- Recommandations sur l'utilisation du mot-clé principal.
- Transformez vos pages en extraits enrichis en quelques clics.
Q&R sur l'affichage du code source de la page
Comment afficher le code source d'une page dans Safari ?
Pour afficher le code source d'une page dans Safari, faites un clic droit sur la page et choisissez Afficher la source de la page. Ou, dans le menu du navigateur, sélectionnez Développement » Afficher la source de la page.
L'utilisation de Option + Commande (⌘) + U ouvrira 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 HTML, vous pouvez utiliser diverses méthodes d'affichage du code source de la page décrites ici.
Pour voir le code HTML et CSS, vous pouvez utiliser la fonction Outils de développement de votre navigateur Web.
Vous pouvez également trouver le(s) fichier(s) de code CSS cliquable(s) d'un site Web dans l'élément head du HTML.
Et ensuite ?
Nous espérons que cet article vous a aidé à comprendre comment afficher 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 backlinks en SEO et obtenir des informations sur les liens payants et la création de liens. Et n'oubliez pas de capturer ces prospects.
Si vous avez trouvé cet article utile, abonnez-vous à notre chaîne YouTube pour des tutoriels SEO. Vous pouvez également nous suivre sur Twitter, LinkedIn ou Facebook pour rester informé.
Envie d'essayer AIOSEO gratuitement ?
Entrez l'URL de votre site Web WordPress pour installer AIOSEO Lite.
Divulgation : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Nous ne recommandons que les produits qui, selon nous, apporteront de la valeur à nos lecteurs.
