Participation au référencement de la page

HTML

Si le nom de l’image et l’attribut "title" ne semblent pas être pris en compte par google dans le référencement de la page au sein de laquelle l’image se trouve, l’influence de l’attribut "alt" n’est plus à prouver.

Attention, le contenu de l’attribut "alt" remplace l’image si son chargement échoue et pour les mal-voyants qui utilisent une synthèse vocale. Il doit être une description du contenu et des informations apportées par l’image et non une simple succession de mots clés.

Cependant, cette solution ne concerne que les images insérées directement dans le corps de la page en HTML et ne solutionne pas le référencement des images appelées en JavaScript ou contenues dans des animations Flash.

JavaScript

Autant le dire tout de suite, il n’y a pas de solution optimale pour référencer le JavaScript et si vous pouvez obtenir le même résultat en HTML, c’est vivement recommandé. Sinon, un texte alternatif peut être inséré dans la balise <noscript>, qui doit être placée à la fin du script, soit juste après </script>.

Attention à ne pas en abuser, un texte alternatif trop long ou trop répétitif sera considéré comme du spam.

Flash

Plusieurs solutions sont possibles pour mieux référencer le contenu de ses animations Flash.

• La balise <object>

Cette méthode consiste à appeler l’animation Flash en swf par une balise <object> dans lequel le texte alternatif peut-être placé.

C’est la méthode que j’ai utilisée sur la page d’accueil de mon site et cela semble bien fonctionner. Si je cherche une phrase contenue dans le texte alternatif, google trouve bien la page web.

• Le JavaScript

Cette méthode consiste à utiliser un script javascript pour insérer l’animation Flash. Il faut récupérer le fichier swfobect.js et l’appeller de cette manière :

Je n’ai pas testé cette méthode mais c’est il me semble la plus utilisée aujourd’hui.

Le référencement des images elles-mêmes

Le nom de l’image

S’il n’influence pas le référencement de la page dans laquelle l’image est affichée, le nom du fichier a de l’importance pour le référencement de l’image elle-même, sur google images par exemple. Il est conseillé d’utiliser le caractère – pour signifier un espace.

Le sitemap

Et voici, enfin, ce qui m’a poussé a écrire cet article : l’évolution du sitemap de google pour aider au référencement des images. Vous pouvez dorénavant utiliser la balise <image:image> pour déclarer des images au sein d’une page ! Ci-dessous un exemple.

Seules les balises <image:image> et <image:loc> sont obligatoires.

Les indicateurs de fréquentation du site

L’analyse la plus simple est celle des indicateurs de fréquentation du site que l’on trouve que les web analytics : taux de rebond, temps moyen passé sur le site et nombre de pages vues. Ils permettent de bien juger de l’intérêt des internautes pour votre site en général, selon les pages, et selon les sources.

Vous pouvez alors privilégier les sources qui vous ramènent du trafic qualifié, c’est à dire pour lesquelles les indicateurs de fréquentation sont bons. Lorsque le taux de rebond d’une page en particulier est fort, vous pouvez par exemple réorganiser son contenu, ajouter des liens internes ou revoir les liens qui pointent vers cette page.

Le parcours et les actions des visiteurs

Parmi les web analytics, Clicky est très pointu dans l’analyse du comportement des visiteurs. En effet, alors que Google Analytics par exemple présente toujours des moyennes, Clicky permet de suivre le parcours et les actions de chaque visiteur : pages vues, téléchargement de documents, clic sur le bouton d’un formulaire, clic sur un lien externe.

Enregistrer la navigation des visiteurs

C’était mon premier article sur ce blog : des applications comme Userfly ou Clicktale permettent de filmer la navigation des internautes et de réaliser des heat maps. Une sorte d’eye-tracking law cost, qui enregistre le trajet de la souris et les clics sans filmer les yeux.

Visionner quelques enregistrements permet de vite repérer les ajustements nécessaires : les visiteurs butent sur les éléments d’un formulaire, essayent de cliquer sur des éléments non cliquables, retournent immédiatement en arrière après avoir cliquer sur un lien, etc. Certains comportements sont très faciles à interpréter.

La carte des clics

Plus succincte qu’une heat map car elle n’enregistre que les clics sur les liens textuels internes (et donc pas sur les liens images, les liens externes ni les éléments non cliquables), la carte des clics de Google Analytics a l’avantage d’être disponible sur votre compte  sans rien installer d’autre. Pour chaque page, Google vous indique avec des pourcentages sur quels liens vos visiteurs cliquent.

Si un lien bien visible n’est jamais cliqué, vous pouvez peut-être en profiter pour mettre autre chose à cette place. Si un lien qui vous parait très utile est peu cliqué, essayez de lui donner plus de visibilité.

Cette carte se trouve dans le menu « Contenu » sous le nom « Synthèse données/site ».

La fidélité des visiteurs

La fidélité des visiteurs est une donnée importante pour l’analyse du comportement de vos visiteurs. Rendez-vous sur Google Analytics dans le menu « Visiteurs » / « Fidélité des visiteurs ». Google vous indique le nombre de visites par visiteur et la fréquence des visites.

Le tracking sur mesure

Grâce aux variables personnalisées qui ont récemment fait leur apparition sur Google Analytics dans le menu « Visiteurs », il est maintenant possible de segmenter les visiteurs de manière très précise en fonction de critères pertinents pour votre site. Par exemple : les visiteurs étant arrivés par telle page, les visiteurs ayant effectué telle ou telle action sur le site (se logger, entrer dans le tunnel de conversion, ajouter un article au panier, s’inscrire à la newsletter, utiliser le formulaire de contact, entrer dans la rubrique d’aide, visiter une page en particulier…)

En bref, je m’attache dans cet article à vous expliquer comment se débarrasser des points rouges (high priority suggestions) indiqués par l’add-on Page Speed, sans vous noyer dans les explications. Non pas que ce ne soit pas intéressant de savoir comment cela fonctionne, mais on n’a pas toujours le temps…

Enable gzip compression

Activer la compression gzip est une manière simple et efficace d’économiser de la bande passante et de diminuer le temps de chargement des pages. Pour ce faire, ajoutez les lignes suivantes à votre fichier .htaccess.

Leverage browser caching

Il faut spécifier une date d’expiration pour le plus de fichiers possibles pour profiter de la mise en cache, c’est-à-dire le stockage des fichiers dans le cache du navigateur afin d’éviter de les charger à chaque fois.
On peut faire cela de plusieurs manières. En voici une : ajoutez les lignes suivantes à votre fichier .htaccess.

Vous pouvez modifier la durée de mise en cache en secondes, et en spécifier une différente selon le type de fichiers. Google Page Speed demande une mise en cache d’ un mois minimum.

Attention : si vous modifiez un fichier, les internautes pour lesquels le fichier est stocké dans le cache de leur navigateur ne verront pas le nouveau fichier avant que l’ancien expire. Le plus simple est de changer le nom du fichier.

Combine External JavaScript      &     Combine External CSS

C’est tout simple, copiez/collez le contenu de tous les fichiers JavaScripts que vous appelez dans un seul fichier .js et le contenu de tous les fichiers CSS que vous appelez dans un seul fichier .css, pour ne faire qu’un appel pour chaque.

Minify CSS      &     Minify JavaScripts

Là encore ce n’est pas compliqué. Page Speed vous propose une version optimisée de vos fichiers CSS et JavaScript, il n’y a qu’à l’utiliser pour les fichiers que vous hébergez vous même. Cliquez sur le + devant Minify CSS/JavaScript, puis sur « minified version » et enregistrez le code fourni.

Ne remplacez pas vos anciens fichiers, renommez-les en quelque chose comme style-non-minified.css pour les sauvegarder. En effet la version optimisée de vos fichiers CSS et Javascript est illisible et il est indispensable de conserver la version normale pour pouvoir y apporter des modifications, avant de relancer Page Speed pour l’optimiser à nouveau.

Optimize images

Optimiser les images signifie :
- Enregistrer les images directement à la taille voulue, pour ne pas avoir à les redimensionner en HTML.
- Enregistrer « pour le web », c’est à dire sans informations superflues et avec la qualité nécessaire.
Exemple sur Photoshop : Cliquez sur Fichier / Enregistrer pour le web et les périphériques, puis choisissez la qualité désirée grâce à l’aperçu.

Il est également utile de spécifier la longueur et la largeur de chaque image pour que le navigateur réserve la place nécessaire à chaque image et n’ait pas à déplacer le contenu après coup.

Optimize the order of styles and scripts

Le chargement de fichiers JavaScript externes bloque tout le reste. Pour optimiser le temps de chargement, il faut respecter l’ordre suivant :
- d’abord les scripts « inline »*,
- ensuite l’appel au fichier CSS externe,
- enfin l’appel au fichier JavaScript externe.

*Si les scripts « inline » peuvent être exécutés en dernier, comme le tracker Google Analytics, il faut alors les placer juste avant la balise </body>. Sinon, il faut les placer avant l’appel aux fichiers externes.

Bon voilà, j’espère que votre Page Speed vire au vert

Je vais préparer un article « Comment optimiser le temps de chargement de son site pour les nuls » au fur et à mesure que j’aurai compris ce qu’il faut faire concrètement et que j’aurai pu vérifier que ça fonctionne. J’ai déjà réussi à éliminer pas mal de points rouges de l’analyse des pages de mon blog par l’add-on « Page Speed », mais pas sans peine, parce que pour le moment on nous explique volontiers ce qu’il faut faire et pourquoi, mais pas comment faire techniquement…

En attendant j’ai réuni les outils et sources d’infos utiles que j’ai trouvé pour mesurer et optimiser de la vitesse de chargement des pages web.

1. Mesurez la vitesse de chargement et obtenez des suggestions

Avec Google Webmasters Tools

Dans la colonne de gauche, cliquez sur Labos puis Performances de site. Cette page, mise récemment à votre disposition par Google, vous donne
- le temps moyen de chargement des pages de votre site, un graphique montrant son évolution, et le compare aux autres.
- des suggestions pour améliorer la vitesse de chargement de vos pages (fournies par Page Speed).

Avec des add-ons pour Firefox

Vous avez le choix entre Page Speed (par Google) ou YSlow (par Yahoo), deux add-ons pour Firefox qui vous donnerons des suggestions pour améliorer le temps de chargement de chaque page. Ils se rajoutent tous deux aux onglets de Firebug, que vous devez donc avoir installé avant YSlow ou Page Speed.

Installer FirebugInstaller Page SpeedInstaller YSlow

Pour mieux comprendre la signification des données de Page Speed, c’est ici.
Pour mieux comprendre comment fonctionne YSlow, c’est là.

2. Optimisez la vitesse de chargement des pages web

Optez pour le code Google Analytics asynchrone

Un premier truc à faire : Google, dans sa volonté de mettre l’accent sur la vitesse de chargement des pages web, a mis à disposition une version asynchrone du code du tracker Analytics, c’est à dire qui ne retarde pas le chargement des autres éléments de la page. Vous pourrez donc remonter le code dans la page (Google recommande de le placer avant la balise </header>) et le temps d’exécution du script ne comptera pas.

Ressources Google pour améliorer le temps de chargement des pages

Web Performance Best Practices
Let’s make the web faster : Tutorials

Ressources Yahoo! pour améliorer le temps de chargement des pages

Best Practices for Speeding Up Your Web Site

Autres sources expliquant comment mettre en place la compression gzip et la mise en cache

How to enable gzip compression on website pages (forum Google)
Guide .htaccess : Améliorer la vitesse de transfert de site en permettant la mise en cache des fichiers (10ème titre de la page)
Un tutoriel de la mise en cache

Il s’agit d’un service web gratuit et convivial pour créer des cagnottes en ligne. Les créateurs de ce site ont l’air assez doués pour en faire la com et je n’hésite pas à relayer l’info car je trouve qu’il répond à un réel besoin : faciliter les dépenses communes. Pas plus tard que ce mois-ci, je me suis chargée de l’achat de deux cadeaux d’anniversaires communs, et comme toujours dans ces cas là, je me retrouve à courir derrière ceux qui ont voulu participer et dont je n’ai pas eu de nouvelles.

J’ai testé le service et voilà ce que j’ai noté :

J’aime

- Le nom : je ne sais pas d’où ça sort mais pour une fois ça sort un peu de l’ordinaire. Je veux dire, ils ne s’appellent pas cagnotéo et ça fait du bien Et puis ça les a inspiré pour un design très sympa.

- La simplicité d’utilisation, avec notamment un formulaire pour créer un cagnotte est très rapide à remplir et qui ne demande pas d’infos superflues

et le fait de pouvoir inviter des amis à contribuer très facilement, en communiquant une URL ou en envoyant un message via leetchi.com,

- La possibilité de dépenser l’argent sur un site marchand ou de demander un virement bancaire.

- La possibilité de donner un feedback, qui montre qu’ils s’intéressent à l’amélioration de l’expérience sur leur site. Je vais m’empresser d’y copier-coller ce qui suit.

Je n’aime pas

- Le fait que le montant à collecter et le montant suggéré par personne soient des champs obligatoires. Souvent quand je fais une cagnotte pour acheter un cadeau commun à un ami je demande à chacun s’il veut participer et combien il compte y mettre et je pars ensuite à la recherche d’un cadeau en fonction du budget.

- Le message envoyé par défaut lorsqu’on invite quelqu’un à contribuer à une cagnotte : style télégraphique, un peu abrupte, caractère obligatoire (montant à réunir : x€), envoyé d’une adresse noreply et non de l’adresse du créateur de la cagnotte… Il n’est pas travaillé et sans parler du fait qu’il est impossible d’afficher les images, on perd l’intérêt de l’envoyer par leetchi.com au lieu de communiquer l’URL soi-même.
De plus, la signature de l’email n’est pas du tout adaptée. Au lieu de vous expliquer que votre ami a fait appel à Leetchi pour organiser une cagnotte commune, on vous annonce qu’il en a marre de courir derrière vous pour que vous lui donniez l’argent. On vous explique comment créer une cagnotte alors que vous êtes censé participer à une cagnotte existante. Enfin, on vous dit de ne pas tenir compte de ce message si vous n’êtes pas inscrit sur leetchi.com alors que c’est justement une invitation à s’inscrire.

A reprendre !

- Un petit problème d’ergonomie : C’est une mauvaise idée d’utiliser des ticks pour cocher ce qu’on ne souhaite pas voir apparaitre, car un tick est utilisé pour valider. Cela prête à confusion. Il faudrait par exemple barrer l’expression pour que ce soit directement compréhensible. Quand j’ai coché la case « cagnottes actives » avec une tick et qu’on m’a dit « aucune cagnotte visible », j’ai cru que la création de ma cagnotte n’avait pas fonctionné.

Pour aller plus loin

- Proposer d’autres modes de paiement que le paiement par carte bancaire. Personnellement j’aime bien payer avec mon compte Paypal. Et pour des petites sommes, je pense qu’il pourrait être intéressant de proposer des solutions de micro-paiement.

- Je pense que ce site a de nombreuses possibilités d’évolutions pour améliorer la qualité du service rendu. En prenant l’exemple de l’achat d’un cadeau commun, je pense à la possibilité de suggérer des idées cadeaux et d’en discuter avec tous les contributeurs dans un module permettant d’indiquer une description, un prix ou ordre de prix, une image, un lien vers un site marchand, et de commenter.

Commençons par le nouveau logo. J’aime toujours autant le petit papillon coloré qui joue avec la transparence et je trouve que la finesse des lettres va très bien avec le design épuré.

Concernant la navigation, MSN abandonne son bandeau de liens en bloc pour un vrai menu, déroulant, avec un code couleur. Il y a des chances pour qu’il soit plus utilisé !
avant :

après :

Dans le contenu de la page, MSN gagne énormément de place avec des blocs dont on peut faire défiler le contenu, et un système d’onglets. Très efficace pour proposer un contenu conséquent sans surcharger la page, les internautes pourront ne consulter que le contenu qui les intéresse.

Autre élément sympa, la colonne de gauche (après la pub…) propose un accès à Hotmail et un récapitulatif de l’actualité sur son compte Windows live, Facebook et Twitter.

Bon, maintenant je passe aux défauts.

Concernant le design, ça « flotte » un peu vous ne trouvez pas ? Il n’y a plus de lignes verticales qui aident à la structuration du contenu et à l’inverse je me demande si certaines lignes horizontales sont vraiment nécessaires dans la partie basse. Mettre des points devant chaque ligne et suffisamment d’espace blanc, comme sur l’ancienne version et comme dans le premier bloc de contenu, me parait mieux.

L’agencement des onglets ne me parait pas toujours pertinent. La première série d’onglet reprend les news par catégories, pas de problème. La deuxième série d’onglet mélange les infos locales (météo, infos, événements), les films au ciné, la recherche d’emploi et Bing Maps. C’est à dire tout ce qui nécessite que vous indiquiez là où vous êtes. Je sais pas si la recherche d’emplois a vraiment sa place ici, mais passons. Dans le dernier groupe d’onglets, je ne vois pas le rapport entre « Popular Searches » et « Shopping ». Ça a effectivement un rapport pour MSN car les deux onglets renvoient vers des résultats de Bing, mais cela ne me semble pas pertinent pour l’utilisateur. Enfin bon, on peut se dire qu’une fois que les internautes se seront habitués à l’emplacement des informations ce ne sera plus un problème !

Enfin, ce que je trouve dommage, c’est que cette page ne soit pas personnalisable. Il est vrai qu’il y a une partie « local » et que la colonne de gauche est réservée à des infos personnelles (encore faut-il avoir un compte Hotmail, Facebook et Twitter). Mais on est loin de iGoogle et de la nouvelle page d’accueil Yahoo. La personnalisation est un élément qui me parait très important. En ce qui me concerne, je vais rester fidèle à iGoogle pour la page par défaut de mon navigateur.

Contenu dupliqué non-malveillant : Google ne vous pénalisera pas

Google fait la différence entre le contenu dupliqué non-malveillant et le contenu délibérément dupliqué afin de manipuler le classement du site par les moteurs de recherche. Exemples de contenu dupliqué non-malveillant cités par Google :
- Forums de discussion pouvant générer à la fois des pages normales et des pages « raccourcies » destinées aux mobiles ;
- Articles en vente affichés ou liés via plusieurs URL distinctes ;
- Versions imprimables uniquement de pages Web.

Google indique pénaliser les sites sur lesquels du contenu en double est détecté uniquement dans les rares cas où ils estiment qu’il s’agit de pratiques trompeuses. Sinon, il assure que cela n’entraîne pas de conséquences négatives particulières pour le site.

Dans quels cas faut-il lutter contre le duplicate content au sein de son propre site ?

Google ne vous pénalisera pas volontairement, non, cependant le contenu dupliqué peut quand même nuire à votre référencement. Il me semble que c’est clair dans certains cas, moins dans d’autres.

Cas dans lesquels le duplicate content nuit clairement au référencement :

Si plusieurs pages identiques sont accessibles via plusieurs URL, vous éparpillez alors vos efforts de référencement. C’est le cas dans les exemples suivants :

• Indexation d’un site avec et sans www.
• Triple indexation des pages index : http://www.site.com/dossier, http://www.site.com/dossier / et http://www.site.com/page/index.htm
• Mise en place de réécriture d’URL sans utiliser de redirections 301.
• Existence de plusieurs versions d’une même page, par exemple une version normale et une version imprimable.
• Plusieurs URL pour une même page en raison de l’ordre des paramètres, ou des paramètres optionnels.

Blog : faut-il empêcher l’indexation des pages catégories et tags ?

Et bien je ne suis pas certaine de la réponse à la question et votre avis m’intéresse. Les articles peuvent se retrouver à leur adresse mais aussi sur la page d’accueil, sur les pages archives, sur les pages catégories et sur les pages tags. Si on n’utilise pas la balise « more » cela me semble évident : le contenu est effectivement entièrement dupliqué. Mais si les pages ne reprennent que le début des articles, est-il quand même préférable d’empêcher leur indexation ?

Je ne vois pas l’intérêt de référencer des pages archives dans tous les cas, leur titre reprenant une date. En revanche, il me semble que les pages contenant un mot clé en titre et regroupant tous les débuts d’articles peuvent facilement monter sur les pages de résultats des moteurs de recherche, et sont de plus des résultats intéressants.

Le fait de ne pas empêcher l’indexation des tags entraine une multiplication du nombre d’URL créé lorsqu’un nouvel article est publié : une URL pour l’article + une URL pour chaque nouveau tag. A ce propos, Webrankinfo indique qu’ « en générant plusieurs URL pour chaque contenu, vous demandez un surcroit de travail aux robots, si bien que vous risquez d’avoir certaines pages non crawlées (et donc non indexées) ou alors crawlées tardivement ». Mais il me semble que l’on peut y remédier

• en incluant uniquement l’URL des articles dans le sitemap pour indiquer à Google que ce sont les pages importante.
• en limitant le nombre de tags.

Et vous, avez-vous choisi de ne pas indexer vos pages catégories et tags ?

Plusieurs services en ligne vous permettent de faire des captures vidéos de la navigation des internautes qui se rendent sur votre site ou votre blog. Ils enregistrent les mouvements de la souris, les scrolls, les clics et les changements de pages. Certains proposent également des heat maps (cartes de chaleur) qui font ressortir les zones qui ont étés vues et cliquées. Ce sont des outils très précieux pour étudier le comportement des visiteurs et améliorer l’ergonomie du site en fonction de ses objectifs.

Est-ce que mes visiteurs srcollent jusqu’en bas des pages ? Certaines informations sont-elles vues ? Mon blog est-il optimisé pour pousser les visiteurs à lire plusieurs billets ? L’emplacement des publicités est-il efficace ? Ce sont autant de questions auxquelles ces outils de tracking viseul peuvent vous aider à répondre.

J’ai testé les deux outils suivants : Userfly et Clicktale. Tous deux possèdent une version gratuite illimitée dans le temps. Voici ce que vous pouvez obtenir avec chacun d’eux :

• Userfly : 10 captures par mois. Une capture correspond au parcours complet d’un visiteur choisi aléatoirement. Un bon point pour Userfly : il permet d’exclure son adresse IP en un clic pour éviter de s’enregistrer soi-même.
  




• Clicktale : 100 enregistrements par semaine (1 enregistrement = 1 page), mais vous ne pourrez visionner le parcours du visiteur que sur les deux premières pages vues. Clicktale réalise également des heat maps et des statistiques telles que : pages les plus cliquées, les moins scrollées, temps de chargement… Un outil un peu plus complet que Userfly donc, cependant il est un peu frustrant de ne pas pouvoir suivre ses visiteurs après la deuxième page. De plus, l’utilité des heat maps est limitée par le fait qu’elles ne soient pas superposables. En effet, Clicktale réalise une heat map par visite alors qu’il serait intéressant d’avoir une vue générale des zones biens vues et cliquées et des zones occultées.
  

Ces solutions de tracking visuel sont rapides et simples à mettre en place sur son site web. Il suffit d’insérer une portion de code sur vos pages web, comme pour Google Analytics. Et les vidéos sont visualisables immédiatement !

Vous connaissez peut-être d’autres solutions du même genre ? Quelles sont les différences avec Userfly et Clicktale ?