• Home
• Contact
• Forum
• Plan du site

Référencer au mieux un site flash

Le 21 novembre 2007

Voici une méthode que je propose pour référencer au mieux un site full flash dynamique. je reviens sur un article que j’avais écris il y a maintenant un petit moment, mais qui n’a jamais vraiment été achevé.

Utilisation de deux systèmes d’url :
-un format pour la navigation et les utilisateurs (que j’appelerai “format user” tout au long de l’article pour plus de lisibilité)
-un format pour le référencement (que j’appelerai “format robots” )

Le format user est un format type ancre nommée, que la classe ExternalInterface de flash permet de modifier directement dans la barre de navigation, sans recharger la page.
Certaines classe comme swfAddress permettent de faire la même chose avec des fonctionnalités en plus que l’on n’abordera pas ici.
Il permet alors de faire des liens directs vers vos pages flash, comme on le ferai sur une page html, et donc facilite la navigation pour l’utilisateur.
http://www.lutincapuche.com/#4-18-monArticle
4 et 18 sont respectivement l’id de la catégorie et l’id de l’article à afficher, qui, une fois parsés en js puis transmis au flash, permettront d’afficher les bonnes informations dans le flash.
monArticle est le titre de l’article, qui permet d’expliciter l’url à l’utilisateur. Cette information n’est pas indispensable.

Le format robots permet d’optimiser le référencement, puisqu’il permet de créer virtuellement chaque page, et de générer le contenu alternatif du flash en fonction de la page appelée.
http://www.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=18

Pourquoi deux types d’url?

• Google ne considère pas que les pages
  http://www.lutincapuche.com/wp-flashblog/#4-18-monArticle
  et
  http://www.lutincapuche.com/wp-flashblog/#4-19-monArticle2
  soient différentes, puisque les urls ne contiennent que des ancres nommées.
  Par contre
  http://www.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=18
  et
  http://www.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=19
  sont 2 pages disctinctes, comme dans tout site dynamique.

• Flash ne permet pas de modifier l’url de la barre de navigation d’une autre manière qu’avec un # ou sans rien, il n’est pas possible d’y inscrire directement les variables en get avec le ?, car dans ce cas, la page est rechargée.

C’est donc le format robots que l’on va utiliser pour optimiser le référencement, c’est à dire le sitemap et le contenu/menu alternatif.
Il faut bien sur que les 2 formats d’url mènent à la même page flash, donc traiter les 2 cas pour récupérer les id catégorie et article dans votre page php ou asp.

Voila sur le principe, je vais maintenant décrire chaque étape, avec des exemples pour être plus claire. Ces exemples sont basés sur le flogMaker, mon plugin worpdress.

• 1. Choix du format d’url

• 2. Ecriture de l’url format user depuis flash

• 3. Format user: récupération des idArticle et catégorie au chargement de la page

• 4. Format robots: récupération des variables et création du contenu alternatif

• 5. Affichage du flash à la bonne page

• 6. Génération du plan sitemap.xml

• 7. Liens utiles

1. Choix du format d’url

format user: http://www.lutincapuche.com/#idCategorie-idArticle-titreArticle
format robots: http://www.lutincapuche.com/index.asp?idCat=idCategorie&idArticle=idArticle&titre=titreArticle

C’est bien de mettre le titre de l’article dans le format robots car le contenu de l’url est pris en compte par les moteurs de recherche.
Ces formats dépendent de vos besoins, un seul id peut suffir, à vous de voir.

2. Ecriture de l’url format user depuis Flash

Le code AS2, disponible à partir de Fash 8, qui permet d’écrire dans la barre de navigation :

//importation de la classe
import flash.external.ExternalInterface

//definition de la fonction de reecriture
function reecriture_url(tag){
	ExternalInterface.call('eval', 'location.href="http://www.lutincapuch
	e.com/#'+tag+'" ');
}

//on appelle la fonction sur une action de l'utilisateur par exemple
monBouton.onPress=function(){
	monTag = this.idCategorie+"-"+ this.idArticle +"-"+this.titreArticle;
	reecriture_url(monTag) ;
}

3. Format user: récupération des variables

Au chargement de la page html, si l’url ne contient pas les variables GET recherchées :

-Parsage javascript de l’url pour voir si elle contient les id catégorie et article après le #.
-Passage des paramètres en variables au flash

Exemple:

<script language="javascript">
function retourne_cat(){
	var url = url.substr(posparamUrl+1,500);
	var paramUrl = url.substr(url.indexOf("#",0)+1,500);
	var chaineCategorie = paramUrl.substr(0,paramUrl.indexOf("&",0));
	var idCategorie = chaineCategorie.substr(chaineCategorie.indexOf("="
	,0)+1,100);
	return idCategorie;
}

function retourne_art(){
	var url = window.location.href;
	var paramUrl = url.substr(url.indexOf("#",0)+1,500);
	var chaineCategorie = paramUrl.substr(0,paramUrl.indexOf("&amp;",0));
	var idCategorie = chaineCategorie.substr(chaineCategorie.indexOf("="
	,0)+1,100);
	var reste = paramUrl.substr(paramUrl.indexOf("&amp;",0)+1,500);
	var chaineArticle = reste.substr(0,reste.indexOf("&amp;",0));
	var idArticle = chaineArticle.substr(chaineArticle.indexOf("=",0)+1
	,100);
	return idArticle;
}
</script>

Puis lors de l’insertion du flash:

<script type="text/javascript">
var categorie = retourne_cat();
var article = retourne_art();
var so = new SWFObject("index.swf?idCategorie="+categorie+"&amp;idArticle="
+article", "LutinCapucheBlog", "100%", "100%", "8", "#000000");
so.addParam("scale", "noscale");
so.addParam("allowdomain", "always");
so.addParam("idCategorie", categorie);
so.addParam("idArticle", article);
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");
</script>

4. Format robots: création du contenu alternatif

On vérifie les variables passées en GET. Si l’url contient ces variables, on remplie le header avec les informations sur l’article que l’on peut alors aller chercher en base (titre, date, description, contenu pour le référencement).
Le contenu alternatif du Flash doit contenir ces informations pour qu’il puisse être scanné pertinement par les robots des moteurs de recherche.
Pour optimiser le référencement, je vous conseille aussi de générer l’équivalent de votre menu flash sous forme de liste item, et en utilisant le format d’url contenant les variables en GET pour être considéré comme un lien et pas une ancre nommée.
Ne pas oublier de passer au flash les variables PHP et non les variables récupérées en javascript.

Exemple:

<div id="flashContent">
	<ul><li>menu1</li><li>menu2</li>...</ul>
	<p><?= $titre ?><?= $description ?><?= $date ?></p>
</div>
...

<?if ($idCat!=null & $idCat!=""){?>
var categorie = <?=$idCat;?>;
var article = <?=$idArticle;?>;
<?}else{?>
var categorie = retourne_cat();
var article = retourne_art();
<?}?>

5. Ouverture du flash à la bonne page

Là, à vous de gérer dans le flash, chaque cas est tellement différent.
Vous récupérez les variables en _root sur le flash appelé, avec le nom renseigné dans le javascript. (ici idCategorie et idArticle).

6. Génération du plan sitemap.xml

Faites un petit script php qui génère automatiquement le fichier sitemap.xml à chaque nouvel insert ou suppression d’article.
Ici, on crée une entrée pour chaque article, en utilisant le format robots d’url pour que chaque article soit considéré comme une page:

Exemple:

<?php
$reqContenu="SELECT * FROM wp_posts WHERE post_status='publish'";
$resultPage=$wpdb->get_results($reqContenu);

$filename = 'sitemap.xml';
$var = "";
$var = $var."<?xml version='1.0' encoding='UTF-8'?>";
$var = $var."<urlset xmlns='http://www.google.com/schemas/sitemap/0.84' ";
$var = $var."xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' ";
$var = $var."xsi:schemaLocation='http://www.google.com/schemas/sitemap/0.84";
$var = $var."http://www.google.com/schemas/sitemap/0.84/sitemap.xsd'>";
$myURL="http://www.lutincapuche.com";


if(!$resultPage){
}else{
	foreach($resultPage as $e){	
		$UrlArticle="index.php#idCat=".$e->ID_cat."&idArticle=".$e->ID;
		$var = $var."<url>";		
		$var = $var."<loc><![CDATA[".$myURL."/".$UrlArticle."]]></loc>";
		$var = $var."<lastmod>".$e->post_date."</lastmod>";
		$var = $var."<changefreq>daily</changefreq>";
		$var = $var."<priority>0.9</priority>";
		$var = $var."</url>";
	}
	$var = $var."</urlset>";
	// Assurons nous que le fichier est accessible en écriture
	if (is_writable($filename)) {	   
	   if (!$handle = fopen($filename, 'w')) {
	         echo "Impossible d'ouvrir le fichier ($filename)";
	         exit;
	   }
	   // Ecrivons quelque chose dans notre fichier.
	   if (fwrite($handle, $var) === FALSE) {
	       echo "Impossible d'écrire dans le fichier ($filename)";
	       exit;
	   }	  	  
	    fclose($handle);
	} else {
	   echo "Le fichier $filename n'est pas accessible en écriture.";
	}
}
?>

Il ne reste qu’à lier ce sitmap.xml à votre site flash en utilisant le WebmasterTools de Google.

---

Et la boucle est bouclée. Votre site flash pourra être référencé de manière beaucoup plus efficace que si vous ne faites rien, puisque qu’au lieu d’une simple et unique page, les moteurs de recherche trouveront autant qu’il existe d’articles ou de pages dynamiques.

Si vous avez des propositions pour encore améliorer le système, n’hésitez pas !

7. Liens relatifs

• swfAddress: swf address est une classe permettant de changer facilement le nom d’une page depuis Flash, avec quelques options supplémentaires par rapport à la classe external Interface. Par contre elle ne permet pas de mieux référencer son site.
• swfObject: swfObject est un petit script Javascript utilisé pour inclure un contenu swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC) et est conçu pour rendre l’intégration des swf aussi simple que possible. L’intégration dans la page est très propre il peut être employé dans les documents valides HTML et XHTML 1.0 *, et est compatible avec les spécifications futur, ainsi vous pourais continuer a l’utiliser pendant les prochaines années a venir.
• xml-sitemap : Un générateur de sitemap gratuit, qui permet de voir le format exact d’un sitemap ou de le générer pour un site dynamique classique
• flogMaker : Mon plugin wordpress qui met en pratique ce tutorial, et ici la page du plugin

Commentaires

Chercher

Tag Cloud

• Catégories

  • CSS
  • Divers
  • Flash 8
  • Flash AS3
  • Flashdocs
  • Javascript
  • Plugins Wordpress
  • Webdesign

• • Plugins

    • FlashDOCS v0.1
    • Flog Maker : Plugin WP
    • Lc Tags : Plugin WP
    • LcGalerie

• Derniers commentaires

  • Ronnie commented on LcGalerie release : classe de création de galerie as2
  • LutinCapuche commented on LcGalerie release : classe de création de galerie as2
  • Ronnie commented on LcGalerie release : classe de création de galerie as2
  • Jujue commented on Plugin WP LCTags
  • Ronnie commented on LcGalerie release : classe de création de galerie as2

• Derniers Posts

  • Expo onekon7@republink: des étoiles pleins les yeux :)
  • Tuto flash : faire un caroussel v2
  • LcGalerie release : classe de création de galerie as2
  • Bonjour Nouvelle mise à jour de Flash Player
  • LcGalerie : classe de création de galerie d’images AS2
  • Lc Tags : Plugin WP - EN
  • Plugin WP LcTags Release 1.0.1
  • Flickr rencontre l’AS3 et PV3D
  • Portfolio LutinCapuche v3.0
  • Bonne année 2008 et joyeux ActionScript !

• Archives

  • juin 2008
  • mai 2008
  • avril 2008
  • mars 2008
  • février 2008
  • janvier 2008
  • décembre 2007

• RSS Feeds

  Séminaire en ligne vendredi 27 juin,"Flex"

  Posted 11 days ago

  Festival d'Annecy, séance de rattrapage au Centre Pompidou

  Posted 17 days ago

  Adobe SwitchBoard : connecter AIR à la Creative Suite...

  Posted 17 days ago

  Adobe AIR 1.1 : update....

  Posted 17 days ago

  Acrobat 9 Pro: Utilisation de la technologie Flash pour personnaliser les documents PDF

  Posted 19 days ago

• Liens

  • daweed.info
  • Eiie Design
  • Excargot.net
  • Ganesha
  • Monsieur-vd
  • onekon7::Blog
  • Plugin WorldPress
  • SilverFox
  • Switch2savoies
  • Tetsouille
  • Thomas Pfeiffer