Dix étapes simples pour optimiser une page

Cette page explique l’optimisation complète d’une page travers un exemple simple en dix étapes en respectant les standards du W3C. W3C, c’est le World Wide Web Consortium. Cette méthode est basique et efficace.

Les logiciels de création de sites génèrent automatiquement le code du contenu des pages, mais il faudra y ajouter les informations essentielles concernant le site et parfois modifier et alleger le code pour rendre la page plus accessible, d’où l’importance de la compréhension de quelques notions essentielles.

Quelques définitions

HTML (HyperText Markup Language) est un langage de programmation utilisé pour afficher des pages web.
XHTML (Extensible HyperText Markup Language) est une reformulation du HTML 4.0 en XML, recommandée par le W3C.
XML (Extensible Markup Language est un langage simple en format texte utilisé pour le transport et le stockage des données souvent utilisé comme format des plans de site, « sitemap.xml » par exemple. Un document HTML comprend 3 parties:

les informations sur le type de document
le « head »
et le contenu « body ».

Les meta tags (balises méta)
Les meta tags sont des balises que l’on insère dans l’en-tête du document HTML source pour donner des informations sur la page. La plupart des logiciels de création de sites vous permettent d’insérer facilement les plus importantes de ces balises, dont les balises title (titre), description et keywords (mots-clés).
Celles-ci sont essentielles.

Voici un exemple de document en code HTML

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN »
« http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1800/xhtml »>
<head>
<title>le titre de la page</title>
<meta http-equiv= »content-type »
content= »text/html; charset=us-ascii » />
<meta name= »decription »
content= »la description de la page » />
<meta content= »les mots-clés de la page »
name= »keywords » />
</head>
<body>
<p>Paragraphe</p>
</body>
</html>

Dix pas simples pour le référencement organique d’une page web – SEO

En ce moment, tout a l’air facile avec la panoplie de logiciels d’optimisation sur le marché. Mais attention, la sophistication n’ est pas toujours une bonne chose. Certains logiciels sont lourds et finissent par causer un ralentissement du site sans apporter un résultat forcément meilleur comparé a ceux plus légers . Vu l’importance de la vitesse de chargement d’un site, il faudra choisir minutieusement son logiciel.

Il faut aussi savoir que l’intelligence artificielle n’est pas toujours la meilleure solution; et malgré tous ces outils formidables, il est toujours utile d’avoir les connaissances de base de l’optimisation d’un site pour pouvoir choisir le logiciel adéquat et configurer parfaitement le site même si vous le construisez par blocs.

L’accessibilité d’une page peut différer par le navigateur utilisé, la vitesse du reseau Internet, la condition physique du lecteur (handicapé ou pas), la vitesse de chargement de la page, la condition du serveur, etc, mais il y a des facteurs que nous pouvons controller.

Un exemple fréquent est la compréhension facilitée d’une page par l’apparition des textes alternatifs des images non chargées. Les visiteurs concernés ont une idée de la page et peuvent cliquer sur les liens des images, même si ces dernières ces dernières n’ont pas été chargées .

La conformité du code source des pages au standard du W3C est importante pour que celles-ci soient facilement accessibles aux robots qui explorent et indexent les sites. Choisissez un logiciel qui vous permettra d’éditer et de modifier le code au besoin.

Pour les outils qui vous permettent de construire votre site sans possibilité d’édition du code, remplissez tous les paramètres du site, de la page et de ses éléments au mieux de votre connaissance en vous inspirant de l’exemple étudié ici. Éditez les tableaux et les images, remplissez les attributs des tableaux et également les textes alternatifs et propriétés des images.

Pour les logiciels qui permettent de construire les sites par blocs sans possibilité d’accès au code source, remplissez toutes les cases proposées, sinon la page gardera les valeurs par défaut. Heureusement, plusieurs outils de construction de sites donnent accès au code source; ce qui est une grande aide, car c’est parfois indispensable pour personnaliser d’avantage le site.

Quelques éléments particulièrement importants sont le contenu de la page qui doit être informatif, mercatique et stratégique pour les moteurs de recherche et les visiteurs, les balises méta (meta tags) indispensables, le paramétrage des objets et éléments graphiques.

1. Trouver les mots-clés pour le thème choisi

La recherche des mots-clés

Ils existe des outils de recherche de mots-clés, qui donnent même les chiffres de la concurrence et choisissez les mots ayant une forte demande et peu de concurrence. Les outils de recherche utilisés pour la promotion payante des sites Internet donnent une idée de la concurrence pour l’expression recherchée.

Voici un exemple:

La recherche de mots-clés pour le site d’un restaurant italien à Rouen qui sert des plats végétariens, en entrant « restaurant italien » et « restaurant » dans la zone de recherche, a donné comme meilleurs choix,

« restaurant sur rouen », « restaurant italien » et « recettes végétariennes ».

La composition des mots-clés

Les expressions obtenues plus tôt serviront à former le groupe de dix mots-clés composé de mots simples et de leurs compositions logiques en expressions de 2 mots. Dix mots-clés suffisent.

Les mots-clés sont alors : restaurant italien, sur rouen, recettes végétariennes, restaurant, recettes, végétariennes, italien et rouen. Ces mots sont placés dans la balise par ordre d’importance.

La balise méta pour les mots-clés serait :<meta name= »keywords » content= »restaurantitalien,sur rouen,recettes végétariennes,restaurant,recettes,végétariennes,
italien,rouen »>

J’ai remarqué cette tendance à supprimer les accents des mots clés dans la balise « Description ». Gardez les accents, sinon les robots considéreront que les mots-clés annoncés dans la balise méta « keywords » sont absents de la page. Ce groupe de mots-clés comprend tous les mots simples et groupes de 2 mots les plus compétitifs, au moment de la recherche pour le thème d’un restaurant italien situé à Rouen ».

Ces balises méta sont toutes bien sûr à insérer dans l’entête du document HTML comme dans le document ci-dessus.

2. Choisir le nom de domaine

Ce n’est pas toujours une bonne idée d’utiliser le nom du restaurant comme nom de domaine. S’il s’appelle par exemple « Le Papillon Bleu », « lepapillonbleu.com » n’aiderait que les personnes connaissant l’existence de ce restaurant, pas à attirer les prospects de restaurants italiens ou végétariens à Rouen, n’ayant jamais entendu parler du Papillon Bleu.

Par contre un nom comme « Restaurant Italien », « Restaurant Végétarien » ou « L’italien de Rouen » serait utilisable car ces termes auront plus de chance d’être utilisés pour une recherche. Les mots-clés devraient être dans le nom de domaine. Le but du marketing, c’est d’attirer les prospects et un site Internet peu très bien remplir ce rôle.

Alors, « restaurantitalien.com » devient un nom de domaine intéressant. Il est facile à se rappeler et est disponible. Mais surtout, il est composé de l’expression la plus intéressante obtenue à a recherche. L’extension « com » est la plus répandue et de ce fait la plus appropriée pour un site commercial. car, même si le restaurant est situé à Rouen, un visiteur pourrait lancer une recherche pour connaître la région depuis un autre pays ou même un autre continent.

Évitez les tirets dans le nom de domaine. Même si aucun nom très intéressant n’est disponible, il serait préférable de trouver des mots-clés moins demandés plutôt que d’utiliser des tirets. Ils engendrent souvent des erreurs d’orthographe par les clients et ces derniers pourraient par conséquent se retrouver sur un site concurrent.

3. Le titre de la page

Le titre ne devrait pas dépasser une quinzaine de mots. Il doit refléter le contenu du texte et son expression entière doit figurer dans le texte visible de la page. Il doit être unique, comme le titre de chaque page du site, court et précis tout en contenant les mots-clés essentiels, comme : Restaurant italien sur Rouen
Placez la balise title immédiatement après <head>:

<head>
<title>Le Papillon Bleu, restaurant italien sur Rouen</title>

La plupart du temps, il suffit simplement de rentrer le titre dans une case du logiciel d’optimisation.

Écrivez les noms de fichiers en minuscules, et ne collez pas les mots; séparez-les par des tirets (norme de Google), mais évitez les accents, certains serveurs ont du mal avec les fichiers ayant des accents dans leurs noms. Chaque fichier du site doit avoir un nom unique. Nous sauvegarderons cette page index sous:restaurant-italien-sur-rouen.html

4. La description de la page

Elle doit être aussi précise que possible en quelques mots. C’est en fait un résumé court du contenu de la page en environ 200 caractères. Attention aux caractères spéciaux! Si vous êtes obligés de les utiliser, sachez qu’un accent par exemple peut se traduire par plusieurs caractères dans le code. Supprimez tous les mots inutiles et concentrez-vous sur les mots-clés. La description entière devrait figurer dans le contenu de la page.

Nous pourrions écrire :

« Savourez nos spécialités végétariennes au Papillon Bleu, un joli restaurant italien au cœur de Rouen. »

Entrez cette description dans la case qui lui est réservée, sinon voici la balise en-dessous:

<meta name= »description » content= »Savourez nos spécialités végétariennes au Papillon Bleu, un joli restaurant italien au cœur de Rouen. »>

5. Le paramétrage des images

Mentionnez toujours les propriétés de dimension des images, hauteur et largeur ainsi que leurs textes alternatifs. Utilisez les mots-clés pour ces textes alternatifs.

Pour une photo de pizza végétarienne par exemple, la balise image pourrait être :

Ici, si ce sont des cases à remplir, tapez le titre de l’image et le texte alternatif dans leurs cases respectives.

Certains robots ne décèlent que la forme simplifiée des dimensions d’images et considèrent les valeurs en pixels par défaut. En cas de problème, revenez à la forme décrite ci-dessous.

border= »0″ width= »197″ height= »134″. Entrez simplement les valeurs dans les cases à remplir.

Si vous n’utilisez pas un CMS (Content management System), créez un dossier images et mettez-y toutes les images. Elles seront de ce fait plus facilement accessibles. Faites attention à la taille et au nombre des images; plus elles sont grandes ou nombreuses sur une page, plus le temps de chargement de la page est long. Ce qui est un point négatif pour l’optimisation.

Préférez les images au format JPEG qui sont 3 fois moins lourdes à charger que celles au format PNG. Suivant la taille de l’image de fond que vous choisirez, un fond de site simplement avec une couleur uniforme peut être jusqu’à 200 fois moins long a charger. De toute façon si vous avez des images, pensez à la compression sur le serveur pour améliorer la vitesse de chargement de la page.

Pour notre exemple, nous pourrions utiliser une image du restaurant ou son logo (ci-dessous), en tête de page avec comme texte alternatif.

alt= »Restaurant italien sur Rouen, recettes végétariennes-Le Papillon Bleu, logo »,

Tip: Mettez le logo ou un lien avec votre mot-cle principal tout en bas du pied de page. ainsi qu’une barre en pied de page dans (ci-dessous) pour les droits d’auteur du site ayant comme « alt= »Restaurant italien sur Rouen, recettes végétariennes, Copyrights, Le Papillon Bleu ».

6. Le contenu

Pour tout site, mais surtout pour un référencement organique, le facteur le plus important restera toujours le contenu. Optez pour un site qui offre ce qu’il aura promis au visiteur et le tout en une mise en page claire et honnête. Le visiteur devrait pouvoir faire la différence entre le contenu vrai et les publicités par exemple. Réservez un endroit à ces derniers, sinon marquez les tout simplement comme publicité si vous le pouvez.

Optez pour un bon texte bien écrit et reflétant le titre et la description mentionnée dans vos balises méta. Choisissez une taille de police moyenne et laissez tomber les applications lourdes et longues à charger. Hormis le temps de chargement considéré par les moteurs de recherche, ceci peut également décourager les visiteurs du site. Allégez la page au maximum.

Personnaliser la page d’erreur 404 – « Page non trouvée ». Celle-ci devrait être aussi informative que possible avec par exemple une recherche du site, un plan du site ou au moins des liens importants pour rediriger correctement le visiteur.

Les mots-clés doivent figurer à des endroits stratégiques de la page.

Ils doivent tous figurer dans le texte visible de la page. Écrivez le texte de votre page de manière qu’ils comprennent discrètement tous ces mots tels qu’ils sont annoncés dans la balise « keywords ». Ils doivent simplement y être au moins une fois. La page que vous présentez doit être écrite d’abord pour le visiteur. Un moyen simple de vérifier la présence des mots-clés dans le texte est d’effectuer une recherche qui met les expressions concernées en surbrillance comme celle de plusieurs navigateurs.

Utilisez les mots-clés dans les sous-titres.

Il est également important que ces mots soient placés directement en début et en fin de page. Vous pouvez écrire des textes bien réfléchis en début et fin de page ou y placer des images pour donner plus de couleur à la page et utilisez les mots-clés dans leurs textes alternatifs.

Le logo du restaurant

7. Les paramètres importants des tableaux

Pour les tableaux, la propriété à ne pas oublier est l’attribut « summary » qui veut dire résumé. Éditez les propriétés avancées du tableau pour le rajouter ou si vous utilisez une feuille de style, ne n’oubliez pas. Vérifiez le cadrage des tableaux avec un aperçu dans 2 navigateurs au moins.

8. Comment écrire les liens

Les liens sortant de la page doivent être facilement repérables par les visiteurs. Préférez du texte pour faire les liens; le texte utilisé pour le lien devrait être compréhensible aux robots et sensé aux humains.

Écrivez un texte qui annonce la page cible plutôt que des URLs (Universal Ressources Locator ou adresse Internet tout simplement) longs et incompréhensibles. Même si la tentation de créer un style original est forte, formez des liens facilement repérables par l’internaute moyen.

Quand vous arrivez à synchronisez les titres de pages, les noms de fichiers et d’images avec les textes des liens correspondants, vous remarquerez que même les annonces publicitaires de Google AdSense, si vous en avez sur votre site, seront beaucoup plus précises.

Exemple:

La photo du livre de recettes de cuisine italienne qui a comme nom de fichier « recettes_ de_ cuisine _italienne.jpg » mènera à la page « recettes_de_cuisine.html ». La balise image pourrait être :

<a href= »recettes-de-cuisine.html »><img alt= »recettes de cuisine italienne » src= »recettes-de-cuisine-italienne.jpg » /></a>Quelque soit le style choisi, prévoyez une barre de navigation regroupant les pages les plus importantes du site et placez là en haut de chaque page; pour les CMS, le menu principal est généralement dans le « Header ». Si vous créez votre menu ‘manuellement » i.e sans CMS, évitez les liens ayant comme cible, la page source du lien dans les menus; certains spiders les classent comme « erreur 404 », page non trouvée.

Faites un bon usage de cette dernière; créez une page erreur personnalisée conforme au style du site et utilisez la pour renvoyer les visiteurs perdus à l’accueil ou vers une page ou un article que vous voulez faire connaître.

9. Le Menu/Index de la page

Formatez le texte. Prenez soin d’annoncer tous les titres en tant que tels. Vous pourrez après insérer un menu dans la page, si vous le désirez, pour faciliter sa navigation.

Certains logiciels facilitent le formatage des titres et l’insertion du menu en un clic. Si tel n’est pas le cas, créez des liens du menu vers les titres en utilisant des ancres. Ceci est particulièrement utile si le texte est long mais ne perdez pas de vue la simplicité du schéma avec trop des sous-titres.

10. Professionnalisme et accessibilité

Le respect des standards actuels du W3C

Si vous avez la possibilité d’éditer votre code, vous pouvez également avoir le plaisir d’être sûr de présenter des pages au code clair et valide. Pensez à corriger le code et faire passer UN test de validation. Une page au code valide veut dire une meilleure accessibilité à votre site. Le W3C offre une suite de service de correction et de validation de syntaxes.

Ces services ne sont souvent accessibles qu’en anglais mais ils sont très faciles à utiliser. Le plus souvent, if suffit d’entrer l’URL de la page ou de télécharger le fichier depuis votre disque dur. Quelques captures d’écrans plus loin montrent la démarche à suivre.

Attention à certains scripts

Faites attention aux codes d’autrui à copier/coller dans vos pages. Ils contiennent souvent des erreurs que vous ne pourrez pas corriger sans altérer le résultat. La valeur « embed », par exemple est non reconnue par la W3C; elle est souvent retrouvée dans les applications flash et rendra votre page invalide. En fait, elle est remplacée par la balise. De manière générale, il faudrait tester la validité de tous les scripts avant de les intégrer à votre code.

Certaines applications utilisant des scripts, rallongent également le temps de chargement de la page, facteur important pour l’optimisation. Supprimez-les si elles ne sont pas indispensables. Les serveurs insèrent parfois un script à la page index pour les statistiques. Ce script ne respecte pas toujours les spécifications du W3C et peut rendre votre code final invalide. Vous pouvez désactiver les statistiques sur le serveur et chercher une solution tiers. Vous pouvez consulter vos statistiques sur plusieurs sites y compris chez Google Search Console et Bing Webmaster Tools et autres.

La Correction rapide du code

Les erreurs de code peuvent amener à l’abandon de l’indexation d’une page par un robot. HTML Tidy développé par le W3C est un logiciel qui vous aidera à corriger le code HTML. Il est également disponible en français. Télécharger HTML Tidy et installez le, ou utilisez la version en ligne, pour corriger et nettoyer le code. Chargez le document dans HTML Tidy, cochez les options nécessaires, cliquez sur Tidy et le code est corrigé. Téléchargez ensuite la version de Tidy. Les erreurs du code existant seront corrigées, mais pour les attributs et les balises entières manquantes, HTML Tidy ne les rajoutera pas et pour certains termes non reconnus par le W3C, il faudra les changer ou supprimer les scripts souvent responsables.

HTML Tidy les mentionnera comme avertissements. Il faudra faire les corrections vous-mêmes, dont l’importance des remarques ci-dessus. Sauvegarder la version finale et faites un aperçu du document corrigé dans le navigateur avant de passer au test de validation.

Remarques importantes

Pour déclarer l’encodage (le jeu de caractères utilisé), les logiciels ajoutent en général une balise méta au code, qui n’est pas décelée par certains services de validation. Il faudrait dans ce cas ajouter une ligne de déclaration XML en début de code. Le Markup Validator du W3C n’a pas ce problème.

Revérifiez que la balise title est placée juste après <head>, sinon repositionnez-la. Faites valider le code en ligne avec le service de validation, Markup Validator du W3C qui permet de vérifier si les documents HTML, XHTML, SMIL, MathML, etc. ou les sites sont conformes aux standards actuels du W3C.

Evitez l’édition du document validé dans le logiciel qui a généré un code invalide, car il le « recorrigera ». Si vous avez créé des feuilles de style CSS séparées, faites-les valider également en utilisant le service de validation, CSS Validator du W3C. Pour les feuilles de styles CSS intégrées aux fichiers XHTML 1.0, il suffit de tester la validité du code de ces fichiers.

Voyez l’exemple du site optimisé du restaurant ici.