Redouté par de nombreux concepteurs Web, le référencement semble être un casse-tête qu'il vaut mieux laisser aux programmeurs ou aux analystes marketing, mais il n'y a aucune raison de rester à l'écart. Dans ce rapide didacticiel, nous allons construire un modèle HTML simple tout en énonçant certaines des meilleures pratiques pouvant influencer le référencement de votre site dès le premier mot. aller.

---

introduction

Le référencement ou l'optimisation des moteurs de recherche est la manière dont vous configurez votre site pour qu'il soit mieux classé par les moteurs de recherche et influence la façon dont les informations sont affichées dans les résultats de recherche. Finie l'époque où l'achat de Google Adwords était le meilleur moyen de figurer en tête d'une requête de recherche, d'autant plus que de nombreux annonceurs ne sont pas pertinents pour les résultats de recherche, ce qui amène les utilisateurs à se méfier de plus en plus des liens sponsorisés. Adwords rebondira, mais il existe des moyens d'influencer la position de votre moteur de recherche aujourd'hui.

Tout d’abord, nous devons comprendre que les robots des moteurs de recherche, en particulier l’araignée de Google, lisent la source de votre page en formulant des hypothèses en fonction du contenu et du balisage. La hiérarchie HTML logique est cruciale pour déterminer l’importance du contenu, mais le buzz sur Internet nous apprend que Google commence également à baser ses résultats sur votre présence sociale ainsi que sur votre page. C'est vrai, vous pouvez oublier Facebook et Twitter en tant qu'outils de jeu simples, ils pourraient aider à créer ou à casser votre site Web..

Jumping spider de Rundstedt B. Rovillos, sur Flickr

---

Étape 1: Structure HTML de base

Commençons par examiner quelques balises HTML fondamentales:

Cette structure suit des normes définies afin que les navigateurs sachent quoi faire de votre page. En haut de notre code, nous établissons de quel type de document il s'agit et dans quelle langue il est écrit. Entre notre balises nous informons le navigateur que nous utilisons le jeu de caractères standard utf-8. Nous avons ensuite le titre de notre site et nous avons ajouté une instruction conditionnelle pour charger HTML5 shiv qui compense les problèmes de compatibilité avec IE 9. Le les balises, bien sûr, établissent où le contenu de notre page va apparaître.

Facile et simple non? Mais en vérité, nous avons déjà laissé de côté des informations importantes.

---

Étape 2: Ajout de balises méta

Revenons au début de notre code et ajoutons la ligne de code suivante juste après l'ouverture. étiquette:

Cette ligne indique aux moteurs de recherche les éléments à afficher dans les résultats de la recherche, juste en dessous du titre de votre page. Dans ce cas, les résultats sur Google pourraient être présentés comme tels:

Remarque: Un point très important et souvent négligé est que vous devez adapter à la fois la Titre et balises META de chaque page de votre site spécifiquement au contenu de chaque page. Pour le titre, cela peut être aussi simple que .

Le code dans notre Les balises se présentent maintenant comme suit:

Remarque: Pour savoir pourquoi nous avons négligé d'inclure les méta-mots-clés, consultez la discussion dans les commentaires..

---

Étape 3: Liens vers nos CSS et JS

Les liens vers des fichiers CSS et du code Javascript ou des bibliothèques sont courants dans presque toutes les pages Web. Si nous suivons les suggestions de Google en matière de codage, nous devrions essayer de limiter au maximum nos requêtes externes (requêtes HTTP). Par conséquent, essayez de limiter les ressources CSS et Javascript à un fichier si possible. Ajoutons des demandes génériques pour nos fichiers externes à notre modèle.

Premièrement, nous allons créer un lien vers notre feuille de style externe en ajoutant le code suivant juste avant le balise de fermeture:

Ensuite, nous faisons la même chose pour notre fichier Javascript en ajoutant la ligne suivante:

Nous ajoutons le javascript à la fin de notre page, juste avant le balise de fermeture pour que notre code se termine comme suit:

Pourquoi avons-nous ajouté la requête Javascript à la fin de la page? Deux raisons:

• Cela permet de charger directement le contenu de la page, au lieu d'attendre le traitement de Javascript..
• Il aide également les moteurs de recherche à lire le contenu de votre page. Pourquoi? Eh bien, si nous pensons logiquement, le robot commence en haut de la page et exécute votre code. Si le code Javascript est ajouté en haut de la page, le moteur de recherche le parcoure avant d’atteindre le contenu de votre page. Il va de soi que nous souhaitons que le moteur de recherche utilise directement notre contenu pour une indexation plus efficace. Tout code Javascript référencé, à la fois externe et interne, doit être ajouté à la fin de votre page.

Une autre règle à garder à l'esprit est que, si vous avez plusieurs fichiers CSS ou Javascript, respectez toujours les règles de la hiérarchie et placez le fichier le plus important en premier, en ajoutant le reste de manière consécutive. Après tout, vous ne pouvez pas utiliser une fonction Javascript incroyable qui utilise la bibliothèque jQuery, si vous n'appelez pas d'abord la bibliothèque jQuery.

---

Étape 4: terminer notre modèle

Nous en avons presque fini avec notre modèle, mais nous pourrions le faire en ajoutant du contenu. Avec l'introduction de HTML5, rendre votre site convivial en matière de référencement est devenu beaucoup plus facile; une sémantique appropriée donne aux moteurs de recherche des instructions très spécifiques sur ce qu'il faut trouver et où le trouver. Ajoutons quelques éléments communs que nous utiliserons probablement sur la plupart des sites que nous concevons.

Juste en dessous de la tag et avant la tag, ajoutons les lignes de code suivantes:

  
Nom du site
   
 
 
Article en-tête
 
Quelques textes simples pour nous aider
 Lire la suite?  
 
  

Notre code devrait maintenant apparaître comme suit:

            
Nom du site
   
 
 
Article en-tête
 
Quelques textes simples pour nous aider
 Lire la suite?  
 
     

Là où nous aurions déjà utilisé des conteneurs div, nous avons maintenant mis en place un balisage plus descriptif. le ,