Notions de programmation pour le référencement

Cet article a pour but de livrer quelques informations de code, de langages informatiques de base à maîtriser pour faire du référencement Google.

Faut-il connaître tout cela par cœur ?

Oui et non. Maîtriser cela fait gagner énormément de temps selon la situation. A défaut, cela permet de comprendre certaines subtilités techniques.

Principes du langage HTML

Il est le langage de base du développement d’un site Internet. Il est assez simple d’utilisation et convient pour des sites statiques, c’est-à-dire qui ne font pas appel à des bases de données.

Ces autres sites utilisant des bases de données utilisent notamment la technologie PHP traité dans le paragraphe qui suit. Une page ou un site HTML peut être créé ou ouvert depuis un simple bloc-notes (ex :le bloc-notes de Windows, un peu plus évolué le logiciel « Notepad++ ») mais aussi depuis un logiciel de développement de sites (le plus connu est Adobe DreamWeaver mais est payant, à défaut se rabattre sur un logiciel éditeur gratuit comme Nvu).

Concrètement

Des éléments de texte sont insérés dans une page et sont agencés par blocs à l’aide de balises, des éléments donnant certaines propriétés.

Un site ou une page en HTML se décompose toujours de la même manière :

  • de balises HTML
    • on ouvre la page par <HTML>
    • on la ferme par </HTML>
    • cela permet de signaler au navigateur Internet que le langage utilisé est en HTML du début jusqu’à la fin.
  • des balises <body>
    • qui délimitent le contenu du contenant
    • tout ce que l’internaute verra sera présent sera présent dans ces balises
    • <body> pour débuter, </body> pour terminer
  • des balises <head>
    • à destination du navigateur Internet comment pour les moteurs de recherche
    • regroupent des éléments techniques pour les moteurs de recherche
    • « appellent » d’autres fichiers du site pour la mise en page, pour l’affichage design à l’aide d’autres fichiers au format .CSS
    • <head> pour débuter cette partie, </head> pour la terminer

Soit le schéma suivant :

<html>
<head>
<title>Exemple</title>
</head>
<body>
</body>
</html>

Principe du langage Php

Le schéma reste le même avec bien sûr quelques subtilités.

Le contenu des sites utilisant cette technologie peuvent être mis à jour automatiquement, sans intervention du webmaster. En faisant appel à une base de données.

Le PHP génère du code HTML et renvoie au visiteur uniquement du code HTML (accompagné éventuellement de sa feuille de style CSS).

Pré-requis : maîtriser le Html et le CSS

Exemple d’une page au format PHP

<html>
<head>
<title>Exemple</title>
</head>
<body>
<?php echo "PHP fonctionne!"; ?>
</body>
</html>

 

Cours complet sur le PhP

 

En gros, que permet de manipuler le Php ?

  • des variables

    • ex: « Tu as variable age_du_visiteur »

  • des conditions

    • si c’est le matin, vous voudrez dire « Bonjour » à votre visiteur ; si c’est le soir, il vaudra mieux dire « Bonsoir ».

  • des boucles

    • « Affiche 30 messages et le nom de leur auteur à chaque fois ».

  • des fonctions

    • ex: Une fonction qui permet de créer des images miniatures (aussi appelées thumbnails).

  • des tableaux

Principes de découpage d’une page

La plupart des sites web sont généralement découpés selon le schéma suivant :

Sources : http://fr.openclassrooms.com/informatique/cours/concevez-votre-site-web-avec-php-et-mysql/le-principe-4

 

Les différents blocs sont découpés techniquement par des <div>.

ex:

<div>
<p>Ici mon pied de page - Copyright CLEATIS</p>
</div>

Chaque div est lié à un design, à un style situé dans le fichier style.css.

ex:

<div id= »pied_de_page »><p>Copyright CLEATIS</p></div>

Quelques notions de codes pour une mise en forme

Mettre un forme un mot ou un texte signifie lui donner certains attributs graphiques pour lui donner plus de poids, plus de lisibilité.

Créer un lien

Pour cela, vous avez besoin :

  • d’une adresse URL ex:http://www.cleatis.fr

  • d’une “ancre”, mot ou groupe de mots sur lequel sera posé le lien “Référencement Google”, “Cliquez ici”…

Dès lors :

  1. Sélectionner le mot ou le groupe de mots

  2. Autour de lui, insérer une balise <a> comme ceci

    ex: <a>Référencement Google</a>

  3. Ajouter l’URL et c’est bon

    ex: <a href=”http://www.cleatis.fr”>Référencement Google</a>

 

Insérer une image

 

Pour cela, vous avez besoin :

  • d’une adresse URL de l’image

    (signifie que l’image doit déjà être en ligne)

Pour se faire :

utiliser la structure suivante :

<img src=”monurl” />

ex: <img src=”http://www.video-buzz.net/wp-content/uploads/2013/10/papa-300x167.jpg” />

 

Mettre un lien sur une image

 

On garde la même structure évoquée plus haut, en y ajoutant un lien :

On part de cela :

<img src=”monurl” />

pour arriver à :

<a href=”monlienàpousser”><img src=”monurl” /></a>

ex:

<a href=”http://www.video-buzz.net”><img src=”http://www.video-buzz.net/wp-content/uploads/2013/10/papa-300x167.jpg” /></a>

 

Mettre un sous-titre : H1, H2

 

Pour cela, vous avez besoin :

  • d’une “ancre”, mot ou groupe de mots

  • du niveau de titre que vous souhaitez : un titre ? un sous titre ?

ex: Agence de référencement internet

Je souhaite le mettre en Titre principal donc en H1.

Concrètement :

<h1>Agence de référencement internet</h1>

Nb: vous pouvez descendre au niveau que vous voulez, H9 par exemple, mais l’impact sera moindre pour le référencement.

Effets de style sur du texte : texte en gras

“Cleatis est une agence de référencement internet.”

Je souhaite mettre en gras la dernière partie de la phrase.

Pour cela, je rédige le code suivant en utilisant la balise <strong>:

Cleatis est une agence de <strong>référencement internet</strong>.

 

Une image bien optimisée pour le SEO

<div>
<a href="http://www.video-buzz.net"><img style="border: 0px none; margin: 10px;" title="Une vidéo rigolote" alt="Papa imite sa fille qui crie et pleure " src="http://www.video-buzz.net/wp-content/uploads/2013/10/papa-300x167.jpg" width="300" height="167" /></a>
<strong>Une vidéo rigolote d'un papa qui imite sa fille qui crie et pleure</strong>
</div>

Ce code comporte :

  • un lien

    http://www.video-buzz.net

  • des propriétés de style

    • pas de bordure : border: 0px none

    • une marge de 10px : margin: 10px

    • une balise Title Image : title="Une vidéo rigolote"

    • une balise Alt Image alt="Papa imite sa fille qui crie et pleure "

  • une URL source: http://www.video-buzz.net/wp-content/uploads/2013/10/papa.jpg

  • des tailles

    • une hauteur : height="167"

    • une largeur : width="300"

  • une Div, permettant de l’associer à une phrase mise en gras.

    <strong>Une vidéo rigolote d'un papa qui imite sa fille qui crie et pleure</strong>

Insérer une vidéo dans une page

Récupérer le code de la vidéo sur Youtube ou Dailymotion par exemple en cliquant sur Exporter, en copiant ce code, puis en le collant là où vous le souhaitez dans votre page :

Exemple de code:

<iframe src="http://www.dailymotion.com/embed/video/x165zud" height="270" width="480" frameborder="0"></iframe> <a href="http://www.dailymotion.com/video/x165zud_papa-imite-sa-fille-qui-crie-et-pleure_fun" target="_blank">Papa imite sa fille qui crie et pleure</a> <i>par <a href="http://www.dailymotion.com/Spi0n" target="_blank">Spi0n</a></i>

Vous voulez vous entrainer ?

Exercez-vous sur un éditeur HTML WYSIWYG du type Quackit

2 réponse pour Notions de programmation pour le référencement

  1. Adifco dit :

    Du jus 100% SEO concentré ! avec ça et un CMS simple, on peut commencer à faire des choses vraiment sympas. Bel effort

  2. c’est bien parce que je ne pourrais jamais maîtriser cet aspect du référencement que je préfère rester dans l’édition de contenu à vocation SEO. Quoi qu’il en soit je tiens à dire que votre site est super, j’aime surtout la présence de l’API

Laisser un commentaire

What is 13 + 13 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)