web-dev-qa-db-fra.com

Impact SEO de la diffusion dynamique d'images recadrées en fonction du type d'appareil

J'ai un site Web et j'essaie de l'optimiser en fonction de la taille de l'appareil. En raison d'un grand curseur sur la page de couverture, je pouvais réduire de moitié la taille en servant des images plus petites pour les appareils mobiles (via une simple détection utilisateur-agent combinée aux propriétés du navigateur (largeur/hauteur) en session). Le mécanisme fonctionne en remplaçant les URL de ../image.png à ../image-small.png, tout le reste de la page reste identique. Mes questions sont:

  • Devrais-je utiliser "Vary: En-tête HTTP de l'agent utilisateur" car je sers un code HTML différent?
  • Cela pourrait-il affecter le classement en raison de la préférence de Google pour la réactivité par rapport au service dynamique?
  • Devrais-je retravailler mon mécanisme de culture?

EDIT: le contenu est fourni via un CMS et je peux modifier les URL dans le pipeline de modèles mais je ne peux pas les analyser dans un fichier CSS. La principale question est de savoir si cela affecte mon classement et l’en-tête "Vary" corrige-t-il cela?

seogoogleimagesresponsive-webdesign
3
Johannes Stadler

Le seul référencement susceptible de changer en diffusant de manière dynamique une image de taille appropriée pour le périphérique serait le classement de cette image dans la recherche d'images Google.

Google peut très bien servir différents contenus sur différents appareils aussi longtemps que vous traitez agents d'utilisateur Googlebot Mobile de la même manière que vous traiteriez l'appareil mobile correspondant. Ils ont dit qu'il n'y avait pas de préférence de classement pour responsive, vs sniffing agent utilisateur vs site mobile séparé.

L'utilisation d'un en-tête HTTP "Vary: User Agent" serait une bonne idée, car les mandataires mettant en cache votre page ne transmettraient pas la mauvaise image au mauvais périphérique pour vous.

1
Stephen Ostermiller

Avant que votre question ne soit clarifiée, vous aviez dit que vous aviez un site responsive. Voici comment utiliser le CSS réactif pour modifier l'image en fonction de la taille du navigateur:

@media screen and (max-width:480px) {
    #myimage {
        background:url('/smaller-image.png');
    }
}
@media screen and (min-width:481px) {
    #myimage {
        background:url('/bigger-image.png');
    }
}

L'utilisation du sniffing d'agent d'utilisateur n'est pas réellement considérée comme réactive. User Agent sniffing is est une bonne technique pour créer un site mobile du point de vue du classement de Google.

3
Stephen Ostermiller