Optimiser son site flash pour le SEO
Au cours des dernières années Google nous a annoncé faire d’énormes progrès en termes d’indexation des sites flash.
Désormais il est vrai que l’on peut retrouver du contenu de nos vieux sites flash, que l’on croyait inaccessible et perdu à jamais, dans les résultats de recherche de Google. Malheureusement la manière dont est indexé ce contenu est un peu aléatoire et difficilement contrôlable. C’est pourquoi il ne faut pas laisser Google dans le noir et lui donner un petit coup de main.
La technique utilisée pour optimiser les résultats de recherche Google sur un site flash consiste en :
- Créer une page HTML par section de contenu du fichier flash
- Utiliser SWFObject pour cacher le contenu HTML dupliqué
En utilisant cette technique vous montrerez un joli contenu animée et organisée en Flash à tous vos utilisateurs ayant javascript activé et montrerez un site HTML brut à base de textes et images pour les moteurs de recherche.
La création de plusieurs pages HTML permet de faire apparaître une arborescence pour Google alors qu’auparavant l’intégralité de votre site flash apparaissait sur une seule page.
Puis la réécriture du contenu flash en HTML permet de parler la langue de Google, hiérarchiser l’information et connecter les différentes sections de votre site.
Voila à quoi un site ayant trois sections en Flash ressemblerait en utilisant cette technique:
Section 1 HTML:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
swfobject.embedSWF("siteFlash.swf", "flashDiv", "600", "400", "9.0.0");
// --></script>
<!-- end swfobject code -->
<div id="flashDiv">
<h1>Titre section 1</h1>
Contenu specifique section 1.
<ul>
<li><a href="section1.html">Section 1</a></li>
<li><a href="section2.html">Section 2</a></li>
<li><a href="section3.html">Section 3</a></li>
</ul>
</div>Section 2 HTML:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
swfobject.embedSWF("siteFlash.swf", "flashDiv", "600", "400", "9.0.0");
// --></script>
<!-- end swfobject code -->
<div id="flashDiv">
<h1>Titre section 2</h1>
Contenu specifique section 2.
<ul>
<li><a href="section1.html">Section 1</a></li>
<li><a href="section2.html">Section 2</a></li>
<li><a href="section3.html">Section 3</a></li>
</ul>
</div>Section 3 HTML:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
swfobject.embedSWF("siteFlash.swf", "flashDiv", "600", "400", "9.0.0");
// --></script>
<!-- end swfobject code -->
<div id="flashDiv">
<h1>Titre section 3</h1>
Contenu specifique section 3.
<ul>
<li><a href="section1.html">Section 1</a></li>
<li><a href="section2.html">Section 2</a></li>
<li><a href="section3.html">Section 3</a></li>
</ul>
</div>Comme vous pouvez le constater les 3 pages sont quasiment identiques dans cet exemple, elles chargent toutes le même fichier swf. La seule partie variable se trouve dans la div de chargement flash « flashDiv », dont le contenu brut sera remplacé au moyen de SWFObject au chargement de la page.
Cette méthode améliorera considérablement la qualité de votre référencement dans les différents moteurs de recherche, toutefois il restera quelques petits détails de logique a régler par la suite. Quelque soit la page qu’un visiteur accédera depuis Google, que cela soit la section 1, 2 ou 3, le contenu affiché par le fichier Flash sera le même. Pour améliorer l’expérience utilisateur et donc afficher le bon contenu en fonction de la page d’accès il vous faudra utiliser SWFAddress, un script Actionscript et Javascript permettant la navigation dans un fichier flash à partir des paramètres passés dans l’URL.