Qu’est-ce que le responsive design ?
Plus connue sous le nom de « Responsive Design », la compatibilité mobile s’adapte à la résolution de l’écran des appareils. Vous avez pu constater que sur certaines pages des textes sont parfois illisibles, des boutons sont trop petits pour cliquer dessus ou encore un menu inadapté à votre vue. Le Responsive c’est l’art et la manière de s’adapter aux différents supports, comme un écran de PC fixe, un écran d’ordinateur portable, une d’une tablette et surtout d’un smartphone. Depuis le 21 Avril 2015, mis à jour le 16 mai 2016, tous les sites n’étant pas compatibles au format mobiles (smartphone et tablette) seront pénalisés en terme de référencement naturel et donc constateront une dégradation de leur positionnement dans les résultats de recherche de Google à cause de leur ergonomie.Il existe 3 façons d’avoir un site web avec le label “compatible mobile”. La première, et sans doute la plus utilisée, reste le Responsive Design. Cette dernière prend en compte la même URL, ainsi que le même code HTML. La seconde est la Dynamic Serving qui utilise la même adresse, mais pas le même code source en fonction du supports sur lequel la page est affichée. Enfin, la dernière ne prend ni en compte l’url, ni le code, il s’agit de l’URL distincte.
Il n’y a aucune préférence concernant ces 3 types de formats d’URL auprès de Google. Le seul critère important est l’accessibilité à l’ensemble des pages de votre site par les robots de Google. Nous verrons, dans un deuxième temps, que Google recommande l’utilisation du Responsive Web Design.
Quelles sont les actions recommandées par google pour le mobile ?
Il faut éviter les animations flash, elles ne sont pas supportées pour le mobile. Ces pages sont susceptibles de frustrer vos utilisateurs qui partiront de votre site, en raison d’une mauvaise expérience, ce qui aura des conséquences néfastes pour votre site. Son positionnement se verra ainsi dégradé dans les résultats de recherche.
Ne rendez pas vos ressources inexplorables par les robots de Google. La page sera sans doute adaptée pour mobile, cependant Googlebot ne la prendra pas en compte comme étant compatible avec le format mobile. Pour information : pour bloquer certains accès ou certaines pages, vous pouvez modifier le fichier robots.txt.
Lorsque votre page est responsive, ou lorsqu’il existe une page similaire mais pour le mobile, indiquez-le auprès de Google afin qu’il puisse intégrer ces informations et proposer le bon résultat avec la bonne URL (classique ou mobile) dans la SERP en fonction du support de l’utilisateur (mobile ou non).
Pourquoi utiliser le responsive web design ?
Avec le Responsive Design, que vous soyez sur mobile, sur tablette ou PC, l’URL reste unique.
C’est un gain de temps incroyable concernant les balises canonical qui permettent d’attribuer une page favorite à plusieurs pages présentant du contenu similaire (DUST : Duplicate URL Same Text) et, ainsi, éviter du contenu dupliqué (rappel : le contenu dupliqué peut-être très nuisible au référencement de votre site). Vous n’avez pas de redirection à effectuer lorsqu’un mobinaute accède à votre site avec un mobile et donc un gain de temps par rapport au temps d’affichage.
Le User Agent explore une seule fois votre page pour qu’elle soit indexée également sur mobile.
Les formats AMP de Google et leurs concurrents
Après avoir rendu votre site responsive, et donc compatible pour différents supports afin d’offrir une meilleur expérience aux mobinautes, voici un élément qui devient de plus en plus important : le temps de chargement de vos pages sur mobile.
Nous verrons ci-dessous pourquoi il peut être important de mettre en place de nouveaux formats pour mobile, comment améliorer le temps de chargement de vos pages sur mobile, ainsi que les différents acteurs de ce projet, leurs avantages et leurs inconvénients.
L’INTRODUCTION AU FORMAT AMP DE GOOGLE
Les mobinautes sont de plus en plus présents et l’utilisation sur mobile est de plus en plus ancrée dans nos habitudes. Or, il existe encore une contrainte concernant l’utilisation d’un mobile : le temps de chargement. Un utilisateur attend 3 secondes en moyenne que la page ne s’affiche. Au-delà de ce temps, la probabilité qu’il quitte votre page augmente. Pour remédier à ce phénomène, Facebook met en place les Instant Articles, tandis que Google lance les formats AMP.
L’AMP ou Accelerated Mobile Pages est un format de vos pages web sur mobile visant à accélérer le temps de chargement et améliorer l’expérience utilisateur. Ce format est une version simplifiée d’une page HTML n’affichant que les éléments essentiels de celle-ci. Les scripts sont interdits à l’exception de certaines bibliothèques comme l’AMP JS qui ne demande pas de ressources qui pourraient contraindre le temps d’affichage.
LES FORMATS DE FACEBOOK ET APPLE
Plus haut, nous vous avons parlé des Instant Article de Facebook. Un autre acteur entre en jeu dans la guerre des “pages mobiles”. Il s’agit d’Apple, avec Apple News. La différence reste dans le fait que les pages AMP sont sur votre serveur contrairement aux formats de Facebook et Apple qui sont stocké directement dans leur écosystème voulant ainsi vous garder un peu plus longtemps sur leur site.
LA PUBLICITÉ POUR LES FORMATS SUR MOBILES
Concernant la publicité, un détail persiste chez les deux concurrents de Google que sont Apple et Facebook. Il est possible dans la plupart des cas d’afficher de la publicité sur vos pages. Cependant, sachez que les deux entreprises vous prendront 30 % de vos revenus ! Google souhaiterait-il montrer une image différente des deux autres géants en laissant les webmasters être indépendants ?
LES PAGES AMP ET LE RÉFÉRENCEMENT SEO
Dans cette troisième partie, nous verrons comment le format pour mobile de Google serait susceptible d’améliorer le référencement naturel, mais également quelles sont les craintes à ce niveau lors de la mise en place de ces nouveaux formats. Quelles sont les questions que l’on pourrait se poser ? Voici donc, dans un premier temps, les points positifs à prendre en compte pour le référencement web.
LES AVANTAGES INDIRECTS DU RÉFÉRENCEMENT SEO
Les pages au format AMP pourraient impacter le référencement naturel indirectement. Pourquoi indirectement ? Car, actuellement, Google ne communique pas et ne parle pas des avantages liés au référencement naturel. Mais si l’on suit la logique du moteur de recherche, on pourrait très vite faire le lien entre l’algorithme de Google et le format AMP. Voici donc, ci-dessous, deux critères à prendre en compte.
La vitesse de chargement d’une page est un critère pris en compte dans l’algorithme de Google.
Le mobinaute consultera plus rapidement les pages au format AMP, ce qui améliore ainsi l’expérience utilisateur et apporte, par la même occasion, plus de trafic à votre site.
LES CRAINTES DU FORMAT AMP LIÉES AU RÉFÉRENCEMENT NATUREL
Le contenu entre le format AMP et HTML générera-t-il du contenu dupliqué ?
La balise AMP ( link rel=amphtml ).
Voici comment indiquer à Google que ces deux pages sont dans des formats différents et présentant le même contenu.
< link rel=”amphtml” href=”nomdevotresite/article/amp/”>
< link rel=”canonical” href=”nomdevotresite/article/”>
Des complications apparaissent-elles lors de la phase de crawl de Googlebot ?
Certainement, car si chacune des pages de votre site comporte un format AMP, alors vous aurez deux fois plus d’adresses qui devront être crawlées.
Devons-nous inclure des données structurées ?
Les pages AMP possède donc une URL unique comme nous l’avons vu précédemment, il est donc important de renseigner les données structurées comme une image, un titre, ainsi qu’une description sur le type de contenu.
Pouvons-nous voir le trafic généré par les pages AMP ?
29 Janvier 2016. C’est la date depuis laquelle il est possible de récupérer des données qui sont consultables sur Google Analytics.
COMMENT INSTALLER DES PAGES AVEC LE FORMAT AMP ET INSTANT ARTICLE SUR WORDPRESS
Regardons à présent comment installer des pages au format AMP et Instant Article sur WordPress avec le plugin Pagefrog.
Tout d’abord, installez le plugin sur WordPress dans « Ajouter une extension » ; puis activer-le.
Une fois l’extension mise en place, allez dans « Mobile Formats », puis cliquez sur « Begin Setup » pour l’un des deux formats (Instant Article ou AMP HTML). Le format Apple News n’est, pour l’instant, pas disponible.
Une fois les formats de Facebook et Google installés, vous pourrez tester vos pages AMP en insérant /amp à la fin de votre url.
Comme par exemple : http://www.nomdevotresite/article/amp
Vous pouvez remarquer que la balise canonical est bien présente afin de préciser la page favorite et ainsi éviter le contenu dupliqué sur chacune des pages.
