Afficher le Rendu de la Source | Chrome Web Store (Extension)

Description View Rendered Source

View Rendered Source est une extension compatible au navigateur Google Chrome qui vous aide à comprendre la façon dont le navigateur construit et rend le code HTML d’origine d’une page dans un DOM fonctionnel ainsi que les modifications apportées par JavaScript.

Alors que beaucoups de personnes pensent qu’afficher le code HTML rendu reste une pratique moins correcte, Google donne plutôt des conseils sur la façon dont vous devez l’implémenter.

En effet, l’outil View Rendered Source est une bonne option lorsqu’il s’agit d’afficher les sources rendues afin de corriger certains éléments de votre contenu.

Il s’agit d’une extension facile à utiliser que vous pouvez télécharger dans Chrome store.

Voyons dans cette petite description comment l’outil peut vous être utile.

Définition View Rendered Source

View Rendered Source est un outil essentiel pour les développeurs web qui utilisent des frameworks JavaScript.

Il aide essentiellement les référenceurs à comprendre la façon dont les moteurs de recherche aperçoivent les pages de leurs sites web.

L’outil permet de lire également le code HTML dans sa version brute et même lorsqu’il est modifié.

Vous pouvez découvrir la différence entre les versions brutes et les versions rendues lorsque vous lisez les codes ligne par ligne. Vous allez remarquer que JavaScript modifie généralement les pages web au moment du rendu. 

Quelle est l’utilité de View Rendered Source ?

View rendered Source, vous aide à :

• Vérifier les balises de titre

Évidemment, si votre site n’a pas de  balises de titre, il n’apparaîtra tout simplement pas sur les moteurs de recherche. 

Sur un document HTML, vous pouvez trouver la balise de titre dans la section d’en-tête. 

Le titre est généralement ce que le lecteur peut voir en premier dans les moteurs de recherche et lorsqu’il clique dessus, cela le conduit sur la page web du contenu.

Par exemple, lorsqu’on tape dans Google ‘’SEOptimer’’, vous pouvez voir que le premier résultat avait pour titre ‘’Analyze Websites With Our Free SEO Audit&Reporting Tool’’

Lorsqu’on va dans View Rendered Source de la page, on peut voir la balise title s’y trouve sous forme de code.

View Rendered Source vous permet donc de vérifier si votre balise title apparaît correctement et sur dans la section Head de la page.

• Vérifier les méta descriptions

Un autre facteur aussi important que vous pouvez également surveiller dans le section head de code HTML sont les méta descriptions.

Comme le titre, vous ne pouvez lire la meta description au complet dans View Rendered Source que très rarement.

La meta description peut généralement se lire dans l’outil sous forme de code, si vous maitrisez un peu le codage.

En effet, une méta description est un court résumé qui accompagne les balises titres dans les résultats des moteurs de recherche. 

C’est généralement le facteur décisif que les utilisateurs utilisent pour déterminer si votre site leur donnera la valeur qu’ils recherchent. Il est donc important que vous en vérifiez pour chaque page. 

Évidemment, vous devez  noter que la balise title et la méta description doivent être situées dans la section ‘head’’ de votre code HTML. 

Par ailleurs, que vous utilisiez un système de gestion de contenu (CMS) ou que vous codiez votre propre site web, il est fortement recommandé d’éviter les balises titles et les méta-descriptions en double sur le site. 

Si vous utilisez WordPress, cela peut être dû à l’installation de deux différents plugins qui s’occupent des données meta.

Grâce à View Rendered Source, vous pouvez les trouver et les corriger.

• Vérifier les bonnes pratique sur les titres

Ce que vous devez rechercher ici, c’est sous quel format les titres d’une page sont construits.

En effet, l’utilisation de balises h1 est l’une des tactiques essentielles de référencement sur la page. Mais, l’utilisation de plusieurs balises h1 peut être interprétée par les moteurs de recherche comme une ‘’sur optimisation’’. 

Ce qui n’est certainement pas un bon signal pour votre site dans les moteurs de recherche.

Idéalement, les balises h1 sont destinées à être utilisées comme vos plus gros titres qui communiquent l’objectif principal d’une page.

Certains CMS ou thèmes que vous avez installés, tels que le site WordPress, peuvent avoir plusieurs h1, en particulier dans les sections blog ou post où chaque titre d’article peut être un h1 plutôt qu’un h2. 

Les balises H2 et H3 doivent être utilisées pour décomposer le contenu afin de le rendre plus facile à consommer pour le lecteur. Ils doivent utiliser des mots-clés secondaires pour soutenir les mots-clés principaux. 

View Rendered Source vous permet donc de Vérifier s’ils sont correctement formatés.

• Vérifier les Scripts 

Bien que les scripts soient parfaits pour ajouter des fonctionnalités à votre site, s’il y en a trop, ils peuvent entraîner une augmentation significative du temps de chargement des pages sur votre site. 

N’oubliez pas qu’au moins la moitié des internautes s’attendent à ce qu’un site se charge en à peine 2 secondes.

Les scripts doivent être situés en bas de la page, généralement juste avant de fermer la  balise ‘’body’’ en HTML. 

Une meilleure pratique consiste à avoir les scripts dans un fichier Javascript, désigné par l’extension de fichier .js, qui est lié au HTML en bas de la page.

Vous devez également vérifier que le code de suivi que vous avez installé, tel que le code de suivi Google Analytics de Facebook, est correctement installé. 

Une erreur ou un code manquant dans le script peut vous empêcher de collecter correctement les données.

Que vous utilisiez une plateforme CMS ou que vous souhaitiez savoir si votre site a été piraté, vous pouvez afficher tous les scripts pour vérifier si vous les avez autorisés ou non. 

Sans afficher le code source de votre page, vous n’avez pas une visibilité complète de ce qui a été installé.

On peut donc noter que View Rendered Source serait une bonne option pour vous lorsque vous désirez afficher la source rendue d’une page.

Il vous suffit d’installer l’extension et d’aller déçu lorsque vous ouvrez la page concernée et il vous présentera tout le contenu sous forme de code.