Référencer un site en flash avec SWFObject

12
Référencer un site en flash avec SWFObject

La technologie flash d’Adope  acquiert de plus en plus d’adepte pour le bonheur et le confort des internautes. Le problème survient au moment du référencement de ces sites ! C’est là toute la difficulté de l’exercice !

Il existe quelques méthodes pour optimiser et référencer un site en flash. Parmi elle:

La méthode de la balise NOEMBED
La méthode Flash Satay (utilisation de le balise “Object”)
La méthode SWFObject (javascript) …etc

je m’attarderai sur la dernière méthode qui est, me semble-t-il, la meilleure methode à utiliser.

Je me propose aujourd’hui de vous présenter cette méthode et de faire le tour de la question du référencement d’un site en flash pour répondre à quelques interrogations du type :

  • Est-il possible de bien référencer un site en flash ?
  • Quelle méthode utiliser pour rendre une structure en flash référençable ?
  • Comment appliquer la méthode SWFObject
  • Quelles techniques à éviter lors de l’optimisation d’un site en flash?
  • …etc.

Référencement d’un  site en flash

Le flash est référençable par les moteurs de recherche depuis très longtemps. Il suffit de taper la commande « typefile :swf » dans un moteurs de recherche tel que Google pour vous apercevoir que Google compte dans son index plus de 80 millions de flash.

Il existe deux structures de site en flash.

1.    Site dont le contenu est complètement embarqué dans un seul  flash : cette structure ne permet le référencement que d’une seule page généralement la home page qui contient en tout et pour tout une seule animation qui contient tout le site.

2.    Site qui utilise excessivement les animations flash mais qui dispose d’une url propre pour chaque contenu (une url par animation flash). Dans ce cas le travail est à moitié fait ! il suffit de créer une bonne structure HTML qui affichera un contenu alternatif à la fois pour les internautes ne disposant de lecteur flashe et pour les moteurs qui pourront crawler et indexer les contenus alternatifs aux flashs.

Remarque:
Si vous été dans le premier cas de figure, il est donc plus que temps d’exploser votre site en plusieurs animations flash de manière à avoir autant d’animations flash que de contenu (de page) sur votre site. Une fois cette étape franchie, il faudra optimiser les pages pour être bien positionné.

Comment bien référencer et obtenir des positions pour un site en flash

Il existe plusieurs méthodes pour rendre une structure flash bien référençable. L’une d’entre elle est l’utilisation de la méthode SWFObject en JavaScript pour intégrer le flash dans une page HTML. C’est l’une des meilleures méthodes à utiliser et donc les résultats sont très satisfaisants.

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

Voici un exemple d’intégration d’une animation flash avec SWFObject :

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, “#336699″);
so.write(“flashcontent”);
</script>

Application de la méthode SWFObject sur un site en flash :

On part du principe que votre site en flash dispose d’une animation par page ou contenu. Si votre site contient tout le contenu dans une seule animation flash, il faudra éclater cette animation de manière à obtenir autant d’animation qu’il y a de contenu.

Une fois la première étape accomplie, il faudra créer autant de page html qu’il y a d’animation et d’appeler le flash dans chacune d’elles en prenant soin de mettre en place un contenu alternatif pour les moteurs.
Cette technique permettra d’avoir des pages optimisées pour des requêtes particulières et d’augmenter ainsi vos chances d’être bien positionnés dans les moteurs. Cela permettra aussi de renseigner le heading de bien structurer votre contenu (h1, h, h3, p, strong…)

voici une structure de page html optimisée :

<html>
<head>
<title>Votre type optimisé</title>
<meta name=”description” content =”Votre mmeta description dans cet espace” />
<style type=”text/css” src =”style.css”></style>
<script  type= “text/javascript ” src=”swfobject.js”></script>
</head>
<body>
<div id=”flashcontent”>
<h1>Titre de la page </h1>
<p><strong>Mon premier paragraphe</strong></p>
<h2>mon sous titre</h2>
<p>mettre du texte des images …etc</p>
</div>
<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, “#336699″);
so.write(“flashcontent”);
</script>

</body>
</html>

Explication de la méthode:

contrairement aux pages satélites, la solution du SWFObject n’attire pas l’utilisateur sur un contenu qu’il croit etre le bon pour finalement le rediriger vers un contenu alternatif. Avec cette méthode, vous proposerez à l’internaute ainsi qu’au moteurs exactement le même contenu mais en appliquant le principe de “dégradabilité” (en anglais “Repository”) qui s’appuye sur la superposition des couche, le flash étant une couche de présentation ou d’habillage au même titre que les CSS comme le montre l’illustration suivante:

Comme vous l’avez compris, cette méthode passe par 3 étapes clés :

1. Récupérer le fichier swfobject.js et le mettre sur votre site. Il suffit par la suite de l’appeler dans votre <head>. Vous pouvez télécharger tous les fichiers (.js et .swf) néceaaires pour mettre en place cette méthoe à cette adresse.

2.    Créer le <div id=”flashcontent”> qui contiendra le contenu alternatif de la page en flash. N’hésitez pas de le mettre en forme en css et surtout de l’optimiser comme vous feriez pour un contenu en html normal. C’est ce que les moteurs verront de votre page ! plus ce div sera optimisé et plus vous aurez de chance d’être bien positionnés.

3.    Faire appel au flash avec la fonction JavaScript SWFObject. Pour résumer, le SWFObject vérifie si le navigateur de l’internaute dispose du lecteur flash adéquat, si cette vérification est concluante alors il affiche l’animation flache à la place du contenu du <div id=”flashcontent”>. Dans le cas contraire il affiche le <div id=”flashcontent”> tel que vous l’avez renseigné en html.

Utiliser Express Install avec SWFObject

Vous pouvez aller plus loin en proposant aux internautes de télécharger le lecteur flash ou la mise à jour qu’il faut. En effet, SWFObject supporte pleinement l’installation Express de Flash (Macromedia Flash Player Express Install). Express Install travaille avec SWFObject pour commencer une mise à jour dans votre Flash.

Vos utilisateurs n’ont pas à quitter votre site pour mettre à jour leur Player, et quand l’upgrade est fini, ils retournent automatiquement à la page depuis laquelle la mise à jour à été lancé.
Pour cela, il faut mettre le fichier expressinstall.swf sur votre serveur et de rajouter une ligne de code à votre appel à SWFObject comme ceci :

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “200”, “100”, “8”, “#336699″);
so.useExpressInstall(‘expressinstall.swf’);
so.write(“flashcontent”);
</script>

Techniques à éviter pour améliorer le positionnement d’un site en flash

Les techniques qui ont suivre sont contraire aux chartes de qualités des moteurs de recherche. Il est donc fortement déconseillé des les utilisés pour positionner vos sites en flash !

1.    La balise NOEMBED :

procédé trop de fois utilisé pour des fins malhonnêtes. Les moteurs ne sont plus dupes et reconnaissent les procédés destinés à les tromper.

2.    Le cloacking :

consiste à mettre en place une détection du visiteur par User-Agent ou par IP et de proposer un contenu différent selon la nature du visiteur (Crawler ou navigateur).

3.    Pages satellite ou Doorway pages:

consiste à créer des pages cachée très optimisées avec redirection en JavaScript. Au même titre que le cloacking, cette technique est fortement pénalisée par les moteurs.

12 Responses for this post

  1. meteo-scope
    meteo-scope
    | |

    petit souci avec les < “”
    J’indiquais qu’il y a une petite erreur car il faut mettre id=”flashcontent” dans la balise div.

    Reply
  2. Dan
    Dan
    | |

    Comme au final “c’est caché” à l’internaute je trouve cela border line. Et certains comme pour la balise vont en abuser je pense. Maintenant si c’est le reflet de ce qu’il y a réellement dans la page, sans excès, why not

    Reply
  3. Referencement
    Referencement
    | |

    Bonjour,
    Je n’ai jamais utilisé cette méthode avec SWFObject, moi j’utilise plus la balise NOEMBED et je trouve que ça marche assez bien.

    Reply
  4. benjamin935
    benjamin935
    | |

    Je suggère l’utilisation de la version 2 de swfobject qui simplifie encore plus la tâche pour rendre le code optimisé pour le référencement.

    Reply
  5. David
    David
    | |

    Cette méthode est en effet la plus efficace pour le référencement mais elle est grandement utile pour l’internaute qui des qu’il fait un retour ne se retrouve plus sur la home mais bien sur l’animation/page précédente.

    Mais sinon, très bon article et précis. Merci !

    Reply
  6. Grunt
    Grunt
    | |

    Cette méthode est très bien, pour une raison simple: tout le monde n’a pas installé Flash.
    – ceux qui ne veulent pas l’installer pour diverses raisons (j’en fais partie),
    – ceux qui ne peuvent pas l’installer : on n’a pas tous Windows XP sur processeur x86,
    – ceux pour qui Flash n’est pas user-friendly: possesseurs de PC lents (Flash consomme pas mal), handicapés moteurs ou visuels.

    Pour toutes ces raisons, fournir un contenu alternatif à Flash, dans un , et SURTOUT proposer dans ce contenu l’équivalent de l’animation Flash (lien direct vers la vidéo, texte explicatif si l’animation explique quelque chose, menu en HTML si l’animation est un menu, etc..) est à la fois très bon pour l’indexation ET très bon pour l’ensemble des internautes.

    Ce n’est donc pas “border line” ou “spammy” si c’est fait correctement, car ce que le moteur de recherche aime est aussi ce qui sera le plus universellement lisible ;)

    Reply
  7. Christophe
    Christophe
    | |

    Salut,
    c’est l’un des tuto les plus clairs, simples et les plus complets que j’ai lu jusqu’à présent.
    Donc, merci à toi, bon boulot, tu gagnes un lecteur assidu de ce fait :-).

    Reply

Leave a Reply

Name
Name*
Email
Email *
Website
Website