Somestyle.be

Le Référencement a toujours été un point important dans l’étude d’un site internet, principale source de trafic, il est important d’être présent dans les moteurs de recherche et annuaires.
Dans cet article (première partie), vous trouverez un résumé de ce qu’on peut lire dans les livres et sur internet à propos du référencement et principalement l’indexation de votre site dans Google.

Fonctionnement d’un moteur de recherche
    - Recherche spécifique
Critères pris en compte
    - Le titre de vos pages, balise <title>
    - La balise <META NAME="description" …>
    - Vos mots clés, balise <meta name="keywords" …>
Outils pour le webmaster
   - Choix des pages à indexer
      - Robots.txt
      - Balise META robots
      - Google Sitemap

Fonctionnement d’un moteur de recherche

Des milliards d’informations circulent sur internet, sous forme de sites, blogs, fils rss et autres moyens de communication. Comment s’y retrouver et trouver une information précise sans un moteur de recherche, sinon de connaitre l’adresse du site que l’on souhaite visiter.

Le robot d’indexation du moteur de recherche (en anglais "spiders") explore en permanence internet suivant successivement les liens qu’il trouve, il va extraire des pages les mots clés significatifs permettant l’indexation de la page et stocker cela dans des bases de données (fonctionnant comme un index terminologique).

Cycle de vie d’une recherche Google (source : google.com)

Recherche spécifique

Les moteurs de recherches vous permettent d’effectuer des recherches spécifiques, souvent pour les webmasters, en utilisant des opérateurs que vous saisissez comme une recherche:

Opérateur	Description	Syntaxe
site:	Liste des pages du site indexées	site:www.votre-site.com
link:	Pages extérieures reliées à votre site	link::www.votre-site.com
linkdomain(yahoo)		linkdomain::www.votre-site.com
cache:	La version qui est en cache	cache::www.votre-site.com
info:	Information sur le site	info::www.votre-site.com
related:	Pages au contenu similaires à celui de votre site	related::www.votre-site.com
Title:	Recherche de mots clés dans le titre de vos pages	title::www.votre-site.com
url:	Recherche de mots clés dans les urls	url::www.votre-site.com
domain:	Recherche de mots clés dans le nom de domaine	domain::www.votre-site.com

Critères pris en compte

Le titre de vos pages, balise <title>

Le titre doit à la fois rester simple mais contenir des mots clés, c’est le contenu de cette balise qui va apparaître en premier lors d’une recherche et informer le futur visiteur sur ce qu’il peut trouver sur votre page.

• Éviter les énumérations de mots clés.
• Placer les mots clés les plus importants en début de titre.
• Entre 15 et 20 mots maximum.

La balise <META NAME="description" …>

En plus du titre, et suivant le moteur de recherche utilisé, les visiteurs pourront également lire une description de la page trouvée. Cette balise permet de résumer en une phrase le contenu de votre page, essayer quand même de la limiter à 250 caractères.
Lors de sa rédaction il faut se mettre à la place du visiteur et se poser la question de savoir si cette description l’incitera à clicker sur votre lien plutôt qu’un autre.

Avec certains moteurs de recherche (ex:Google) et annuaires, il se peut que la description affichée ne corresponde pas à cette présente sur la page de votre site, mais plutôt à une partie de la page contenant le/les mots clés.

Exemple:

Alors que la description de cette page est: Présent dans la grande famille des framework javacript, Mootools est un de mes… mon préféré ! Dès que je suis confronté à un nouveau projet web qu’il soit personnel ou professionnel je pense directement Mootools.

Certains moteurs de recherches vous laissent le choix, afin d’afficher la description réelle de votre page, de travailler avec une nouvelle balise contenant pour certaines le nom du robot d’indexation, la langue et l’option content="NOODP". (Plus d’information sur cette balise - WebRankInfo)

<meta name="robots" content="noodp" /> ou spécialement pour Google: <meta name="Googlebot" lang="Fr" content="NOODP">

Vos mots clés, balise <meta name="keywords" …>

Keywords, une des balises les plus importantes! Elle contient tous les mots susceptibles d’être saisi par le futur visiteur sur un moteur de recherche, il faut donc bien définir ces mots clés et leurs différentes orthographes possibles.

Il existe différentes manières d’arriver à définir de bons mots clés, analyser la concurrence et les premiers résultats affichés recevoir des conseils de personnes faisant partie du milieu ou utiliser des générateurs de mots clés.

Générateurs de mot clés

Parmi les milliards de ressources d’internet, on peut trouver des générateurs de mots clés pour des expressions en français ou en anglais.
En voici 3 particulièrement intéressants:

Outiref.com
Vous propose de tester l’audit d’un mot clé et ensuite d’avoir des suggestions de mots clés en cliquant sur "Suggestions de mots clés connexes".
Google AdWords: Générateur de mots clés
vous indique sur les mots clés à envisager, le nombre d’annonceurs qui enchérissent sur ces mots clés et le volume de recherche effectueé sur ceux-ci.

N’hésiter pas à inclure plusieurs orthographes de vos mot clés importants, exemple: sponge stats, spongestat, SpongeStats.

Importance de la mise en valeur de vos mots clés dans vos pages

Les moteurs donnent de l’importance aux balises titre, sous titres (série des H1), gras et italiques. Celle-ci sont en principe essentielle à la structuration de la page.

Importance de la présence du titre et de mots clés dans l’url

faisant partie des nombreux critères de positionnement dans les moteurs de recherche, l’utilisation de l’url "explicite" pour vos pages, qui n’est pas toujours facile pour un débutant, est d’une importance capitale.
Cette technique est appelée l’Url Rewriting, elle consiste à remplacer les urls des pages dites dynamiques en urls de pages statiques contenant la catégorie et le titre de la page.
Exemple:

www.votre-site.com/pages/index.php?id=314
n’est pas très explicite pour le moteur de recherche et le visiteur tandis que
www.votre-site.com/catégorie/souscatégorie/nom_de_l’article_unmotcle.html
devient beaucoup plus efficace car elle contient des mots clés.

Outils pour le webmaster

Choix des pages à indexée

robots.txt

Ce fichier texte est installé à la racine de votre site et permet de donner des instructions d’indexation aux moteurs de recherches, il indique les pages/répertoires à ne pas lire (le cas d’une page en construction ou n’ayant aucun intérêt d’être indexée).

Le fichier robots.txt est un fichier texte pouvant contenir les instructions:

User Agent: permet de s’adresser à un moteur de recherche en particulier * ou Googlebot (liste complète sur robotstxt.org)
Disallow: permet d’exclure des dossiers des fichiers.

Voici des exemples de fichier robots.txt :

• Exclusion de toutes les pages :
  User-Agent: *
  Disallow: /
• Exclusion d’aucune page (équivalent à l’absence de fichier robots.txt, toutes les pages sont visitées) :
  User-Agent: *
  Disallow:
• Autorisation d’un seul robot  :
  User-Agent: nomDuRobot
  Disallow :
  User-Agent: *
  Disallow: /
• Exclusion d’un robot :
  User-Agent: NomDuRobot
  Disallow: /
  User-Agent: *
  Disallow:
• Exclusion d’une page :
  User-Agent: *
  Disallow: /repertoire/chemin/page.html
• Exclusion de plusieurs page :
  User-Agent: *
  Disallow: /repertoire/chemin/page.html
  Disallow: /repertoire/chemin/page2.html
  Disallow: /repertoire/chemin/page3.html
• Exclusion de toutes les pages d’un répertoire et ses sous-dossiers :
  User-Agent: *
  Disallow: /repertoire/

(exemples repris du site CommentCaMarche.net)

Il faut retenir un principe de base de ce système, tout ce qui n’est pas exclu est autorisé. Le fichier texte peut-être commenté si les commentaires sont précédés du signe #.

Spécificité du moteur Google

Google va un peu plus loin dans l’utilisation du fichier robots.txt en permettant des instructions supplémentaires:

Utilisation de l’astérisque * dans le champ Disallow afin de remplacer le nom des fichiers, exemple: disallow: /docs/*.pdf n’indexera pas le contenu de vos fichiers pdf.

plus d’information sur le site google: Outils google.

Balise META robots

Le choix des pages à indexée peut se faire plus précisément grâce à une nouvelle balise <meta name="robots" content="…>
Cette balise permet d’indiquer aux moteurs si l’on souhaite qu’ils indexent la page et/ou qu’ils suivent les liens de la page (afin d’indexer les pages liées).

L’attribut content doit contenir 2 valeurs séparées par virgule:

- index : autorise l’indexation du fichier
- noindex : interdit l’indexation du fichier
- follow : autorise le robot à suivre les liens du fichier
- nofollow : interdit au robot de suivre les liens du fichier

Voici 4 exemples :
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noindex, nofollow">

Il est également possible d’utiliser l’un des deux raccourcis suivants :
<meta name="robots" content="all"> : équivalent à <meta name="robots" content="index, follow">
<meta name="robots" content="none"> : équivalent à <meta name="robots" content="noindex, nofollow">

(Spécification reprises du site webrankinfo.com "Quelle est la syntaxe complète de la balise META robots ?")

Google Sitemap

Google Sitemap est le plan d’accès de votre site et également la meilleure manière de fournir à Google la liste de vos pages.

Voici une page qui expliquera mieux que quiconque l’outil Sitemap de google.

Si vous n’en possédez pas déja un, il faut créer un compte Google et ajouter/vérifier son site.

Il existe également un générateur de Sitemap dans le coffre à outils de Google mais réservez plutôt aux webmasters ayant leur propre serveur.
Pour les Bloggeurs et autres, il existe des plugins générateurs de fichiers XML Sitemap:

Wordpress (http://wordpress.org/extend/plugins/google-sitemap-generator/)
DotClear (http://plugins.dotaddict.org/dc1/details/Gsitemap)

Il suffit de faire une recherche "Lenomdevotreediteurblog plugins" et puis "sitemap" pour trouver le plugin Sitemap correspondant à votre éditeur de blog.

Vous voila déja avec les informations nécessaires afin de commencer le référencement de votre site. Le sujet de la deuxième partie sera de voir la prise en compte de votre référencement dans le temps, l’échange de lien et le positionnement de votre site internet.

Après une grosse bourde de ma part et un manque de sauvegarde d’une base de donnée, je me suis mis à rechercher un script de backup.

Voici un script php de backup (créer par Dagon Design) bien pensé et fortement configurable utilisant l’utilitaire MySqlDump fourni avec MySql.
Ce script trouvera toutes vos bases de données et les tables correspondantes, compressera les fichiers sql, placera les fichiers dans un dossier prédéfini et vous enverra un compte rendu par email.

L’avantage de l’utilisation de MySqlDump par rapport à une sauvegarde du dossier contenant les bdds (souvent data/ et format de fichiers .frm (définition), .MYD (données) et .MYI (index)) est que les fichiers sortant au format .sql deviennent multiplate-forme/serveur.

La copie manuelle du répertoire /data n’est conseillée que si le serveur Mysql est à l’arrêt ou ne se met plus à jour.
Le script mysqlhotcopy offre la possibilité de sauvegarder "à chaud" les fichiers de données du répertoire /data mais un des inconvénients pour ceux qui n’ont pas un hébergement dédié est que ce script ne peut fonctionner que si il se trouve sur la même machine qui contient les fichiers de données.

Un tutoriel est également disponible pour effectuer des sauvegardes automatiques grâce à un Cron (si vous êtes sur Unix ou si vous avez un programme vous le permettant).

Le site Dagon Design offre également des plugins pour Wordpress, des scripts php et des dizaines d’articles très intéressant sur tous ce qui touche à l’informatique et la programmation.

Pour tous ceux qui désirent diffusez facilement des videos au format flv (videos flash) sur leurs sites internet, voici un lecteur facilement et fortement paramètrable. 

(multi)  Flv Player par neolao production

Plusieurs types/configuration du lecteurs sont disponibles, Mini - Normal - Maxi - Multi et  Js, suivant l’utilisation. Une bonne documentation, un générateur de code, un forum et une FAQ est disponible sur le site.

Il est également possible de contrôler le player à partir de javascript (Play - Pause - Stop - Next - Previous - Volume) afin de l’intégrer dans une interface personnalisée (ex: allocine.fr).

Voir aussi Lecteur MP3 par neolao production  …que demander de plus ?

Présent dans la grande famille des framework javacript, Mootools est un de mes… mon préféré ! Dès que je suis confronté à un nouveau projet web qu’il soit personnel ou professionnel je pense directement Mootools. Merci à Magu(s) de m’avoir fait découvrir cette incontournable librairie js.

1. Framework javascript ?

C’est un ensemble de fonctions, classes javascript liées entre elles facilitant la création d’application web. Utilisant le DOM qui lui donne la possibilité de manipuler dynamiquement le contenu dans la page, il n’y a plus de limite d’utilisation.. mise à part ceux du navigateur utilisé par l’internaute. Souvent Orienté objet, ces framework sont très faciles d’utilisation et suivent une logique compréhensible de tous programmeurs.

2. Travailler avec Mootools?

Il n’existe pas plus facile à intégrer mais il est nécessaire d’avoir quelques bases en javascript pour son utilisation
Introduction au javascript par Serge P. -
Programmation Orientée Objet avec le javascript par Thierry Templier

2.1 Téléchargement

Télécharger mootools est très facile, il suffit de se rendre sur cette page et de choisir les composants dont on a besoin (ici tous), la compression du fichier .js (javascript packer fait gagner près de 60% sur la taille du fichier .js).

2.2 Ajouter à votre page

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1&#8243; />

<title>Hello Mootools!</title>

<script type=“text/javascript” src=“js/mootools-release-1.11.js”></script>

<script type=“text/javascript”>

window.addEvent(‘domready’, function() {

// ICI VOTRE CODE JS

});

</script>

</head>

<body>

</body>

</html>

La fonction "domready" permet d’exécuter le code javascript lorsque le dom est prêt, c-a-d quand tous les éléments html de la page sont chargés et pas quand la page entière est chargée (css, images, animations, …) voir DomReady vs Load

2.3 Exemples d’utilisation

Action sur un lien :
ajax

Imaginons que nous avons un lien sur lequel une action précise doit se passer (Confirmation, affichage d’une image, requête ajax, …), il suffit de donner une valeur à l’identifiant du lien :

<a href="#" id="id_du_lien">Charger le contenu dynamiquement</a>

et d’ajouter l’action que l’on souhaite par le biais de la fonction addEvent, Ici on demande l’évènement sur le click de la souris sur le lien.
ajax

$(‘id_du_lien’).addEvent(‘click’, function() {

console.log("click ok");

})

J’utilise console.log("click ok"); au lieu de alert("click ok"); pour faciliter le débogage du script à l’aide de Firebug.
Imaginez que vous avez des calculs de prix à déboguer, les dizaines d’alertes javascript vont vous faire péter les plombs tandis qu’avec la console de Firebug une liste de logs se crée.

Requête Ajax

Effectuer une requête ajax n’a jamais été aussi simple, il suffit d’utiliser la fonction new Ajax dans une action ou dans une fonction que l’on peut appeler sur un lien:
ajax

$(’start’).addEvent(‘click’, function(e) {

e = new Event(e).stop();

var url = "http://demos.mootools.net/demos/Ajax/lipsum.html";

/**

* The simple way for an Ajax request, use onRequest/onComplete/onFailure

* to do add your own Ajax depended code.

*/

new Ajax(url, {

method: ‘get’,

update: $(‘log’)

}).request();

});

exemple reprit des demos officielles du site mootools

var url: Définition de l’url de la page à charger dynamiquement
method: Get ou post
update: Div ou bloc à mettre à jour avec le contenu de la page que l’on appelle

Plusieurs paramètres comme onRequest/onComplete/onFailure peuvent être ajoutés. (ex : un gif loading pendant la requête)

3. Demos, tutoriels et plugins disponibles.

Demos

Voici la page de démonstration officielle du site mootools: Mootools demos - start

Tutoriels

Tutoriel officiel sur clientside: The Mootorial (en)
Tutoriel video sur Beautyindesign.com: User Experience with javascript

Plugins

Mootools 1.0+ Plugins, Examples, Tutorials & Demos List (en)
33 plugins pour Mootools que vous devriez connaitre ! 

Une adaptation est nécessaire mais ce framework vous fera gagner un temps précieux par la suite !

L’extension indispensable et incontournable pour debuguer ses pages !

Plus d’informations sur le site officiel: GetFireBug

Cette extension existe aussi en français : FireBug en français

Spongestats est un outil d’analyse du trafic facilement intégrable à votre site. Développer en php et utilisant subtilement l’ajax, cet outil est très agréable à utiliser.

Pour le moment en période de test sur le blog et d’autres projets professionnels, il se révèle très précis.

En recherchant des plugins Léopard, je suis tombé sur le site quicklookplugins.com qui propose des plugins pour "Coup d’oeil" présent dans la dernière merveille d’apple. Gain de temps, plaisir visuel et installation simpliste.

 Pour les personnes ne connaissant pas bien MacOs, voici une petite présentation officielle Regardez avant d’ouvrir