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.blog.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.blog.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.blog.lutincapuche.com/wp-flashblog/#4-18-monArticle

    et

    http://www.blog.lutincapuche.com/wp-flashblog/#4-19-monArticle2

    soient différentes, puisque les urls ne contiennent que des ancres nommées.
    Par contre

    http://www.blog.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=18

    et

    http://www.blog.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

format user: http://www.blog.lutincapuche.com/#idCategorie-idArticle-titreArticle
format robots: http://www.blog.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:




Puis lors de l’insertion du flash:




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:


  • menu1
  • menu2
  • ...

... var categorie = ; var article = ; 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:


get_results($reqContenu);

$filename = 'sitemap.xml';
$var = "";
$var = $var."";
$var = $var."";
$myURL="http://www.blog.lutincapuche.com";


if(!$resultPage){
}else{
	foreach($resultPage as $e){	
		$UrlArticle="index.php#idCat=".$e->ID_cat."&idArticle=".$e->ID;
		$var = $var."";		
		$var = $var."";
		$var = $var."".$e->post_date."";
		$var = $var."daily";
		$var = $var."0.9";
		$var = $var."";
	}
	$var = $var."";
	// 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