Guide du référencement d'un site en Flash

Olivier Duffez, Lundi 4 août 2008

On dit depuis des années qu'il est difficile de référencer un site en Flash… Pourtant il existe des méthodes qui permettent de pallier certains problèmes liés au Flash. Voici un tutoriel pour optimiser le référencement de vos animations Flash.

Je précise en introduction que je ne suis pas spécialiste du Flash, et qu'en conséquence je lirai avec intérêt vos remarques afin de mettre à jour cet article…

La problématique du Flash pour le référencement

Est-il difficile de bien référencer un site en Flash ? Tout dépend des cas ! On distingue 2 types de sites (je schématise) :

1. tout le contenu du site est intégré dans une seule animation Flash affichée en page d'accueil : dans ce cas le site ne possède qu'une seule page HTML (ou quelques autres pour les contacts ou mentions légales), si bien qu'il n'arrivera jamais à être bien positionné sur un grand nombre de mots-clés. C'est le cas qui pose vraiment problème et pour lequel il n'existe pas (à ma connaissance) de solution optimale… à part se ramener au 2nd cas !
2. le site utilise intensément des animations Flash sur ses pages, mais l'unité de base de la consultation du site reste la page. C'est pas exemple un site de ecommerce qui sur chaque fiche produit affiche les caractéristiques via une animation Flash. Dans ce cas il n'y a pas vraiment de problème, il suffit de prévoir sur chaque page un contenu alternatif au Flash, qui sera lu par ceux qui n'ont pas de lecteur Flash, et notamment les moteurs de recherche.

Les méthodes pour référencer du Flash

Les méthodes qui suivent donnent une solution pour le 2nd cas, c'est-à-dire fournir un contenu alternatif équivalent à celui de l'animation Flash.

La méthode de la balise noembed

Elle consiste à ajouter du contenu textuel (ou des images…) entre les balises <noembed> et </noembed>. L'inconvénient de cette méthode est que la balise noembed n'est pas conforme aux recommandations du W3C (tout comme la balise embed bien entendu).

La méthode SWFObject (JavaScript)

Les explications détaillées sont ici en français et là en anglais pour l'article original.

SWFObject est un petit script JavaScript utilisé pour inclure un contenu Flash dans une page HTML. Le script détecte le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC) et est conçu pour rendre l'intégration des animations SWF aussi simple que possible. L'intégration dans la page est compatible avec les normes HTML et XHTML 1.0 (compatible avec les spécifications futures).

Auparavant, SWFObject s'appelait FlashObject, mais il a dû être renommé pour des raisons de copyright.

Voici un exemple de code :

<script type="text/javascript" src="/swfobject.js"></script>
<div id="flashcontent">
Ici du texte ou des images pour le contenu alternatif
pris en compte par les moteurs de recherche
</div>
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>

Comme vous l'avez compris, il faut :

• récupérer le fichier swfobject.js sur votre site (dans cet exemple il est à la racine du site)
• inclure ce JavaScript dans la page qui doit afficher du Flash
• utiliser une balise div avec comme identifiant flashcontent
• inclure 2 lignes de JavaScript pour configurer l'animation Flash (source, taille, etc.)

Si le navigateur gère le Flash, l'animation s'affichera à la place de la balise div, sinon c'est le contenu de cette balise qui s'affichera (du texte, des images, ce que vous voulez). Bien entendu les moteurs de recherche tiennent compte du contenu de cette balise div.

Pour configurer votre animation, paramétrez comme il faut la création de l'objet SWFObject en appelant son constructeur SWFObject(swf, id, largeur, hauteur, version, couleur) :

• swf : le chemin vers le fichier .swf
• id : l'identifiant de l'objet Flash
• largeur : largeur de l'animation Flash (en pixels)
• hauteur : hauteur de l'animation Flash (en pixels)
• version : le numéro de version Flash
• couleur : la couleur de fond

Pour télécharger swfobject.js et un exemple d'utilisation de SWFObject, cliquez ici (fichier ZIP).

L'avantage de cette méthode est que sous IE il n'y a plus besoin de cliquer pour activer l'animation Flash (on en parlait lors de la sortie du patch pour le Flash dans IE). D'après ce que je lis souvent, cette méthode est sans doute la plus appréciée aujourd'hui. Dites-moi si je me trompe !

La méthode Flash Satay

Je vous laisse lire les explications ici en français ou bien là en anglais pour l'article original, je n'ai pas testé… Voici un exemple de code :

<object type="application/x-shockwave-flash"
 data="c.swf?path=movie.swf" width="400" height="300">
 <param name="movie" value="c.swf?path=movie.swf" />
 Ici du texte ou des images pour le contenu alternatif
 pris en compte par les moteurs de recherche
</object>

La méthode Unobstrusive Flash Object (UFO)

Les explications détaillées sont ici en anglais. Il s'agit d'une méthode similaire à la méthode SWFObject, également entièrement compatible avec les recommandations du W3C. Unobstrusive signifie que les différents contenus de la page sont totalement dissociés et indépendants : (X)HTML, CSS et JavaScript.

Vos réactions…

Si vous connaissez d'autres méthodes de référencement du Flash, ou si vous souhaitez apporter des compléments, n'hésitez pas à utiliser les commentaires ! On discute du référencement des sites en Flash également dans le forum.

Formation référencement et webmarketing

Vous souhaitez sans doute améliorer votre référencement, avez-vous pensé à suivre une formation spécialisée sur le référencement naturel ? En 2008, plus de 700 entreprises ont assisté à nos différentes sessions, la plupart faisant financer ces journées par la formation professionnelle (OPCA). Orange Labs nous a décerné un taux de satisfaction des participants de 90% (octobre 2008).

Préparés et animés par Olivier Duffez (WebRankInfo) et Fabien Faceries (AgentWebRanking), 2 professionnels reconnus dans la profession, nos modules sur le référencement naturel sont très complets tout en laissant une grande place à l'interactivité pour répondre à toutes les questions des participants.

Pour connaître le plan détaillé de chaque module, le prix, les dates et les lieux, cliquez ici pour consulter le site de Ranking Metrics (organisme de formation agréé).

Lectures recommandées sur ce thème :

Laisser une réponse