[experience] Refonte de site

[fandecine]

Hé bien ! me voilà de retour après 3 mois d’absence sur WRI.

J’ai passé le mois de Juin enfermé à double tour dans mon bureau, téléphone débranché (le reste en vacances ), pour refondre complètement le site Fan de Cinéma et je vais tenter de vous faire partager cette expérience délicate.

Mais pourquoi cette refonte ? Plusieurs raisons :

Tout d’abord, j’avais de nombreuses rubriques à ajouter (une dizaine) avec beaucoup de pages (prés de 20.000 !) et j’étais un peu à l’étroit dans l’ancien site.

Ensuite, il me semblait nécessaire de repenser la navigation et la structure du site.

De plus, à la création du site, j’avais volontairement choisi le « underscore » comme séparateur dans les urls en pensant que cela aiderait mon référencement MSN sans trop pénaliser celui de GG. MSN se bornant à ne m’indexer que quelques pages pour un trafic de quelques dizaines de visiteurs / jour, j’ai donc décider de passer au « tiret » et à la « virgule ».

Enfin, j’ai profité de l’occasion pour repenser la structure du site en vue d’une optimisation du référencement sans nuire à la présentation pour l’internaute.

Le travail effectué :

J’ai scindé le site en 6 sous domaines afin de procéder à un référencement distinct de chaque sous domaine:

- www : ce sous domaine contient les quelques 30 000 films de la BDD répartis en sections (sorties, fiches, bandes-annonces, affiches, jaquettes, photos et fond d’écran)

- forum : déjà existant, le forum n’a pas (encore !) été modifié (a chaque jour suffit sa peine !)

- club : ce sont toutes les pages de l’espace membre.

- Actualités : les news existaient déjà et se voient complétés d’articles, d’un annuaire de sites officiels de films ainsi que d’une rubrique reprenant l’ensemble des films prochainement au cinéma

- Programmes : La plus grosse modification avec du contenu entièrement nouveau soit les programmes de quelques 12000 salles de cinéma en France (et oui ! j’utilisais ce contenu sur un autre site mais pas sur Fan de Cinéma) avec une recherche par département, puis ville et la possibilité de trouver où est projeté un film, etc…

- Mobiles : Tout le contenu pour téléphones mobiles est transféré dans ce sous domaine (fonds d’écran, sonneries, affiches) avec maintenant la possibilité de télécharger les photos de films

Les url ont était réécrites en remplaçant le « _ » par le « - » dans les titres et catégories de films et le « _ » par la « , » pour la pagination (…,1.html pour page 1, …,2.html pour page 2 etc…)

Les films étaient classés en 32 catégories qui ont étés conservés en ce qui concerne les urls mais regroupés en 6 méta catégories pour la navigation.

Le menu secondaire de navigation ne fait plus apparaître la liste des catégories de films mais les dernières nouveautés par méta catégorie et par rubrique (fiches, bandes annonces, affiches etc…) L’objectif étant bien entendu de proposer sur la Home Page ou au plus près de celle-ci les nouveautés en vue d’un référencement rapide.


Pour associer l’optimisation des pages pour les robots et pour les internautes, j’ai fait un usage malin du DHTML sur certaines pages.

Les problèmes à résoudre :

Le principal problème auquel je me suis retrouvé confronté était bien entendu de ne pas perdre mon référencement et mon trafic. J’ai donc utilisé intensivement les redirection 301 (seulement une vingtaine de pages ayant gardé la même URL). Afin de vérifier en temps réel le bon fonctionnement de mes nouvelles règles de rewritting et mes redirections, j’ai utilisé un outil de visualisation des en-têtes http de mes pages.

Pour éviter une cohabitation impossible entre les deux versions, j’ai développé la nouvelle version sous un autre domaine temporaire.

Les redirections 301

Il y a de nombreux posts qui reviennent régulièrement sur la façon de faire une redirection 301. J’ai personnellement utilisé deux solutions selon les pages à rediriger.

La première et la plus simple consiste à indiquer la redirection dans le htaccess (je l’ai utilisée pour les pages isolées) :

Code: Tout sélectionner

RewriteRule ^ancienne-page\.html$ /nouvelle-page.html [R=301]

Avec une variante lorsqu’il y avait un changement de sous-domaine :

Code: Tout sélectionner

RewriteRule ^ ancienne-page \.html$ http://nouveau-domaine/nouvelle-page.html [R=301]

La deuxième, un peu plus complexe consiste à passer par un fichier php qui modifie les headers de façon sélective. Par exemple pour rediriger les urls avec un « underscore » comme séparateur vers des urls avec un « tiret » comme séparateur j’ai utilisé le code suivant :

Dans le htaccess :

Code: Tout sélectionner

RewriteRule ^repertoire/([0-9a-zA-Z_]+)/([0-9a-zA-Z_]+)\.html$ /redirect301.php? param1=$1&param2=$2 [QSA,L]

Param1 représente le genre de films, param2 son titre

Le source du fichier redirect301.php :

Code: Tout sélectionner

header("Status: 301 Moved Permanently", false, 301);
header("Location: http://domaine/repertoire/".strtolower(str_replace('_','-',$_GET[‘param1’]."/".$_GET[‘param2’])).".html");

Le fichier redirect301.php étant unique pour tout le site, il est bien sur plus complexe et fait des tests sur la présence et la valeur des paramètres passés mais j’ai réussi à faire l’ensemble des redirections avec 12 lignes dans le htaccess et un script php de 3ko !

Il faut bien évidemment vérifier que la redirection fonctionne bien (et le plus gros boulot est là !) à l’aide d’un utilitaire qui permet de vérifier les headers renvoyés sur l’ancienne et la nouvelle page.

Le résultat :

Il ne faut pas se voiler la face, une telle opération ne vas pas sans perte de trafic sur le site (perte brutale de 20%) mais les premières nouvelles urls sont apparues dans les résultats de recherche des moteurs 3 jours après l’opération (Yahoo a été plus prompt que Google) et la plus grande parties des nouvelles urls étaient prises en compte une dizaine de jours plus tard. Le trafic est revenu à la normale au bout de trois semaines. Il y a des jours où les bots prenaient plus de 30.000 pages ! Ils n’ont pas chômé !

J’utilise spywords Google sitemap pour suivre le crawl des bots et j’ai découvert ça et là des pages non trouvées ou des erreur de redirection et j’ai eu encore quelques corrections à apporter aux réécritures mais rien de grave.

Depuis début Août, je constate une augmentation de 20% du trafic en provenance de Google (stable chez yahoo et msn) malgré la baisse de trafic conjoncturelle traditionnelle pour mon site due aux vacances d’été.

Il faudra attendre fin septembre pour tirer un bilan complet de l’opération, mais je suis tout de même satisfait de l’opération.

et voilà!

A propos, c'est mon 1000 ème post!

Oooops! j'ai oublié de préciser que dans cette nouvelle version du site je n'utilise plus les balises Meta description et Keywords (suite à la lecture d'une étude à ce sujet). Je peux confirmer que cela n'influ pas sur le trafic des moteurs de recherche par contre, les pubs adsense sont bien moins ciblées. Je pense ré-introduire les Méta sur certaines sections du site pour verifier si adsense les utilise pour le ciblage des pubs. a suivre ....

[obi]

Merci, je ne savais pas qu'on pouvait indiquer qu'une rewriteRule était une redirection permanente, c'est mis chez moi ! Et hop, une reco.

[Sumatrapointfr]

Et bien nien joué

je regrette juste les scrolls bar grises sur la page d'accueil

[fandecine]

Et bien nien joué

je regrette juste les scrolls bar grises sur la page d'accueil

Pfuuu! encore un utilisateur de Firefox!

A propos, comment tu les style tes scrollbar sous Firefox!?

[Sumatrapointfr]

c pas possible sous ff si je ne dis pas de bêtises

mais comme dirait l'autre, taka afficher tout ton contenu

[fandecine]

c pas possible sous ff si je ne dis pas de bêtises

mais comme dirait l'autre, taka afficher tout ton contenu

j'ai horreur des pages de trois quilomètres remplies de blancs....j'aime bien les pages web bien organisées!

[obi]

effectivement, pas possible sous ff de colorer les scrolls bars. Et ça me paraît être une bonne idée de toutes les virer, c'est assez frustrant de scroller dans toutes ces petites boîtes, on s'y perd vite.

Au rayon des critiques que j'espère constructives:

Certains liens dans les listes ont égalment une hauteur fixe, ça passe très mal quand on zoome un peu les fontes. Le design est de toutes façons pas très élastique, dommage.

Le nombre important d'images est assez gênant aussi, on a du mal à savoir ou poser ses yeux, ça agrave la disposition quelque peu 'originale' des textes.

La place occupée par la pub est gênante, pour moi il y en a clairement trop.

Sinon, pourquoi tant de style inliné ?

[WebRankInfo]

il est trop fort ce fandeciné : dès qu'il poste il gagne des recos ! Merci pour ce partage d'infos en tout cas

[etrusco]

carrément censuré par moi meme dis donc !

[dd32]

félicitations pour ton 1000eme post, et merci pour ce retour d'expérience fandecine

[fandecine]

La place occupée par la pub est gênante, pour moi il y en a clairement trop.

Et je vie comment moi!

Sinon, pourquoi tant de style inliné ?

Qu'est ce que tu apelle "style inliné"

En fait, l'objet du post n'est pas de recueillir des avis sur le site (je sais ce que je veux!) mais de faire partager une expèrience de redirection 301 massive (des milliers de pages) c'est tout!

[etrusco]

je vais repondre....

en fait tu a trop de styles en dur dans le code html, il vaudrait peut etre mieux passer par un css externe.

et pour moi, j'aime bien ton site meme si je suis pas fan des effets onmouseover, le contenu est impressionant et comme je suis aussi un fan de cinéma ben j'y trouve mon compte !

[obi]

La place occupée par la pub est gênante, pour moi il y en a clairement trop.

Et je vie comment moi!

Ce n'est pas parce que les pubs occupent plus de place que tu gagneras plus. Considère:
1-Que le gens que trop de pub gave ne reviendront pas sur ton site, ni ne feront de liens vers y-celui.
2-Que tu dilues les annonce à fort CPC avec celles qui en on un faible.
3-Un ou deux pubs max attirent beaucoup plus l'attention et donnent plus envie de la lire et donc de la cliquer, qu'un gros pavé indigeste qui clignote dans touts les sens;
Mais bon, ce n'est que mon avis

Sinon, pourquoi tant de style inliné ?

Qu'est ce que tu apelle "style inliné"

C'est l'attribut syle mis directement dans le code html: <div style="margin-top:-254px">

[fandecine]

en fait tu a trop de styles en dur dans le code html, il vaudrait peut etre mieux passer par un css externe.

j'ai des feuilles de styles externes, mais j'ai fait un compromis entre le nombre de styles à definir et à nommer et l'utilisation "inline" . c'est un choix , pas une fatalité. De plus, il y a aussi des styles "inlinés" dynamiques plus simples à gérer "inline" que dans un fichier .css

Pour tout te dire, les site se résume à une cinquantaine de scripts php, c'est tout! Plus il y de fichier plus c'est... ingérable! Alors j'ai fait des choix.

[fandecine]

Ce n'est pas parce que les pubs occupent plus de place que tu gagneras plus. Considère:
1-Que le gens que trop de pub gave ne reviendront pas sur ton site, ni ne feront de liens vers y-celui.
2-Que tu dilues les annonce à fort CPC avec celles qui en on un faible.
3-Un ou deux pubs max attirent beaucoup plus l'attention et donnent plus envie de la lire et donc de la cliquer, qu'un gros pavé indigeste qui clignote dans touts les sens;
Mais bon, ce n'est que mon avis

Obi, de tous les sites de cinéma, je dois être celui qui embarque le moins de pub! Il y a 3 espaces pub par pages (c'est mon contrat avec ma régie) dont un occupé par adsense (intégré de façon discrete d'ailleurs). De plus, je suis rémunéré au CPM!

Mais, il serait préférable de clore cette discussion (ou de la continuer en MP) pour en revenir au coeur du sujet qui concerne la refonte de site et le référencement.