blog francecopywriter

Référencement naturel : Google notifie les sites non adaptés aux mobiles

Un nouveau algorithme dans les tuyaux ?


Il y a 10 jours, Google a envoyé des notifications en masse aux webmasters responsables de sites non adaptés aux mobiles (Mobile Friendly Website, responsive et Mobile Optimized Website). Les prémices d'un nouvel algorithme basé sur l'accessibilité mobile ?


Par Dimitri Longo

Ces messages ne sont que des avertissements et aucune mesure de pénalité n’a (encore) été mise en place, en tout cas, à notre connaissance. Peut-être est-il temps de vous rafraîchir la mémoire et/ou les connaissances pour rendre votre site plus « mobile-friendly » avant que Google n’ajoute plus de poids aux sites adaptés aux mobiles dans les critères de positionnement.

Google tient à améliorer continuellement le référencement naturel des sites, et pour toujours plus de performances, les mises à jour des algorithmes déjà en place sont régulières. Mais pas uniquement… De nouveaux critères sont à l’étude chez Google. Alors avec l’envoi massif d’emails soulignant la nécessité d’un site adapté, il est légitime de penser que Google va intégrer, à terme, ce critère dans l’un de ses algorithmes.

On sait parfaitement que le référencement naturel se construit sur le contenu de qualité et le netlinking, entre autres choses. Pour établir les résultas de ses pages, Google est obligé de procéder à des classements. Il a donc naturellement poser des critères. Dernièrement le critère d’adaptabilité au mobile est mis à l’honneur.

Nombreux sont encore les sites non adaptés aux mobiles. À terme, il semble que ce critère risque d’influencer le référencement naturel du site internet (si ce n’est pas déjà le cas… les développeurs et référenceurs de site web doivent sûrement avoir un morceau de la réponse). Pour éviter les mauvaises surprises, il faut anticiper dès maintenant, la conception de vos sites, en intégrant des versions mobiles. Suivez le guide !



Pourquoi est-ce important d’être « mobile-friendly » pour Google ?

StatCounter-comparison-FR-monthly-201401-201412

Comme ce graphique l’indique, la part du trafic mobile est en constante augmentation par rapport à celle des Desktop. En seulement un an, on constate que la part du Mobile est passée de 9,5 % à environ 25 %. Cette statistique, à elle seule, doit vous convaincre de la nécessité de mettre en place une stratégie mobile pour votre site dès maintenant.

Si vous n’êtes pas convaincu, analysez ces autres données

 22.5% des achats online de fin d’année ont été réalisés à partir d’appareils mobiles

2 heures par jour sont consacrées à la navigation sur mobile

80% des utilsateurs ont l’intention de réaliser des achats via leur mobile

 57% des utilisateurs de mobile disent ne pas vouloir recommander un site non mobile-friendly

80% des utilisateurs utilisent leur appareil mobile devant la TV

80% du temps passé sur un mobile l’est, en fait, sur une App.

Est-ce que votre site mobile-friendly affecte votre positionnement ?

mobile-friendly
Sans aucun doute, le label « mobile-friendly » n’affecte pas directement votre positionnement mais le taux de clic (CTR) certainement. Si l’internaute a le choix entre un site mobile-friendly et un site non responsive sur son Smartphone, lequel pensez-vous qu’il va choisir ? Il va forcément choisir le site qui offre la meilleure expérience utilisateur.

Votre site « mobile-friendly » en 5 étapes

  1. Testez votre site actuel
  2. Quelle solution mobile appliquer à votre site ?
  3. Les best practices pour une optimisation mobile
  4. Evitez certaines erreurs de design
  5. Utilisez des outils pour améliorer votre positionnement mobile

En respectant ces étapes vous offrirez aux internautes une meilleure expérience mobile. Mais il va sans dire que ces étapes doivent s’inscrire dans une stratégie globale pour une efficacité d’expérience utilisateur maximale.

Testez votre site actuel

Tout d’abord testez votre site sur la page de test de mobilité de Google. Soit votre page est adaptée aux mobiles, soit elle ne l’est pas. Dans le cas où elle l’est pas (et c’est bien cela qui nous intéresse), Google vous donne des indications pour parvenir à un site mobile-friendly.

  • Votre site est mobile-friendly

Bravo, votre site est mobile-friendly ! Vous pouvez pousser plus loin les tests en suivant les conseils pour d’améliorer encore plus l’expérience utilisateur.

test-compatibilite-mobile-google

Cet outil est un vrai plus pour les programmeurs. N’hésitez pas à vous en servir pour améliorer vos sites !

 

  • Votre site a échoué au test

Les principales raisons de l’échec au test sont :

  1. Un texte illisible, car trop petit
  2. Des liens trop rapprochés
  3. Une fenêtre d’affichage mobile non configurée (viewport)

test-mobile-friendly

Si votre site a échoué au test, ce n’est pas une fatalité. C’est le moment de vous améliorer et de passer aux étapes suivantes.

 

Quelle solution mobile appliquer à votre site ?

Mise à jour aiséeCohérence de vos contenusFacilité à fournir une expérience personnalisée
*Responsive web design (recommandé par Google) L’URL reste la même ainsi que le code HTML cependant l’affichage « répond » différemment selon l’écran.

C’est l’une des solutions les plus élégantes. Toutefois si votre site est antérieur au boom des Smartphones, il vous sera probablement plus rentable de créer un site mobile de toute pièce.
Dynamic serving Quelque soit l’appareil, l’URL est identique mais le code HTML généré s’adapte.
Un site distinct pour les utilisateurs mobiles Les utilisateurs mobiles sont redirigés vers une URL mobile.

Une fois l’appareil détecté, une redirection HTTP est utilisée avec l’en-tête HTTP « Vary ».
Une application mobile Une app est crée pour les utilisateurs mobiles. Cette option va souvent de pair avec les autres solutions dans les stratégies mobiles.

En plus du tableau ci-dessus, Google met à disposition un PDF pour vous aider dans vos décisions de choix d’une solution mobile pour votre site. Google détaille les différentes solutions ansi que les avantages et inconvénients. À cette adresse vous trouvez toutes les ressources nécessaires.

Les best practices pour une optimisation mobile

En novembre 2014, Google recommandait d’avoir un site mobile-friendly et présentait son nouveau label. Si ces critères sont détectés par le Googlebot, votre page devient éligible :

Votre site doit éviter d'utiliser des technologies peu utilisés sur mobile à l'instar de FlashLa majorité des navigateurs mobile n'affiche pas les pages utilisant la technologie Flash (iOS), Vous pouvez la substituer en utilisant du CSS et Javascript ou Google Web Designer
Vous devez utilisez un texte déchiffrable sans zoomerConfigurez votre fenêtre d’affichage mobile (viewport) afin de vous assurer de la lisibilité de vos polices (fonts) c'est à dire de leur mise à l'échelle.
Votre contenu doit s'ajuster à la taille de l'écran de manière que les visiteurs n'ai pas besoin de faire défiler la page horizontalement ou de zoomerAdapter le contenu à la taille de la fenêtre d'affichage. Pour maximiser l'expérience utilisateur éviter de faire défiler la page horizontalement ou d'effectuer un zoom arrière. Les sites en RWD s'adapte en permanence à la taille de la fenêtre.
Afin de pouvoir cliquez facilement dessus, vos liens doivent être assez espacé les uns des autresEviter que vos éléments tactiles (boutons, liens...) soient trop petits ou pas assez distant les uns des autres toujours dans le but d'augmenter l'expérience utilisateur. Google recommande une taille minium de 48px CSS en hauteur et largeur.

Personnalisez votre logiciel de site Web

Si vous utilisez un CMS comme WordPress, Google propose des optimisations spécifiques. À noter que des recommandations existent également pour Joomla, Drupal, Blogger, vBulletin, Prestashop, Tumblr, Magento, Bitrix, Datalife Engine, Bitrix et Google Sites.

Evitez certaines erreurs de design

Une fois votre solution mobile choisie en fonction de vos objectifs et de votre budget, il va falloir éviter quelques erreurs :

  • Fichiers JavaScript, CSS et images bloquées

Une erreur classique est de bloquer ces fichiers à l’aide du robots.txt. En effet, il est primordial que le Googlebot ait accès à ces fichiers comme un internaute ordinaire. Quand votre robots.txt bloque l’accès à ces ressources, cela peut avoir pour conséquence une pénalité sur votre référencement naturel.

Exemple de robots.txt qui bloque le crawl des .css et .js :

User-agent: Googlebot
Disallow: /*.css$
Disallow: /*.js$

Outils

  • Contenu ne pouvant être lu

iphone-flash-message

Certains mobiles auront du mal à afficher des médias sous licences ou des animations flash.

Pour éviter les anomalies, qui feront obligatoirement fuir vos visiteurs, vous devez vous assurer d’utiliser des formats standards tel que le HTML5 pour la vidéo, par exemple.

Dans tous les cas, votre objectif est d’évitez de créer de la frustration chez l’internaute lorsqu’il visite votre site mobile.

 

Outils

  • Redirections incorrectes

Si vous utilisez des URLs mobiles distinctes, prenez soin de rediriger les internautes mobiles vers l’URL mobile conforme.

L’outil idéal est Google Webmaster Tools. Si votre tools est bien paramétré, vous serez informé des erreurs d’exploration. Cela vous permettra ainsi d’agir rapidement, et de corriger les anomalies qui se présentent au fur et à mesure. Vous augmentez vos performances et votre expérience utilisateur, ce qui, à terme, agit sur votre référencement naturel.

  • Erreurs 404 uniquement sur mobiles

De temps en temps une page qui se charge correctement sur un ordinateur de bureau provoquera une erreur 404 sur un mobile. Assurez-vous de rediriger votre page vers une URL mobile équivalente si le visiteur accède à une page pour ordinateur.

Si vous utilisez un Design Responsive votre site s’adaptera aux appareils mobiles de vos visiteurs et vous éviterez ainsi ce genre d’erreurs avec des URL mobiles.

Outils

  • Interstitiels de téléchargement d’applications

Kesako ? Si vous avez une App mobile vous allez certainement en faire la promotion sur votre site, mais attention à ne pas en faire trop. Par exemple, en affichant sur une grande partie de la largeur de l’écran votre bannière de téléchargement, vous prenez des risques, voire de gros risques de faire fuir votre visiteur, en plus de l’agacer sévèrement.


app-interstitial-smallapp-banner-small

Info

Cette bannière peut être installée avec un outil tel que Smart App Banners pour Safari ou jQuery Smart Banner (Android et iOS)

  • Liaisons transverses non pertinentes

L’erreur la plus courante est de rediriger les visiteurs vers des pages non adéquates. Par exemple, si une URL mobile pour une page donnée n’existe pas, on renvoie le visiteur vers la page d’accueil. Cette redirection est non pertinente, et il est préférable de laisser le visiteur sur la page pour ordinateur.

  • S’assurer que les pages se chargent rapidement

Un des points les plus importants selon moi, est la vitesse. On y travaille chez Francecopywriter 😉

Si vous voulez éviter des taux de rebonds importants, privilégiez le facteur de rapidité de chargement (en plus de la qualité de votre contenu bien sûr).

Google aime les courbes de temps de téléchargement plates. Plus votre vitesse de chargement augmente et plus la vitesse de crawl baisse.

Outils

Utilisez des outils pour améliorer votre positionnement mobile

SEO Mobile
  • Recherche de mots-clés orientés mobile

Vous aurez peut-être besoin de travailler d’autres mots-clés que ceux de votre site Desktop. Allez faire un tour sur l’outil de planification des mots clés et sélectionnez « Tendances sur mobile » pour faire une première étude de mots-clés.

google-trends

  • Ajoutez vos URLs Mobile à votre sitemap

Si votre site utilise des URLs mobiles, pensez à soumettre votre sitemap via Google Webmaster Tools avec la syntaxe adéquate.

Exemple de Markup pour sitemap :

<?xml version="1.0" encodmobileing="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
    <url><
        <loc>http://mobile.example.com/article100.html</loc>
        <mobile:mobile/>
    </url>
</urlset>
  • Analysez vos positionnements dans les moteurs de recherche Mobile

Certains logiciels ou applications d’analyse de positionnement vous permettent de suivre vos positionnements dans les SERP mobiles.

rank-tracking

ASO : App Store Optimisation et marketing mobile

Plus de 60% des app téléchargées le sont suite à une recherche sur un appstore (Google Play, Apple Store). Être dans les premières places coûte cher cependant quelques actions sont à envisager pour améliorer sa position dans le classement du magasin.

ASO :  Critères de Ranking
  • Mot-clé dans le titre de l’app
  • Description de l’app de qualité avec le mot-clé
  • Icône de l’app d’une grande qualité
  • Associer l’app à des catégories pertinentes
  • Proposer un mini site dédié
  • Travailler le marketing classique (emailing, facebook ads…)
  • etc
ASO : Outils analytics et veille

Il existe des outils vous permettant de suivre les positionnements de vos apps dans les stores Android et iOS.

Maintenant, il ne vous reste plus qu’à vous mettre au travail ! Attention, ce billet n’est pas exhaustif, mais vous donne quelques clés pour améliorer l’expérience utilisateur de votre site. De nombreux autres éléments sont à prendre en considération pour travailler votre référencement naturel et votre adaptabilité à l’espace mobile. N’hésitez pas à tester vos méthodes et les appliquer sur vos sites.

Vous êtes même invité à partagez vos idées, vos liens, et vos remarques dans les commentaires.

Source d’inspiration de ce billet : Link Assistant


Avez-vous trouvé cet article intéressant ?

Si vous avez aimé cet article, que vous avez appris quelque chose, partagez ! N'hésitez pas à cliquer sur les boutons Facebook, Twitter ou Google +. Les plus téméraires d'entre vous, peuvent également suivre les flux RSS.

A propos de l'auteur : Dimitri Longo
Passionné d'informatique depuis ma plus tendre enfance, j'écris des lignes de code... Et un jour j'ai décidé de mettre mon expertise technique au service de la communauté. D'où ma participation à ce blog en tant que rédacteur web. Vous êtes cordialement invité à me poser vos questions en laissant des commentaires ou, mieux encore, me soumettre vos sujets ! Je participe donc à la rédaction de billets de blog pour Francecopywriter mais également à la construction de stratégies, et à la résolution de problèmes techniques...

Rétrolien depuis votre site.

Laisser un commentaire
Prendre connaissance de la Charte de modération
Comment rédiger mon commentaire en Markdownn

Charte de modération Francecopywriter.fr

Francecopywriter.fr est une entreprise individuelle de services de rédaction de contenu sur différents supports, dont le web. Inscrite à l’INSEE sous le numéro SIREN 512 701 814 en date du 15 novembre 2013. Domiciliée 4 bis rue de Chavanier, 17220 Saint Médard d’Aunis.

Cette charte de modération a pour but de définir les règles d’usage appliquées à la publication de commentaires sur le site Francecopywriter.fr

Avant propos

Les commentaires des articles sont accessibles à tous les inscrits sur le site Francecopywriter.fr. Il est à noter que certains articles peuvent être fermés aux commentaires sur décision de l’administrateur.

Cet espace est un lieu d’expression et d’avis personnels des internautes. Merci de respecter la liberté de chacun. La politesse et la courtoisie sont des éléments essentiels dans toute discussion.

Modalités de modération

Nous vous invitons à ne jamais :

  • divulguer votre vrai nom, votre adresse, ou vos coordonnées téléphoniques dans les commentaires
  • rédiger vos commentaires en langage SMS
  • éviter autant que possible l’écriture en majuscules qui s’apparente à des cris et des hurlements agressifs.
Suppression des commentaires

Tous les messages publicitaires, commerciaux, promotionnels ou marketing seront systématiquement supprimés.

Les messages contenant les caractéristiques suivantes sont obligatoirement supprimés, car contraire aux dispositions prévues par la loi :

  • incitation à la haine raciale
  • propos racistes, antisémites, et xénophobes
  • négation des crimes contre l’Humanité, et génocides reconnus
  • apologie des crimes de guerre et/ou de terrorisme
  • propos homophobes et sexistes
  • diffamation ou injures envers les autres internautes ou d’une tierce personne
  • atteinte à la vie privée ou à la présomption d’innocence
  • usurpation d’identité
  • non respect des droits d’auteur
  • non respect de la propriété intellectuelle
  • incitation à commettre des crimes ou des délits
  • apologie de stupéfiants
  • appel au meurtre
  • incitation au suicide
  • attaque à l’intégrité d’une personne
  • promotion d’une organisation considérée comme sectaire

La rédaction de Francecopywriter se réserve le droit de refuser un commentaire et de le supprimer dans les cas suivants :

  • commentaire hors sujet
  • commentaire grossier, injurieux ou agressif
  • règlement de compte entre internautes
  • attaques nominatives envers un ou plusieurs rédacteurs de Francecopywriter
  • critique de la modération (vous pouvez nous contacter ici en cas de désaccord)
  • messages publicitaires
  • commentaire irrespectueux envers une personne

Dans le cas d’un nonrespect des règles de cette charte, des sanctions peuvent prises à l’encontre de l’internaute concerné. Un avertissement lui est envoyé de la part de Francecopywriter. Si celuici n’est pas pris en compte dans les plus brefs délais, le compte utilisateur de l’internaute sera suspendu.

Nous invitons les internautes à nous signaler tout commentaire non conforme aux règles de la charte de modération.

La modération des commentaires s’effectue très régulièrement. Notre service de modération répond rapidement, dans la mesure du possible, dans un délai maximum de 48 heures. Vos commentaires sont soumis à lecture avant publication.

Utilisation de Markdown

L'éditeur Markdown vous permet d'écrire en HTML ou Markdown tout en générant un aperçu en temps réel

Vous avez accès à une barre d'outils qui vous permet de changer les styles de texte, d'ajouter des liens, des images, des blocs de citation et des listes sans avoir à écrire une seule ligne de code.

L'éditeur fournit une coloration syntaxique pour le HTML ou le Markdown et vous pouvez même passer en mode plein écran afin de travailler en toute quietude sur votre contenu.

Recherche

Recherche