À l’heure actuelle, un site internet qui n’est pas « Responsive Design » ou « Mobile Friendly » a des risques de se voir déclassé dans les résultats de recherche Google… et oui c’est comme ça… Google a annoncé, il y a déjà quelque temps, donner un label « Mobile friendly » aux sites internet répondant à un certains nombres de critères. À partir du 21 avril, ceux ne répondant pas à ces critères risquent donc d’être pénalisés…
Pour pallier à cela, vous avez donc conçu votre site internet Joomla « Mobile friendly » en utilisant les « Media Queries » ? La prévisualisation se passe très bien dans les outils tels que « Responsinator » ou l’outil Firefox « Web Developer tool bar », bref aucun souci à l’horizon.
Vous avez mis votre site en ligne, il fonctionne parfaitement sur mobile, tablette, etc., cool !
Là, vous vous dites : je vais le tester avec l’outil fourni par Google : Test d’optimisation Mobile Friendly
Et là patatra…
Pas de panique 🙂
Le problème est que pour pouvoir valider votre thème comme étant « Mobile Friendly », Google doit pouvoir accéder à vos ressources CSS pour vérifier si vous utilisez bien les « Media Queries ».
Vérifiez le fichier robots.txt de votre thème Joomla!. Il se peut qu’il y ait des éléments bloquant l’accès vers ces fichiers.
Si vous voyez ces deux lignes, supprimez-les :
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
Disallow: /modules/
Disallow: /templates/
[/pastacode]
Vider le cache de Joomla! puis essayez de valider de nouveau votre site.
Normalement, si le travail est bien fait en amont, vous obtiendrez :
Cette technique est valable pour d’autre type de CMS (je pense notamment à WordPress). Si ce problème arrive pensez à vérifier en priorité votre fichier robots.txt. Cela vous évitera de vous arracher les cheveux et vous fera gagner un temps considérable !
Pour aller plus loin
Développer « à la main » vs usage d’un CMS
Récemment j’ai rencontré de jeunes développeurs, surtout des purs et durs, des rois du code, aficionados (voir ayatollahs pour certains) du C#, C++, JEE et autres Java, mais aussi du PHP...
Simple menu animé en css3
Nous allons créer une simple animation en css3 sur l'affichage d'une liste. Cela peut être utile pour apporter un peu d'animation sur un menu vertical. Nous allons utiliser la propriété "transition" proposé par...