Tuto : guide du référencement d'un site en Flash

Cet article fait partie des archives de WebRankInfo : certes, il est ancien, mais complet et détaillé pour son époque. Si vous cherchez d'autres informations, faites une recherche sur le site ou participez au forum. Contactez-moi si besoin.

Article mis à jour le 14/01/2015, publié initialement le 04/08/2008

A cause du mobile, Flash c'est fini !

Je laisse en ligne tout ce tuto Flash et SEO, même si mon conseil est très simple : abandonnez le Flash ! En effet, il n'est pas compatible avec les mobiles (iPhone et iPad sur iOS, tablettes et smartphones Android, et sans doute Windows Phone).

Si vous avez encore un site en Flash et que vous ne pouvez pas encore le refaire, suivez le reste de 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.

Concrètement, tant que ce contenu alternatif est similaire à celui du Flash, vous ne prenez pas de risques vis-à-vis des consignes des moteurs. Attention à la tentation de suroptimiser ce contenu...

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)

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)

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.

En 2006, le patch de IE pour Flash

cch, un membre de WRI, nous apprend qu'un nouveau patch IE de cette semaine modifie la manière dont IE affiche les plugins avec la balise <object>, <embed> ou <applet>. Cette modification vient suite à un procès en violation de brevet logiciel que Microsoft a perdu face à Eolas, ce n'est pas une problématique de sécurité.

Macromedia fournit des conseils pour conserver le fonctionnement habituel des flash à l'aide d'un code JavaScript.

Une discussion dans le forum fut l'occasion de rappeler quelques points sur l'optimisation du référencement Flash :

• la méthode longuement indiquée (même sur WRI...) consistant à utiliser la balise noembed n'est pas conforme aux recommandations du W3C.
• la bonne méthode consiste tout simplement à utiliser du texte alternatif situé à l'intérieur même de la balise object.
• en option, on peut utiliser la balise embed (en plus de object) à destination des navigateurs gérant mal la balise object, mais il n'est pas nécessaire d'utiliser noembed

Szarah, autre membre du forum, nous fournit un exemple :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" id="_011105" width="45" height="60"> <param name="movie" value="011105.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#000033"> <embed name="_011105" src="011105.swf" quality="high" bgcolor="#000033" width="45" height="60" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" > </embed> ICI, LE TEXTE ALTERNATIF QUE LE ROBOT LIRA DANS TOUS LES CAS </object>

Google indexe le Flash depuis avril 2004

Le référencement du Flash a toujours posé problème, car Google n'indexe que très mal ce type de fichier. On savait que Google pouvait trouver les liens dans les animations Flash, mais l'indexation se limitait aux recherches de liens. Ce type de lien est d'ailleurs compté en tant que backlink et participe donc au PageRank. Google prouve aujourd'hui qu'il est capable d'indexer le texte présent dans les animations Flash.

Exemple avec une page qui inclut un fichier .swf (Flash) sans utiliser de balise noembed pour décrire l'objet Flash : le 1er résultat de la requete papeterie services cartes n'est pas une page HTML mais bien l'animation Flash, qui contient effectivement ces mots. La description de la page affichée par Google pour la requête papeterie cartes filetype:swf : Les Krikounettes Papeterie Services Cartes Postales Le coin "salon" Paint Shop Pro Liens Jeux, détente Les Krikounettes Papeterie Services Cartes Postales Le ...

Ce texte vient uniquement du fichier Flash.

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.