Skip to content

Kévin Dunglas

Founder of Les-Tilleuls.coop (worker-owned cooperative). Creator of API Platform, FrankenPHP, Mercure.rocks, Vulcain.rocks and of some Symfony components.

Menu
  • Talks
  • Resume
  • Sponsor me
  • Contact
Menu

Réaliser un site Flash/Flex optimisé pour le référencement

Posted on May 27, 2008January 12, 2014 by Kévin Dunglas

… est accessible.

La technologie Flash / Flex d’Adobe est en passe de s’imposer sur le marché des applications internet riches. Elle permet une expérience utilisateur impressionnante impossible à atteindre avec du HTML standard, les sites en Flash sont fluides, jolis et très interactifs. Côté licence, la plateforme Flex est libre (sous licence MPL) alors que les spécifications de Flash et certains de ses composants sont en train d’être libérés.

Boîte de Flex Builder

Pourtant, un lourd défaut noirci le tableau : les animations Flash sont contenues dans un format binaire (les fichiers d’extension SWF), difficilement lisibles par les robots et peu ou pas accessibles aux personnes souffrants de handicaps et utilisant, par exemple, des lecteurs d’écrans. Ce format de fichier est très pénalisant pour un site à contenu car il sera mal indexer par les moteurs de recherches, source principale de trafic pour un site internet classique, et très difficile à référencer.

Quelques moteurs de recherches

Autre problème dont souffre de nombreuses applications Flash / Flex : l’impossibilité de mettre en favoris une page précise du site ni d’utiliser les boutons suivants et précédents du navigateur. A l’heure des systèmes de favoris sociaux, des blogs et des agrégateurs à la DIGG, il est nécessaire de fournir des “permaliens” (liens permanents), permettant d’accéder directement à une ressource précise afin, la encore, de ne pas perdre un trafic non négligeable.

Web 2.0

Nous nous trouvons donc en-face d’un dilemme, souhaitons nous un site attractif très positif pour l’image de marque ou un site populaire bien classé dans les moteurs de recherches ? Les deux, bien entendu.

Une première réponse se trouve dans l’utilisation de SWF Address. Cette bibliothèque libre utilisant les ancres HTML et Javascript permet de simuler différentes pages au sein d’une animation Flash, d’y accéder directement depuis la barre d’adresse (donc de l’ajouter aux marques pages) et de réactiver  les boutons précédent et suivant du navigateur. SWF Address constitue un petit plus pour l’usabilité et notre site pourra maintenant profiter pleinement des systèmes de bookmarks sociaux comme des digg-like, pourtant le problème principal n’a pas disparu : comment feront un lecteur d’écran ou le robot d’un moteur de recherche pour accèder au site ?

SWF Address

L’idée est de générer une version alternative du site, en pur HTML, dispensant le même contenu. Ce site sera accessible à tous les robots et autres logiciels incapables de lire du Flash. Malheureusement, un visiteur effectuant une recherche arriverait lui aussi sur la page HTML et ne profiterait pas de l’interface amélioré. Détectons donc la présence du plugin Flash et le redirigeons vers la même page dans sa version Flash, ce qui est désormais possible grâce à l’utilisation de SWF Address !

Pourtant, créer et maintenir deux versions d’un même site est long et fastidieux. Il nous faut donc trouver un moyen de générer automatiquement la version HTML du site. Pour cela, on pourrait transformer les animations Flash en HTML avec l’outil d’Adobe nommé swf2html. Malheureusement, celui-ci ne sait extraire que les textes statiques et ne supporte pas les dernières versions de Flash (adieu la 3D temps réel, l’Action Script 3 et autres joyeusetés). De plus, il est déjà utilisé par les moteurs de recherche pour tenter d’indexer les sites Flash et les résultats sont loin d’être encourageants.

XSLT: Rough Cuts Version, Second Edition

Une approche plus saine serait de séparer le contenu de la présentation, c’est à dire de stocker les données du site en dehors des animations, dans des fichiers XML. Flash gère très bien ce format et pourra récupérer les données qui lui sont nécessaires à la volée en lisant. Cette méthode est transparent pour l’utilisateur et permet une maintenance beaucoup plus aisé du site (en cas de modifications dans le contenu plutôt que dans le contenant, il suffit d’éditer un fichier texte, pas besoin de disposer du logiciel Flash ni de recompiler l’animation complète). Nous pourrons ensuite très facilement transformer nos données XML en site internet HTML, par exemple en utilisant XSLT. Nous aurons ainsi deux versions de notre site internet et celui-ci sera accessible, parfaitement référencé, et disposant d’une interface riche de dernière génération.

Cerise sur le gâteau, cette technique rend notre site accessible aux périphériques mobiles ne supportant pas les dernières versions de Flash (téléphones mobiles, PDA, …).

Encore une fois, XML nous permet de marier le meilleur de deux technologies, en ne négligeant ni l’expérience utilisateur ni l’accessiblité et le référencement !

Related posts:

  1. Stofanel : un pas vers les sites Flash bien référencés
  2. Google indexe les sites en Flash : un coup d’épée dans l’eau
  3. Introduction au référencement
  4. Un thème Prestashop HTML5 optimisé pour le référencement avec Rich Snippets

9 thoughts on “Réaliser un site Flash/Flex optimisé pour le référencement”

  1. Cheryle Britto says:
    November 30, -0001 at 12:00 am

    Bonjour Je m’appelle carole Voici un annuaire gratuit pour votre référencement !

    Reply
  2. Bouctoubou says:
    May 27, 2008 at 4:17 pm

    Merci, intéressant ce billet!

    Reply
  3. Adobe Flex Toulouse says:
    June 9, 2008 at 12:36 am

    Bonjour,

    As-tu déjà mis pratique cela ?

    Un pti tp pour l’exemple 🙂

    Reply
  4. Kévin Dunglas says:
    June 14, 2008 at 9:16 pm

    Je ne vais pas trop faire le jeux de la concurrence non plus 😛

    Reply
  5. Pingback: Anonymous
  6. medium says:
    April 3, 2009 at 7:50 pm

    tres bon post merci pour les infos

    Reply
  7. Olivier says:
    August 28, 2009 at 4:07 pm

    Bonjour,
    je ne comprend pas pourquoi tu ne veux pas entrer dans le jeu de la conccurence ?

    Reply
  8. Kévin Dunglas says:
    August 28, 2009 at 4:19 pm

    J'ai dit "faire le jeux de la concurrence" 😛

    Reply
  9. voyant says:
    December 4, 2009 at 5:44 pm

    oui confusion totale lol

    Reply

Leave a ReplyCancel reply

Social

  • Bluesky
  • GitHub
  • LinkedIn
  • Mastodon
  • X
  • YouTube

Links

  • API Platform
  • FrankenPHP
  • Les-Tilleuls.coop
  • Mercure.rocks
  • Vulcain.rocks

Subscribe to this blog

Top Posts & Pages

  • JSON Columns and Doctrine DBAL 3 Upgrade
  • Securely Access Private Git Repositories and Composer Packages in Docker Builds
  • Preventing CORS Preflight Requests Using Content Negotiation
  • FrankenPHP: The Modern Php App Server, written in Go
  • Symfony's New Native Docker Support (Symfony World)
  • Develop Faster With FrankenPHP
  • How to debug Xdebug... or any other weird bug in PHP
  • HTTP compression in PHP (new Symfony AssetMapper feature)
  • PHP and Symfony Apps As Standalone Binaries
  • Generate a Symfony password hash from the command line

Tags

Apache API API Platform Buzz Caddy Docker Doctrine FrankenPHP Go Google GraphQL HTTP/2 Hydra hypermedia Hébergement Javascript JSON-LD Kubernetes La Coopérative des Tilleuls Les-Tilleuls.coop Lille Linux Mac Mercure Mercure.rocks Messagerie Instantanée MySQL performance PHP Punk Rock Python React REST Rock'n'Roll Schema.org Security SEO SEO Symfony Symfony Live Sécurité Ubuntu Web 2.0 webperf XML

Archives

Categories

  • DevOps (84)
    • Ubuntu (68)
  • Go (17)
  • JavaScript (46)
  • Mercure (7)
  • Opinions (91)
  • PHP (170)
    • API Platform (77)
    • FrankenPHP (9)
    • Laravel (1)
    • Symfony (97)
    • Wordpress (6)
  • Python (14)
  • Security (15)
  • SEO (25)
  • Talks (46)
© 2025 Kévin Dunglas | Powered by Minimalist Blog WordPress Theme