1
Joomla 3.5 SEO & Performance
Par Simon Kloostra
Traduit en français par Simon Grange
Tous droits réservés. Aucune partie de ce livre ne peut être reproduite ou transmise, sous aucune
forme, graphique, électronique, physique, photocopie inclue, enregistrement, sous forme
d'information stockée ou de système de récupération, sans la permission écrite des propriétaires de
ce copyright
Pour toute information, contacter Simon Kloostra, info@joomla-seo.net.
2
Table des matières
Préface : à qui est adressé ce livre ?.....................................................................................................6
A propos de l'auteur.........................................................................................................................6
Partie 1 : Comment Google fonctionne-t-il ?.......................................................................................7
Contenu unique & de qualité...........................................................................................................8
Title, métadonnées, SERPs..............................................................................................................8
Titre.............................................................................................................................................9
Meta Description.......................................................................................................................10
Analyse des mots-clés....................................................................................................................10
Utilisez vos mots-clés....................................................................................................................12
Google SEO Guide pour débuter...................................................................................................13
Partie 2 : SEO Joomla! ......................................................................................................................14
Commencer sur un environnement de test.....................................................................................14
Template.........................................................................................................................................15
Code propre et valide................................................................................................................15
HTML5.....................................................................................................................................15
Ordre du code............................................................................................................................16
Configuration : Nom du Site..........................................................................................................16
Configuration : Paramètres des métadonnées................................................................................17
Description du site.........................................................................................................................18
Mots-clés du site.......................................................................................................................19
Robots.......................................................................................................................................19
Configuration Globale : Paramètres SEO......................................................................................20
Réécriture d'URL en clair (SEF)...............................................................................................20
Réécriture au 'vol' des URL......................................................................................................22
Ajouter un suffixe aux URL......................................................................................................23
Alias Unicode............................................................................................................................23
Nom du site dans les titres........................................................................................................23
Métadonnées pour chaque page séparée........................................................................................24
Metadescription.........................................................................................................................25
Titre de Page..............................................................................................................................26
Robots.......................................................................................................................................28
Manipuler vos URL.......................................................................................................................29
Structure de Catégorie...................................................................................................................30
Structure de Menu..........................................................................................................................30
Titre H1..........................................................................................................................................31
1: Articles affichés en blog / liste / articles en vedette..............................................................31
2: Eléments de menu directement liés à des articles.................................................................32
Surcharges de Template............................................................................................................33
Extension Header Tags..............................................................................................................34
Optimiser les liens internes et les ancres.......................................................................................34
Optimiser les images......................................................................................................................36
Microdata et Rich Snippets............................................................................................................38
Duplicate content...........................................................................................................................40
URL Canonical..........................................................................................................................41
Redirection 301 en utilisant un .htaccess modifié.....................................................................42
Robots.txt..................................................................................................................................43
3
Extensions.................................................................................................................................44
Pages et erreurs 404.......................................................................................................................44
Causes des erreurs 404..............................................................................................................45
Prévenir les erreurs 404.............................................................................................................45
Redirection 301 avec les fonctionnalités natives de Joomla! afin de prévenir et de résoudre les
erreurs 404.................................................................................................................................46
Redirection 301 avec .htaccess pour prévenir les erreurs 404..................................................47
Construire une page 404 personnalisée.....................................................................................48
Robots.txt.......................................................................................................................................52
Sitemap..........................................................................................................................................53
Sitemap pour les visiteurs.........................................................................................................54
Sitemap pour moteurs de recherche..........................................................................................55
Publier votre site et vérifier les résultats finaux............................................................................56
Plugin Firefox SEO Doctor.......................................................................................................56
Site web SEORCH.eu...............................................................................................................57
Partie 3 : Extensions-SEO..................................................................................................................58
Easy Front-end SEO......................................................................................................................58
Non SEF to SEF.............................................................................................................................60
Canonical.......................................................................................................................................60
Xmap..............................................................................................................................................60
D'autres extensions SEO................................................................................................................61
Partie 4 : SH404SEF...........................................................................................................................62
Planifier à l'avance !.......................................................................................................................63
Préparations...................................................................................................................................64
Installation et Configuration..........................................................................................................65
Gestion URL..................................................................................................................................68
Purger les URL..............................................................................................................................69
Régler la page d'accueil.................................................................................................................70
Gestion d'Alias...............................................................................................................................71
Gestion shURL..............................................................................................................................71
Requêtes 404..................................................................................................................................71
Titre et Méta...................................................................................................................................72
Analytics........................................................................................................................................73
Désavantages.................................................................................................................................74
Extensions similaires à SH404SEF................................................................................................74
MijoSEF....................................................................................................................................75
JoomSEF...................................................................................................................................76
Partie 5 : SEO Off-site........................................................................................................................77
Google Webmaster Tools...............................................................................................................77
Google Analytics............................................................................................................................82
Google+.........................................................................................................................................82
Linkbuilding et réseaux sociaux....................................................................................................82
A partir d'ici...................................................................................................................................84
Partie 6 : Performance et optimisation pour un site web Joomla! rapide...........................................85
Vérifier avant de commencer.........................................................................................................85
Extension YSlow pour navigateur.............................................................................................86
Page Speed Insights..................................................................................................................87
Pingdom....................................................................................................................................87
GT-Metrix..................................................................................................................................88
Webpagetest.org........................................................................................................................88
4
Fournisseur d'hébergement Web....................................................................................................89
Simple et mince.............................................................................................................................90
Mise en cache de Joomla!..............................................................................................................91
Paramètre du cache global.............................................................................................................92
Cache pour les modules............................................................................................................93
Plugin Système - Cache ...........................................................................................................94
Nettoyage du cache...................................................................................................................94
Plugin NoNumber Cache Cleaner.............................................................................................96
JOTcache...................................................................................................................................97
Leverage Browser Caching............................................................................................................98
G-Zip............................................................................................................................................100
Réduire la taille des images.........................................................................................................101
Lossless compression..............................................................................................................101
Images correctement dimensionnées.......................................................................................102
Sprites......................................................................................................................................103
Encodage des images en Base64.............................................................................................104
Optimize CSS and Javascript.......................................................................................................104
Compresser vos fichiers..........................................................................................................105
Combiner vos fichiers.............................................................................................................105
Différer le Javascript...............................................................................................................105
Exécuter les scripts de manière asynchrone............................................................................106
JCH Optimize..........................................................................................................................107
Jbetolo.....................................................................................................................................108
CDN (Content Delivery Network)...............................................................................................109
Optimisation pour mobile............................................................................................................111
Extensions....................................................................................................................................112
Vérification finale........................................................................................................................112
5
Préface : à qui est adressé ce livre ?
Ce livre est destiné aux utilisateurs de Joomla!, enthousiastes et professionnels, qui souhaitent
augmenter le nombre de visiteurs de leurs sites web Joomla! en se plaçant dans les premières
positions sur les résultats des moteurs de recherche comme Google, Bing et Yahoo. Le livre est écrit
pour Joomla 3.5 mais peut parfaitement être utilisé pour Joomla 2.5 également.
Il va vous montrer comment optimiser votre site web Joomla! pour les moteurs de recherche, tout
d’abord en utilisant simplement les paramètres natifs de Joomla!, puis également grâce à l’aide
d’extensions, avec une partie entièrement dédiée à SH404SEF, qui est probablement l’extension
Joomla! la plus populaire en terme de SEO/SEF (les débutants peuvent sauter ce chapitre, le livre ne
dépend pas de cette section ou même de cette extension).
Vous allez également élargir vos connaissances de fond sur les sujets SEO et cela sera nécessaire
pour comprendre pleinement ce que vous faites. Le principal sujet de ce livre portera sur
l'optimisation du site lui-même, même si une certaine attention sera également accordée à
l'optimisation hors site, comme le linkbuilding, ou le paramétrage de Google Analytics et
Webmaster Tools.
Deuxièmement, ce livre traite de Performance, expliquant comment construire un site rapide, tout
d'abord en optimisant les paramètres natifs de Joomla!, ensuite en utilisant certaines extensions
spéciales.
Pour comprendre ce livre vous devez avoir au minimum quelques connaissances basiques de
gestion de Joomla!, comme créer des articles et des menus et être capable d'installer et de configurer
des extensions. Si vous n'avez pas encore ces connaissances, il serait préférable de lire un livre pour
débutant Joomla! en premier lieu. Aucune connaissance en SEO n'est nécessaire, ce livre vous
enseignera tout ce que vous aurez besoin de savoir.
A propos de l'auteur
Simon Kloostra est un webdesigner hollandais, basé à Utrecht, en Hollande. Il dirige sa propre
entreprise de webdesign nommée SK-Web et il est également l'auteur du site Joomla-seo.net, un
blog et guide populaire sur le SEO & les performances pour Joomla!. Entrez simplement Joomla
SEO sur Google et vous le trouverez ;)
Simon parle également parfois de SEO (Joomla!) lors de workshops et de présentations.
6
Partie 1 : Comment Google fonctionne-t-il ?
Avant que nous ne commencions à optimiser Joomla! pour les moteurs de recherche, regardons
rapidement quelques bases sur la manière dont Google classe un site web. Vous pouvez sauter ce
chapitre si cela vous est déjà familier. Nous allons seulement voir les bases, les sujets plus avancés
sur le SEO viendront ensuite lorsque nous configurerons Joomla!.
Notez que quand je dis Google, je comprends également les autres moteurs de recherche.
Grossièrement, ils fonctionnent tous de la même manière pour ce qui nous intéresse dans ce livre.
Google scanne et crawle constamment tous les sites web en ligne avec ce que l'on appelle les robots
ou bots. En commençant par la page d'accueil, ces robots lisent tous le code, suivent les liens et
essayent d'interpréter ce dont traite le site. Il est très important de comprendre que Google ne fait
que lire le code, il ne peut pas comprendre les images, le Flash, les sons, les vidéos, etc. Il agit
presque comme une personne aveugle essayant de comprendre le monde autour de lui. Un grand
nombre de conseils que Google recommande aux webmasters est en fait extrait des règles
d'accessibilité qui aident les personnes à lire/entendre les sites web. Google utilise le contexte pour
comprendre les éléments comme les images. Par exemple : si vous souhaitez afficher une image
d'un oiseau, assurez-vous que son nom soit oiseau.jpg.
Google utilise également la structure du HTML pour estimer ce dont parle le site, en utilisant l'ordre
dans lequel le contenu est créé (premièrement les éléments importants, puis les éléments moins
importants ensuite), mais il apprécie également tout effort de structure du code, comme l'utilisation
des bonnes balises dans votre HTML. Par exemple : les éléments <section> sont supposés être plus
importants que les éléments <aside> et <footer >. De même, les autres éléments comme <h1>,
<h2>, <p>, <quote>, etc. peuvent être interprétés et utilisés pour construire la structure.
Donc pour l'instant, l'essentiel à retenir est que :
Google lit le texte, du moins en ce qui concerne l'optimisation du site lui-même.
Google utilise également des facteurs off-site comme les liens et la popularité sur les réseaux
sociaux, mais pour un nouveau site, cela est pertinent seulement une fois le site en ligne. Nous
reviendrons sur le SEO off-site plus tard, mais nous nous concentrerons principalement sur le SEO
on-site.
Regardons en détail quelques autres facteurs que Google utilise pour mesurer la pertinence de votre
site :
7
Contenu unique & de qualité
Avant toute chose, vous devez vous démarquer de vos sites concurrents sur les mêmes résultats de
recherche Google, vous devez donc vous assurer d'avoir un contenu unique et de qualité pour vos
visiteurs afin qu'ils aiment revenir sur votre site. Assurez-vous d'écrire pour vos visiteurs, en
gardant Google en tête en permanence, mais dans cet ordre. Si vous changez cet ordre et que vous
écrivez seulement pour Google, vos visiteurs vont s'ennuyer de votre contenu et vont quitter votre
site.
Un point également important : Google adore le nouveau contenu donc, si possible, maintenez un
blog ou autorisez vos visiteurs à laisser des commentaires. Si vos visiteurs peuvent laisser des
commentaires, ils peuvent participer à la création de contenu, bien que vous deviez les modérer bien
sûr.
Pour la suite de ce livre, nous allons supposer que votre contenu est bon, ce n'est pas un livre sur la
rédaction pour SEO, même si vous recevrez de nombreuses astuces.
Title, métadonnées, SERPs
Vous utiliserez probablement Google comme base quotidienne, donc vous serez famillier avec la
présentation d'une page de résultats de recherche. Dans les termes SEO, une telle page est nommée
SERP, pour Search Engine Results Page. Souvenez-vous-en, nous allons utiliser souvent cette
abréviation.
Vous devez également être conscient de cela : la manière dont un site web est affiché sur un SERP
est en relation directe avec la configuration du site.
Jetons un œil à un résultat pris au hasard que nous obtenons avec une recherche pour Joomla SEO.
Un des résultats est une page pour l'extension MijoSEF:
Vous verrez toujours au moins 3 éléments :
•
Titre
•
URL
•
Meta description
L'URL parle d'elle-même, mais le title et la meta description sont extrêmement importants.
8
Titre
Lorsque nous parlons du titre en webdesign, cela peut signifier 2 choses :
•
Le titre comme un utilisateur le comprendra lorsqu'il est à la recherche d'une page web,
p.ex. le plus gros titre affiché. Bien que ce soit également un facteur SEO très important,
nous le verrons plus tard, ce n'est pas ce dont nous parlons ici.
•
Le Title de la page. Pour être exact : voici la balise <title> comme elle se trouve dans le
code source d'une page.
Lorsque nous regardons le code source de la page MijoSEF nous pouvons facilement détecter
l'élément title :
Lorsque vous comparez l'extrait de la page SERP Google et l'extrait ci-dessus, il est très facile de
voir que le titre, comme défini par l'administrateur du site, est effectivement pris en charge par
Google. Il correspond au résultat de la page dans Google. Cela signifie que vous pouvez déterminer
la manière dont les résultats de recherche seront affichés dans les SERP (Search Engine Rank
Page) !!! Vous pouvez ainsi imaginer que cela peut être très puissant : avant même que les visiteurs
n'atteignent votre site, vous pouvez interagir avec eux.
Nous allons énormément parler de la balise title au cours du livre. Pour l'instant, il est très important
de vous souvenir que les moteurs de recherche autorisent 65-70 caractères pour cela dans leurs
SERPs, c'est pourquoi vous devez vous assurer de rester dans ces limites. Vous pouvez faire des
titles plus longs, mais ceux-là seront coupés, ce qui sera moins présentable et devra donc être évité.
Souvenez-vous également que les internautes vont les lire et décider de cliquer ou non. Imaginez ce
qui se passera si vous laissez le title sur Accueil, qui est une chose que vous verrez sur de nombreux
sites Joomla!...
9
Meta Description
La meta description vient également du code source de la page :
Donc, encore une fois, nous avons un autre moyen d'influer sur la façon dont votre site sera affiché
dans les SERPs. Seulement ici, nous avons un peu plus d'espace à disposition. Si vous limitez la
longueur de la meta description à 165 caractères, vous serez généralement affiché correctement.
Notez qu'il n'est pas garanti que Google prenne en compte votre configuration meta description : si
elle est totalement sans rapport avec votre contenu (ce qui serait une mauvaise habitude), Google
générera sa propre description. Aussi, en fonction de ce que l'utilisateur recherche, une autre
description pourrait être plus appropriée. Un utilisateur peut rechercher un mot-clé que vous n'avez
pas configuré dans votre description, alors qu'ailleurs dans le corps du texte se trouve le mot exact
que l'utilisateur recherche. Ce n'est pas un problème, bien sûr, vous ne pouvez pas mettre tous les
mots-clés imaginables dans le petit espace dont vous disposez.
Contrairement au <title>, la meta description n'est pas utilisée par Google pour déterminer le
classement de votre site dans les résultats de recherche, sauf si vous utilisez des meta descriptions
dupliquées sur plusieurs pages de votre site web, auquel cas vous serez pénalisé. Pour utiliser les
meta descriptions positivement, vous devez les rendre attractives pour vos visiteurs afin qu'ils
cliquent sur le résultat, même si vous n'êtes pas dans les premiers résultats du SERP. Nous en
discuterons plus en détail plus tard.
Analyse des mots-clés
Lorsque vous écrivez votre contenu, vous devez vous assurer de connaître les mots-clés que vos
visiteurs vont entrer dans Google. Sinon, vous risquez de perdre beaucoup de trafic potentiel pour
les mots-clés que vous n'avez pas pris en considération.
Il existe de nombreuses approches pour cela. Essayons de rechercher nos mots-clés avec l'exemple
d'une boutique en ligne qui vendrait des livres, le mot-clé principal serait donc Livres.
Pour commencer, un peu de brainstorming, essayez de vous mettre à la place d'une personne
recherchant des livres. Il suffit de penser à tous les termes alternatifs que vous pouvez utiliser pour
chercher des livres comme nouvelle, biographie, encyclopédie, etc. Regardez également les
combinaisons de mots comme livres en ligne ou livre pour femmes. N'oubliez pas les formes au
singulier et au pluriel pour le même mot-clé.
10
Avec la liste de mots-clés que vous obtenez, allez sur Google.com (ou google.fr) et faites une
recherche pour le mot livres ou n'importe quel autre mot-clé que vous avez listé, puis descendez
dans le bas de la page. Google vous affichera plus de suggestions d'expressions de recherche et ces
suggestions seront probablement les plus utilisées :
J'utilise également souvent www.seorch.eu en tant que brainstorming. En dessous du menu Google
Tools se trouve l'option Suggestions qui vous donnera d'autres options. Vous n'obtenez pas de
mesures, comme les volumes ou la popularité, mais cela peut vous aider à construire une liste de
mots-clés.
Pour finir, dans Google AdWords, un outil très utile est disponible afin d'obtenir plus de détails pour
vos mots-clés. Vous pouvez accéder à l'outil sans compte Google, mais sans compte Google
AdWords vous pourriez tout aussi bien arrêter de lire ce livre, donc rendez-vous sur
www.adwords.google.com, enregistrez-vous, et naviguez vers Outils > Outils de planification des
mots-clés.
Cliquez sur Rechercher de nouvelles idées de mots-clés et de groupes d'annonces. Si nous
entrons quelques mots-clés en relation avec livres, l'outil nous donnera une liste comme celle-ci :
11
Vérifiez les mots-clés pertinents, de préférence recherchez les mots-clés avec un volume de
recherche élevé et une concurrence faible. Regardez également les mots-clés longs à volume
faible, mais extrêmement pertinents, conduisant éventuellement à une conversion élevée.
Vous souhaiterez sans doute regarder les sites web de vos concurrents, il n'est pas si difficile de
filtrer leurs principaux mots-clés…
Comme c'est un guide pour Joomla!, je ne vais pas aller plus loin sur ce sujet, n'hésitez pas à faire
quelques lectures complémentaires. Un chapitre de Moz.com SEO beginners guide constitue une
très bonne introduction : www.moz.com/beginners-guide-to-seo/keyword-research (Le guide dans
son intégralité est également très intéressant).
Utilisez vos mots-clés
En supposant que votre site web est en place avec le bon template et les bons paramétrages, nous
pouvons maintenant commencer à remplir ce site avec les données, p.ex. articles, modules et
menus. Déjà à ce stade nous allons devoir réfléchir à comment et où remplir le site de texte et de
mots-clés.
D'une manière générale, essayez d'utiliser vos mots-clés autant que possible dans les emplacements
pertinents du site. Bien sûr, le texte de l'article est l'endroit auquel vous devez prêter le plus
d'attention mais les autres emplacements pertinents devraient être :
•
Nom de domaine
•
URL
•
Meta-title
•
Meta-description
•
Titre H1 ainsi que les balises H2 et H3
•
Images (nom et alt-text)
•
Liens
•
Etc.
La plupart des points ci-dessus seront repris en détail dans les prochains chapitres du livre.
En ce qui concerne le texte de l'article, qui est l'endroit où la plupart de votre contenu est placé,
concentrez-vous sur vos lecteurs, mais sans oublier la manière dont Google aimerait que vous
écriviez.
12
Vous n'êtes pas en train de lire un guide complet sur l'écriture SEO, mais gardez ces quelques règles
de base à l'esprit:
Utilisez votre mot-clé principal tôt dans vos phrases et dans vos paragraphes si cela ne gène pas
la visibilité. Pour l'exemple, comparons les phrases suivantes :
•
Après avoir passé plusieurs heures à tester, nous avons pensé que le vélo X était le meilleur.
•
Le vélo X était le meilleur, comme nous l'avons pensé après plusieurs heures de test.
Si vélo est notre mot-clé principal, le second exemple fonctionnera davantage et la lisibilité n'est
pas affectée.
Un autre point auquel vous devez prêter attention sur un mot-clé utilisé dans votre texte est la
densité-mot-clé. Il n'y a pas de ratio exact auquel vous fier, mais vous ne devriez pas dépasser 5%,
ce qui signifie 5 occurrences de votre mot-clé tous les 100 mots. Utilisez également les synonymes
et abréviations. Utiliser des alternatives pour les mêmes mots-clés vous permet de jouer un peu
avec la densité du mot-clé. L'utilisation de synonymes vous permet également de cibler des
alternatives dans Google.
Il existe de nombreux outils en ligne permettant de mesurer le ratio des mots-clés principaux. Un
outil que j'utilise souvent est www.seorch.eu, qui vous donne la densité des mots-clés pour les mots
les plus utilisés de votre page.
Mis à part le corps de texte de base, assurez-vous également de construire les entêtes html
correctement. Google a besoin de comprendre la hiérarchie de votre texte et vous devez utiliser des
titres pour cela. En HTML, ce sont les balises <h1>, <h2>,<h3> etc. Nous entrerons plus en détail
sur la balise <H1> plus tard, mais vous devrez vous assurer de toujours utiliser un <h1> sur chaque
page, mais jamais plus d'une balise ! Google voit le <h1> comme l'un des facteurs SEO les plus
importants sur un site, donc utilisez-le correctement.
Google SEO Guide pour débuter
Tout ce que nous venons de voir jusqu'ici est en fait ce que Google suggère aux webmasters qui
construisent leurs sites.Tant que vous suivrez les guides Google, tout devrait être bon. Si pour un
aspect SEO vous vous posez des questions, vérifiez simplement ce que dit Google. S'il vous dit de
le faire, alors faites-le ! Vous voulez être dans ses résultats, donc jouez en respectant ses règles.
Google propose également un PDF appelé Guide de démarrage Google - Optimisation pour les
moteurs de recherche que vous pouvez trouver en ligne à l'adresse :
http://static.googleusercontent.com/media/www.google.fr/fr/fr/intl/fr/webmasters/docs/searchengine-optimization-starter-guide-fr.pdf
Ce n'est pas très difficile à lire et si vous suivez les indications, vous serez récompensé de vos
efforts.
13
Partie 2 : SEO Joomla!
Commencer sur un environnement de test
Si vous allez travailler sur un nouveau site, assurez-vous de créer et d'optimiser le site sur un
environnement de test. Vous ne devez pas travailler sur le nom de domaine sur lequel le site sera
publié (ni sur un sous-domaine). Pour commencer, il n'est pas présentable pour les visiteurs qui vont
passer. Ensuite, vous allez également créer des URL lors de la création du site et Google risque de
commencer à indéxer ces URL. Cependant, ces URL vont probablement être modifiées lors du
développement, ce qui signifie que Google va rencontrer des erreurs sur les pages modifiées et vous
pourrez rapidement être pénalisé.
Bien sûr, vous pouvez régler le statut de votre site sur hors-ligne, mais il est préférable de travailler
en local, sur votre ordinateur. Mis à part les aspects SEO, vous allez également travailler sur vos
templates, images, surcharges etc., et tout cela est beaucoup plus simple si vous travaillez sur votre
PC ou Mac.
Créer un environnement pour faire fonctionner votre site en local est simple. Vous avez plusieurs
options, mais la plus utilisée est XAMPP, téléchargeable sur :
http://www.apachefriends.org/fr/index.html :
XAMPP installe plusieurs logiciels comme Apache, MySQL, PHP et PERL, qui sont tout ce dont
vous avez besoin pour faire tourner votre site sur votre ordinateur. Il existe des versions pour
Windows, Mac et Linux.
En fonction de votre OS vous pouvez simplement placer votre site web dans le répertoire destiné
puis y accéder via votre navigateur.
14
Template
L'optimisation de votre site pour les moteurs de recherche commence déjà à un stade très précoce.
En fait, vous devez déjà y penser lorsque vous construisez votre template. La raison est que Google
aime le contenu structuré et la structuration commence avec la manière dont le template est
organisé.
Code propre et valide
Comme toujours, votre code doit être valide HTML, donc assurez-vous de tester votre code avec
W3C validator, disponible à www.validator.w3.org. Personnellement, j'utilise la barre d'outils
Webdeveloper de Firefox pour cela, à télécharger ici :
https://addons.mozilla.org/fr/firefox/addon/web-developer/). Cela me permet d'avoir en permanence
un œil sur mon navigateur et de constamment tester. Cela me dit si mon code est valide et vérifie
également les erreurs CSS et Javascript.
Gardez votre HTML propre et lisible en évitant le Javascript et le CSS inline autant que possible.
Ceci afin de simplement conserver le ratio texte/code aussi haut que possible. Souvenez-vous, le
SEO est le résultat de dizaines de petites étapes et même la plus petite pourrait bien vous donner
l'avantage sur vos concurrents.
HTML5
L'utilisation du HTML5 vous donne encore plus d'opportunités pour hiérarchiser votre code.
L'utilisation de balises comme <section>, <article>, <footer>, etc. rend encore plus facile la
distinction des éléments essentiels d'une page simplement en regardant le code.
15
Ordre du code
Si possible, construisez votre template de manière à ce que les parties les plus importantes de la
page apparaissent en premier dans votre code. Ce ne sera pas toujours facile, mais c'est réalisable.
Sur toutes les pages, l'information la plus importante sera normalement la position Composant, et
non pas les modules environnants. Donc vous devriez essayer de mettre le Composant aussi tôt que
possible dans votre code.
Si vous mettez votre composant principal avant vos barres latérales, ce sera idéal. Certains
fournisseurs de templates utilisent cette technique pour construire leurs templates (JoomlaShine par
exemple). Dans le code brut, ils placent le composant principal avant les barres latérales, alors qu'en
général, l'ordre serait :
1. Barre de module de gauche
2. Composant
3. Barre de module de droite
Joomlashine parvient à mettre le Composant en premier dans le code, suivi des 2 barres latérales.
Ensuite, ils utilisent habilement le CSS-positioning afin que visuellement la barre de gauche arrive
en premier, alors que dans le HTML le Composant vient en premier.
C'est une technique assez avancée et vous ne devez pas forcément faire cela, mais souvenez-vous,
c'est seulement une petite étape parmi les nombreuses qui constituent le référencement de votre site.
Donc, admettons que nous ayons une installation propre de Joomla! avec un template optimisé pour
le SEO et les Performances. Nous pouvons maintenant commencer à configurer Joomla!, regardons
les réglages un à un :
Configuration : Nom du Site
Dès que vous installez Joomla!, la première action est d'aller dans les réglages de Configuration.
Ils sont vraiment importants pour optimiser votre site et ils déterminent la façon dont l'ensemble du
site est mis en place. Si vous réglez ces paramètres correctement, vous avez déjà une bonne base
pour votre configuration. Pour le SEO, les paramètres les plus importants sont tous sur le premier
onglet que vous voyez : l'onglet Site. Les autres paramètres sont également importants, mais moins
pour le SEO. Nous les verrons en détail lors du chapitre sur les Performances !
Retournons sur l'onglet Site, le premier paramètre que vous voyez est Nom du site :
16
Le Nom du site est un paramètre obligatoire que vous avez déjà sans doute entré lors de
l'installation du site. Le Nom de votre site sera probablement affiché partout, donc assurez-vous
qu'il soit pertinent pour votre site mais essayez de faire court. Plus tard nous ferons d'autres
configurations et nous devrons sans doute ajouter des éléments au Nom du site.
Le Nom du site est souvent (pas toujours) utilisé à 2 emplacements majeurs :
•
Sur la position du logo
•
Plus important, en tant que partie du Title de la Page, nous en verrons davantage sur cela
plus tard
Si votre site web est une marque, comme Coca Cola, ou Joomla, le Nom du Site sera
probablement le nom de la marque, mais il peut être n'importe quoi. Par exemple, pour
www.joomla-seo.net, le Nom du Site est simplement Joomla SEO, qui contient les 2 mots-clés
principaux sur lesquels il souhaite se placer.
Configuration : Paramètres des métadonnées
Dans le chapitre d'introduction sur Google, nous avons déjà expliqué combien les métadonnées (ou
métadata) sont importantes. Je vous conseille donc de remplir quelque chose d'approprié dans le
champ de votre Configuration sous Paramètres des métadonnées. Cela assure qu'une page ne
sera jamais affichée sans métadonnées dans le code, même si nous oublions plus tard de les entrer
dans un article spécifique.
Note : si vous ne planifiez pas de faire autre chose avec vos métadonnées que de les ajouter dans la
configuration du site, certains avis disent que dans ce cas, vous pourriez aussi bien les laisser vide.
Google pourrait préférer que vous les laissiez vides plutôt qu'elles soient dupliquées de partout.
Regardez cette vidéo de Google Webmaster Tools afin d'obtenir plusieurs points de vue :
youtu.be/W4gr88oHb-k.
17
Cependant, si vous êtes sérieux avec votre SEO, je suppose que vous allez suivre et remplir à la fois
les métadonnées globales et les métadonnées spécifiques par article / catégorie / menu.
Souvenez-vous que les paramètres globaux sont les paramètres pour l'ensemble du site. Si, à un
niveau inférieur, ce paramètre métadonnées est réglé (dans un article ou un élément de menu), il
surchargera les paramètres globaux.
C'est donc un moment important pour réfléchir à la suite de la mise en place du site. De nombreuses
options de configuration dépendent de la façon dont vous liez vos articles. La principale différence
se situe entre les deux points suivants :
•
Allez-vous lier chaque article à son propre élément de menu ? Ce sera souvent le cas pour
des sites vitrines assez simples.
•
Sur des sites plus importants, de nombreux articles ne seront pas directement liés, mais
seront disponibles via des vues de blogs ou de listes, ou comme articles en vedette.
De nombreux choix que nous allons faire dépendent du site, donc si le paramétrage désiré est déjà
clair pour vous maintenant, vous saurez quel chemin suivre plus tard dans ce livre.
Dès maintenant, commencez également à réfléchir à la façon dont votre site va être organisé, dans
la mesure où les métadonnées sont concernées : sur le niveau article ou sur le niveau élément de
menu, mais pas sur les deux. Il y a une hiérarchie selon laquelle un des niveaux "gagne" : les
paramètres du Menu surchargent les paramètres de l'Article qui surchargent les paramètres de la
Configuration Globale. Nous parlerons de cela plus en détail plus tard. Pour l'instant, les
paramètres sous Paramètres des métadonnées :
Description du site
Pour commencer nous devons remplir le champ Description du site :
Cette description sera affichée dans les pages de résultats des moteurs de recherche (SERP) et elle
18
est extrêmement importante pour inciter les gens à cliquer sur le lien de votre site. Assurez-vous
d'utiliser correctement les 165 caractères que vous avez à votre disposition. Le champ vous permet
d'en entrer davantage, donc vérifiez par vous-même le nombre que vous entrez.
N'oubliez pas de placer vos mots-clés principaux, et utilisez-les tôt dans la description et non pas
sur la dernière ligne.
Si vous rendez votre description attirante, vous pouvez augmenter considérablement le "Click
Through Rate" (CTR) des pages de SERP, jusqu'à 100%. CTR est le pourcentage de personnes
qui visualisent une page de résultats (SERP) et cliquent sur votre site.
Si vous parvenez à obtenir un CTR élevé, vous augmenterez le nombre de visiteurs, même sans
augmenter votre rang dans le classement des SERPs. Soyez conscient que l'objectif principal est
d'attirer des visiteurs. Si vous parvenez à obtenir cela sans un rang élevé, parfait. Souvent, vous
vous rendrez compte que Google apprécie ce comportement et vous placera peut-être à une
meilleure place au fil du temps. Ainsi, étape par étape, le nombre de vos visiteurs va augmenter.
Donc : assurez-vous que la meta description est attractive et incite à cliquer, ne vous contentez pas
d'une simple liste de mots-clés. Si vous vous souvenez, nous avons vu que Google ne base pas son
classement sur la meta description, créez cette description pour vos visiteurs.
Mots-clés du site
Google ignore presque la balise meta keywords, car certains en ont trop abusé par le passé. Certains
disent qu'elle pourrait même être nuisible pour votre SEO mais ce n'est vrai que si vous commencez
à en abuser. Vous n'aurez certainement aucun problème en la laissant entièrement vide mais
personnellement, j'utilise 2, 3 ou 4 mots-clés dans la Configuration, sous Mots-clés du site et
seulement ici, pas dans les éléments de menu ni dans les articles.
Robots
Par défaut, le règlage est INDEX, FOLLOW, ce qui signifie que toutes les pages doivent être
indéxées par les robots des moteurs de recherche et que les liens doivent être suivis. Laissez le
paramètre par défaut.
Une raison pour laquelle vous pourriez modifier ce paramètre serait, par exemple, une copie de
votre site de production restorée sur un autre domaine dans un but de test. Vous ne souhaiteriez
donc pas que Google indexe ce site, car cela pourrait vous apporter des pénalités de duplicate
content.
19
Le paramètre Robots est également disponible dans l'article ainsi que dans l'élément de menu. Pour
des pages spécifiques, vous pourriez le paramètrer différemment, comme NO INDEX, NO
FOLLOW, ou NO INDEX, FOLLOW. Cela peut être utile pour les pages n'offrant pas
d'informations utiles, comme par exemple la page de connexion.
D'autres paramètres de Métadonnées ne sont désormais plus pertinents, nous n'en parlerons donc
pas ici.
Configuration Globale : Paramètres SEO
Très important encore une fois : la partie paramètres SEO dans la Configuration Globale. Régler
ces paramètres avant de mettre le site sur le serveur de production est particulièrement crucial. La
modification de ces paramètres va généralement modifier vos URL ! Chaque fois que vous
effectuez une action où les URL sont modifiées pour un site en ligne, vous devez prendre vos
précautions. En effet, cela pourrait éventuellement conduire à ce que Google rencontre des URL
modifiées et pourrait entraîner des pénalités très lourdes. Par conséquent, vous devez toujours
planifier ces actions (nous verrons cela plus loin).
Pour l'instant, aucun problème, puisque nous réglons notre site en local. Regardons ces paramètres
une nouvelle fois :
Réécriture d'URL en clair (SEF)
SEF URLs, ce terme est généralement ainsi raccourci, est activé par défaut pour Joomla 2.5 et
supérieur. Vous ne devez pas y toucher, mais il est intéressant de comprendre à quoi sert ce
paramètre, cela vous aidera à comprendre des éléments plus compliqués qui viendront dans les
prochains chapitres.
Donc, juste pour le moment, désactivez SEF URLs, et rendez-vous sur le Frontend de votre site.
Assurez-vous que votre site a déjà au moins deux articles et deux éléments de menu, sinon rien ne
pourra être démontré.
20
Regardez à quoi ressemble les URL désormais. Par exemple, un article simple sera affiché avec une
URL de ce type :
index.php?option=com_content&view=article&id=4
Le numéro 4 à la fin de l'URL correspond à l'ID de l'article dans la base de données. Si vous
naviguez à travers le menu, vous verrez toujours un item-id dans l'URL également :
index.php?option=com_content&view=article&id=4&Itemid=110
Notez que l'article est déjà affiché via deux URL (nous verrons cela plus tard, c'est très très
important).
Pour débugger il peut être utile de voir à quoi ressemblent les URL, car le composant responsable
de ces URL n'est pas visible, dans ce cas c'est com_content.
En dehors de cela, ces drôles d'URL n'ont aucun sens bien sûr, nous allons donc ré-activer le
paramètre Réécriture d'URL en clair (SEF). Les utilisateurs peuvent donc désormais plus
facilement se faire une idée du sujet de la page et donc Google aussi.
Supposons que nous avons un élément de menu appelé Portfolio. Il aura désormais une URL
beaucoup plus claire comme cela :
index.php/portfolio
Ce que vous devez garder en tête est que les liens non-SEF n'ont pas disparu ! Si vous vous
souvenez d'une de ces URL, et que vous l'entrez dans la barre d'URL de votre navigateur, vous
obtiendrez la même page que vous aviez précédemment. Cela signifie que nous avons désormais 3
URL pour le même article… Il n'est pas impossible de corriger cela, mais nous aurons besoin d'une
extension, nous en discuterons plus tard.
21
Réécriture au 'vol' des URL
La Réécriture au 'vol' des URL semble compliquée, mais elle ne l'est pas tant que cela. L'objectif
de ce paramètre, pour l'instant, est que nous souhaitons nous débarrasser du index.php qui s'affiche
toujours dans nos URL. Imaginons que nous avons une page Portfolio, que nous créons en liant un
élément de menu appelé Portfolio à une liste d'éléments Portfolio, l'URL ressemblera à cela :
/index.php/portfolio
Index.php ne dit rien à Google, donc nous pouvons nous en débarrasser. Pour cela, nous devons
effectuer 2 actions dans le même temps. Notez que votre hébergeur doit supporter URL Rewriting,
et si ce n'est pas le cas, changez tout de suite d'hébergeur, car c'est réellement une option de base.
•
Premièrement, nous devons activer Use URL rewriting et enregistrer la page.
•
Deuxièmement, rendez-vous à la racine de votre installation Joomla!. Vous y trouverez
plusieurs fichiers et dossiers. Ici, cela dépend un peu du fichier que nous devons regarder,
mais pour la majorité des serveurs Apache ou pour les installations locales avec XAMPP ce
sera le fichier htaccess.txt (Pour les serveurs IIS, utilisez web.config.txt). Renommez ce
fichier en .htaccess.
Les utilisateurs Windows ne peuvent pas faire cela avec Explorer. Pour le faire : utilisez un terminal
de commande, naviguez jusqu'au dossier qui contient le fichier htaccess.txt puis utilisez la
commande suivante :
rename htaccess.txt .htaccess
Si vous n'êtes pas à l'aise avec cela, vous pouvez également ouvrir le htaccess.txt avec un éditeur
comme Notepad++ et l'enregistrer sous .htaccess.
Si nous naviguons maintenant vers notre page Portfolio, la partie index.php n'est plus présente.
Désormais, nous pouvons utiliser pleinement la fonctionnalité Apache URL Rewriting, qui nous
donne de nombreux avantages et des options très utiles que nous verrons plus tard.
Encore une fois : /index.php/portfolio existe toujours et est toujours accessible, nous donnant
encore une URL supplémentaire chargeant le même contenu !
22
Ajouter un suffixe aux URL
Laissez le réglage par défaut d'Ajouter un suffixe aux URL sur Non, qui ajoute de drôles de
suffixes non-SEF comme .php ou .html pas vraiment utiles.
Alias Unicode
Laissez par défaut sur Non pour Alias Unicode, la plupart des sites ne devrait jamais toucher à cela.
Le paramètre permet les utf8 glyphs dans les URL, qui pourraient être nécessaires pour les
caractères non latins.
Nom du site dans les titres
OK, encore une fois, petit temps de réflexion. La chose la plus importante à prendre en
considération est : comment souhaitons-nous afficher le titre des pages ? Nous parlons du titre
comme il est affiché dans les pages de résultats de Google (et également dans l'onglet de votre
navigateur si vous utilisez cette fonctionnalité) : l'élément <title>.
Ensemble, avec la meta-description, le Titre de la Page (ou <title>) constitue la façon dont notre
page est affichée à n'importe qui recherchant une information sur Google. Ce titre est le principal
gros titre affiché, il a donc une large influence sur le fait que les utilisateurs vont cliquer ou non sur
votre site. Si vous le réglez correctement, le CTR du SERP augmentera (désormais, vous savez ce
que cela signifie je pense…). Encore une fois, pensez à utiliser les mots-clés tôt dans le titre et
assurez-vous qu'il se limite à 65 caractères, pour éviter qu'il soit coupé.
Avant que nous ne réglions ce paramètre, vous devez savoir comment un Title de page est généré
dans Joomla! : il provient soit de l'alias du menu si un article est directement lié à un menu, soit
du titre de l'article si l'article n'est pas directement lié à un menu, comme sur une vue de blog ou de
liste. D'autres possibilités existent, mais ce sont les deux principales. Notez que le title peut en fait
être surchargé à certains niveaux.
Donc, lorsque vous créez un article, gardez toujours en tête la longueur du titre. Si vous ne le
surchargez pas ailleurs, le titre de l'article sera préfixé ou annexé au Nom du site (comme défini
dans la Configuration). L'addition des caractères pour les deux ne devra pas dépasser 65
caractères.
Ok, donc quelles sont les différentes options pour le paramètre? L'option Inclure le nom du site
dans le title des pages vous permet d'utiliser le Nom du site comme nous l'avons configuré dans le
title des pages. Les 3 options peuvent être bonnes pour votre site, regardons-les une par une :
23
•
Avant : si le nom de votre site contient déjà vos mots-clés principaux, le mieux est d'utiliser
le réglage Avant. Cela signifie que toutes les pages de votre site web contiendront vos motsclés principaux, vous donnant plus de possibilités pour la mise en place des titres d'article et
de menu. Un exemple:
•
Sur Joomla-seo.net, Le Nom du Site est Joomla SEO. Cela signifie que si j'écris un article
sur la Canonicalization (avec cela dans le titre de l'article), Le Title de la Page sera réglé
comme Joomla SEO - Canonicalization (le "-" est automatiquement placé au millieu). Si je
ne veux pas avoir le Nom du Site préfixé, je devrai ajouter Joomla SEO dans le titre de tous
les articles, ce qui n'est pas génial pour mes lecteurs.
•
Après : Cela est plus utile si votre Nom de Site est une marque comme, disons, Coca Cola.
Vous souhaitez que les gens sachent qu'ils vont accéder au site Coca Cola quand ils
consultent une SERP, même s'il ne contient pas le principal mot-clé (disons, soda).
•
Nom: Il peut y avoir de nombreuses raisons de ne pas utiliser Nom du Site . Cela vous
donne plus de liberté pour utiliser les 65 caractères que vous avez à disposition pour chaque
title.
Ce sont juste des conseils, donc n'hésitez pas à agir différemment, tant que vous connaissez les
conséquences que cela aura.
Pour finir, les Titres de Pages peuvent être surchargés à différents endroits, donc vous n'êtes pas
obligé de garder le format Nom du Site - Titre de Article.
Métadonnées pour chaque page séparée
Le paramètre des métadonnées que vous avez configuré dans Configuration Générale est
simplement un début. Pour la plupart de ces paramètres, un réglage global est bon mais les
metadescriptions devraient être surchargées aussi souvent que possible au niveau de l'article ou du
menu :
24
Metadescription
C'est celle que vous devez surcharger aussi souvent que possible. Si vous ne séparez pas les meta
descriptions dans vos pages, toutes vos pages auront la même ressemblance dans les SERP ou bien,
la plupart du temps, Google va prendre une partie de votre texte et l'afficher, généralement en
terminant avec trois points à cause d'une phrase cassée. Aussi, vous pourriez ne pas finir haut dans
le classement et votre CTR sera relativement bas.
Donc : assurez-vous de régler une metadescription pour chaque page unique, et faites vraiment
l'effort de rendre ces descriptions attractives, car cela aide réellement à démarquer vos pages.
Le but est de paramétrer une metadescription pour chaque page de votre site, peu importe comment.
Cela peut être fait de différentes façons. Une méthode n'est pas meilleure qu'une autre, à partir du
moment où vous arrivez à obtenir des descriptions uniques. Tant que nous parlons simplement de
simple contenu Joomla! p.ex. des articles, vous pouvez régler les métadescriptions à trois niveaux :
Globalement, par Menu et par Article. Pour tous les paramètrages métadonnées, les paramètres
des menus surchargent toujours les paramètres des articles et les deux surchargent les paramètres de
la Configuration générale. Donc pour des metadescriptions uniques, vous pouvez choisir de régler :
•
Par Menu : dans ce cas, laissez les metadescriptions des articles vides afin d'éviter de faire
les choses deux fois. Cela fonctionne très bien pour les sites simples, sur lesquels chaque
article est lié à un élément de menu.
•
Par Article : l'option de travailler avec les paramètres des éléments de menu fonctionne
bien, mais chaque article non directement lié à un élément de menu aura une
metadescription vide. Ce peut être un article séparé mais cela vaut également pour les
articles qui sont liés à des éléments de menu de type blog ou liste. Chaque article qui n'aura
pas de metadescription affichera celle entrée dans la configuration générale du site, ce qui
devrait être évité. Ainsi, paramétrer les metadescriptions dans l'article est la meilleure des
méthodes. Laissez vides les paramètres de métadonnées des éléments de menu.
Pour paramétrer vos metadescriptions, rendez-vous dans le paramètre Publication de votre article :
Je vous conseille d'entrer vos MetaDescriptions immédiatement lorsque vous créez votre article,
car cela est facile à oublier. Vous pouvez toujours les ajouter plus tard si vous préférez.
25
Pour les éléments de menu, les metadescriptions sont accessibles simplement via l'onglet
Métadonnées :
Dans le cas où vous préféreriez réellement régler vos mots-clés en même temps, cela suit
exactement la même logique que la metadescription, mais le mieux est d'économiser vos efforts et
de laisser les mots-clés vides.
Titre de Page
Vos Titres de Page seront automatiquement créés pour vous, en fonction de vos réglages (nous
parlons ici de la balise <title>). Premièrement, ils dépendront de ce que vous avez configuré ou non
dans la Configuration Globale pour afficher votre Nom de Site avant ou après le titre, ou pas du
tout.
Sera utilisé, soit le nom de l'élément de menu pour les articles liés directement à un élément de
menu soit le titre de l'article en question pour les articles affichés en vues blog ou liste. Regardons
un exemple :
•
Nom du Site : Chaussures de Kung Fu (réglé pour être affiché avant)
•
Titre de l'Article : Nos chaussures sont cool et agréables à porter.
•
Lié à l'élément de menu : Cool
Lorsque cet article sera affiché sur une vue blog, non lié à un menu, le titre de la page sera :
Chaussures de KungFu - Nos chaussures sont cool et agréables à porter
C'est un title parfait : il fait 53 caractères et comporte tous les mots-clés désirés. Cependant, comme
l'article est directement lié à un élément de menu, le titre de la page va être construit à partir de
l'élément de menu, donnant un title comme cela :
26
Chaussures de kungFu - Cool
C'est trop court et les mots-clés principaux ne sont pas présents !
Heureusement, vous pouvez contourner cela, et vous le devriez réellement :
•
Rendez-vous dans l'élément de menu qui doit être modifié, dans notre cas, l'élément de
menu Cool.
•
Allez dans l'onglet Paramètres d'affichage de la page .
•
Ici, vous verrez un champ Titre dans le navigateur.
Ce champ peut être utilisé pour entrer un title plus utile (n'oubliez pas que le nom du site sera
affiché si cela est configuré).
Utilisez-le ! Souvenez-vous, cette action va mettre en forme la façon dont la recherche sera affichée,
par exemple avec Google. De nombreux administrateurs de site Joomla! oublient souvent cela. Vous
pouvez toujours voir des sites web sur Google qui affichent seulement Accueil comme titre de page.
Imaginez à quel point leur CTR peut être bas...
27
Robots
Dans votre Configuration Globale nous avons réglé les paramètres Robots sur INDEX, FOLLOW,
ce qui signifie que toutes vos pages doivent être indéxées et suivies par Google et les autres moteurs
de recherche. Pour la majorité des pages de votre site cela devrait être le réglage désiré. Cependant,
il existe quelques exceptions.
Certaines ne doivent pas nécessairement être affichées dans les résultats des moteurs de recherche.
Des pages telles que la page de connexion ou la page de vos conditions générales sont utiles dans un
but bien précis, et ce pour les personnes déjà présentes sur le site, mais elles ne sont pas les pages
avec lesquelles vous souhaitez attirer les visiteurs.
Certains disent également que les pages BLOG ou liste d'articles devraient également être
modifiées. Pour ces pages, il est préférable de régler le paramètre Robots sur NO INDEX,
FOLLOW. Cela signifie : n'indexe pas cette page, mais consulte-la afin de lire les liens qui y sont
présents.
Si vous souhaitez apporter ces modifications, vous pouvez régler chaque article (onglet
Publication), pour le blog / vues en liste, régler l'élément de menu (onglet Metadonnées).
Si vous avez un doute, laissez ce paramètre vide, et laissez Google décider s'il doit indéxer ou non
cette page.
28
Manipuler vos URL
En général, si vous arrivez à régler vos titles d'articles et d'éléments de menu correctement, vos
URL devraient être bien construites. Il est important qu'elles le soient, les URL étant également un
paramètre que Google regarde pour établir son classement. C'est aussi une des raisons pour
lesquelles nous avons choisi que nos URL soient écrites en clair. Utilisez clairement vos mots-clés.
La manière dont les URL sont mises en place diffère légèrement de ce que nous avons vu pour les
titles : par défaut l'URL n'est pas construite avec le titre de l'article ou de l'élément de menu, mais
avec l'alias. En général, cela nous donne une belle URL, mais cela nous donne aussi une option
supplémentaire pour la peaufiner davantage. Vous pouvez utiliser cela afin que les titres de vos
pages soient optimisés et compréhensibles pour les humains, alors que les URL sont légèrement
plus optimisées pour Google.
Deuxièmement, dans le cas d'éléments de menu, nous avons le même problème qu'avec le titre des
pages : l'alias par défaut de l'élément de menu est simplement dérivé du titre de l'élément de menu,
en minuscule et avec des tirets à la place des espaces. Comme les titres d'éléments de menu sont en
général très courts, ils sont non descriptifs. Cependant, vous pouvez modifier votre alias afin qu'il
contienne davantage vos mots-clés.
Maintenant, savoir si oui ou non cette technique est réellement utile est un sujet ouvert à la
discussion. Une URL plus descriptive est en général plus longue et donc plus difficile à retenir, et de
toute façon, peu de gens entrent les URL en entier. Exemple :
Nous avons une page de contact pour une marque de chaussures, qui est FootXXX. Notre domaine
est également footxxx.com, donc l'URL pour la page de contact est footxxx.com/contact.
Maintenant, si vous modifiez l'alias pour obtenir contact-for-shoes, vous conservez votre mot-clé
principal dans votre URL, qui devient footxxx.com/contact-for-shoes…
Cet exemple peut sembler peu pratique, mais vous rencontrerez certainement des situations où vous
pourrez faire usage de cette technique.
29
Structure de Catégorie
Il est crucial pour tous les sites contenant plus d'une dizaine d'articles que la structure soit établie de
façon bien réfléchie. Peu importe la manière, vous pouvez poser cela sur une feuille de papier
d'abord, mais la structure de vos articles, et surtout de vos catégories, est très importante. Si vous
commencez simplement à ajouter du contenu sans avoir de plan, ajoutant des catégories si vous en
sentez le besoin, ou, encore pire, sans utiliser de catégories, vous serez perdu dans votre contenu,
particulièrement avec des sites importants. Si vous êtes vous-même perdu, vos visiteurs et surtout
Google le seront également. La plupart du temps, c'est à cette étape que vous souhaitez commencer
à vous structurer, or vos URL ont déjà été indexées par Google. Déplacer un article dans une autre
catégorie ne peut plus être fait désormais, car cela va changer votre URL (souvenez-vous) et les
visiteurs ainsi que Google rencontreront des erreurs lorsqu'ils accèderont aux anciennes URL.
La façon d'éviter cela est de bien planifier les catégories dont vous aurez besoin, de déterminer si
vous avez besoin de sous catégories et comment vous placerez les articles dans telle ou telle
catégorie. Si cela est fait correctement, vous aurez une bonne structure de votre contenu et ce sera
répercuté sur vos URL.
Structure de Menu
Aussi importante que votre structure de catégories : la structure de vos menus. Assurez-vous qu'ils
soient orchestrés de manière logique. Souvenez-vous que la structure de vos URL est basée sur la
structure de vos menus si vous liez tous vos articles directement aux éléments de menu.
N'entassez pas trop d'éléments de menu dans le même menu, une règle pourrait être pas plus de 7
par menu. Si vous en avez plus, construisez une hiérarchie, utilisez des sous menus pour des pages
séparées et utilisez des menus déroulants. Une fois de plus, la structure ne doit pas être compliquée,
il est préférable d'utiliser 3 niveaux au maximum, et cela peut déjà être confus pour vos utilisateurs.
Avoir une structure de menu compliquée et difficile à comprendre ne va pas tuer votre classement
immédiatement, mais cela est mauvais pour l'utilisation et risque de faire fuir les gens sur le long
terme.
30
Titre H1
Vous savez désormais que toutes les pages doivent avoir une balise <h1> comme titre principal
(petit rappel : nous ne parlons pas ici de la balise <title>), mais jamais plus d'une. Cela donne
souvent des maux de tête aux administrateurs de sites Joomla!, car la manière dont les <h1> sont
générés est quelque peu étrange, et cela quelque soit le type de page que nous ayons. Le probleme
est qu'un <h1> n'est pas toujours généré, certaines pages ont seulement un <h2> :
En fait, cela peut être le cas de beaucoup de vos pages, donc vous devez modifier cela. Comment
cela arrive, et comment le modifier dépend un peu de vos paramétrages. Grossièrement, nous avons
2 situations :
1: Articles affichés en blog / liste / articles en vedette
Dans cette situation nous avons une balise <h2> comme titre de l'article et nous pouvons seulement
modifier cela depuis le Gestionnaire d'Articles :
Cliquez sur le bouton Paramètres en haut à droite de votre écran. Cela vous permet de régler les
paramètres globaux au niveau de l'affichage de vos articles. Ici, réglez le paramètre Titre de
l'article sur Masquer :
31
Désormais, le titre de l'article ne sera plus affiché, et vous n'aurez aucun titre, ce qui est bien sûr
encore pire, mais ce sera facilement corrigé en entrant le titre dans la fenêtre de l'éditeur, dans le
contenu :
Désormais vous pouvez régler votre titre comme vous le souhaitez et créer votre <h1> ! Problème
réglé. C'est un travail supplémentaire mais qui ne devrait pas vous poser de problème, notamment
pour les petits sites. En outre, c'est très simple à mettre en place pour les administrateurs Joomla!
non expérimentés.
2: Eléments de menu directement liés à des articles
Si vous utilisez toujours les réglages par défaut de Joomla!, cette situation vous donnera un <h1>
avec l'élément de menu. Comme l'élément de menu sera généralement court (quelque chose comme
Accueil ou Contact), vous aurez un <h1> automatiquement généré, mais il sera très court.
Deuxièmement, un <h2> avec le titre de l'article sera également présent sur la page, directement
après le <h1>, donc deux titres l'un après l'autre.
Il existe plusieurs solutions pour cette situation :
32
•
Utilisez la procédure expliquée précédemment, avec un titre d'article réglé sur Masqué et
additionnellement Afficher l'en-tête de page réglé sur Non (dans l'élément de menu).
•
Surchargez le titre actuel dans l'onglet Paramètres d'affichage de la page de l'élément de
menu, réglez Afficher l'en-tête de page sur Oui et entrez ce que vous souhaitez dans Entête de page. Cela affichera désormais un <h1>
Il existe probablement d'autres façons d'arriver à un résultat similaire avec les paramètres de l'article
et de l'élément de menu, cela dépend de votre niveau de créativité, ainsi que de votre connaissance
de Joomla!. Le problème réside dans le fait que toutes les méthodes demandent une intervention
manuelle et une configuration supplémentaire. Peut-être avez-vous un site très conséquent et donc
besoin d'une solution se passant de toutes ces options ?
Surcharges de Template
Une autre solution souvent utilisée est de créer une surcharge de template. Alors que généralement
les surcharges de template overrides sont réservées aux utilisateurs plus expérimentés, c'est
probablement la surcharge la plus simple que vous pouvez imaginer. De plus, créer des surcharges
de template avec Joomla 3 s'est vraiment simplifié, alors pourquoi ne pas y jeter un œil :
Allez dans Extensions > Gestion des Templates > Templates et sélectionnez le template que vous
utilisez. Rendez-vous ensuite dans l'onglet Créer des substitutions, cliquez sur com_content (les
options cachées sont désormais affichées) et cliquez sur Article. Notez que ce ne sera pas possible
si une surcharge a déjà été créée plus tôt.
33
Une fenêtre s'ouvre avec un éditeur de code. Maintenant, recherchez la partie suivante vers la ligne
28 :
<div class="page-header">
<h2>
<?php echo $this->escape($this->params->get('page_heading')); ?>
</h2>
</div>
Vous remarquerez la balise <h2>. Si vous remplacez la balise ouvrante et fermante avec un <h1>
vos titres seront désormais affichés correctement.
Notez que vous pouvez arriver au même résultat avec Joomla 2.5 (qui est également possible avec
Joomla 3) en copiant le fichier default.php situé dans components\com_content\views\article\tmpl
dans templates\VOTRE_TEMPLATE\html\com_content\article (Si besoin, créez les dossiers
html et com_content dans le répertoire de votre template) puis apportez les mêmes changements ici.
Si vous faites une erreur et que vous devez revenir en arrière, supprimez simplement le fichier
default.php dans le dossier html\com_content\article (aussi bien pour Joomla 2.5 que 3.5).
Extension Header Tags
Une option serait d'utiliser une extension. Il en existe plusieurs qui peuvent vous assister dans cette
tâche. Le plugin Header Tags (developpé par Conflate) est un plugin qui est capable de faire cela.
Vous pouvez le configurer afin qu'il s'assure de la présence d'un <h1> et, s'il n'en trouve pas,
modifie le premier <h2> en un <h1>.
Pensez simplement à bien vérifier le résultat. Un exemple de situation où les choses sont mal
orchestrées est lorsque votre fournisseur de templates utilise un <h1> ou <h2> le nom du site en
tant que logo. C'est une utilisation totalement incorrecte du Header et le plugin ne pourra pas
résoudre ce problème. Vous devrez repérer le code responsable de cela dans le template lui-même et
remplacer les balises par un span ou un div, puis utiliser du CSS pour les afficher correctement.
Optimiser les liens internes et les ancres
Utiliser les liens internes dans votre site est une bonne méthode pour proposer une structure et des
articles en rapport avec vos visiteurs. En outre, Google adore ces liens internes, à condition qu'ils
34
soient construits correctement. Donc, en premier lieu, vous devez placer ces liens internes et en
second lieu, les créer de la bonne manière. Il existe plusieurs méthodes pour créer des liens internes.
•
Avant tout, les liens proposés par vos menus sont des liens internes.
•
Le Fil de navigation crée également des liens internes. Il peut apporter une aide à vos
visiteurs pour comprendre le site, notamment pour les sites importants (en taille). Il en est de
même pour Google. S'il est configuré correctement (utilisant les microdata), Google peut
même afficher ce Fil de navigation dans les SERPs. Pour l'utiliser, publiez simplement un
module de type Fil de navigation.
•
Les liens de texte créés manuellement. Alors que pour les liens de menu et le Fil de
navigation le nom des liens peut être limité par la façon dont Joomla! fonctionne, ou par une
limitation d'espace, les liens créés manuellement avec le texte d'un article ou d'un module
Contenu personnalisé sont entièrement sous votre contrôle.
C'est en particulier pour les liens placés dans vos textes que l'optimisation de l'ancre est cruciale.
L'ancre est l'ensemble de mots (ou le mot) qui constitue le lien. Alors que vous ne pourrez pas faire
beaucoup de chose avec un élément de menu appelé services (à cause de la place) vous pourrez
facilement optimiser l'ancre du texte d'un article : le texte sur lequel vous cliquerez.
Dans cet exemple, ne créez pas l'ancre sur un simple texte services, mais utilisez quelque chose
comme services d'expédition ou un terme équivalent et, idéalement, ajoutez vos propres mots-clés.
C'est beaucoup plus pertinent. Vous devez surtout faire un effort pour éviter les textes d'ancrage
comme cliquez ici, à propos de nous, télécharger, etc. Pour tous ceux-là, il est très facile de
trouver des textes d'ancrage plus descriptifs.
Vous pouvez penser que pour vos visiteurs vos liens sont évidents et parlent d'eux-mêmes (gros
bouton dans vos CSS, ou le contexte qui est autour), mais souvenez-vous que les moteurs de
recherche ont besoin de référence contextuelle sur l'ancre pour comprendre vers quoi le lien dirige.
Plus tard, dans le procédé link-building, les ancres deviennent encore plus importantes, lorsque des
liens extérieurs dirigeront vers votre site.
35
Optimiser les images
Au début de ce livre nous avons expliqué que les robots utilisés par les moteurs de recherche ne
peuvent pas "voir" les images. Ils ont besoin d'un contexte textuel pour comprendre les images.
Pour les images, vous pouvez fournir ce contexte en utilisant :
•
Le nom du fichier
•
Alt-text et title
Déjà lorsque vous préparez vos images, assurez-vous d'utiliser un nom descriptif pour vos
fichiers .JPG, .PNG et .GIF. Il n'y a aucun problème à rendre ces noms très descriptifs, vous pouvez
facilement utiliser plusieurs mots pour les décrire en les séparant par des tirets ou des underscores.
Par exemple : si vous souhaitez montrer une capture d'écran expliquant comment l'éditeur JCE peut
être utilisé pour régler les contextes utilisez simplement une image nommée : jce-pour-reglage-alttext.jpg. Cela exprime parfaitement ce que votre image souhaite montrer. Ne trichez pas, n'ajoutez
pas de mots-clés dans le nom du fichier dans le seul but d'optimisation SEO alors que l'image n'est
en réalité pas liée aux mots-clés.
Après avoir optimisé vos noms de fichiers, vous devez également fournir un texte alternatif pour
l'image. Le but original du alt-tag est d'être affiché quand l'image ne peut être affichée (à cause
d'une erreur ou d'une connexion lente) ou pour être lue par les personnes mal voyantes.
Le alt-text doit être tapé via l'éditeur que vous utilisez pour vos articles Joomla!. Cela peut être
l'éditeur par défaut TinyMCE mais je souhaite vous conseiller d'utiliser l'Editeur JCE à la place.
La version de base de JCE peut être téléchargée gratuitement, alors que certains plugins très utiles
de JCE peuvent être téléchargés pour une petite somme (une même licence peut être utilisée pour
tous vos sites). Pour nos besoins, la version gratuite est suffisante.
Lorsque vous ajoutez une image en utilisant JCE, par défaut, il va prendre le nom de fichier de
l'image, supprimer l'extension et l'utiliser comme alt-text. Donc, si vous faites l'effort de nommer
correctement vos images, vous pouvez simplement laisser JCE régler le alt-text. Si le alt-text
suggéré n'est pas assez bon, vous pouvez le régler manuellement :
36
Si cela est fait correctement, votre code source devrait comprendre le alt-text comme cela :
<img src="koala.gif" alt="koala">
Si vous souhaitez vérifier que toutes vos images sont bien réglées correctement, vous pouvez
utiliser un outil sur le site web Feed The Bot qui vérifie l'existence du alt-text sur toutes vos images
:
www.feedthebot.com/tools/alt/
37
Microdata et Rich Snippets
L’utilisation des microdata (parfois appelées rich snippets) n’est pas encore entièrement
implémentée dans Joomla! à l’heure de l’écriture du livre (Joomla 3.3). Elles sont cependant déjà
inclues au code dans la plupart des parties de Joomla!, comme les articles, ainsi que le composant
de contact. Joomla 2.5 malheureusement ne permet pas cela, il y a des solutions alternatives que
nous verrons.
Que sont les microdata? Microdata est utilisé pour des métadonnées spéciales dans vos balises
HTML existantes qui fournissent d'autres significations et classifications. Alors qu'un <div> ou
<span> ne donne aucune pertinence, en ajoutant des microdata, ils vont en recevoir. Il est plus aisé
d'expliquer avec un exemple. Supposons que nous commençons avec la partie de HTML suivante :
<div> Mon adresse est 12 rue Joomla</div>
Lorsque nous utilisons les microdata, cela devient :
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Mon adresse est
<span itemprop="streetAddress">
12 rue Joomla
</span>
</div>
C'est plus de code, mais personne n'a pas besoin de deviner qu'il s'agit de l'adresse. Vous pouvez lire
énormément à propos de la syntaxe à utiliser : www.schema.org.
Ce qui est particulièrement pratique avec les microdata est que Google les adore ! Structurer les
données est quelque chose qui simplifie le travail de Google, en l’aidant à comprendre votre
contenu. Les microdata sont d’une grande aide pour cela, et Google devrait vous récompenser de les
utiliser. Elles sont grandement utilisées dans les pages de SERPs, où vous pouvez souvent voir des
fils de navigation, des votes, des vignettes de vidéo, des prix d’articles de boutiques en ligne, etc…
Regardons cet exemple, ils parviennent à afficher aussi bien un fil d’Ariane et les étoiles du système
de vote :
38
Microdata dans Joomla 3
Joomla 3.3 insère les microdata dans votre contenu. Dans un futur proche, il y aura probablement la
possibilité de les gérer dans la configuration générale du site. Ce sera certainement sous forme d’un
bouton activer/désactiver au niveau global, ainsi qu’à des niveaux plus spécifiques, comme par
exemple pour les articles ou les contacts, ou encore pour des articles/contacts spécifiques.
Egalement, il sera possible de paramétrer votre article en accord avec les différents types de
schema.org. Les paramètres spécifiques seront probablement Article, mais pourront alternativement
être TechArticle ou BlogPosting. Comme cela n’est pas encore implémenté, il n’y a pas encore
nécessité d’en discuter.
Egalement, toutes les parties de Joomla! ne sont pas encore enrichies. Actuellement seules les
parties les plus utilisées de Joomla! ont été modifiées, comme les Articles et Contacts. Les modules
comme le Fil d’Ariane ont pour l’instant été laissés de coté, donc pour cela vous devez encore
regarder les surcharges ou les extensions (voir le chapitre suivant sur Joomla 2.5).
Maintenant, regardons à quoi ressemble le code d’un article Joomla 3:
<div class="item-page" itemtype="http://schema.org/Article" itemscope="">
<div class="page-header">
Article heading ici....
</div>
<dd class="createdby" itemtype="http://schema.org/Person" itemscope="" itemprop="author">
Author ici...
</dd>
<div class="content_rating" itemtype="http://schema.org/AggregateRating" itemscope=""
itemprop="aggregateRating">
Rating ici...</div>
<span itemprop="articleBody">Article body text ici....</span>
<div>
Comme vous pouvez le voir, l’article, le header de l’article, les données de l’auteur, les votes et le
corps de l’article ont été enrichis avec les données de schema.org. Il en est de même pour votre
formulaire de contact:
<dl itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<dd><span class="contact-street" itemprop="streetAddress">
Rue ici...
</span></dd>
<dd><span class="contact-suburb" itemprop="addressLocality">
39
Cite ici...
</span></dd>
<dd><span class="contact-postcode" itemprop="postalCode">
Code de poste ici...
</span></dd>
</dl>
Ce qui n’est pas mentionné ici est qu’il est désormais très important d’utiliser correctement tous les
champs du formulaire de contact correctement si vous configurez un contact dans Joomla!.
L’affichage actuel du formulaire de contact n’est pas toujours très joli, et souvent les utilisateurs
utilisent les champs pour l’adresse pour utiliser des informations qui ne sont pas en relation avec
l’adresse, simplement car c’est plus simple. Si vous faites cela désormais, vous avez du texte
d’exemple, qui est marqué avec l’adresse en relation avec les microdata. Ce n’est pas vraiment
souhaitable…
NOTE : Notez que si vous ne pouvez pas voir les microdata s’afficher dans votre code HTML, il se
peut que vous ayez une surcharge de template qui empêche le nouveau code de s’afficher. Vous
pouvez vérifier si une surcharge est présente dans la localisation suivante :
\templates\VOTRE_TEMPLATE\html\com_content\article et vérifiez s’il y a un fichier
default.php
Si vous créez une surcharge vous même, vous saurez probablement corriger cela. Si cela est fait par
votre fournisseur de templates, contactez-le et il saura probablement comment corriger cela.
Microdata dans Joomla 2.5
Malheureusement, Joomla 2.5 ne bénéficie pas de l’implémentation des microdata. Heureusement il
existe des solutions alternatives. Certaines de ces solutions peuvent également être utilisées dans
Joomla 3 pour les parties qui n’ont pas encore les microdata comme le module Fil d’Ariane.
Maintenant, pour une utilisation fortuite vous pourriez saisir les informations microdata grâce à
l'éditeur de code de votre éditeur. Pour l'éditeur JCE, il y a même un plugin de microdata (beta) qui
vous assiste dans l'utilisation accessoire des microdata:
40
Pour une utilisation structurelle, vous aurez probablement besoin d'éditer le core de Joomla!.
Une option est de créer une surcharge de template afin que les bonnes balises soient placées aux
bons emplacements. Si vous avez le temps et les compétences, vous pouvez le faire manuellement,
mais vous pouvez également acheter des ensembles de
surcharges : www.microdataforjoomla.com.
Bien sûr, il existe également des plugins pour cela. Actuellement, beaucoup de plugins ciblent une
fonctionnalité précise dans Joomla, comme le plugin Rich Snippets Vote, qui se focalise sur un
système de vote, ou comme Microdata Google Breadcrumbs, pour les fonctionnalités de fil de
navigation. Il existe également de plus grandes extensions qui s'occupent de plusieurs microdata
optionnelles, comme Hikashop, qui est optionnellement capable d'insérer les microdata dans ses
pages produits, permettant d'obtenir cela dans les résultats de recherche :
Heureusement, dans un futur proche la majorité des microdata sera disponible nativement avec
Joomla!. Les projets visent à en faire une nouvelle option dans les paramètres SEO.
Duplicate content
41
OK, ce sera le plus gros chapitre du livre... Le Duplicate content est un problème que connaissent
de nombreux CMS et Joomla est simplement l'un d'entre eux. Avant d'entrer dans le vif du sujet :
pourquoi le duplicate content est-il un problème ?
Premièrement, Google aime seulement le contenu unique et n'importe quel contenu dupliqué est
inférieur au contenu original. Entre différents sites web, cela peut ne pas être un problème si vous
êtes l'auteur du contenu original. Parfois certains "volent" votre contenu en copiant des articles
intéressants et les utilisent sur leur propre site web ou via des data-feeds, mais Google sait en
général qui est l'auteur et le place plus haut. En outre : ce n'est pas le problème que nous abordons
ici.
Nous parlons de duplicate content sur notre propre site web. Maintenant, bien sûr, vous devriez
éviter de réutiliser le même contenu dans les différents articles. Cela doit vous sembler évident,
mais encore une fois, ce n'est pas ce problème que nous traitons ici.
Une chose que vous devez garder en tête : il n'y a pas lieu de paniquer si vous repérez du duplicate
content dû à différents liens menant à la même URL. Google devrait normalement remarquer que
ces liens existent à cause de l'utilisation de votre CMS et ne devrait pas vous punir trop lourdement.
Par ailleurs, combattre tous ces duplicate content peut s'avérer compliqué, surtout pour les
utilisateurs non expérimentés, et laisser les doublons techniques ne sera finalement pas si mal que
ça. Vous pouvez construire un site assez bon en SEO sans vous débarrasser de tous ces duplicate
content. Toutefois, si la concurrence est vraiment forte sur un classement précis, vous en débarrasser
peut vous donner l'avantage sur vos concurrents.
Duplicate content dans Joomla
Nous avons déjà regardé quelques exemples, comme vous devez vous en souvenir. Retournons sur
notre site de tests, et regardons un des articles. Supposons que nous regardons un site comprenant
les données d'exemples. Il devrait contenir un article appelé Sites exemple, et il est lié à un menu,
qui est également appelé Sites exemple. Cela signifie que l'article est accessible à travers l'URL
/sample-sites (j'ai supprimé le nom de domaine pour plus de clarté). Cependant, il y a beaucoup plus
de chemins pour accéder à cet article :
42
•
/sample-sites (celui que nous venons de voir)
•
/index.php/sample-sites (le même avec index.php)
•
/index.php?option=com_content&view=article&id=2 (vue d'article)
•
/index.php?option=com_content&view=article&id=2&Itemid=10 (le même, mais lié à
un menu par un ItemId)
•
Le même avec ou sans www dans l'URL
•
Avec ou sans slash
•
Avec les paramètres comme /sample-sites?font=large ou d'autres paramètres
Et il existe encore plus de possibilités pour ce duplicate content. Souvent pour les sites Blog,
l'élément de menu Accueil est une vue d'articles en vedette, qui crée un duplicate content de la
home page et de l'URL /component/content/?view=featured.
Comme vous voyez, de nombreux chemins vers la même URL sont possibles. Encore une fois : ne
paniquez pas. Google sait souvent que les sites Joomla! fonctionnent ainsi et ne vous punira pas
trop lourdement. Cependant, vous pouvez parfois trouver des avertissements dans votre compte
Google Webmaster Tools. Si vous êtes très sérieux concernant l'optimisation de votre site web pour
les moteurs de recherche, vous devriez supprimer ces duplicate content.
Heureusement, il existe plusieurs moyens d'y arriver. Certains duplicate content peuvent être
supprimés en paramétrant Joomla! et certaines extensions. Cependant, pour vraiment tirer le
meilleur de Joomla!, vous aurez probablement besoin d'une extension SEO / SEF majeure, comme
SH404SEF, MijoSEF, etc., mais nous en discuterons plus tard. Pour commencer, il est possible de
régler certains problèmes de duplicate content sans avoir recours à de telles extensions.
URL Canonical
Que sont les URL canonical ? Les URL canonical constituent un moyen de laisser les URL
dupliquées intactes, en ajoutant du code expliquant aux robots que cette page est en fait dupliquée
d'une URL fournie préférée. De cette manière il ne peut plus y avoir de confusion quant à savoir
quelle est l'URL préférée pour plusieurs dupliquées. Dans le code source, cela pourrait être quelque
chose comme ça :
<link href="/Checklist/meta-data" rel="canonical"/>
Même s'il y a plusieurs URL avec le même contenu, tant qu'elles seront canonisées, les URL nonpréférées ne seront pas indéxées, seule l'URL préférée le sera. Google conseille cette méthode et la
considère comme une des methodes préférées pour traiter le duplicate content dans votre CMS.
Dans Joomla 2.5 les URL canonical n'étaient pas supportées nativement par Joomla!, mais elles ont
été introduites dans Joomla 3. La fonctionnalité canonical est activée à travers le plugin System SEF. Il n'est pas possible de désactiver le système canonical, à moins de désactiver le plugin, mais
cela vous donnera des URL non-SEF. La seule option qui peut être configurée avec le plugin est le
Domaine du site. Cela peut être une option utile, si vous utilisez un domaine parqué pour faire
pointer plusieurs domaines sur le même site. Dans ce cas, entrez le domaine principal. Si vous
n'avez qu'un seul domaine, laissez vide.
43
Joomla 3.2 avait un problème avec la fonctionnalité native canonical de Joomla!. Pour les sites
simples avec tous les articles liés à des éléments de menu séparés il n'y a pas de problème, mais
pour les sites utilisant des vues de blog, spécialement sur la page d'accueil, cela est différent. Si la
page d'accueil est un blog d'articles en vedette, le canonical de cette page d'accueil dirige vers
/component/content/?view=featured au lieu de Accueil, rendant cette page d'accueil
potentiellement indexable. Heureusement, ce bug est désormais résolu, même si certains aspects de
l'implémentation restent assez étranges.
Si vous continuez à avoir des problèmes avec vos URL canonical, une solution pourrait être
d'installer le plugin Canonical de Styleware. Aucune configuration n'est nécessaire, vous devez
simplement installer et activer le plugin. Alternativement, les utilisateurs expérimentés pourraient
hacker Joomla! pour supprimer la sortie du plugin canonical natif de Joomla! (regardez le fichier
/plugins/system/sef/sef.php et modifiez la ligne 51).
Redirection 301 en utilisant un .htaccess modifié
Lorsque vous activez la fonctionnalité URL-rewriting dans la Configuration générale, renommez
également le fichier htaccess.txt en .htaccess. La création d'URL SEF est désormais maintenue par
certains réglages dans le fichier, mais cela vous permet de faire beaucoup plus. Dans le chapitre
performances de ce livre, nous allons également activer un grand nombre de fonctionnalités très
intéressantes utilisant ce fichier, mais pour l'instant nous pouvons déjà rendre ce fichier très utile en
réglant ce qui s'appelle des redirections 301.
Une redirection 301 est en fait un moyen de dire à quelqu'un (en incluant les moteurs de recherche)
qui accède à une URL spécifique, d'aller vers une autre URL. Dans ce procédé, notez également
qu'il s'agit d'une redirection PERMANENTE. N'importe quel moteur de recherche rencontrant ce
genre de lien va généralement mettre à jour son index en quelques jours afin de rediriger vers la
nouvelle URL. Il existe différents moyens de régler cela. Vous pouvez régler les redirections 301
par URL, mais vous pouvez également utiliser des techniques de filtrage permettant de traiter
plusieurs URL.
44
Une possibilité intéressante est l'utilisation ou non des www dans vos URL, qui permet de
supprimer 50% de vos URL dupliquées. Il est fortement conseillé d'utiliser cela :
www vers non-www:
RewriteCond %{HTTP_HOST} www.site.com
RewriteRule (.*) http://site.com/ [R=301,L]
non-www vers www :
RewriteCond %{HTTP_HOST} ^site.com [NC]
RewriteRule ^(.*)$ http://www.site.com/ [L,R=301]
Un autre exemple (avancé) est ce code qui permet de supprimer les slash dans le cas où vos URL
seraient accessibles avec ou sans le slash :
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/ [R=301,L]
Et il y a beaucoup d'autres possibilités.
Robots.txt
Une manière un peu délicate de vous débarrasser de toutes vos URL non-SEF pourrait être de les
bloquer dans votre fichier robots.txt (davantage de détails dans le prochain chapitre). Cela ne les
fait pas réellement disparaître, mais vous indiquez à Google de laisser toute URL spécifiée hors de
l'index. Cela ne nécessite qu'une courte ligne de code, qui doit être ajoutée à la fin du fichier
robots.txt localisé à la racine de votre site Joomla! :
Disallow: /*?*
Cette chaîne examine n'importe quelle URL avec une chaîne de requêtes, p.ex. un point
d'interrogation (toutes les URL non-SEF !). Assurez-vous que vous n'avez pas d'URL qui pourraient
être incorrectement bloquées !
Dire que cette méthode est conseillée est plutôt discutable, régler les URL correctement ou les
rediriger est certainement la meilleure option.
45
Extensions
Il existe de nombreuses extensions qui offrent des fonctionnalités permettant d'acheminer tout le
trafic vers des URL SEF. La plupart d'entre elles sont malheureusement assez compliquées et une
partie des plus importantes fournit des fonctionnalités très avancées, comme SH404SEF (que nous
verrons en détail). Deuxièmement, elles modifient souvent la structure existante de vos URL, donc
leur utilisation sur un site existant est moins conseillée pour des utilisateurs non expérimentés.
Pour les utilisateurs qui préfèrent se passer de ce genre d'extensions, le plugin Non-SEF to SEF de
Kubrik est une très bonne alternative. Vous pouvez le télécharger gratuitement pour une utilisation
non commerciale et vous pouvez demander une clé de don si vous souhaitez supporter le
développeur.
Webmaster tools
Si les méthodes discutées ci-dessus ne règlent pas vos problèmes de duplicate content, une dernière
option pourrait être de demander à Google de les supprimer de son index, cela via Webmaster Tools.
Pour cela, rendez-vous dans Index Google > URL à supprimer et vous pourrez créer une Demande
de suppression. Si vous faites cela, souvenez-vous que vous devez également le faire dans votre
compte webmaster Bing...
Utilisez cela comme dernière solution. Régler ces problèmes depuis de votre propre site est
préférable.
Pages et erreurs 404
Une page 404 est une page affichant une erreur Page not found. Il faut les éviter autant que
possible. Pour les visiteurs de votre site cela n'est pas beau et assez inattendu, surtout avec la page
d'erreur par défaut de Joomla! :
De plus, les moteurs de recherche ne les aiment pas, elles doivent donc être corrigées autant que
possible. Dans le cas contraire, vous devez proposer une page agréable.
46
Causes des erreurs 404
Les raisons pour lesquelles une erreur 404 est générée peuvent varier. Les principales sont :
•
Un utilisateur essaie d'entrer une adresse ou un lien de votre site dans la barre d'adresse de
son navigateur et il commet tout simplement une erreur. C'est une chose que vous ne pouvez
pas éviter.
•
Votre site est seulement accessible avec ou sans les www, et l'autre option dirige vers une
erreur lorsque l'utilisateur l'entre incorrectement.
•
Vous supprimez ou renommez un article ou un menu sur votre site web et l'URL n'existe tout
simplement plus.
•
Vous apportez d'autres changements qui modifient les URL de votre site web, comme
désactiver la réécriture d'URL alors que votre site est existant depuis longtemps.
•
Une grosse mise à jour de Joomla!, comme 2.5 vers 3.5 pourra parfois donner lieu à des
changements.
•
Vous refondez complètement votre site ou remplacez l'ancienne version.
Prévenir les erreurs 404
Mises à part les fautes de frappe ou autres drôles de comportements de vos utilisateurs, vous serez
en général capable d'agir sur ces erreurs 404. La majorité des problèmes est due, soit à des
changements que nous avons effectués, soit à des réglages inattendus sur le site pour vos
utilisateurs. Avec cela en tête, nous pouvons au moins nous assurer de régler notre site
correctement.
Une erreur comme celle où le site n'est pas accessible avec ou sans les www peut aisément être
corrigée. Bien sûr nous ne souhaitons pas conserver à la fois avec www et sans www sur notre site,
mais en créant une redirection 301, les utilisateurs et les robots ne remarqueront aucune irrégularité.
Ils seront simplement dirigés vers le bon emplacement. Les robots recevront également la
notification Permanent Redirect et continueront à utiliser l'emplacement modifié.
Sur un site en ligne, ce que vous devez TOUJOURS(!) garder en tête, ce sont les conséquences
qu'aura chaque action entreprise. Souvenez-vous que vos URL sont basées sur les alias des articles
et des menus que vous avez créés, donc, si vous devez vraiment renommer un article ou un élément
de menu, assurez-vous de conserver l'alias existant (heureusement c'est le comportement par défaut
de Joomla!).
Tant que vous garderez en tête que vos actions peuvent modifier vos URL, il n'y aura pas de raison
à ne pas apporter les changements que vous souhaitez, à condition que vous PLANIFIEZ ces
actions. Vous pouvez même planifier le comportement des utilisateurs, comme un mot souvent mal
orthographié dans l'URL.
47
Redirection 301 avec les fonctionnalités natives de Joomla! afin de prévenir et de
résoudre les erreurs 404
La solution standard pour modifier une URL est encore une fois la méthode redirection 301. Vous
pouvez effectuer cela via un fichier .htaccess modifié ou via certaines extensions, mais
heureusement Joomla! est doté nativement d'une fonctionnalité intéressante (à partir de 2.5), qui est
le composant Redirection. Pour les utilisateurs inexpérimentés, c'est une très bonne méthode pour
gérer leurs URL modifiées. Vous accédez à l'outil via Composants > Redirection.
Dans le cas où vous trouveriez un message comme Le plug-in de redirection est désactivé,
rendez-vous dans le gestionnaire de Plugins et activez-le. La raison pour laquelle ce plugin est
désactivé par défaut sur les nouvelles installations est que, sur certains sites, beaucoup d'erreurs
étaient rencontrées et cela surchargeait la base de données. Tant que vous garderez un œil dessus,
vous ne rencontrerez pas de problème en l'activant et vous pourrez toujours le désactiver plus tard.
Au début, rien n'est indiqué dans le composant de Redirection, mais vous pouvez facilement le
tester. Rendez-vous simplement sur le Frontend de votre site Joomla! et tapez une URL qui n'existe
pas, comme test-404. Vous verrez une erreur et dans le Backend, vous verrez qu'une entrée a été
créée dans la base de données :
Si vous cliquez sur l'entrée, vous pouvez la mettre à jour si vous le souhaitez :
48
Ici vous pouvez entrer une URL cible . Cela peut être soit une URL complète soit une URL relative
(assurez-vous qu'elle est existante). N'oubliez pas d'Activer le statut avant d'enregistrer.
Si vous accédez maintenant à l'URL qui donnait auparavant une erreur, vous serez redirigé vers la
bonne URL. Pour des sites de petite taille, cela peut être la solution pour rediriger les URL
modifiées. Après avoir effectué des changements ou des mises à jour, soit vous attendez quelques
jours puis redirigez les entrées générées par les utilisateurs qui rencontreront les erreurs, soit vous
forcez les erreurs à se produire afin de les corriger, avant même qu'un utilisateur ou un robot ne les
rencontre. La dernière option est conseillée. Si vous en avez la possibilité, il est préférable de
prévenir plutôt que de guérir.
Le désavantage du composant de Redirection est que vous devez manuellement entrer toutes les
URL cibles et chaque faute de frappe que vous commettrez vous donnera une erreur. Une
alternative au composant de redirection serait une extension. Un choix populaire pourrait être RedJ
(www.selfget.com). Il fonctionne de façon similaire au composant de redirection, mais il permet les
expressions régulières et macros. Il peut être très utile, notamment lors de changements à grande
échelle de nature structurelle. De même, une extension complète SEO /SEF comme JoomSEF,
SH404SEF et MijoSEF offre de bonnes solutions pour rediriger les erreurs 404 comme une des
nombreuses fonctionnalités.
Redirection 301 avec .htaccess pour prévenir les erreurs 404
Les utilisateurs expérimentés peuvent également effectuer des redirections 301 sans aucune
extension, en utilisant la fonctionnalité URL rewriting dans leur fichier .htaccess. Les possibilités
sont infinies et vous pouvez accéder à de nombreuses ressources et forums sur lesquels vous
trouverez des morceaux de code très compliqués, mais nous allons simplement regarder quelques
codes qui pourraient vous être utiles.
(Pour toutes les actions qui suivent, la ligne suivante devrait déjà être présente dans votre fichier :
RewriteEngine On)
Exemple 1 :
Commençons avec un exemple basique où nous souhaitons simplement prendre une URL source et
une URL de destination :
RewriteRule ^oldpage1$ "http://www.nouveausite.com/nouvellepage1" [R=301,L]
Utiliser cela peut s'avérer très utile dans le cas où le site subirait une complète refonte de la
structure de ses URL. Vous devez extraire les anciennes à partir d'un sitemap par exemple, puis
vous devez définir les nouvelles URL et les régler dans le .htaccess. Vous aurez toujours du travail à
faire manuellement mais il est planifié et peut être entièrement effectué avant de publier le nouveau
site.
49
Exemple 2 :
Si vous avez toujours un suffixe .html dont vous souhaitez vous débarrasser, ou bien si votre ancien
site l'utilise mais pas le nouveau, vous pouvez utiliser ce morceau de code. Bien sûr il serait
préférable de désactiver ce suffixe via les paramètres SEO de la configuration générale du site, donc
c'est simplement un exemple :
RewriteCond %{REQUEST_URI} \.html$
RewriteRule (.*)\.html$ /$1 [R=301,L]
Souvenez-vous que le .htaccess est un outil très puissant, il vous permet d'atteindre un grand
nombre de vos buts et objectifs. Le revers de la médaille est qu'il est extrêmement facile de se
tromper et de "casser" votre site... Dans le cas où vous avez des erreurs serveur (erreur 500) ou des
redirections en boucle notamment, votre code .htaccess peut être incorrect et nécessiter d'être
corrigé. Retournez juste à la situation initiale ou remplacez simplement votre .htaccess par celui
d'une installation propre de Joomla!.
Construire une page 404 personnalisée
Vous savez que les erreurs 404 ne peuvent être évitées, une vilaine page d'erreur est alors affichée,
qui diffère complètement du design du reste de votre site. Elle peut même effrayer les utilisateurs
car elle peut presque ressembler à un site web différent.
Si vous avez acheté votre template chez un fournisseur de template, une page d'erreur 404 est très
souvent fournie par ce dernier, mais si ce n'est pas le cas, ou si vous créez vos propres templates,
vous devez résoudre ce problème.
Heureusement, cela est très simple à faire. Premièrement, créez simplement un article sur votre site
web pour afficher un joli texte que vous souhaitez afficher à vos visiteurs. Vous pouvez par exemple
présenter vos excuses pour l'erreur rencontrée (n'offensez jamais vos utilisateurs, même si l'erreur
est de leur faute), puis ajoutez quelques liens vers certaines pages de votre site comme la page
d'accueil ou une page de recherche.
Enregistrez & Fermez l'article. Dans le gestionnaire d'articles, repérez l'ID de l'article, affiché en
toute fin de liste :
50
Nous avons donc le nombre 75.
Ensuite, recherchez le fichier suivant : templates/system/error.php et copiez-le dans le dossier de
votre template, afin d'avoir ce fichier placé comme cela :
templates/VOTRE_TEMPLATE/error.php.
Ouvrez le fichier avec un éditeur de code. A partir d'ici la procédure pour Joomla 2.5 et 3.5 diffère :
Joomla 2.5 :
Cherchez cette ligne :
defined('_JEXEC') or die;
Après cette section, ajoutez les lignes de code suivantes :
if (($this->error->getCode()) == '404') {
header('Location: /index.php?option=com_content&view=article&id=75');
exit;
}
Notez que 75 correspond à l'article que nous avons créé pour l'erreur 404.
51
Joomla 3.5 :
Cherchez cette section:
defined('_JEXEC') or die;
if (!isset($this->error))
{
$this->error = JError::raiseWarning(404, JText::_('JERROR_ALERTNOAUTHOR'));
$this->debug = false;
}
//get language and direction
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
Juste après cela et juste avant la balise PHP fermante, ajoutez :
if (($this->error->getCode()) == '404') {
header('Location: /index.php?option=com_content&view=article&id=75');
exit;
}
C'est la manière la plus simple, vous pourriez également le faire plus proprement :
Nous faisons un lien vers une URL non-SEF. Si vous liez l'article à un élément de menu caché
appelé erreur, vous pouvez remplacer la longue et vilaine URL pour la page 404 simplement par
erreur, donc cela :
header('Location: /index.php?option=com_content&view=article&id=9');
devient :
header('Location: /erreur');
Après toutes ces étapes, vérifiez le Frontend de votre site, naviguez vers une URL non-existante et
vérifiez que vous obtenez bien l'article défini. Dans le cas où vous rencontreriez un problème, soit
52
vous modifiez votre erreur, soit vous supprimez le fichier error.php que vous avez créé afin de
retourner à la situation initiale.
Une alternative qui pourrait même être encore meilleure serait de remplacer la ligne commençant
par header("Location.... par :
header("HTTP/1.0 404 Not Found");
echo file_get_contents(JURI::root().'/index.php?option=com_content&view=article&id=999');
Notez que chez certains hébergeurs, le slash avant index.php? doit être supprimé pour se protéger
des erreurs.
Le fait d'envoyer un 404 HTTP header à votre navigateur afin de rester sur la même URL, et de
récupérer le contenu de la page 404, au lieu d'aller simplement sur cette page, est techniquement
plus correct.
53
Robots.txt
Dans vos paramètres de Configuration Générale ainsi que dans vos articles et menus vous avez
souvent vu et potentiellement utilisé le champ Robots. Cela est utilisé pour indiquer que certaines
pages soient indéxées ou non.
Bien que n'étant pas tout à fait identique, l'existence d'un fichier robots.txt à la racine de votre site
web a un rôle similaire. Vous pouvez l'utiliser pour informer les robots des moteurs de recherche
quelles parties des fichiers de votre site doivent être ouvertes pour être scrollées. Lorsque vous
ouvrez ce fichier avec un éditeur, vous verrez ce qui suit, excepté les
commentaires :
User-agent: *
Disallow: /administrator/
Disallow: /bin/
Disallow: /cache/
Disallow: /cli/
Disallow: /components/
Disallow: /images/ ---------------- Supprimer cette ligne !
Disallow: /includes/
Disallow: /installation/
Disallow: /language/
Disallow: /layouts/
Disallow: /libraries/
Disallow: /logs/
Disallow: /media/
Disallow: /modules/
Disallow: /plugins/
Disallow: /templates/
Disallow: /tmp/
La première ligne dit aux robots qu'ils doivent suivre ces règles et le reste est en fait un groupe de
règles interdisant certains dossiers de votre installation Joomla!. Cela implique que vous ne devez
pas créer d'éléments de menu comme cli ou includes, car ils ne seront pas indexés. En fait, si vous
tentez de les créer, Joomla! vous l'interdira :
54
Maintenant, et malgré que le contenu du fichier robots.txt soit en général bon, nous remarquons
juste quelque chose de spécial : le fichier robots.txt inclut également une ligne /images ! Alors que
nous avons produit beaucoup d'efforts pour optimiser nos images, cette ligne nous dit : n'indexe pas
les images...
Donc, supprimez simplement cette ligne du fichier robots.txt. Régulièrement, vous devrez donc
vérifier ce fichier robots.txt afin de vous assurer qu'il n'a pas été écrasé par une mise à jour de
Joomla!, même si cela semble désormais bien se passer.
Mis à part cela, vous n'aurez probablement jamais besoin d'y retoucher, sauf pour des besoins
spécifiques. Un exemple pourrait être le suivant : une application e-commerce stocke ses propres
images dans son propre dossier quelque part dans le dossier /media, disons
/media/com_hikashop/upload/
Si vous souhaitez que ces images soient indexées, vous devrez ajouter cette ligne à la fin de votre
robots.txt :
Allow: /media/com_hikashop/upload/
Cela assure que seul le dossier spécifique est ouvert, alors que le reste du dossier /media ne l'est pas
grâce à la ligne disallow /media placée plus haut dans le fichier robots.txt.
Sitemap
Une fois que vous avez construit votre site web, que tout le contenu a été ajouté, que les
métadonnées ont été ajoutées et que vous avez réglé vos URL exactement comme vous le
souhaitiez, votre site est presque prêt à être publié. A cette étape préférablement, mais cela peut
aussi être fait plus tard, vous devez créer un fichier appelé sitemap.xml et le stocker quelque part
dans votre site web, de préférence à la racine de ce site.
55
Ce fichier est destiné à aider les moteurs de recherche à comprendre la structure de votre site web
ainsi que les différentes URL. Maintenant, si vous ne créez pas de sitemap, le plupart des moteurs
de recherche seront tout de même capables de sortir les URL, mais en général ils considèrent que
c'est un vrai plus si vous en soumettez un.
Google vous conseille de soumettre deux sitemaps, un pour vos utilisateurs et un pour les moteurs
de recherche.
Sitemap pour les visiteurs
Si vous avez un très petit site, vous pourriez vous questionner sur la nécessité de créer un sitemap.
Beaucoup de sites web ont seulement quelques pages où tout le contenu est lié à travers quelques
éléments de menu. Personnellement, je ne crée pas de sitemap séparé pour mes visiteurs pour ce
genre de sites. Pour les sites plus importants, ou bien pour les sites avec des options compliquées et
un menu déroulant, un sitemap peut être intéressant. Les personnes malvoyantes vont
particulièrement aimer naviguer en utilisant une page simple sur laquelle elles pourront consulter
l'ensemble du site simplement avec des liens-texte.
Une page comme celle-ci peut facilement être créée en affichant les menus de votre site, avec la
structure entière et ouverte. Vous pouvez simplement créer cela manuellement comme un article
mais vous pouvez aussi créer un article et publier les modules-menus à l'intérieur. Pour cela, utilisez
simplement un bout de code comme celui-ci :
{loadmodule mainmenu}
Cela affichera le menu principal dans l'article, comme une liste simple. Un changement dans le
menu sera également apporté au sitemap.
Une seconde option est d'utiliser une extension sitemap. Un choix populaire est Xmap (gratuit) et
JSitemap (commercial). Elles vous permettent de créer un sitemap pour vos utilisateurs avec des
options configurables.
56
Sitemap pour moteurs de recherche
Google aime également trouver un fichier sitemap.xml contenant les URL de votre site web, donc je
vous conseille de toujours le faire, quelque soit la taille du site. Google va en général le trouver et
l'utiliser, surtout si vous le placez à la racine du site. Vous pouvez également soumettre ce sitemap
dans votre Google Webmaster Tools, mais nous verrons cela plus tard. Un exemple de sitemap.xml
pourrait être :
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url> <loc>http://website.com/</loc></url>
<url> <loc>http://website.com/webshop</loc></url>
<url> <loc>http://website.com/contact</loc></url>
etc.
etc.
</urlset>
Donc : vous créez un fichier xml contenant les règles spécifiques formatées, plus les URL de votre
site (en omettant celles que vous ne voulez pas indéxer). Il n'est pas nécessaire d'en créer un
manuellement, il existe des générateurs gratuits de sitemap en ligne, comme www.xmlsitemaps.com et d'autres. Si vous soumettez votre URL, ils vont crawler votre site et générer un
sitemap pour vous. Si vous avez un site qui change beacoup, vous devrez répéter l'opération
régulièrement, selon la fréquence des changements.
Une alternative pourrait être d'utiliser une des extensions sitemap citées plus haut. Elles peuvent
également générer un fichier sitemap.xml, souvent pas à la racine du site mais ailleurs, plus loin
dans l'arborescence. Si vous soumettez votre sitemap dans votre compte Google Webmaster Tools
vous devrez alors utiliser la bonne localisation. Certaines extensions sont même capables de notifier
le fichier à Google et Bing, vous n'avez donc rien à faire.
57
Publier votre site et vérifier les résultats finaux
Ok, donc votre site est prêt, nous l'avons entièrement optimisé avec les options dont nous disposons
nativement avec Joomla! et peut-être quelques extensions çà et là. Il est temps de publier votre site !
Bien sûr, vous devrez désormais gérer votre site afin de vérifier que tout fonctionne correctement,
même si vous n'avez aucune erreur 404, et cela sera un procédé continu à partir de maintenant.
Ce que vous souhaiterez éventuellement désormais est de faire vérifier votre site par des SEO
checking tools (outils de vérification SEO). Il en existe plusieurs, tout dépend de quoi vous avez
exactement besoin, mais 2 outils sont particulièrement pratiques pour les utilisateurs qui débutent en
SEO. Ces deux outils vérifient 2 fois votre site afin de ne manquer aucun facteur SEO :
Plugin Firefox SEO Doctor
Vous pouvez facilement regarder celui-ci dans le répertoire d'addons pour Mozilla. Installez-le, et
vous verrez une petite fenêtre s'afficher en bas à gauche de votre écran :
Il classe tous les sites que vous naviguez en SEO. Il ne vérifie pas dans les détails, juste les bases,
donc viser les 100% ne devrait pas être trop compliqué. Si le score de votre propre site est en
dessous de 95%, cliquez simplement sur le score et il s'ouvrira pour vous donner les problèmes à
corriger :
58
Dans cet exemple, l'outil nous dit que nous avons un problème avec les URL SEF, plusieurs balises
H1 et un problème avec Page Rank flow. Vous pouvez étendre davantage pour visualiser d'autres
problèmes. Vous serez surpris par ce que vous pouvez avoir oublié d'optimiser…
Site web SEORCH.eu
Le site web www.seorch.eu possède un grand nombre d'outils intéressants. Nous avons déjà parlé
des suggestions de mots-clés qu'il propose, mais sur la page d'accueil, il permet également d'estimer
votre page d'accueil et optionnellement de classer vos mots-clés :
59
SEORCH est un outil très recommandé pour vérifier vos efforts SEO. Il vous permet également de
scanner l'ensemble de votre site si vous le souhaitez !
Partie 3 : Extensions-SEO
Les extensions listées dans ce chapitre sont utiles pour une gestion simplifiée de certains aspects du
SEO et sont généralement tout à fait adaptées pour les débutants dans le monde du SEO pour
Joomla!. Un chapitre du livre sera entièrement dédié à l'extension SH404SEF et ses concurents,
vous pouvez vous y rendre directement si vous le souhaitez. Ces extensions sont plus adaptées pour
les utilisateurs expérimentés qui ont besoin d'une solution tout-en-un.
Les extensions listées ici sont disponibles pour Joomla 2.5 et Joomla 3.5 et sont libres d'utilisation,
du moins pour une utilisation non commerciale.
60
Easy Front-end SEO
Easy Front-end SEO (EFSEO) sous-entend édition facile des metadata via le Frontend. Le plugin
est disponible à partir de www.kubik-rubik.de en tant qu'extension gratuite incluant toutes les
fonctionnalités. Pour un usage commercial, ou si vous souhaitez soutenir le développeur, vous
pouvez obtenir un code de don, qui permet également de supprimer les liens présents dans
l'administration.
Comme le nom le suggère, ce plugin est très simple d'utilisation pour tous les utilisateurs, de
débutants à avancés. Vous n'avez pas à vous inquiéter de savoir où vous devez placer vos
metadonnées (article, menu, configuration), vous naviguez simplement sur le Frontend du site et si
vous trouvez une page sur laquelle les métadonnées sont manquantes, vous pouvez simplement les
éditer ou les ajouter à partir de cette page.
En fonction de la manière dont vous configurez le plugin, vous pouvez : soit laisser les
métadonnées déjà entrées dans Joomla! en place, soit les surcharger. Si vous le souhaitez, vous
pouvez également laisser EFSEO générer les méta descriptions, mots-clés et titles
automatiquement.
Après avoir installé le plugin vous devez le configurer à partir du gestionnaire de Plugins :
Vous pouvez régler les droits d'utilisateurs (par ID ou par groupe), puis ensuite vous réglez les
paramètres de métadonnées qui sont configurables. Vos options sont :
61
•
Title
•
Description,
•
Keyword,
•
Generator
•
Robots
Normalement, Title, Description et éventuellement Keywords devraient suffire.
Optionnellement, vous pouvez également régler le plugin afin qu'il génère automatiquement les
métadonnées à partir de l'onglet Automatic Mode. Même si cela n'est jamais le plus intéressant,
prenez le temps de lire les informations. Le plugin sélectionne seulement les 165 premiers
caractères du texte du body, donc cela ne sera peut-être pas toujours très pertinent.
Dans l'onglet Advanced vous pouvez régler le nombre d'icônes à afficher sur le Frontend.
Maintenant que tout est configuré, lorsque vous allez sur le Frontend et que vous vous connectez,
vous verrez plusieurs icônes placées en haut à droite de votre écran. Elles vous indiqueront quels
paramètres de données sont manquants dans l'ordre où vous l'avez configuré :
L'image ci-dessus indique que la meta description et les mots-clés sont manquants, alors que le
title, generator et robots sont en place. Cliquer sur l'icône vous permet d'éditer les données et de
les modifier.
Notez que les informations sont stockées dans les tables du plugin EFSEO donc si vous désinstallez
le plugin, vous perdez les metadonnées.
Non SEF to SEF
Certaines des extensions que nous avons vues, comme SH404SEF, sont très bonnes pour l'URLredirection afin de prévenir le duplicate content, mais elles sont également un peu compliquées et
modifient souvent vos URL existantes. Si vous souhaitez uniquement éliminer ce duplicate, Non
SEF to SEF, également de Kubrik, est un super plugin.
En fait, il essaie de trouver la meilleure URL SEF pour une URL non-SEF et la déroute avec une
redirection 301. Il le fait en utilisant la logique interne de Joomla!. Il vérifie également si un article
est directement lié à un élément de menu ou non, afin de générer la meilleure URL SEF
62
correspondante.
Le plugin ne demande pas de configuration, si ce n'est de l'activer. La seule option est celle
d'exclure certains composants.
Canonical
Le plugin Canonical par Styleware résout certains problèmes en rapport avec les paramètres des
URL canonical dans Joomla 3. Recommandé si vous avez des problèmes avec la manière dont
Joomla 3 règle les URL canonical . Aucune configuration n'est nécessaire, vous devez seulement
l'installer et le publier.
Xmap
Si vous ne voulez pas créer votre sitemap manuellement, vous pouvez utiliser Xmap pour cela.
Xmap est probablement l'extension la plus populaire pour créer des sitemaps avec Joomla! et vous
pouvez la télécharger gratuitement. Il peut aussi bien créer un sitemap pour vos utilisateurs qu'un
sitemap pour les moteurs de recherche. Nous avons déjà discuté de Xmap dans le chapitre sur les
sitemaps.
Une alternative commerciale qui reçoit de bons avis est JSitemap.
D'autres extensions SEO
Si vous cherchez sur le Joomla Extensions Directory, vous trouverez d'autres extensions, et en
grande quantité, qui pourront vous aider dans vos efforts SEO, ou qui prétendent qu'elles le
pourront, tout du moins. Utilisez votre bon sens pour décider quelles sont celles qui seraient utiles à
votre situation personnelle, en prenant soin d'installer uniquement les extensions venant de sources
fiables, comme toujours. Quelques extensions intéressantes à regarder :
•
63
RS-SEO : Utilisée pour la gestion SEO des metadonnées, on-site et off-site. Elle classe vos
pages par présence de metadonnées, titles, etc., mais elle peut également regarder le
PageRank, ainsi que la concurrence et la performance des mots-clés. C'est une extension
commerciale.
•
iJoomla SEO : Egalement une extension commerciale, qui offre des fonctionnalités
similaires à RS-SEO.
•
SEO Generator : Similaire à Easy Frontend SEO ce plugin peut automatiquement générer
des métadonnées. Paramétrer les métadonnées manuellement sera toujours mieux que les
solutions automatiques, mais certaines situations requièrent une automatisation du système.
•
Header Tags : Nous en avons déjà parlé. Il est utile pour régler vos balises <h1> à <h6>.
Partie 4 : SH404SEF
Nous allons dédier un chapitre séparé à SH404SEF car c'est une des extensions les plus puissantes
et les plus populaires permettant de gérer le Search Engine Optimization pour les sites web Joomla!.
L'extension utilisée fait partie de la sélection Editor's Choice sur le Joomla Extension Directory et
est très populaire chez les administrateurs SEO Joomla!. Nous verrons également rapidement
certains de ses concurrents, mais commençons avec SH404SEF.
Avant tout : si vous êtes débutant sur le sujet du SEO avec Joomla!, je vous conseille de sauter ce
64
chapitre et de vous concentrer sur les chapitres précédents. Nous y discutons d'extensions beaucoup
plus simples à prendre en main pour les débutants.
SH404SEF n'est pas seulement une extension SEF, elle offre également d'autres fonctionnalités. En
fait, presque tous les outils permettant de gérer le SEO dont nous avons discuté peuvent être
remplacés par SH404SEF. Les fonctionnalités comprises sont :
•
URLs SEF
•
Redirection 301 pour les URL non-SEF
•
Gestion des métadonnées à partir d'un seul écran
•
URL canonical
•
Page 404 personnalisée
•
Gestion simple des erreurs 404
•
Fonctionnalité de sécurité
•
Gestion des réseaux sociaux
•
URL courtes
•
Intégration d'un écran Google Analytics.
Vous n'aurez certainement pas besoin de toutes ces fonctionnalités, c'est pourquoi certains
choisissent d'utiliser des extensions plus légères, mais cela dépend des préférences de chacun.
Planifier à l'avance !
Vous devriez toujours planifier à l'avance lorsque vous construisez un site, mais avec SH404SEF
installé, c'est encore plus important. Des changements dans la structure de vos catégories ou le fait
de renommer certaines choses peut facilement casser vos anciennes URL et produire des effets nondésirés. Vous ne devriez également jamais juste installer et activer l'extension sur un site en ligne
car vos URL seraient certainement cassées. De même, si vous vous rendez compte que vous n'aimez
pas l'extension, la désinstaller ne se fera pas toujours sans problème.
65
La chose la plus importante à garder à l'esprit est que SH404SEF construit les URL différement de
Joomla!. Dans Joomla, la manière dont les URL sont construites dépend de vos réglages. Pour les
articles attachés à un menu, les URL sont basées sur l'élément de menu auquel ils sont attachés,
alors que pour les articles non liés aux menus, elles sont construites sur une base catégorie/article.
SH404SEF utilise une structure catégorie/article comme base, toujours, indépendamment de la
manière dont les articles sont liés ou affichés. Le gros avantage est qu'il n'y a aucune importance sur
comment vos articles sont assignés, ni sur la structure. Même s'ils sont liés via 2 menus, l'URL d'un
article sera toujours la même, alors que nativement avec Joomla!, il y aurait 2 URL différentes.
La manière exacte dont les URL sont contruites est configurable : normalement vous réglerez afin
que la catégorie ne soit pas affichée dans l'URL pour la catégorie Non-catégorisé, alors que pour
des catégories profondément imbriquées dans la structure, vous pourrez choisir seulement une ou
deux des dernières catégories. De cette manière, vos URL sont fixes.
Préparations
SH404SEF peut être téléchargé depuis le site www.anything-digital.com. Anything Digital propose
d'autres extensions qui peuvent être intéressantes à tester, mais SH404SEF est la meilleure connue.
Vous pouvez obtenir un accès à l'extension pour $39 par an, ce qui vous permet de l'installer sur de
multiples domaines.
Nous allons installer cette extension sur un site web parlant de livres. Si vous le souhaitez, vous
66
pouvez le créer vous-même suivant les étapes ci-dessous :
•
Nous créons un site web Joomla 3.5 propre sans installer les données d'exemple.
•
En plus de la catégorie Non-catégorisé nous en créons 2 autres : Nouvelles et Biographies.
•
Dans la catégorie Non-catégorisé nous plaçons 3 articles : Accueil, A propos de nous et
Contact.
•
Dans Nouvelles, nous avons des articles sur Moby Dick et sur L'Attrape-cœurs.
•
Dans Biographies, nous avons Al Capone et Nelson Mandela.
•
Pour Nouvelles, nous créons un élément de menu appelé Nos Nouvelles qui est une liste de
catégories et idem pour Biographies. Les 3 autres articles sont liés comme Article à leurs
propres éléments de menu.
La seule chose que nous pouvons configurer dans Joomla avant de regarder SH404SEF est d'activer
la Réécriture d'URL dans les paramètres de la Configuration Globale, en plus de renommer le
fichier htaccess.txt en .htaccess bien sûr. Par ailleurs, vous pouvez utiliser SH404SEF sans la
réécriture d'URL, mais dans ce cas vous gardez la partie index.php dans vos URL.
Si nous utilisons simplement le template par défaut Protostar, le menu principal ressemble
désormais à cela :
Afin de pouvoir faire des comparaisons par la suite, et avant d'installer SH404SEF, regardez l'URL
pour le livre Nelson Mandela par exemple, et mémorisez-la pour plus tard :
/nos-biographies/7-nelson-mandela
Installation et Configuration
Maintenant, rendez-vous dans le Gestionnaire d'Extensions et installez l'extension que vous avez
téléchargée sur le site Anything Digital. Vous devriez recevoir un message comme quoi SH404SEF
a été correctement installé. Ensuite rendez-vous dans Composants > SH404SEF, où vous
trouverez un écran comme celui-ci :
67
Ne touchez pas encore ces paramètres ! Cela va automatiquement optimiser vos URL avec les
paramètres par défaut et ce n'est pas ce que nous souhaitons. En particulier, ne touchez pas le
bouton Activer l'optimisation d'URL, ce qui modifierait vos URL.
Pour commencer, cliquez sur le bouton Configuration en haut à gauche de votre écran. Une grosse
fenêtre modale va s'ouvrir, avec des centaines de paramètres à régler :
A première vue cela peut paraître un peu effrayant, mais heureusement, nous devons seulement en
régler quelques uns, la majorité de ces paramètres sont bons. Notez que je vais seulement vous
donner un exemple de paramétrage suivant la manière que j'utilise habituellement pour paramétrer,
n'hésitez pas à tester les paramètres qui vous intéressent. Pour l'instant, je ne citerai que les réglages
de base qui peuvent avoir besoin d'être examinés :
•
Configuration - Principaux : notez que le paramètre Activer l'optimisation des URLs est
présent également ici : ne le touchez pas pour l'instant. Les autres champs sont réglés
correctement par défaut, exceptés deux :
◦ Suffixe URL est réglé sur .html. Videz simplement ce champ, il n'y a pas de raison
d'ajouter de suffixe.
◦ Tout en minuscule : réglez-le sur Oui afin d'avoir toutes vos URL en minuscule.
68
•
Configuration - shURL: par défaut, shURL est activé, ce qui signifie que pour chaque URL
existante, une URL plus courte est créée. Cela peut être utile si vous devez souvent informer
des utilisateurs de vos URL, dans le cas par exemple où ils devraient les taper. Les URL sont
simplement redirigées vers des URL correctes (301), vous n'avez donc pas à vous soucier
des problèmes de duplicate, mais pour la plupart des sites, elles ne sont pas nécessaires, je
désactive donc cette fonctionnalité en général.
◦ Configuration – Avancés : par défaut, cela fonctionne correctement, excepté pour :
◦ Mode de réécriture devrait être réglé sur "avec .htaccess mod_rewrite".
◦ Redirection 301 de www / non-www : réglez-le, préférablement sur non-www.
◦ Enregistrer les erreurs 404 : actuellement réglé sur Oui, ce qui est bon, spécialement
pour les nouveaux sites. Cependant, il y a un risque que la base de données grossisse
rapidement si le nombre d'erreurs rencontrées est important. Donc je le désactive
généralement une fois que le site est stable depuis quelques semaines.
•
Configuration - Par composant : pas besoin de toucher celui-ci. Une raison d'utiliser ce
paramètre serait dans le cas où un composant ne fonctionnerait pas correctement avec
SH404SEF. Vous pouvez le régler pour qu'il utilise la logique par défaut du SEF Joomla!.
•
Configuration - Langues : Très intéressant pour les sites multilingues. Si je suis certain que
mon site ne comportera qu'une seule langue, je règle généralement la valeur sur Non, car
parfois certaines chaînes de caractères comme fr sont insérées si 2 langues sont installées, ce
qui est souvent le cas pour les sites autres que ceux en anglais, sur lesquels l'anglais est en
général installé comme langue par défaut de Joomla!.
•
Extensions – Joomla : Cela permet la configuration de vos URL basées sur la structure des
catégories. Le paramétrage par défaut fonctionne normalement correctement, mais vous
pouvez souhaiter le paramétrer selon vos besoins.
◦ Je change généralement tous les paramètres ici pour utiliser l'alias pour le Title, la
catégorie, le menu, me permettant ainsi de les différencier si besoin.
◦ Vous pouvez affiner la manière dont vos URL seront construites. Le paramétrage par
défaut fonctionne bien, laissez les Eléments non-catégorisés afin qu'ils n'utilisent que le
titre pour éviter le mot non-catégorisé dans les URL.
◦ Une dernière chose : Insérer nom table article : réglé sur Non, il ajoute le mot table
aux URL pour les vues de liste.
69
•
Extensions - Autres options : pas besoin de les toucher, à moins d'une configuration
spécifique nécessaire.
•
SEO - Gestion des balises meta : le paramétrage par défaut est bon, je change simplement
Transformer H1 multiples en H2 sur Oui. Vous devez éviter les multiples balises <h1> où
que ce soit, mais ce paramètre peut être utilisé pour plus de sécurité.
•
SEO - Titre de page : Il utilise la même logique que le paramètre Nom du Site dans la
Configuration Globale . Je vous conseille de bien réfléchir à ce qui sera le mieux pour votre
site. Cela concerne la balise <title>.
•
SEO - Configuration titre de page pour les articles : Options supplémentaires pour affiner
la balise <title>.
•
SEO - Mobile : Cela était utile avant que le responsive design soit évolué, lorsque vous
utilisez un template différent pour l'affichage sur mobile. Pas nécessaire pour les sites
responsive.
•
SEO Social : Vous permet d'ajouter des boutons pour les réseaux sociaux dans vos articles.
Sachez que pour une configuration plus avancée, vous devez vous rendre dans le
Gestionnaire de Plugins de Joomla! et rechercher le plugin sh404SEF core - Social
buttons. Si vous n'en avez pas besoin, désactivez ce plugin, car il ajoute un peu de
Javascript à vos pages qu'il est inutile de charger.
•
Analytics : Vous permet de consulter les données de votre compte Google Analytics
directement depuis votre site web Joomla!. Entrez propriété-Web de votre compte Google
Analytics ici (UA-xxx-xxx).
•
Sécurité : Très utile pour sécuriser votre site, particulièrement si vous n'utilisez pas encore
une extension de sécurité comme Admin Tools d'Akeeba. Cela sort du sujet principal de ce
livre.
•
Page Erreur - Configuration de base : cette fonctionnalité crée une page 404-error dans
votre template, remplaçant la vilaine page d'erreur de Joomla!. Les paramètres de cet onglet
fonctionnent correctement.
•
Page Erreur - Page 404 par défaut : crée un texte pour vos visiteurs dans le cas où ils
rencontrent une erreur Page not Found.
Lorsque tout est bon, enregistrez vos paramètres. Si nécessaire, vérifiez-les. Maintenant vous
pouvez cliquer sur Activer l'optimisation des URLs :
Désormais, dès que quelqu'un va afficher le Frontend du site, toutes les URL seront
automatiquement générées. Vous noterez la différence pour l'URL de la page du livre sur Nelson
Mandela :
Avant SH404SEF : /nos-biographies/nelson-mandela
Après SH404SEF : /biographies/nelson-mandela
Vous remarquerez que la structure Catégorie / Article est désormais correctement appliquée à
l'URL. Notez également que l'URL originale n'existe plus. Si vous essayez d'y accèder, vous
obtenez une erreur 404...
A ce point notre configuration initiale est prête, mais nous allons avoir besoin de vérifier nos
résultats. Nous avons effectué de nombreuses modifications d'un coup et il est facile de manquer un
élément. Nous le ferons dans le chapitre suivant.
70
Gestion URL
Lorsque vous cliquez sur Gestion URL dans le menu de gauche, vous obtenez l'écran suivant :
C'est une liste intéressante des URL créées par SH404SEF. Pour la majorité des utilisateurs de
SH404SEF, c'est l'écran principal pour les réglages et les configurations. Vous pouvez clairement
voir les relations entre les URL non-SEF et les URL SEF. Vous pouvez tester de copier une URL
non-SEF dans votre navigateur, vous remarquerez qu'en effet vous serez redirigé vers l'URL SEF
correcte.
Vous pourrez également voir les URL pour les pages que vous n'avez pas configurées, comme mot
de passe perdu et nom d'utilisateur perdu, et même les pages avec les vues "imprimées" de vos
articles. Ce que vous ne savez peut-être pas est que toutes les URL non-SEF sont toujours
accessibles sur n'importe quel site Joomla, même si vous n'avez pas configuré de page de
connexion, SH404SEF ne fait rien d'autre que de créer des URL SEF pour les URL qui existent déjà
(si besoin, vous pouvez maintenant régler une valeur NOINDEX pour les Robots).
Vous pouvez également accéder à n'importe quelle autre fonctionnalité disponible pour ces URL,
comme :
71
•
shURLs : nous ne l'avons pas activé, mais si vous l'avez fait, vous le retrouvez ici.
•
Metas : si les métadonnées ont été réglées, vous verrez un drapeau (sur lequel vous pouvez
également cliquer) vous permettant de rapidement vérifier si toutes les pages ont des
métadonnées entrées. Notez que seules les métadonnées configurées dans SH404SEF sont
vérifiées, si vous avez déjà réglé les métadonnées dans les articles Joomla!, ce n'est pas
indiqué.
•
Duplicatas : si 2 URL non-SEF chargées ont la même URL SEF, cela sera indiqué. En
général, vous n'aurez pas besoin de toucher cela.
•
Alias : indique si des alias ont été créés. Si vous souhaitez rediriger une autre URL sur celle
que nous regardons, vous pouvez le faire en réglant un alias, une redirection 301 est créée.
Si vous souhaitez régler un alias, utilisez l'URL SEF pour cela, n'entrez pas une URL nonSEF.
•
Personnalisée : lorsque l'URL générée par SH404SEF n'est pas celle que vous souhaitez,
vous pouvez simplement la régler sur une autre. L'URL existante sera automatiquement
ajoutée comme un alias par SH404SEF. Ainsi, aucune erreur ne sera générée si les
utilisateurs essayent de nouveau d'y accéder.
Tous ces paramètres ont également leurs propres écrans, nous allons y venir.
Purger les URL
En haut de la liste des URL nous avons également un bouton rouge Purger :
Ce bouton va purger toutes vos URL, donc normalement vous ne devez jamais le toucher. La seule
exception pour laquelle je l'utilise est lorsque je reconfigure ou configure un site, si je me rends
compte que j'ai fait une erreur dans la configuration. Tant que le site n'est pas en ligne, ce n'est pas
un problème.
Dans les cas comme cela, corrigez la configuration, Purgez vos URL et régénérez-les de nouveau
simplement en visitant le Frontend de votre site.
Je préfère faire cela avant de générer les métadonnées, titles et URL personnalisées, qui ne doivent
généralement pas être supprimées, ce sont simplement les URL SEF qui sont supprimées.
Après avoir réglé votre configuration correctement, vous ne devrez plus jamais avoir à toucher ce
bouton.
Régler la page d'accueil
Vous avez sans doute noté qu'une URL séparée a été créée pour l'article qui est lié à la page
d'accueil de votre site. L'article appelé Accueil a le même contenu que l'actuelle page d'accueil.
C'est une conséquence de la règle selon laquelle chaque article reçoit une URL basée sur la
72
combinaison catégorie / article. Pour les éléments Non-catégorisés, nous avons réglé "ne pas inclure
la catégorie dans l'URL", donc pour l'article appelé Accueil, une URL appelée /home/ est créée.
La duplication du contenu peut (doit) être facilement corrigée. Ensemble, et avec d'autres
paramètres, nous allons régler cela : Cliquez sur le bouton appelé Accueil, au dessus de la liste des
URL :
Une fenêtre modale va s'ouvrir :
73
Premièrement, assurez-vous d'avoir des métadonnées : c'est un des paramètres les plus importants,
qui vous permet de contrôler la façon dont votre site web sera affiché dans les pages de SERPs.
Deuxièmement, cliquez sur l'onglet alias, et entrez l'URL pour l'article assigné à la page d'accueil,
dans ce cas simplement accueil. Ne pas faire cela provoque du duplicate content sur votre site.
Gestion d'Alias
Le gestionnaire d'alias vous donne une prévisualisation de tous les alias configurés. En général,
vous allez travailler à partir de l'écran du Gestionnaire d'URL, mais il peut être agréable parfois
d'avoir une vue d'ensemble pour corriger les erreurs.
Un exemple pourrait être une situation pour laquelle vous avez réglé beaucoup d'alias, et
accidentellement créé une boucle.
Gestion shURL
Cet écran est utile pour la gestion de vos shURL, mais vous accédez également aux informations
depuis la gestion des URL.
74
Requêtes 404
C'est un écran extrêmement pratique. Il aide énormément pour les situations où vous devez vous
battre contre les erreurs 404 que les utilisateurs rencontrent. Pour les nouveaux sites, cela n'est pas
très pertinent. En revanche, dans le cas où vous reconfigurez un site existant ou modifiez la
structure des URL, c'est certainement très utile.
Si vous suivez ce livre depuis le début, vous avez vu qu'avant d'activer SH404SEF, l'URL pour le
livre sur Mandela était différente, et le fait d'accéder à l'ancienne URL menait vers une erreur 404.
Cette erreur est enregistrée et disponible pour les investigations dans l'écran du gestionnaire
d'erreur 404 Requests :
Lorsque vous souhaitez continuer de travailler avec le gestionnaire de redirection de Joomla!, vous
souhaiterez regarder l'URL correcte correspondante, la copier et la coller dans votre redirection, ce
qui est assez lourd si vous avez de nombreuses erreurs. Désormais avec SH404SEF c'est très
simple. Cliquez simplement Rediriger vers une URL SEF et une nouvelle fenêtre va s'ouvrir :
Basée sur l'URL en erreur, une liste d'URL correspondantes est suggérée, elle est en générale
correcte, dans 90% des cas. Si ce n'est pas le cas, vous pouvez toujours ne pas utiliser cette
fonctionnalité et entrer votre URL.
75
Parfois les utilisateurs et les Robots continuent de se rendre sur des pages étranges de votre site,
générant de nombreuses erreurs par jour qu'il est impossible de traquer ou de suivre et qui sont
inutiles. Dans ce cas, ce peut être une bonne idée de stopper l'enregistrement des erreurs 404 en
désactivant la fonctionnalité dans la configuration de SH404SEF. Sinon, votre base de données va
grossir de façon importante.
Titre et Méta
Cette vue d'ensemble propose une liste de toutes les URL non-SEF et des métadonnées qu'elles
contiennent :
76
Si 2 URL non-SEF sont réglées pour la même URL SEF, vous verrez 2 enregistrements (pour la
page about-us dans la capture d'écran ci-dessus), qui est la raison pour laquelle je préfère travailler à
partir du gestionnaire d'URL, car il est basé sur une vue d'ensemble des URL SEF. Chaque donnée
que vous entrez dans le gestionnaire d'URL sera également visible ici, donc cet écran est pratique
pour superviser rapidement vos métadonnées.
Une fonctionnalité intéressante de SH404SEF est également que tous les champs permettant
d'entrer les titles et metadescriptions proposent un compteur. Ce compteur affiche le nombre de
caractères restants avant d'atteindre la limite conseillée de 65 ou 165 caractères. Cette fonctionnalité
est également ajoutée au gestionnaire d'article de Joomla!, ce qui est particulièrement utile pour le
title des pages (même si vous devez garder à l'esprit que le nom de votre site peut être ajouté ou
non, pour déterminer ce nombre de caractères !).
Cela peut également être un bon moyen de savoir si vous devriez toujours utiliser le gestionnaire de
metadonnées de SH404SEF. Le fait est que pour les nouveaux articles Joomla!, une action séparée
est nécessaire pour ajouter les métadonnées dans SH404SEF. Ce ne sera pas toujours le cas, comme
par exemple pour les sites avec de nombreux articles ajoutés régulièrement. Vous pourriez préférer
ajouter les métadonnées en même temps, tout en créant et en éditant l'article dans le Gestionnaire
d'article. Tant que vous utiliserez cette méthode, les métadonnées de Joomla! seront alors utilisées.
Analytics
77
Si vous avez entré vos identifiants Google Analytics, vous pouvez consulter vos données à partir de
l'onglet Analytics de SH404SEF. Pour les utilisateurs ne gérant qu'un seul site, cela peut s'avérer
très utile. Il fournit les mêmes données que celles affichées dans Google Analytics.
Désavantages
Bien sûr, cette extension présente également des désavantages. Nous avons déjà vu que de
nombreux utilisateurs la trouvent compliquée à utiliser, mais cela dépend de vos compétences et de
votre expérience. D'autres désavantages sont souvent cités :
78
•
Performance : certains utilisateurs pointent des problèmes de performance dûs à de
nombreuses requêtes vers la base de données. Avec un serveur bien paramétré, cela ne
devrait pas être un problème.
•
Problème avec des extensions tierces. ll existe certainement des extensions qui ne
fonctionnent pas bien avec SH404SEF, alors avant de l'installer, vérifiez si c'est le cas avec
les extensions déjà installées sur votre site. Pour certaines extensions, en excluant celles qui
fonctionnent correctement depuis l'écran de configuration de SH404SEF, vous pourrez en
effet rencontrer des difficultés.
•
Problème avec les migrations. SH404SEF ajoute de la complexité à votre site web, donc
toutes les migrations seront plus difficiles.
•
Problème lors de la désinstallation. SH404SEF peut être désinstallé, mais il y a parfois des
problèmes pour lesquels des traces subsistent (fichiers), laissant des comportements étranges
sur votre site.
Extensions similaires à SH404SEF
SH404SEF a plusieurs concurrents offrant des fonctionnalités similaires SEO / SEF. Les plus
connues sont MijoSEF et JoomSEF. Ces extensions fonctionnent très bien également, et peuvent
parfois battre SH404SEF sur certains points. La meilleure solution pour trouver l'extension la plus
adaptée pour vous est tout simplement de les tester. Ce qui est particulièrement intéressant avec ces
alternatives, c'est qu'elles proposent des versions de base qui peuvent être utilisées gratuitement,
elles ne vous permettent pas d'utiliser certaines des fonctionnalités les plus avancées. En général,
cela devrait vous donner un aperçu assez précis afin de décider si vous souhaitez acheter la version
complète. Regardons rapidement ces deux extensions :
MijoSEF
MijoSEF propose un tableau de bord similaire à celui de SH404SEF, avec de larges icônes à la
place d'une interface basique :
79
Il propose certaines fonctionnalités que ne propose pas SH404SEF :
•
Création automatique de lien interne
•
Sitemap
•
Génération automatique de métadonnées
Les URL sont également basées sur une configuration similaire :
80
JoomSEF
Comme SH404SEF et MijoSEF, JoomSEF propose un panneau de contrôle agréable :
En particulier pour la version Pro, certaines fonctionnalités disponibles offrent des possibilités
étendues :
81
•
Edition du .htaccess à partir du composant
•
Vérification de la densité des mots-clés
•
Génération automatique de métadonnées
•
Paramétrage de tâche Cron
Partie 5 : SEO Off-site
À un certain stade, votre site est publié et entièrement optimisé. Si tout se passe bien, les moteurs de
recherche vont rapidement ajouter votre site à leur index. Si vous avez bien travaillé, tout devrait se
passer en douceur, mais si vous souhaitez vraiment viser haut, vous devrez également optimiser
votre site depuis l'extérieur de ce site.
Ce procédé est appellé SEO off-site, en comparaison au SEO on-site sur lequel nous avons travaillé
jusqu'à maintenant. Le SEO Off-site peut avoir un énorme effet, mais le faire correctement peut
également prendre beaucoup de temps. Regardez simplement quelques agences SEO et consultez
leurs prix. En général, elles facturent par mois sur la base d'un abonnement, pour des prix allant
jusqu'à plusieurs centaines de dollars ou d'euros par mois, voire plus, cela est une indication sur le
temps et les efforts qu'ils y consacrent.
Le sujet du SEO off-site SEO n'est pas un cours spécifique à Joomla! et est applicable à n'importe
quel site web. Ce qui est intéressant c'est que quelques étapes initiales peuvent déjà vous donner des
résultats. Nous allons en voir quelques unes, simplement pour vous permettre de débuter.
Google Webmaster Tools
Si la question de savoir si Google Webmaster Tools devrait ou non faire partie du sujet SEO off-site
82
est justifiée, il est très important que vous vous y inscriviez, car cela va vous aider dans vos efforts.
Le premier arrêt après la publication de votre site web devrait vraiment être Google Webmaster
Tools. Si vous n'avez pas encore de compte Gmail, créez-en un maintenant, puis ensuite inscrivezvous sur Google Webmaster Tools à l'adresse www.google.com/webmasters/tools. Si c'est la
première fois que vous l'utilisez, votre liste de sites à gérer doit être vide, autrement, vous retrouvez
vos sites listés. En supposant que cela soit nouveau pour vous, cliquez d'abord sur le bouton
Ajouter un site :
Vous devrez entrer l'URL de votre site web. Cela vous amènera à l'écran de vérification :
Suivez simplement les instructions en récupérant le fichier .html fourni, chargez-le à la racine de
votre site web et cliquez sur le bouton Vérifier. Vous devriez obtenir un message comme celui-ci :
83
Il existe également des méthodes alternatives, comme utiliser votre compte Google Analytics, mais
ceci est probablement la méthode la plus simple pour commencer.
Ce qui va suivre maintenant peut vous paraître assez étrange, mais mon conseil est tout de même de
suivre ce qui suit. Si vous soumettez simplement un site comme siteweb.com, répétez le procédé
pour le même site mais en ajoutant les www, donc www.siteweb.com, et cela même si vous
configurez votre site web pour qu'il ne soit accessible que via une des deux adresses. La seconde
vérification est une question de secondes, car Google va vous demander d'utiliser le même fichier
de vérification, donc vous ne devrez pas charger un deuxième fichier, 2 clics suffiront pour être
vérifié, résultant dans 2 sites web dans vos webmaster tools.
Avant de continuer, assurez-vous que vous travaillez à partir de la version que vous utilisez, nous
n'utiliserons plus l'autre option dorénavant, nous laissons simplement notre liste telle quelle.
Cliquez sur l’icône Paramètres en haut à droite de votre écran et sélectionnez Paramètres du site :
Vous pouvez désormais régler le Domaine favori. Réglez-le sur votre préféré, puis cliquez sur
Enregistrer. Cette étape est particulièrement utile si vous n'avez techniquement pas forcé votre site
pour qu'il utilise une des deux options avec ou sans les www, mais également si vous l'avez fait,
donc effectuez simplement cette étape. Toutes les étapes que vous entreprenez pour simplifier la vie
de Google seront appréciées…
Il vous reste à présent une dernière chose à faire. Si vous avez bien suivi les différentes étapes, vous
84
avez créé un fichier sitemap.xml que vous avez placé à la racine de votre site, ou peut-être ailleurs.
Vous avez probablement remarqué que sur le tableau webmaster tools il y a cette question :
Pourquoi soumettre un sitemap, donc Google apprécie évidemment que vous lui en fournissiez
un...
Soit vous pouvez directement soumettre votre Sitemap dans le tableau de bord, soit vous pouvez
naviguer, grâce au menu de gauche, dans Exploration > Sitemaps. Actuellement il n'y en a pas,
donc cliquez sur le bouton Ajouter/Tester un Sitemap :
Vous devez alors donner la localisation de ce sitemap. Optionnellement, vous pouvez tester si
Google peut atteindre et comprendre le fichier, sinon, envoyez-le directement.
Webmaster tools vous informera sur le nombre d'URL présentes dans le sitemap que vous avez
soumis. Initialement vous ne voyez que le nombre d'URL soumises, mais plus tard, celles qui seront
indexées apparaîtront également :
Il semblerait que si vous faites cela consciencieusement avec des sites web correctement
optimisés, Google sera rapide pour indéxer votre site. J'ai habituellement de nouveaux sites web
comportant des douzaines de pages et complètement indéxés en 2 jours. Plus tôt ils sont indexés,
mieux c'est.
Noubliez pas de re-soumettre des sitemaps chaque fois que votre site change, ou assurez-vous que
votre extension générant des sitemaps le fasse pour vous.
Après les réglages initiaux, cela peut prendre 1 à 2 semaines avant que Google ne regarde votre site
en détail, assurez-vous de revenir afin de consulter les informations importantes que vous recevrez à
propos de votre site web. N'hésitez pas à découvrir les différentes options proposées pour votre site.
Particulièrement intéressante pour les nouveaux sites web : la partie Apparence dans les résultats
de recherche > Améliorations HTML :
85
Cela peut vous donner des informations très utiles, notamment à propos du duplicate content
détecté, ou au moins des metadonnées et titles dupliqués. Notez que parfois les informations
peuvent prendre du temps à être mises à jour, donc ne paniquez pas. Si les duplications sont
correctement repérées, assurez-vous de régler le problème.
La deuxième fonctionnalité très utile est Trafic de recherche > Requêtes de recherche :
86
Depuis que Google Analytics ne nous donne plus toutes les données des mots-clés (90% du trafic
est souvent noté comme Not provided), cette fonctionnalité est devenue très utile, avec une liste
des mots-clés utilisés pour trouver votre site, Click Through Rate (CTR) et position sur les SERPs.
A part cela, le menu de navigation affiche des informations intéressantes à propos des liens de votre
site, du statut des pages sur l'index, sur les siteslinks, sur la présence de données structurées
(microdata), etc.
Alors même que Google représente une immense part de marché, n'oubliez pas la concurrence :
Bing et Yahoo. Ils utilisent le Bing Webmaster Tools à l'adresse www.bing.com/toolbox/webmaster.
Assurez-vous de suivre la procédure avec celui-ci, car même s'ils ont une part de marché
relativement faible par rapport à Google, ils peuvent amener des visiteurs sur votre site.
Google Analytics
Google Analytics est également un outil que vous devez définitivement activer. Alors que
Webmaster Tools fournit des données utiles sur l'apparence et le CTR dans les pages SERP
(comportement des utilisateurs avant qu'ils accèdent au site), Analytics donne un aperçu de la façon
dont les gens se comportent sur votre site.
Il vous dit quelles sont les pages les plus consultées, le taux de rebond (les utilisateurs cliquant sur
le bouton retour sans consulter le reste du site), mais également la provenance géographique des
visiteurs, quel OS ils utilisent, s'ils utilisent des mobiles, etc. Les utilisateurs avancés peuvent
également régler des objectifs et des filtres pour traquer les taux de conversions, ainsi que d'autres
fonctionnalités. Avant de devenir un expert en la matière, installez au moins le tracking code et
vérifiez que les données soient bien générées, car même si vous ne l'utiliserez que dans quelques
mois, votre historique de données commencera à se construire.
Pour vous inscrire, rendez-vous simplement sur www.google.com/analytics, enregistrez votre site et
installez le bout de code que vous recevrez.
87
Google+
Ces derniers temps, Google essaie de promouvoir davantage sa plate-forme sociale Google+. C'est
pourquoi vous voyez de plus en plus de références à cette plate-forme sur les pages de résultats de
recherche. La plus apparente est le portrait de l'auteur dans la description.
Pour cette raison, je vous conseille de paramétrer cela également. Rendez-vous simplement sur la
page d'inscription Google+ à l'adresse plus.google.com/authorship et suivez les instructions. Vous
pouvez vérifier votre site par email (avec un email attaché au domaine), ou en liant votre site à votre
page Google+ avec un lien configuré avec un attribut rel=author, comme cela :
<a href="https://plus.google.com/+MYPAGE?rel=author">My Google+ profile</a>
Si cela est réglé correctement, vous verrez probablement votre profil dans les pages de SERP.
Linkbuilding et réseaux sociaux
Obtenir des liens à partir d'autres sites dirigeant vers le vôtre est une des meilleures façons de
montrer que vous êtes apprécié sur le web. Google aime vraiment ces liens, mais il est également
assez pointilleux pour déterminer si ces liens sont pertinents. Evitez les liens venant de répertoires
attribués aux spams. Les meilleurs liens sont ceux venant de blogs et de sites traitant du même sujet
que le vôtre. Si vous avez un site de qualité, avec du contenu de bonne qualité et réellement unique,
ces liens viendront d'eux-mêmes, car tout le monde souhaitera montrer ce site web intéressant à ses
amis et à ses collègues. Cependant, tous les sites web ne sont pas ainsi et vous pouvez avoir besoin
d'aide pour améliorer le processus, et c'est plus simple pour certains sites que pour d'autres.
Prenons l'exemple où vous auriez un site sur le webdesign avec Joomla, vous devriez déjà être un
membre du forum Joomla.org ou d'autres forums Joomla!, comme votre fournisseur de templates ou
votre hébergement. Assurez-vous de régler votre signature avec un lien vers votre site.
Nous avons également de bonnes opportunités de créer des liens sur Youtube, Slideshare, Vimeo,
etc. En général, vous serez en mesure d'ajouter des commentaires sous la vidéo, sur la présentation
ou sur ce que vous avez chargé, et vous pourrez alors ajouter un lien vers votre site. Si la vidéo ou
la présentation est pertinente, cela attirera les visiteurs et fonctionnera donc dans les deux sens.
Une autre façon simple de créer des liens venant de sites à forte valeur sont des vidéos avec votre
lien en description, postées sur vos profils Twitter, Linkedin, Pinterest et Facebook, ou une
présentation sur Slideshare.net, etc.
88
Dans le cas où vous auriez le choix entre une plate-forme Google et une pate-forme non-Google,
utilisez celle venant de Google, comme pour le choix entre Vimeo et Youtube, ou encore mieux,
utilisez les deux. Google est censé être impartial, mais l'est-il à 100%... Pour ce qui concerne les
réseaux sociaux, utilisez-les tous, mais utilisez définitivement Google+. En effet, des parties de
Google+ apparaîssent de plus en plus dans les résultats de recherche.
Poster les mises à jour sur votre site web fonctionne également très bien, vu que Google adore les
sites proposant du contenu à jour de qualité. Si possible, ajoutez une section blog sur votre site pour
cet effet, ou réécrivez le contenu s'il doit être mis à jour. Rester à jour aide également. Vous pouvez
souvent voir que Google ajoute une date dernière mise à jour à côté de la description de votre site
sur les SERPs.
Pour plus de linkbuilding, un excellent moyen de détecter d'éventuelles perspectives de liaison est
de regarder votre concurrence : essayez de trouver quels sont les sites qui possèdent des liens vers
vos sites concurrents. Vous pouvez rechercher les backlinks d'un site en entrant son URL sur la page
Open Site Explorer à l'adresse : www.opensiteexplorer.org.
A partir d'ici
La partie SEO de ce livre se termine ici, en effet nous sommes de plus en plus loin du territoire
Joomla et de plus en plus dans le monde du SEO. Le SEO est une science en elle-même, donc
continuez à lire des informations et des posts de blog, car ce sujet évolue en permanence.
Certaines entreprises SEO maintiennent des blogs avec des informations très intéressantes, les
suivantes sont à suivre régulièrement :
89
•
Moz.com
•
Majestic SEO
•
Savvy Panda (Spécialisé Joomla)
•
Google Webmaster Blog
Partie 6 : Performance et optimisation pour un site web
Joomla! rapide
Peut-être trouvez-vous étrange qu'une partie importante d'un livre sur le SEO soit dédiée à la vitesse
et aux performances, mais cela a du sens. Le SEO ne consiste que partiellement à attirer des
visiteurs, l'étape suivante est de garder ces visiteurs sur votre site. Donner aux utilisateurs une
utilisation agréable en leur offrant une navigation rapide à travers le site est un point crucial. De
plus, certaines études montrent que le temps nécessaire au chargement d'une page influe sur le taux
de conversion, ce qui signifie que les sites rapides vendent plus. Vous l'avez probablement remarqué
vous-même, si un site est trop long à charger, vous le quittez simplement et vous vous rendez sur le
prochain affiché sur le SERP.
Encore plus important : Google a mentionné dans un de ses posts de blog sur le site Webmaster
Central que la vitesse d'un site est un facteur qui pèse pour le classement des sites sur Google !
De manière générale, vous devez essayer de charger votre site en moins de 2 secondes. Deux
90
secondes représentent le temps que les utilisateurs s'attendent à devoir attendre, donc cela ne devrait
pas les stopper dans leur navigation. Dès que votre site nécessite plus de temps à être chargé, vos
visiteurs peuvent perdre leur intérêt. Plusieurs études ont montré que les taux de conversion
commencent à chuter lorsque les pages nécessitent plus que ces deux secondes pour être chargées.
Je souhaite donc vous conseiller de prendre un de vos sites web et de vraiment faire l'effort de le
rendre aussi rapide que possible. Même s'il se charge déjà en deux secondes, vous pourrez le faire
charger en moins d'une seconde. Votre site semblera ainsi vif et animé, ce qui est une chose que les
utilisateurs apprécient particulièrement.
Certaines des mesures que nous allons voir peuvent sembler assez triviales, mais en les suivant,
vous apprendrez énormément. Une fois que vous aurez gagné en expérience, il vous sera de plus en
plus facile de rendre votre site encore plus rapide, et vous saurez quelle mesure fonctionne et
laquelle ne fonctionne pas. Les sites petits, simples, comme les portfolios ou les brochures peuvent
nécessiter seulement 5 minutes de configuration pour devenir 2 fois plus rapides.
Il faut avoir en tête que certaines des actions que nous allons voir peuvent parfois casser des
fonctionnalités. Par conséquent, et comme pour chaque modification majeure, vous devrez faire des
tests et être préparé à devoir revenir à la situation initiale, soit en reprenant vos étapes, soit en
remontant une sauvegarde. Plus votre site est compliqué, plus vous aurez besoin de passer du temps
pour le rendre plus rapide.
Vérifier avant de commencer
Donc, avant que nous ne commencions à optimiser la vitesse de Joomla!, regardons d'abord où nous
sommes placés. Si vous comprenez ce que fait chaque étape de l'optimisation, vous apprendrez
quelles étapes ont un effet important, et lesquelles ont un effet moindre. Votre site web doit donc
être publié et en ligne pour cela, ensuite il existe plusieurs options pour vérifier la rapidité de ce site
web. Ce qui est particulièrement intéressant, c'est que ces outils ne classent pas seulement votre site
en fonction de sa rapidité, mais ils vous fournissent aussi des astuces très utiles. Vous serez déjà
capable de comprendre les problèmes juste en suivant leurs conseils.
Il peut être intéressant de tester votre site web avec plusieurs outils, car les différents résultats ne
sont pas toujours en accord à 100% sur les actions à entreprendre.
Extension YSlow pour navigateur
Yslow peut être installé sur vos navigateurs Firefox ou Chrome, vous permettant d'étudier un site
directement depuis ce navigateur. Voici une capture d'écran de l'extension :
91
Si vous devez faire de l'optimisation sur de nombreux sites web, cette extension est très pratique
pour obtenir des résultats directement sur votre navigateur.
Page Speed Insights
92
L'aperçu donné par Pagespeed concerne aussi bien les données Mobile que Desktop, avec
différentes priorités. Comme c'est un outil de Google, vous devez le mettre dans vos vérifications
prioritaires. Dernièrement, ils ont changé leur façon de fonctionner, donnant plus d'importance au
contenu Above the fold, et parfois il n'est pas simple de s'y conformer.
Pingdom
Pingdom tools analyse votre site à partir d'un lieu au hasard. Vous pouvez l'utiliser avec sa solution
de base, mais il est également intéressant de s'enregistrer pour un monitoring permanent, jusqu'à
une fois par minute. Pour un site web vous pouvez le faire gratuitement, ce qui vous donne un bon
aperçu au fil du temps :
93
Pingdom analyse votre site à partir de différentes localisations autour du monde, il devient donc
spécialement utile lorsque vous souhaitez savoir comment se charge le site autre part, ou lorsque
vous souhaitez vérifier les effets d'un Content Delivery Network.
GT-Metrix
GT-Metrix collecte les données de Pagespeed et Yslow sur un seul écran. Les conseils sont
également très utiles :
Ils récupèrent les données de PageSpeed et Yslow sur un seul et même écran.
Webpagetest.org
94
De même, www.webpagetest.org propose des données intéressantes :
Maintenant que nous savons d'où nous commençons, regardons ce que nous pouvons faire à partir
de cela.
Fournisseur d'hébergement Web
Ce n'est certainement pas le paramètre le plus simple à modifier, mais choisir le bon hébergement
peut avoir de grandes conséquences. Si vous portez de l'importance à la vitesse de chargement de
votre site web, évitez les hébergeurs peu chers (ou gratuits), et sélectionnez-en un avec attention. Le
même site web hébergé sur 2 hébergeurs différents peut avoir une vitesse d'affichage qui varie
grandement et des différences de plus de 100% ne sont pas rares.
Avant de choisir votre hébergement, vérifiez au moins les points suivants :
•
Réputation online ?
•
Support ?
•
Spécialiste Joomla ?
•
Logiciels et serveurs à jour (spécialement PHP et MySQL) ?
•
Serveurs rapides ?
•
Localisation des serveurs (Les sites web asiatiques devraient être hébergés sur des serveurs
en Asie, etc.)?
La plupart des serveurs se diront performants sur ces points, mais vérifiez 2 fois. L'hébergeur parfait
n'existe pas réellement, mais heureusement, il en existe plusieurs qui sont très performants, et cela
varie également en fonction de ce que vous allez dépenser. Certains hébergeurs de petite taille
opérant localement offrent de très bons services. Toutefois, et pour vous aider dans votre choix,
voici une liste des hébergeurs les plus importants, opérant dans le monde entier et possédant une
bonne réputation :
•
95
Siteground.com
•
Rochenhost.com
•
Bluehost.com
•
Cloudaccess.net
•
GreenGeeks.com
•
Rackspace.com
•
Arvixe.com
•
Site5.com
•
Hostgator.com
Simple et mince
Pour charger Joomla rapidement, votre site devrait être simple et mince, et ne charger uniquement
que le nécessaire pour satisfaire les besoins de vos visiteurs. Vous ne devez pas seulement prêter
attention à la taille des éléments nécessaires pour charger le site, mais également au nombre de
fichiers nécessaires. Chaque fichier indépendant nécessite une requête-HTTP de la part du serveur.
De manière générale, charger un site web rapidement requiert :
•
Réduction en taille (KB's)
•
Réduction en nombre de requêtes-HTTP
•
Ré-utilisation (cache) des éléments qui ont déjà été chargés ou générés
•
Ressources permettant de charger de manière simultanée plutôt que de manière séquencée
Une des choses à constamment garder à l'esprit lorsque vous construisez un site web Joomla! est
que tout ce que vous ajoutez à Joomla! demandera du temps supplémentaire pour charger le site.
Cela n'est pas uniquement valable pour les extensions, mais également pour :
96
•
Les images
•
Les fonts, aussi bien les webfonts que les @fontface intégrées
•
Les scripts des réseaux sociaux (!)
•
Les templates
•
Les captchas
•
Les vidéos intégrées
•
Les librairies Javascript
•
Les extensions
•
Les plugins
•
Etc.
Construire votre template nécessite que vous commenciez déjà à réfléchir à ce dont vous avez
besoin, comme la nécessité d'utiliser des images pour vos backgrounds et boutons, ou la possibilité
de réaliser cela avec des techniques CSS3.
Vous devez également réfléchir de cette manière lors de la création du contenu : ai-je vraiment
besoin d'utiliser 3 images dans mon article, ou une seule est-elle suffisante, ou peut-être une image
de petite taille ? Bien sûr, vous allez constamment devoir faire des compromis : le site le plus rapide
est un site ennuyeux qui s'affiche sans ressources additionnelles à part celles venant d'un fichier
CSS. En revanche, lorsque vous construisez un site web pour un photographe, il insistera pour avoir
un grand slider et vous devrez le lui installer. Vous avez toujours la possibilité de sélectionner une
extension bien écrite, bien sûr.
Certains vont même jusqu'à désinstaller des composants natifs de Joomla! : si vous n'utilisez pas le
composant Liens web, débarrassez-vous-en. Personnellement, je préfère ne pas toucher aux
éléments natifs, dépublier simplement les extensions non utilisées fonctionne également très bien.
Une mention spéciale devrait également aller aux ressources tierces, comme Twitter / Facebook /
Pinterest, Google webfonts, etc. Si vous ne pouvez pas vous en passer, peut-être pouvez-vous au
moins les publier ailleurs que sur votre page d'accueil et ne les afficher que sur les pages
pertinentes?
Comme le SEO, vous devez toujours garder les performances en tête : n'utilisez et n'installez que ce
dont vous avez réellement besoin et si vous pouvez, ne vous embarrassez pas.
Mise en cache de Joomla!
La mise en cache de Joomla! est le mécanisme qui stocke certaines vues pour les utilisateurs et qui
ne doivent donc pas être récupérées dans la base de données à chaque fois. Ces vues sont en fait des
fichiers temporaires stockés dans un des dossiers de Joomla! : le dossier cache. Vous pouvez
regarder ces fichiers système pour voir à quoi ils ressemblent, ainsi que ce qu'ils contiennent :
•
com_* fichiers qui stockent les vues des composants
•
mod_* fichiers qui stockent les vues des modules
•
page fichiers qui stockent les vues des pages entières
Le principal avantage que nous donne la mise en cache est que les sites se chargent généralement
plus rapidement car ils utilisent un code plus court pour générer les informations. En effet, la
différence de vitesse peut parfois être énorme, mais elle peut aussi être moindre, cela dépend…
97
Vous n'en connaîtrez les effets sur votre site que si vous testez avant et après.
Cependant, stocker des vues présente un problème car l'information de Joomla! peut avoir changé
depuis que le dernier stockage de vues a été créé. Cela peut constituer un désavantage,
particulièrement pour les sites avec un contenu qui change souvent, comme les sites web d'actualité,
ou les sites sur lesquels les utilisateurs créent le contenu et souhaitent regarder à quoi cela ressemble
rapidement sur le Frontend. Ce peut être une raison de ne pas utiliser le cache, mais il existe des
façons de surmonter ce problème, comme nous le verrons dans le chapitre extensions.
Un autre problème potentiel est que certaines fonctionnalités peuvent ne plus fonctionner lorsque le
cache est activé. Particulièrement avec le System - Cache. Des problèmes peuvent par exemple être
rencontrés avec les feeds ou Captchas ou encore les checkout carts des extensions E-commerce.
Ce que vous devez également savoir est que l'option cache de Joomla! est activée seulement pour
les utilisateurs invités, les utilisateurs connectés ne reçoivent pas de vues provenant du cache.
Joomla a plusieurs possibilités natives pour supporter différents niveaux de mise en cache. Elles
fonctionnent toutes différemment, regardons-en quelques unes :
Paramètre du cache global
Le premier paramètre que nous allons voir est placé une nouvelle fois sur l'écran de la
Configuration Globale. Rendez-vous sur l'onglet Système, où vous trouverez les Paramètres du
Cache :
Le Cache est par défaut réglé sur Cache désactivé. Les alternatives sont Cache conservateur et
Cache progressif. Vous ferez le bon choix en sélectionnant l'option Cache conservateur. Le Cache
progressif ne vous donne pas beaucoup de performances additionnelles, et il produit plus de
problèmes que le Cache conservateur.
La Gestion du Cache est réglée sur Fichier. Laissez cette option comme cela, la modifier est
réservé aux utilisateurs avancés. La seule configuration alternative est Cache_lite, mais il y a
également plus de possibilités. Cela requiert des paramétrages serveur spécifiques et vous devrez de
plus mettre à jour manuellement votre fichier configuration.php dans le dossier racine de Joomla!.
Ce pourrait être le cas par exemple avec mem-cache, qui accélère les recherches sur la base de
98
données (pas supporté sur tous les serveurs).
Pour finir, vous pouvez régler la Durée du cache. Vous pouvez la régler selon vos besoins. Les
petits sites statiques utilisent une durée de cache très longue alors que pour les autres sites, vous
devrez choisir une durée plus courte. Le réglage par défaut de 15 minutes sera bon pour la majorité
des sites.
En réalité, cette option cache crée et stocke des vues des Composants, la zone principale de
contenu pour Joomla!. Ces vues sont stockées dans les fichiers /cache/com_*.
Cache pour les modules
Le cache pour les modules est utilisé pour les vues de vos modules. Le paramétrage par défaut est
le même que pour la Configuration Globale, mais le cache d'un module peut être modifié à un
niveau spécifique, par module. Allez dans Extensions > Gestion des modules et éditez un de vos
modules. Vous trouverez les paramètres du cache pour le module dans l'onglet Paramètres
avancés :
Si le cache est Activé dans la configuration globale vous pouvez surcharger ce paramètre ici en
choisissant Pas de cache. Vous n'avez pas d'autres possibilités : si la configuration globale n'utilise
pas de cache, vous ne pouvez pas l'activer dans les modules.
Plus bas, vous pouvez également définir une Durée de Cache (ici nous utilisons les secondes, alors
99
que la configuration globale utilise les minutes).
Le cache des modules peut parfois être utilisé si seul un module spécifique rencontre des problèmes
avec les réglages du cache de la configuration globale, laissant donc le reste du site proprement mis
en cache. Prenons par exemple un cas où le module fil de navigation ne parvient pas à afficher le
chemin correct lorsqu'il est mis en cache. Si vous rencontrez cela, désactivez le cache de ce module.
Les vues mises en cache des modules sont stockées dans le fichier /cache/mod_*.
Plugin Système - Cache
Certains utilisateurs de Joomla! ne savent pas qu'il existe également un plugin indépendant de
cache. Vous ne pouvez pas le configurer via un menu de l'administration, allez dans Extensions >
Gestion des plugins et recherchez le plugin Système - Cache.
Vous devez simplement le publier pour l'activer. Ce plugin stocke des vues pour les pages dans leur
intégralité, au dessus des vues de cache des composants et modules, de sorte qu'ils fonctionnent
même par dessus les uns des autres. Activer ce plugin peut apporter quelques variations, même si
vous avez déjà activé le cache de la configuration globale.
Notez qu'il peut également être la cause de certains conflits éventuels, donc pensez à vérifier
soigneusement votre site après l'avoir activé.
Un paramètre est configurable dans le plugin : le paramètre Cache du navigateur :
Laissez-le réglé sur Non. La description est un peu trompeuse, cela fonctionne en réalité seulement
pour les utilisateurs qui reviennent sur la même page en utilisant la même session de navigateur et
cela peut également poser des problèmes.
100
Vérifiez toujours que votre site fonctionne correctement après avoir activé ce plugin, ce qui devrait
être le cas la plupart du temps.
Nettoyage du cache
Parfois, vous souhaitez forcer l'affichage du nouveau contenu sur le site, plus tôt que cela est défini
dans les paramètres. Pour cela, vous devez nettoyer les vues stockées dans le dossier cache de
Joomla!. Avec le cache activé, votre dossier pourrait avoir un contenu comme cela :
101
Vous pouvez facilement reconnaître les vues des composants, modules et pages et lorsque vous les
examinez avec un éditeur de code, vous pouvez voir le HTML qui correspond au contenu attendu
(la ligne JEXEC or die sert à ce qu'ils ne soient pas directement accessibles).
Pour nettoyer votre cache et avoir un site propre, allez dans Système > Purger le Cache. Vous
obtiendrez une liste comparable à celle ci-dessous contenant les fichiers stockés dans le dossier
cache. Vérifiez, puis cliquez sur Supprimer :
Allez également dans Purger les fichiers expirés et faites le nettoyage. Cela ne devrait pas affecter
l'affichage des éléments de votre site, car vous supprimez seulement les fichiers cache expirés.
102
Plugin NoNumber Cache Cleaner
Le nettoyage du cache peut devenir parfois assez fastidieux. Lorsque vous souhaitez voir
directement le changement qu'apporte la modification d'un article, vous devez faire l'ensemble de la
boucle suivante :
•
Créer la modification dans votre article
•
Enregistrer l'article
•
Aller dans Système > Purger le cache
•
Purger les fichiers expirés juste pour être sûr
•
Contrôler vos changements
•
Apporter une nouvelle correction, recommencer la boucle...
Si vous devez le faire à plusieurs reprises, cela peut être fastidieux. Dans ce cas, je recommande le
plugin Cache Cleaner par NoNumber. Il vous offre un joli petit bouton en bas de votre écran
d'administration, accessible en permanence, même lorsque vous éditez un article :
Désormais vous n'avez plus besoin de quitter l'article que vous êtes en train d'éditer, vous pouvez
nettoyer tous vos caches en un clic.
Dans la version Pro, vous pouvez également régler le nettoyage du cache de manière périodique, ou
bien après chaque action Sauver. Cela peut être extrêmement utile, car vous n'avez désormais plus à
vous soucier de cache de contenu. Cela peut également être très pratique lorsque plusieurs
utilisateurs non expérimentés sont autorisés à éditer et à créer des articles, car le phénomène
"cache" peut leur être complètement inconnu.
103
Notez que sur les sites de taille importante, automatiser le nettoyage du cache peut parfois poser
problème. Pensez à faire des tests.
JOTcache
Mis à part NoNumber Cache Cleaner, il existe plusieurs extensions gérant le cache. Cache
Control (de CrosstTec) est un petit plugin qui vous permet de désactiver le cache pour des
comportements spécifiques, mais il est un peu limité.
Pour des besoins avancés, JOTcache est une extension extrêmement avantageuse. Avec JOTcache
vous pouvez exclure des composants, modules, éléments de menu, positions de module, URL et
vous pouvez également exclure certains navigateurs spécifiques afin d'obtenir un site rapide tout en
laissant les fonctionnalités intactes. Vous pouvez tout paramétrer selon des niveaux, notamment en
ce qui concerne les composants, vous n'avez pas à exclure un composant en entier, vous pouvez
vous limiter à certaines vues de ce composant. Dans un exemple où vous auriez un problème avec
une vue de catégorie, vous pouvez exclure com_content > category view, laissant ainsi les autres
vues mises en cache.
Lorsque vous installez JOTcache, vous installez un module et un plugin. Pour commencer vous
devrez activer le plugin et régler quelques paramètres basiques, mais la grande partie de votre
configuration devra être paramétrée à partir du composant JOTcache :
Si vous avez des problèmes avec le cache proposé par Joomla!, JOTcache est fortement
recommandé.
104
Leverage Browser Caching
Comme nous l'avons vu, l'option de cache de Joomla! crée et stocke des vues sur le serveur.
L'option Leveraging browser cache vous permet de réutiliser les ressources du site web qui ont déjà
été téléchargées sur votre PC lors de précédentes visites. Cela peut être du HTML, mais également
du CSS, Javascript, fonts et autres ressources statiques. L'avantage de ce mécanisme est que les
ressources sont déjà sur votre ordinateur, donc elles n'ont pas besoin d'utiliser la bande passante lors
du chargement du site.
Ce qui est également intéressant est que cela est simple à utiliser et n'affectera normalement aucune
fonctionnalité de votre site.
La seule contrepartie est que certaines ressources ne sont pas rafraichies automatiquement, comme
un fichier CSS qui a été modifié sur le serveur. La majorité des visiteurs pourront régler cela en
vidant le cache de leur navigateur, mais la gravité dépend encore une fois de votre situation.
Donc, comment l'activer ? Il y a 2 pré-requis, qui sont très probablement déjà remplis :
•
La réécriture d'URL par un .htaccess doit être activée (paramétrage par défaut)
•
Votre serveur doit supporter le module Apache mod_expires (ce qui est le cas chez la
plupart des hébergeurs). Pour prévenir les problèmes en cas de non support (ou en localhost)
vous devez mettre votre code dans une déclaration if comme indiqué.
Pour chaque différents types de fichier nous devons lister un "expiry interval", indiquant à quelle
vitesse ils devraient être actualisés : court pour les fichiers qui changent souvent, comme html, long
pour les fichiers qui changent rarement, comme Javascript et CSS.
Cela devrait ressembler à un code comme celui-ci, à introduire dans votre fichier .htaccess :
105
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml
application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
</IfModule>
Un comportement par défaut est appliqué aux types de fichiers qui ne sont pas mentionnés (access
plus 1 seconde). Vous pouvez étendre cela davantage si vous avez des types de fichier spéciaux
comme audio, vidéo, @fontface embedded fonts, etc.
Vous voyez également quelques lignes additionnelles :
ETag: informe le navigateur qu'une image déjà chargée ne doit pas l'être à nouveau
•
Expires headers: identique à ETag mais plus spécifique par type de fichier
•
AddOutputFilterByType DEFLATE : minimise le HTML en supprimant les espaces
106
•
Utilisez cela, c'est très efficace et votre note PageSpeed va augmenter significativement. Ce qui est
particulièrement intéressant est que l'activation de cette fonctionnalité via le fichier .htaccess
provoque difficilement des contreparties, tant que vous introduisez une déclaration <ifModule>.
Si vous avez installé Jbetolo (nous verrons cela plus tard), vous pouvez même automatiser la
génération de ce code dans votre .htaccess en utilisant le bouton Patch :
Cependant, les utilisateurs avancés souhaiteront probablement régler ce code exactement selon leurs
propres spécificités.
G-Zip
Joomla! supporte nativement G-Zip. C'est le système qui permet de zipper le contenu de votre site
dans un fichier zip. Le fichier zippé est envoyé à votre navigateur, décompressé, puis affiché.
Actuellement, tous les navigateurs, y compris les anciennes versions d'IE à partir de la version 6 le
supportent, donc rien ne devrait vous retenir de l'utiliser (à partir du moment où votre serveur
supporte le moule Apache mod_gzip). Comment fonctionne-t-il ? Il suffit de l'activer :
Rendez-vous dans Système > Configuration > onglet Serveur :
Réglez Compression Gzip sur Oui et enregistrez. Le paramètre est directement actif après avoir été
enregistré.
Si vous souhaitez vérifier que la compression de votre site fonctionne réellement et connaître le
taux de compression, vous pouvez vous rendre sur www.feedthebot.com/tools/gzip et entrer votre
URL :
107
Vous pouvez voir sur cet exemple que la taille est réduite de 75%, ce qui peut donner une différence
significative, particulièrement pour les sites de taille importante.
Réduire la taille des images
Si votre site possède beaucoup d'images, réduire la taille de vos images est crucial. Premièrement,
vous devez vous assurer que vos images sont sauvegardées dans la qualité la plus basse possible
sans que le visuel ne soit affecté. Pour les images .jpg une qualité de 60% peut économiser jusqu'à
50% de taille de fichier par rapport au fichier original, alors que l'image reste la même. Vous pouvez
régler la qualité des images avec la fonctionnalité Save for Web and Devices de Photoshop.
Assurez-vous également de choisir le bon format pour votre image (.jpg pour les photos, .png pour
les images avec de la transparence, les logos, et .gif pour le petites images de faible qualité).
Pour les images .jpg vous avez également la possibilité de les créer en version progressive ou
baseline, qui est une chose que vous pouvez également régler avec la fonctionnalité Save for Web
and Devices de Photoshop. Vous pourrez voir une différence, en particulier sur une faible
connexion : les images baseline se chargent du haut vers le bas alors que les images progressive
s'affichent d'abord en flou, et deviennent plus nettes au cours du chargement de l'image (ces jpg sont
construits avec plusieurs couches). Pour le confort des utilisateurs, Google conseille l'utilisation
d'images progressive, mais celles-ci sont souvent plus lourdes. En réalité, le choix entre les deux
est un peu académique.
Lossless compression
Un terme que vous rencontrez souvent lorsque vous faites des tests de vitesse est lossless
compression (compression sans perte). Les images comportent souvent des metadonnées non
nécessaires comme la date de la photo, le modèle de l'appareil photo, etc. Mais si vous enregistrez
une image avec Photoshop en utilisant le paramètre Save for Web and devices, toutes ces données
ne sont pas supprimées.
108
Le site web GTmetrix propose une fonctionnalité qui vous sera utile. Lorsqu'il trouve des images
sur votre site web qui pourrait être optimisées davantage, il ne fait pas que vous le signaler, il vous
propose également un lien menant vers une version de l'image entièrement optimisée :
Vous pouvez télécharger la version optimisée et l'utiliser pour remplacer l'image originale.
Les outils en ligne proposant ce genre de services sont Smush.it (de Yahoo) et Tinypng.com.
TinyPNG est vraiment performant pour compresser les fichiers, mais malheureusement seulement
pour les images .png :
Si vous souhaitez automatiser ce processus pour votre site web Joomla!, vous devriez regarder
l'extension Jbetolo. C'est une extension avec de nombreuses fonctionnalités avancées, surtout pour
l'optimisation du CSS et du Javascript, mais elle possède également un petit outil qui scanne votre
site Joomla! et optimise les images avec Smush.it :
109
Utilisez-le avec précaution, sauvegardez vos images au préalable. Nous en verrons davantage sur
Jbetolo plus tard.
Images correctement dimensionnées
Une autre action importante concernant les images est de les dimensionner correctement. C'est un
effort permanent surtout avec un CMS comme Joomla!, où des utilisateurs inexpérimentés peuvent
charger des images, parfois directement depuis les appareils photo. La meilleure solution est
d'utiliser une image de la taille exacte de son affichage et de ne pas utiliser un éditeur pour la
redimensionner. Une solution alternative pourrait être d'interdire tout simplement aux utilisateurs de
charger des images de taille trop importante. En général, une limitation de la taille maximum de
600px devrait suffire. Même s'ils utilisent l'éditeur pour redimensionner ces images ensuite, au
moins la taille a été prédéfinie afin qu'elle soit raisonnable.
Pour ce faire, un des meilleurs outils est JCE editor combiné avec le Plugin additionnel Image
Manager. Il vous permet de paramétrer une hauteur et une largeur maximum par défaut. L'image
est redimensionnée avant d'être chargée sur le serveur, ce qui est parfait :
110
Il existe également plusieurs plugins sur le Joomla Extension Directory qui proposent toutes sortes
d'options pour redimensionner les images, certains pour des besoins très spécifiques, d'autres
forcent simplement toutes les images à avoir une même taille définie.
Sprites
Avec les sprites vous pouvez combiner un lot d'images de background en un seul fichier, en général
un .png afin de supporter le transparent. En utilisant des techniques de positionnement CSS
avancées, vous pouvez remplacer le chargement de plusieurs images par un seul fichier.
Cette technique est particulièrement utile pour les images de background, il est donc préférable
d'optimiser ces images lors de la construction du template. Pour les images "normales" cette
technique est moins utile.
Les utilisateurs expérimentés en CSS peuvent produire ce code, mais l'extension JCH-Optimize
peut également le faire automatiquement. Nous discuterons plus en détail de ce plugin dans le
chapitre suivant.
Encodage des images en Base64
En ce qui concerne les très petites images et les icônes, vous pouvez les transformer en utilisant
l'encodage base64 image. Avec cette technique, vous pouvez utiliser une longue chaîne représentant
votre icône dans votre HTML et CSS. Une petite icône pourrait être représentée comme ceci :
<img
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..........AAABJRU5ErkJggg=='
/>
C'est une technique avancée que vous ne devriez pas utiliser pour toutes vos images. En fait, le code
utilisé pour représenter une image peut être énorme et ainsi entraîner une utilisation de bande
passante aussi importante que l'image originale, voire plus. Cela nécessite également de la mémoire
de la part de votre navigateur afin de créer l'image, ce qui peut être un problème pour certains
appareils comme les anciens mobiles. Pour de très petites images, économiser une requête HTTP
peut constituer un réel avantage, il peut donc être intéressant de considérer cette technique.
Utiliser cette technique est en fait assez simple, il existe de nombreux encodeurs disponibles en
ligne, comme www.base64-image.de. Encore une fois : utilisez cela avec précaution !
Optimize CSS and Javascript
Les fichiers CSS et Javascript occupent une place très importante dans les KB de votre site web. De
nombreux fichiers CSS Javascript séparés sont chargés, en particulier avec les templates et les
111
extensions avancées, mais Joomla charge nativement déjà plusieurs fichiers. Joomla charge toujours
les deux librairies Javascript JQuery et Mootools (au moins dans Joomla 3.2). Même si les fichiers
séparés peuvent ne pas être de taille importante, il font grossir peu à peu le nombre de requêtes
HTTP. Vous pouvez clairement le voir si vous prenez un site important et que vous lancez un test
avec www.tools.pingdom.com en regardant l'onglet Waterfall. Vous verrez souvent de nombreux
fichiers séparés, chacun d'entre eux ne prend que quelques millisecondes à être chargé, mais s'ils
sont chargés séparément, cela affecte la rapidité de votre site. Donc comment pouvons-nous
remédier à cela ? Nous avons plusieurs possibilités.
Compresser vos fichiers
En compressant vos fichiers vous supprimez en réalité tous les espaces blancs, ne gardant qu'un
fichier très compressé. La lecture de votre code sera purement impossible, mais toutes les
fonctionnalités fonctionneront correctement. Vous devrez laisser vos fichiers non-compressés
lorsque vous développerez puis vous devrez les compresser lorsque vous publierez votre site.
Il existe des outils en ligne pour compresser votre code (faites simplement une recherche Google
avec compress css js online). Vous pouvez également utiliser un éditeur de code qui fait cela pour
vous, ou bien vous pouvez laisser non-compressé et utiliser une extension comme JCH-Optimize
ou Jbetolo. Pour cela, voir les prochains paragraphes.
Combiner vos fichiers
La majorité des sites Joomla! utilisent beaucoup de fichiers CSS et JS files, conduisant à de
multiples requêtes HTTP. Combiner ces fichiers est un bon moyen de réduire le nombre de
requêtes. Alors que pour l'organisation de vos fonctions au cours du développement il pourrait être
agréable d'avoir des fichiers séparés, votre site web n'en a généralement pas besoin. Tant que vous
les combinez dans un ordre correct, rien ne devrait vous empêcher de combiner tous ces fichiers en
un seul.
Encore une fois, vous pouvez le faire manuellement, mais certaines actions peuvent également être
réalisées par des extensions comme JCH-Optimize ou Jbetolo.
112
Différer le Javascript
Vous avez probablement déjà vu cette suggestion avec certains outils comme GT-Metrix et
Pingdom. Si vous différez votre javascript vous dites à votre navigateur de charger votre
Javascript, puis d'attendre pour exécuter le Javascript lorsque le site sera entièrement chargé. Pour
la plupart des fonctionnalités qui ont besoin du Javascript cela ne pose pas de problème, elles
fonctionnent normalement lorsqu'elles sont différées. Vous pouvez implémenter la fonctionnalité
simplement en ajoutant le mot defer dans vos scripts, comme cela :
<script src="javascript.js" defer></script>
Sachez cependant qu'il existe des fonctions qui nécessitent que ces scripts soient exécutés
immédiatement, comme un module déroulant utilisant Bootstrap module ou le plugin email
cloacking par exemple.
Cela ne devrait pas être trop compliqué à implémenter, mais vous pouvez également laisser faire
JCH-Optimize ou Jbetolo.
Exécuter les scripts de manière asynchrone
Les scripts peuvent également être exécutés de manière asynchrone dès qu'ils sont disponibles, alors
que la page continue à se charger. Cette fonctionnalité n'est pas entièrement supportée : IE8 et les
versions plus anciennes ne l'utilisent pas, mais aucun problème ne sera rencontré, vous pouvez donc
l'utiliser sans risque. Elle s'implémente comme defer tag :
<script src="javascript.js" defer></script>
Async fonctionne avec la balise defer. Vous trouverez des explications sur le site
www.w3cschools.com :
•
Si async est présent : Le script est exécuté de manière asynchrone avec le reste de la page
(le script est exécuté alors que la page continue l'analyse syntaxique)
•
Si async n'est pas présent et defer est présent : Le srcipt est exécuté lorsque la page a
terminé l'analyse syntaxique
•
Si ni async ni defer ne sont présents : Le script est exécuté immédiatement, avant que le
navigateur ne continue l'analyse de la page
Cette fonctionnalité est également inclue dans JCH-Optimize
113
JCH Optimize
JCH-Optimize a déjà été mentionné à plusieurs reprises, il peut être d'une grande aide pour
améliorer la vitesse de votre site. Regardons comment le configurer.
L'extension peut être téléchargée à partir de la page www.jch-optimize.net. Téléchargez-la puis
installez-la à partir du gestionnaire d'extension de Joomla!. Dans le Gestionnaire de Plugins,
recherchez JCH-Optimize et éditez-le :
114
Activez-le et activez les paramètres dont vous avez besoin. Si vous avez lu les paragraphes
précédents, vous ne devriez pas avoir de problème pour comprendre à quoi servent les différents
paramètres. Sur des petits sites, ou lorsque que vous faites des tests sur votre PC, vous pouvez sans
doute commencer par activer toutes les options. Vérifiez ensuite que toutes les fonctionnalités de
votre site fonctionnent comme elles devraient. En général vous verrez qu'il n'y a pas de problème et
que votre site est plus rapide.
Dans l'onglet Advanced vous pouvez affiner quelques options. Si vous avez un problème avec un
fichier Javascript, vous pouvez l'exclure afin qu'il ne soit pas combiné, en laissant les autres
fichiers. Vous pouvez également choisir d'exclure ou d'inclure des extensions de la compression à
partir de cet onglet Advanced.
La version Pro du plugin vous offre davantage de paramètres avancés, comme le chargement
asynchrone du Javascript, du CSS inline, etc.
Ne soyez pas surpris si certaines choses sont "cassées" ou ne fonctionnent plus. Ne paniquez pas et
vérifiez les paramètres un par un afin de trouver le problème. Les paramètres Javascript peuvent
particulièrement poser problème, donc si vous devez désactiver des paramètres, commencez ici. Par
exemple, le formulaire permettant d'acheter cet ebook sur le site Joomla-SEO.net ne s'affiche pas
correctement si certaines options sont activées. Après avoir réglé Defer javascript sur Yes et avoir
désactivé l'inclusion de in-line javascript, le formulaire fonctionne de nouveau correctement.
Jbetolo
JBetolo est une extension gratuite proposée par www.jproven.com. Betolo signifie rapide en
éthiopien, ce qui définit assez bien le rôle de l'extension. Grossièrement, l'extension propose des
fonctionnalités similaires à JCH-optimize. Les deux extensions se complètent en partie, ce que vous
verrez immédiatement lorsque vous les installerez et les paramétrerez :
115
Les principales fonctionnalités sont la minification, combination et compression des fichiers CSS et
Javascript, où vous pourrez également inclure ou exclure certains composants spécifiques. C'est
également ce que propose JCH-Optimize.
Certaines fonctionnalités de JCH optimize ne sont pas inclues dans Jbetolo, comme régler un deferattribute et le chargement asynchrone du Javascript.
Il existe également quelques fonctionnalités intéressantes que vous ne trouverez qu'avec Jbetolo :
•
Dans l'onglet Tools, vous trouverez des paramètres pour régler le code du .htaccess en
rapport avec le cache du navigateur, sans avoir à l'éditer manuellement.
•
Ce qui est particulièrement intéressant est le paramètre permettant d'envoyer les images de
votre site Joomla! vers Smush.it et de recevoir les versions optimisées, tout cela simplement
en cliquant sur un bouton !
•
Un gros plus est également l'intégration native d'un support CDN, en particulier pour
MaxCDN et Amazon Cloudfront, qui peut être implémenté sans plugin additionnel.
•
Pour finir lazy loading est disponible à partir de l'onglet Miscellaneous.
L'utilisation de JCH-Optimize ou de Jbetolo dépend de vos préférences personnelles ou des
demandes spécifiques du site web. Si c'est la première fois que vous utilisez un plugin de ce type,
JCH-Optimize pourrait paraître plus facile à prendre en main. Une autre alternative possédant des
fonctionnalités similaires serait ScriptMerge de Yireo.
CDN (Content Delivery Network)
Lorsque vous avez un site web qui n'est pas consulté uniquement par des visiteurs venant du même
emplacement géographique mais venant du monde entier ou venant d'un pays de grande taille
comme les USA ou la Russie, vous pourrez remarquer que les utilisateurs situés loin du lieu où est
hébergé le site rencontrent des problèmes de lenteur pour charger les pages.
116
Cela pourrait davantage être le cas dans les pays en voie de développement avec des infrastructures
limitées et une faible bande passante. La seule solution serait alors d'être aussi proche que possible
de vos visiteurs. C'est là qu'entre en jeu le Content Delivery Networks (CDN). Les entreprises de
CDN possèdent en général des réseaux avec des serveurs placés partout dans le monde. Plus elles
ont de serveurs, plus elles sont performantes. Si votre contenu est distribué depuis un CDN, les
ressources statiques du site sont envoyées à partir du CDN, alors que les contenus changeants, p.ex.
les fichiers HTML, sont récupérés depuis le serveur sur lequel est hébergé le site.
Les ressources statiques sont les fichiers comme les images, les CSS, les Javascript, les web font,
etc. Ensemble, ces fichiers représentent 80-90% de la taille de votre site web.
Tout cela à l'air compliqué, mais heureusement, avec l'aide de certaines extensions, ce n'est pas
compliqué à implémenter sur un site web Joomla!.
La première étape est de vous enregistrer chez un fournisseur de CDN. Cela peut dépendre de
l'extension que vous utilisez, donc vérifiez les extensions de votre site web en premier lieu. Après
vous être enregistré chez un fournisseur de CDN, vous devrez probablement entrer l'URL de votre
site. Ensuite, de quelques minutes jusqu'à quelques heures sont en général nécessaires au CDN pour
envoyer vos fichiers sur le serveur et pour les distribuer à travers son réseau.
Une fois que le CDN est synchronisé, il va vous informer d'un sous domaine sur les serveurs du
CDN, sur lesquels les fichiers sont stockés.
Avec cette information, installez et configurez votre extension CDN. CDN for Joomla de
NoNumber est une bonne extension qui est très simple à utiliser, mais il en existe d'autres comme
JomCDN de CorePHP et d'autres qui sont spécifiques à certains fournisseurs de CDN. Jbetolo
117
supporte également l'utilisation d'un CDN.
Dans l'exemple pour l'extension NoNumber, entrez simplement le domaine envoyé par le CDN dans
les paramètres du plugin, c'est tout :
Après activation, les fichiers statiques seront chargés depuis le CDN. Vous pouvez vérifier cela si
vous regardez le code source de vos pages. Une section pour une image devrait ressembler à cela :
<img src="http://xxxxxx.cloudfront.net/images/SEO-Joomla.jpg" >
Sans un CDN, ce devrait simplement être :
<img src="images/SEO-Joomla.jpg" >
Pour finir, certains hébergeurs, comme Siteground, offrent gratuitement une fonctionnalité CDN
directement depuis leur Cpanel, sans aucune configuration depuis Joomla!, rendant encore plus
simple l'implémentation.
Optimisation pour mobile
Ces dernières années, les utilisateurs se servent de plus en plus de leurs smartphones et tablettes
pour visiter nos sites web Joomla!. Cela nous encourage à utiliser le responsive design et à leur
offrir une interface utilisateur agréable. Nous devons également garder à l'esprit qu'un grand
nombre de ces appareils sont connectés à des réseaux lents, comme la 3G ou encore plus lent.
Même si la situation s'améliore rapidement, nous devons prêter une attention toute particulière à
l'optimisation de nos sites web pour ces utilisateurs.
118
Pour disposer certains éléments, nous pouvons utiliser des classes comme hidden-phone ou hiddentablet afin qu'ils ne soient pas affichés à l'utilisateur, mais cela ne stoppe pas le code et les images
du chargement actuel, ces éléments sont simplement cachés. Cela induit que des données inutiles
sont envoyées au navigateur, ralentissant la connexion.
Le responsive design est en général basé sur la détection de la taille de l'écran ou de la fenêtre.
Détecter la taille de la fenêtre ne détecte pas réellement si nous sommes sur un mobile, cela vérifie
simplement la taille de l'écran, qui pourrait également être une fenêtre redimensionnée d'un
navigateur d'ordinateur de bureau.
Une technique intéressante pour faire face à ce problème est l'utilisation d'un user-agent detection.
Avec cet user-agent detection, vous pouvez réellement définir sur quel type de dispositif le site est
demandé. Cela signifie que vous avez le contrôle sur ce qui est chargé ou non.
Une extension très pratique pour cela est Advanced Module Manager par NoNumber. Cette
extension remplace le Gestionnaire de Modules de Joomla! par un manager plus avancé.
Désormais vous n'êtes pas limité à l'affichage de modules via certains éléments de menu, mais vous
pouvez également utiliser des informations géographiques, la présence d'autres modules, l'heure,
etc. Parmi les paramètres, vous trouverez une option pour inclure ou exclure les navigateurs de
mobile :
Avec les paramètres ci-dessus, le module ne sera pas chargé du tout lorsque le site sera affiché sur
un navigateur de mobile, vous permettant ainsi d'économiser de la bande passante.
Il existe également un tout petit plugin qui insère le user-agent detection pour vous, vous permettant
d'utiliser if-statements dans vos templates en fonction du user-agent rencontré. Ce plugin n'est pas
sur le JED, mais peut être téléchargé à partir de la page Github de Rene Kreijveld. Une fois
téléchargé et installé, vous utilisez le code comme cela pour charger les modules :
<?php if($ualayout != "mobile") {?
119
<jdoc:include type="modules" name="slider-module" style="xhtml" />
<?php } ?>
Cet exemple de code va maintenant charger le slider si le user-agent n'est pas mobile. Si vous
construisez vos propres templates, ce ne sera pas compliqué à implémenter.
Extensions
Vous l'aurez sans doute remarqué, je suis un grand fan de JCH-Optimize, Jbetolo, JOTCache et
des extensions NoNumber. Je n'ai pas de relation avec les développeurs des extensions que
j'apprécie, et bien sûr, il existe beaucoup d'autres extensions.
Lorsque vous travaillez sur les performances, vous vous rendrez souvent compte que certaines
extensions fonctionnent très bien sur certains sites et moins bien sur d'autres. Vous devrez donc
découvrir d'autres extensions. Il en existe de nombreuses sur le JED qui fonctionneront avec vos
besoins spécifiques, donc n'hésitez pas à les découvrir.
Vérification finale
Après tous vos efforts, il est enfin temps de tester votre site une nouvelle fois. Testez votre site via
les mêmes outils, Yslow, PageSpeed ou Pingdom que vous avez déjà utilisés pour vos tests
précédents.
Dans la majorité des cas, j'espère que votre site web se chargera environ deux fois plus rapidement
qu'il ne le faisait avant que vous ne commenciez à l'optimiser.
Je me demande jusqu'à quel point vous pourrez vous approcher d'un score de 100% !
120

TUTO : - XiVO 14.24 Documentation

PDFTélécharger le livre blanc «Guide du débutant en SEO

Guide de démarrage Google - Optimisation pour les moteurs de

LE RÉFÉRENCEMENT - Brancher Sherbrooke

mise en cache intelligente avec django

Freebox mini 4K

LA PERSPECTIVE EUROPEENNE Jean-Philippe Walter

Propulsez votre site avec WordPress

Fiche situation professionel: Centreon - Portfolio

CLASSEMENT 12 Km 22 Km 34 Km

GLPI - unBlog.fr

SIGNES TRAIL 2015 - Clascycle - Liste des engagés

Débuter sous Linux avec Mandriva

inscription RG 2016

Drupal Concevoir et déployer ses sites web