Bien référencer un site Full Flash

Catégories : "Technologie" par Hadrien Marchand Hadrien Marchand le 07 Mai 2009

Comment ne pas résister à la tentation d'un joli site de marque Full Flash en plein écran avec des superbes animations ? De nombreuses enseignes privilégient encore cette approche malgré les débats enflammés concernant les problématiques de référencement naturel et d'accessibilité qu'elle entraine sur les forums.

Effectivement un site entièrement en Flash sera généralement moins bien référencé que son équivalent en HTML. Heureusement, il existe des techniques simples à mettre en place pour limiter les dégâts.

En dépit des pageranks élevés de certains sites de grandes marques, réalisés en Full Flash – comprendre les sites dont la navigation globale est réalisée dans le même fichier Flash – ils sont souvent très mal référencés sur les moteurs de recherche. La simple recherche du nom de la marque ne laisse parfois même pas le site remonter sur la première page des résultats. Cette situation intervient souvent quand l'intégration du fichier Flash dans la page HTML a été complètement négligée. Dommage de gâcher des centaines d'heures de développement pour que personne ne puisse trouver le site facilement !

La requête « site:adresse-du-site.com » offre des informations sur la manière dont Google perçoit le site. Si les contenus du site mis en avant sont « Flash payer needed. You can download it here » ou encore d'autres textes non pertinents, alors c'est mauvais signe...

Nettoyer le code HTML et le rendre valide w3c

Créer une vraie structure HTML bien hiérarchisée, sémantiquement correcte et valide W3C sera relativement simple et constituera la base d'un bon référencement. En profiter pour externaliser le code CSS dans une feuille de style et l'éventuel code JavaScript en dehors de la page.

Optimiser les metas, titres & les url des pages

Une des actions les plus importantes : il est nécessaire de bien remplir pertinemment chaque balise meta et de manières différentes sur chaque page HTML. La balise meta la plus vitale étant la balise « description ».

De même, il faut absolument optimiser l'utilisation de la balise <title> correspondant au texte qui apparaît en haut à gauche du navigateur. Chaque page aura un Title différent et plus adapté aux recherches des internautes.

Les url (adresses) des pages sont également à améliorer. Par exemple, privilégier « adresse-du-site.com/la-marque/nom-du-produit » plutôt que « adresse-du-site.com/site/index.html »

Intégrer le fichier Flash avec SWFObject

Il existe différentes méthodes plus ou moins optimisées pour intégrer un fichier Flash dans la page HTML.

Pour cela nous préconisons sans réserve d'utiliser la librairie SWFObject.

Elle permet entre autres d'obtenir un code propre, et de proposer un texte alternatif aux moteurs de recherche. Par exemple, il est possible de recopier le texte inclus dans l'animation Flash. Beaucoup plus pertinent que « Flash player needed. You can download it » !

Pour plus d'informations, lire l'article du Workshop de Lucie sur l'intégration de fichier Flash.

SWFObject est devenu le standard pour les sites optimisés. Il n'est donc pas étonnant de retrouver cette technique sur la plupart des sites Flash bien conçus.

Squelette HTML avec appel ciblé du fichier Flash : Deeplinking

Les moteurs de recherche offre plus d'importance aux sites ayant un plus grand nombre de pages, chacune positionnée sur des contenus différents, des meta et title différents, ... De nombreux sites Full Flash ne possèdent malheureusement que très peu de pages HTML, voir une seule, dont le rôle est d'inclure le fichier SWF.

Un moyen intéressant à mettre en place est de déployer autant de pages HTML que de séquences Flash. Il s'agit ainsi de créer une page HTML pour chacune des étapes significatives de l'animation Flash.

Chacune de ces pages intègre alors le même fichier Flash mais avec un paramètre différent qui permet à l'animation de démarrer à l'étape correspondant à la page HTML.

C'est une méthode très efficace pour donner du volume au site.

En revanche cela demande un léger travail supplémentaire du côté du fichier Flash : il faut qu'il sache démarrer automatiquement sur la page anglaise « contact » par exemple si on l'appelle avec les paramètres « contact » et « anglais ».

Cette méthode est utilisée, par exemple, avec grand succès sur le site de Cartier

Le site est très bien référencé, Google prend en compte de nombreuses pages et chacune de ces pages inclue le même fichier Flash.

A présent pour un projet Full Flash développé dans les règles de l'art – quand le temps alloué le permet - une des meilleures pratiques est d'utiliser une méthode comme Swf Address, en complément à SWFObject. Grossièrement cette technique permet que lorsqu'on clique sur un lien, "Contact" par exemple, l'url de la page se met à jour en « adresse-du-site.com/adresse.html#contact » et donc de gérer l'historique du navigateur. De quoi remettre en cause les argumentaires des détracteurs des sites en Flash !

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !