Conception sites web

Optimisez votre site pour les mobiles !

27 août 2018 Maxence Pezzetta
||

Les mobiles sont une source non négligeable de trafic et, comme pour les ordinateurs, il faut optimiser son site pour qu’il fonctionne au mieux sur les appareils mobiles. Les experts de notre agence SEO vous donnent quelques notions de base (et techniques) pour y voir un peu plus clair.

Les moteurs de recherche classent les sites internet optimisés pour les supports mobiles en trois catégories :

● Les sites utilisant le Responsive Web Design : La structure des URL’s et le HTML restent les mêmes pour tous les supports (mobiles ou non) et seul le CSS varie pour s’adapter à la résolution de l’écran utilisé. C’est la configuration recommandée par Google.

● Les sites qui utilisent la même structure d’URL’s mais dont le HTML et le CSS varient en fonction du support utilisé.

● Les sites qui utilisent des URL’s spécifiques en fonction du support utilisé.

Dans cet article, nous verrons comment mettre en place chacune de ces trois configurations.

.

Le Responsive Web Design

Le Responsive Web Design est une configuration où le serveur envoie toujours le même code HTML pour tous les appareils et où le CSS est utilisé pour modifier l’apparence de la page en fonction de la taille de l’écran utilisé. Les moteurs de recherche détectent automatiquement cette configuration et l’utilisateur peut ainsi consulter les pages de manière optimale. Pour vous donner un exemple, voici le genre de spécificité CSS que vous pouvez utiliser :

@media only screen and (max-width: 640px) {...}

La largeur maximum de 640 pixels n’est qu’un exemple, pas une obligation. Essayez cependant de définir une largeur raisonnable par rapport aux tailles d’écrans de smartphones utilisés le plus fréquemment. Chaque configuration technique a ses avantages et ses inconvénients, vous pouvez donc mettre en place celle qui fonctionne le mieux pour votre site. En règle générale, si votre configuration fonctionne sur Google Chrome ou Apple Mobile Safari, elle sera compatible avec la plupart des algorithmes des moteurs de recherche.

.

Pourquoi utiliser le Responsive Web Design ?

Voici les trois raisons principales pour lesquelles les moteurs de recherche vous y encouragent :

● Attribuer le contenu d’une page web à une seule URL va faciliter son interaction avec vos visiteurs, faciliter également son partage et la création de liens qui renvoient vers votre contenu. De plus, cela va aider les moteurs de recherche à indexer correctement votre contenu.

● Le fait de ne pas effectuer de redirection (en fonction de l’appareil utilisé) réduit le temps de chargement de la page, qui est considéré comme l’une des composantes majeures de la qualité de l’expérience utilisateur.

● Vous économisez des ressources à la fois pour votre site web et pour les robots des moteurs de recherche qui analysent vos liens (les fameux « crawlers »). Les pages optimisées au Responsive Web Design n’ont besoin d’être analysées qu’une seule fois par les robots (contrairement aux autres pages non optimisées) qui récupèrent votre contenu. Cette optimisation va permettre aux robots de mieux indexer votre contenu et d’afficher vos actualisations plus rapidement.

NB : Assurez-vous ne pas empêcher les robots d’analyser toutes les composantes de vos pages (CSS, JavaScript, images)  qui utilisent des extensions du type robots.txt ou autre. Le fait que les robots puissent accéder facilement à ces fichiers externes va leur permettre de détecter automatiquement votre configuration optimisée au Responsive Web Design et ainsi afficher votre contenu de manière appropriée.

.

Utiliser la même structure d’URL’s mais un HTML différent

Cette configuration va permettre au serveur de répondre aux requêtes de l’utilisateur avec un code HTML (et CSS) différent tout en gardant la même URL. Dans cette configuration,  le fait que le site modifie le code HTML pour les utilisateurs mobile n’est pas visible immédiatement. En effet, le contenu du mobile est alors « caché », il est donc recommandé que le serveur envoie un signal au robot du moteur de recherche pour que celui-ci vienne analyser la page et ainsi découvrir le contenu mobile. Cette astuce est mise en place en utilisant l’en-tête « HTTP Vary ».

.

L’en-tête HTTP Vary

L’entête HTTP Vary  est importante pour les deux raisons suivantes :

● Elle signale aux serveurs cache utilisés par les fournisseurs d’accès qu’ils doivent analyser le support utilisé par l’utilisateur au moment de décider s’il est préférable d’afficher la page en utilisant les informations contenu dans le cache ou non. Sans l’en-tête HTTP Vary, le cache utilisé pour les supports mobiles peut être utilisé par erreur pour un autre support ou inversement.

● Elle aide les robots des moteurs de recherche à analyser plus rapidement le contenu de votre site web optimisé pour le mobile.

L’en-tête HTTP Vary fait donc partie de la réponse du serveur par rapport à une requête donnée, par exemple :

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
 HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

Cela signifie que le contenu de la réponse va varier en fonction de l’agent utilisateur qui demande à consulter la page. Si votre serveur utilise déjà l’en-tête HTTP Vary, vous pouvez ajouter des « agents utilisateurs » à la liste qui a  déjà servi.

.

Utiliser des URL’s spécifiques en fonction du support utilisé

Dans cette configuration, chaque URL « desktop » possède une version « mobile » optimisée pour l’affichage du contenu. Nous aurons par exemple une page dont la structure d’URL serait www.pagedemonsitetropcool.com pour les utilisateurs d’un ordinateur et m.pagedemonsitetropcool.com pour les utilisateurs d’un support mobile. Les moteurs de recherche ne favorisent pas de format d’URL en particulier du moment que les deux sont accessibles par les robots.

[article_form]

.

Les annotations pour les URL’s d’ordinateurs et mobiles

Pour aider les robots des moteurs de recherche à comprendre la configuration de votre site, il est recommandé d’utiliser les annotations suivantes :

● Pour les pages optimisées « desktop », ajoutez un lien spécial rel= « alternate » tag pointant vers l’URL « mobile » correspondante. Cela va aider le robot du moteur de recherche à trouver l’emplacement de la page mobile correspondant à votre contenu.

● Pour les pages optimisées « mobile », ajoutez un lien rel= « canonical »tag pointant vers l’URL « desktop » correspondante.

Il existe deux méthodes pour mettre en place ces annotations : Directement dans le code HTML des pages ou dans le plan du site. Par exemple, supposons que l’URL « desktop » soit http://example.com/page-1 et que son URL mobile correspondante soit http://m.example.com/page-1, l’annotation serait :

Pour la page “desktop”

<link rel=”alternate» media= ”only screen and (max-width: 640px) ” href= http://m.example.com/page-1”>

Pour la page “mobile”

<link rel=”canonical” href=http://www.example.com/page-1>

.

L’annotation dans le plan du site

Voici l’annotation que vous devez inscrire pour les pages optimisées pour les ordinateurs :

&ltxml version= »1.0″ encoding= »UTF-8″?>

<urlset

  >

<url>

<loc>http://www.example.com/page-1/</loc>

<xhtml:link

    rel= »alternate »

    media= »only screen and (max-width: 640px) »

    href= »http://m.example.com/page-1″ />

</url>

</urlset>

Le tag rel= « canonical » de l’URL mobile devra être ajouté au code HTML de la page mobile.

Ces annotations aident les robots des moteurs de recherche à découvrir votre contenu et à comprendre la relation entre vos pages « desktop » et vos pages « mobile ». Lorsque vous utilisez différentes URL’s pour donner accès au même contenu dans des formats différents, les annotations expliquent aux algorithmes des moteurs de recherche que ces deux URL’s ont le même contenu et doivent donc être considérées comme une seule entité et non deux.

Si les deux URL’s sont traitées séparément, elles apparaitront toutes les deux dans les résultats de recherche et leur position pourra alors être inférieure à ce qu’elle pourrait être.

Si vous avez aimé cet article, vous aimerez surement celui-ci : Nos conseils pour créer une annonce mobile efficace

N’hésitez pas à nous contacter au 514 572 7758 ou via notre formulaire de contact si vous souhaitez parler à un conseiller qui répondra à toutes vos questions.

Maxence Pezzetta
Cofondateur et Spécialiste Web Marketing et acquisition de clients Diplômé d’une double Maîtrise en Marketing et Communication, Maxence cumule plus de 10 ans d’expérience en Marketing digital. Ancien employé de Microsoft, sa mission est de « mettre le Web à la portée de tous » pour aider les entreprises à améliorer leur présence en ligne.
Envoyer un message
Soumission gratuite

Plus de lecture

Conception sites web ||

Optimisez votre site pour les mobiles !

Conception sites web ||

Créer un site Web pour PME en 7 étapes 

Conception sites web |||

Comment réussir une refonte de site Web?

Agence SEO choisir agence web|comment choisir agence publicité web|exemple publicité agence Web LinkedIn Ads|réputation en ligne agence Web|agence marketing d'affiliation|exemple planche de branding agence|portfolio agence création sites Web|agence création de sites web shopify|agence marketing Web Montréal|résultats plusieurs services agence web|my little big web agence SEO|résultats publicité en ligne facebook ads|||services-marketing-Web-My-Little-Big-Web|agence-my-little-big-web-equipe-spécialistes|exemple-publication-facebook-my-little-big-web|portfolio-agence-my-little-big-web|témoignages-clients-agence-my-little-big-Web|avis-clients-fiche-my-business-agence-my-little-big-web|réponses-avis-clients-my-business-agence-my-little-big-web|pas-de-sous-traitance-my-little-big-web|certifications-numériques-agence-my-little-big-web|3-bonnes-raisons-contacter-my-little-big-web

Les 10 critères à considérer pour choisir son agence Web

Conception sites web |||||||||

Qu’est-ce qu’un CTA et son importance dans le marketing digital?

Conception sites web

Comment réussir le lancement de son site Web ?

Youpi!
Scroll top