Site avec beaucoup (trop) de javascript

Moufle2mer · 5 Novembre 2012

Bonjour à tous,

Notre petite association musicale s'est doté d'un site : lestud.org.

Et notre site use et abuse de jquery/javascript ce qui est fortement déconseillé si j'ai bien lu les sujets de votre forum.

Voilà les deux principaux problèmes :

1) Sur ma page principale, tous les liens font appel à l'url rewriting géré par mon javascript ce qui fait que ce si je désactive ce dernier je suis redirigé vers 404. D'ailleurs c'est même pire, ma page ne s'affiche pas du tout.

2) Ces mêmes sous-pages sont regroupées toute dans un seul fichier php où le javascript pioche pour mettre à jour une partie de la page.

D'où ma question : comment faire pour que ce site redirige bien les robots de google vers de belles pages et ce à moindre frais (c'est-à-dire en ayant pas à recoder tout le site) ?

Merci d'avance pour vos réponses.

P.S.: Evidemment s'il y a besoin que je poste tout le code il suffit de me le demander.

wattie · 5 Novembre 2012

C'est vrai que se n'est pas très judicieux d'utiliser le JS pour l'ensemble de la navigation, surtout pour naviguer de pages en pages. Puisque le site semble jeune et qu'il n'y a pas beaucoup de contenu, c'est peut-être le moment de remédier à cela. C'est sûr que ça optimisera le potentiel SEO de ton site, en tout cas l'indexation.

Après l'emploi du js est dans l'air du temps et si un utilisateur s'amuse à désactiver le JS, il se prive lui même de pas mal de ressources.

KOogar · 6 Novembre 2012

très jolie site

- pour chacune de tes pages met une balise title différente dans le head
- utilise les balises <h1><h2> sur tes pages (regarde sur le forum, tu trouveras beaucoup de topics sur ces balises)
- enlève les pages vides
- sort les images du JS pour les indexer proprement
- gère l'erreur 404 (idem, regarde sur le forum, tu trouveras beaucoup de topics à ce sujet)

Moufle2mer · 7 Novembre 2012

Merci à tous les deux pour les deux pour vos réponses (et pour le compliment).

Avant de répondre à vos remarques désolé mais comme je cherche en parallèle à améliorer mon référencement le site est modifié dans tous les sens (je sais c'est pas bien...mais je suis tellement stressé).

Je promets de ne plus toucher au site pendant disons 48h.

A l'origine il y a deux codes principaux que je donne juste après. Si on se concentre juste sur l'architecture (c'est-à dire deux pages php, une principale et une autre dans laquelle javascript vient piocher) suis-je parti pour être mal référencé.

Si oui, comme amélioré (j'ai bien compris pour les balises h1 et h2, les erreurs 404 qui n'ont plus lieu d'être, les images qui sont dans le php).

Merci d'avance pour vos réponses.

P.S.: Maintenant pour les pages vides est-ce vraiment nécessaire étant donnée quelles sont dans le gros fichier des sections...Est-ce que Google comprend que j'ai plusieurs pages ? et dois-je mettre une balise title différente pour chaque sections dans le second gros fichier.

1) La page de bienvenue :

Code:

<!DOCTYPE html> 
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="language" content="fr" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<title>Le Stud. - Studio de Repetition et d'Enregistrement à Nice</title>
		
		<meta name="title" content="Le Stud. - Studio de Repetition et d'Enregistrement à Nice" />
		<meta name="author" content="Cyrus Z." />

		<meta name="description" content="Association musicale : locaux de repetition, d'enregistrement, cours de musique, concert dans la région de Nice - Alpes-Maritimes" />
		<link rel="image_src" href="img/logo2.png" />		

		<meta name="robots" content="index, follow" />
		<meta name="keywords" content="studio, répétition, nice, repetition, enregistrement, studio de repetition a nice, studio repetition, répéter, nice 06, locaux pour répéter, stud de repete, association, association musicale, Alpes-Maritimes, local de repetition">
		<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--		<meta name="viewport" content="height=600" />-->
		
		<link rel="shortcut icon" href="img/logo2.png" type="image/vnd.microsoft.icon" />
		<link rel="icon" href="img/logo2.png" type="image/png" />
		<link rel="apple-touch-icon" href="img/logo2.png" type="image/png" />

		<link href="css/test.css" rel="stylesheet" type="text/css" />
		<script src="js/lib/modernizr-1.5.min.js"></script>
		<!--[if IE]>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
		<![endif]-->		
	</head>
	<body>


		<div id="getting-ready"></div>
		<div id="container" style="display:none">
			<header id="main_header">
				<h1><a href="home">Le Stud</a></h1>
			</header>
			
			<nav id="menu">
				<ul>
					<li><a class="red" href="presentation/enregistrement">Présentation</a>
						<ul>
							<li><a href="presentation/enregistrement" rel="2">Enregistrements</a></li>

							<li><a href="presentation/repetitions" rel="3">Répétitions</a></li>
							<li><a href="presentation/groupes" rel="11">Les groupes</a></li>
							<li><a href="presentation/evenements" rel="10">Evénements</a></li>
							<li><a href="presentation/profinde" rel="4">Professeurs indépendants</a></li>
							<li><a href="presentation/partenaires" rel="5">Partenaires</a></li>
							<li><a href="presentation/annonces" rel="8">Petites Annonces</a></li>
							<li><a href="presentation/association" rel="9">Associations</a></li>
						</ul>
					</li>	
					<li><a class="red" href="info">Info/Contact</a></li>
				</ul>
		
			</nav>
				
			<div id="content">
				<div id="content_wrapper">
					<section>
						<a href="presentation/enregistrement" rel="2">
							<img src="img/presentation/2.jpg" alt="Enregistrement"/>
							<cite>Enregistrements</cite>
							<p>Studio équipé pour enregistrement de groupe.<br /></p>
						</a>
					</section>
					<section>
						<a href="presentation/repetitions" rel="3">
							<img src="img/presentation/3.jpg" alt="repetition" />
							<cite>Répétitions</cite>
							<p>Studios de répétition équipés disponibles pour musicien et groupes.<br /></p>

						</a>
					</section>
					<section>
						<a href="presentation/groupes" rel="11">
							<img src="img/presentation/5.jpg" alt="Groupes jouant au Stud."/>
							<cite>Groupes</cite>
							<p>Actualité musicale des groupes répétant au "Stud.".<br /></p>

						</a>
					</section>
					<section>
						<a href="presentation/evenements" rel="10">
							<img src="img/presentation/10.jpg" alt="Concerts"/>
							<cite>Evénements</cite>
							<p>Evénemments en association avec "Le Stud.".<br /></p>
						</a>
					</section>
					<section>
						<a href="presentation/profinde" rel="4">
							<img src="img/presentation/4.jpg" alt="Cours de musique"/>
							<cite>Professeurs indépendants</cite>
							<p>Location de studio pour professeurs de chant, guitare, basse, batterie, piano, classe orchestre, etc.<br /></p>
						</a>
					</section>
					<section>
						<a href="presentation/partenaires" rel="5">
							<img src="img/presentation/11.jpg" alt="Matériel musical, partenaire, industriels de la musique"/>
							<cite>Partenaires</cite>

							<p>Partenaires soutenant "Le Stud.".<br /></p>
						</a>
					</section>
					<section>
						<a href="presentation/annonces" rel="2">
							<img src="img/presentation/8.jpg" alt="Petites Annonces"/>
							<cite>Petites Annonces</cite>
							<p>Matériel à vendre, recherche de musicien, toutes les annonces des adhérents.<br /></p>
						</a>
					</section>
					<section>
						<a href="presentation/association" rel="9">
							<img src="img/presentation/9.jpg" alt="Associations"/>
							<cite>Associations</cite>
							<p>La vie associative (musicale) sur Nice.<br /></p>
						</a>
					</section>

				</div>
			
			</div>
			

			<div id="content_info">
				<article>
					<header>A propos du Stud.</header>
					<p><br />Le Stud. est une association loi 1901 visant à promouvoir la culture musicale dans la région niçoise.<br /><br />L'association met à disposition des musiciens amateurs ou professionnels des locaux de répétition et d'enregistrement à des tarifs justes, afin de permettre au plus grand nombre de pratiquer sa musique dans les meilleures conditions.<br /><br />L'objectif du Stud. est d'offrir un lieu d'échange mais aussi de promotion via l'organisation d'événements culturels.</p>
					<ul>
						<!--<li><a href="archivos/curriculum.pdf" target="_blank">Curriculum</a></li>-->

					</ul>
				</article>
				<section>
					<header>Contact</header>
					<h3>04 93 41 53 17 / <a href="mailto:le.stud@hotmail.fr">le.stud@hotmail.fr</a> / 1 Rue Cagnoli 06100 Nice</h3>
					<form id="f_contact" action="contact-send.php" method="post">
						<fieldset>				
							<legend>Formulaire de contact</legend>

							<ul>
								<li>
									<label for="nom">Nom</label> 
									<input class="f_200" type="text" id="nom" name="nom" placeholder="Nom" required />
									<label for="email">Adresse email</label> 
									<input class="f_200" type="email" id="email" name="email" placeholder="Adresse Electronique" required />
								</li>
								<li>
									<label for="sujet">Sujet</label> 
									<input class="f_405" type="text" id="sujet" name="sujet" placeholder="Sujet" required />

								</li>
								<li>
									<label for="msg">Message</label> 
									<textarea id="msg" name="msg" placeholder="Ecrivez votre message" required ></textarea>
								</li>
							</ul>
						</fieldset>
						<input type="submit" id="send" value="Envoyer" />

					</form>
				</section>
			</div>
			
			<footer id="main_footer">
				<p><span class = "red">T</span>04 93 41 53 17</p>	
				<p><span class = "red">E</span><a href="mailto:le.stud@hotmail.fr">le.stud@hotmail.fr</a></p>
				<p id=""><span class = "red">Code by</span>Cyrus Z.</p>

			</footer>
					
		</div>
	
		<script type="text/javascript" src="js/cyrus.min.js"></script>
	</body>
</html>

2) Et ensuite javascript va piocher dans le fichier suivant en fonction de la section choisie :

Code:

<!DOCTYPE html> 
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="language" content="fr" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<title>Le Stud. - Studio de Repetition et d'Enregistrement à Nice</title>
		
		<meta name="title" content="Le Stud. - Studio de Repetition et d'Enregistrement à Nice" />
		<meta name="author" content="Cyrus Z." />

		<meta name="description" content="Association musicale : locaux de repetition, d'enregistrement, cours de musique, concert dans la région de Nice - Alpes-Maritimes" />
		
		<meta name="robots" content="index,follow" />
		<meta name="keywords" content="enregistrement, repetition, nice,studio, répétition, studio de repetition a nice, studio repetition, répéter, nice 06, locaux pour répéter, stud de repete, association, association musicale, Alpes-Maritimes, local de repetition">
		<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--		<meta name="viewport" content="height=600" />-->
		
		<link rel="shortcut icon" href="img/logo2.png" type="image/vnd.microsoft.icon" />
		<link rel="icon" href="img/logo2.png" type="image/png" />
		<link rel="apple-touch-icon" href="img/logo2.png" type="image/png" />
	
	</head>
	<body>
<?php

if( $_REQUEST["id"]==2)
{
?>
<h1>Enregistrements</h1>
<section>
	<header>Enregistrements </header>
	<a href="img/presentation/2_1.jpg"><img src="img/presentation/2_1_normal.jpg" /></a>
	<aside>Studio<br /></aside>
	<p><br /><br />> Studio d'enregistrement <br /><br /> Enregistrement "LIVE" professionnel.<br /><br />Afin de promouvoir votre musique (maquettes, casting, répétitions).<br /><br />Repartez avec votre CD ou MP3 le jour même.<br /><br />Ouvert du Lundi au Samedi & Jours fériés : 10h / 22h.</p>
	
</section>

<section>
	<header>Enregistrements </header>
	<a href="img/presentation/2_4.jpg"><img src="img/presentation/2_4_normal.jpg" /></a>
	<aside>Box<br /></aside>
	<p><br /><br />> Studio d'enregistrement <br /><br /> Le Stud. dispose d'un ingénieur du son ainsi que d'un local d'enregistrement complet pour tout musicien-chanteur-groupe souhaitant enregistrer ses morceaux.</p>
	
</section>
<section>
	<header>Enregistrements </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>Studio C 1/3<br /></aside>
</section>
<section>
	<header>Enregistrements </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>Studio C 2/3<br /></aside>
</section>
<section>
	<header>Enregistrements </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>Studio C 3/3<br /></aside>
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/2_1.jpg" class="shadowboxing"><img src="img/presentation/2_1_normal.jpg" /></a>
	<a href="img/presentation/2_4.jpg" class="shadowboxing"><img src="img/presentation/2_4_normal.jpg" /></a>
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a>
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a>
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a>

	</div>
<?php	
}

if( $_REQUEST["id"]==3)
{
?>
<h1>Répétitions</h1>
<section>
	<header>Répétitions </header>
	<a href="img/presentation/3_1.jpg"><img src="img/presentation/3_1_normal.jpg" /></a>
	<aside>Studio B&C</aside>
	<p><br /><br /><br />> Studio de répétitions <br /><br /> Deux studios de répétitions entièrement équipés.<br /><br />Amplis guitare, basse, batterie complète, piano, micros, table de mixage, HP. Le Stud. dispose de deux studios de répétitions entièrement équipés à votre disposition.<br /><br />Ouvert du Lundi au Samedi & Jours fériés : 10h / 22h.</p>
	
</section>
<section>
	<header>Répétitions </header>
	<a href="img/presentation/3_2.jpg"><img src="img/presentation/3_2_normal.jpg" /></a>
	<aside>Studios A</aside>
	<p><br /><br />> Studio de répétitions  batterie<br /><br /> Le Stud. dispose également d'un local de répétition entièrement dédié à la batterie avec une batterie complète, une table de mixage et un HP.</p>
	
</section>


<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/3_1.jpg" class="shadowboxing"><img src="img/presentation/3_1_normal.jpg" /></a>
	<a href="img/presentation/3_2.jpg" class="shadowboxing"><img src="img/presentation/3_2_normal.jpg" /></a>
	</div>
<?php	
}

if( $_REQUEST["id"]==4)
{
?>
<h1>Professeurs indépendants</h1>
<section>
	<header>Profs indépendants </header>
	<a href="img/presentation/4_1.jpg"><img src="img/presentation/4_1_normal.jpg" /></a>
	<aside>Professeurs indépendants<br /></aside>
	<p>> Professeurs indépendants<br /><br />Le Stud. offre la possibilité de louer ses locaux aux professeurs indépendants afin qu'ils puissent y dispenser leurs cours.<br /><br />Vous disposerez d'un équipement complet pour tout type d'enseignement.<br /><br />Vos élèves pourront bénéficier d'un cadre convivial où ils trouveront d'autres musiciens avec qui partager leur plaisir pour la musique.<br /><br />Ouvert du Lundi au Samedi & Jours fériés : 10h / 22h.</p>
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/4_1.jpg" class="shadowboxing"><img src="img/presentation/4_1_normal.jpg" /></a></div>

<?php	
}

if( $_REQUEST["id"]==11)
{
?>
<h1>Groupes</h1>
<section>
	<header>Groupes </header>
	<a href="img/presentation/11_1.jpg"><img src="img/presentation/11_1_normal.jpg" /></a>
	<aside>Groupe 1<br /></aside>
	<p>> Hunger<br /><br /> Groupe de Hard-Rock formé en 2010.</p>
	
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/11_1.jpg" class="shadowboxing"><img src="img/presentation/11_1_normal.jpg" /></a></div>

<?php	
}

if( $_REQUEST["id"]==10)
{
?>
<h1>Evénements</h1>
<section>
	<header>Evénements </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>A venir<br /></aside>
	
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a></div>

<?php	
}

if( $_REQUEST["id"]==5)
{
?>
<h1>Partenaires</h1>
<section>
	<header>Partenaires </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>A venir<br /></aside>
	
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a></div>

<?php	
}
if( $_REQUEST["id"]==9)
{
?>
<h1>Associations</h1>
<section>
	<header>Associations </header>
	<a href="img/presentation/9_1.jpg"><img src="img/presentation/9_1_normal.jpg" /></a>
	<aside>Le Volume<br /></aside>
	<p><br /><br />> La Source - Le Volume<br /><br />6 rue Defly, 0600 Nice<br /><br />Le Volume est un lieu alternatif de soutien à la création locale (musiques actuelles émergentes) qui propose une véritable rencontre entre le public, les artistes et acteurs actuels.<br /><br /> Les concerts ont lieu à partir de 21h du jeudi au samedi inclu. Le Volume ouvre ses portes à 20h et les referme à 1h.<br /><br />EDIT du 4/11/12 :<br/>LE VOLUME EN DANGER : Le Volume est menacé de fermeture. Pour soutenir l'action de la Source et le Volume, merci de signer et de partager cette pétition : <a href="http://www.mesopinions.com/petition/art-culture/volume-danger/9161">http://www.mesopinions.com/petition/art-culture/volume-danger/9161</a> </p>
</section>
<section>
	<header>Associations </header>
	<a href="img/presentation/9_2.jpg"><img src="img/presentation/9_2_normal.jpg" /></a>
	<aside>Le Sezamo<br /></aside>
	<p><br /><br />> Le Sezamo<br /><br />32, Rue Fontaine de la Ville - 06200 Nice<br /><br />Le Sezamo est une salle de spectacle associative, proposant une programmation musicale hétéroclite et de très bon goût. N'hésitez pas à y faire un tour pour y découvrir les artistes locaux tout comme les grosses têtes d'affiche.</p>
</section>
<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/9_1.jpg" class="shadowboxing"><img src="img/presentation/9_1_normal.jpg" /></a>
	<a href="img/presentation/9_2.jpg" class="shadowboxing"><img src="img/presentation/9_2_normal.jpg" /></a>
	
<?php	
}

if( $_REQUEST["id"]==8)
{
?>
<h1>Petites Annonces</h1>
<section>
	<header>Annonces </header>
	<a href="img/presentation/avenir.jpg"><img src="img/presentation/avenir.jpg" /></a>
	<aside>A venir<br /></aside>
	
</section>

<div id="work-shadowbox" style="display:none">
	
	<a href="img/presentation/avenir.jpg" class="shadowboxing"><img src="img/presentation/avenir.jpg" /></a></div>

<?php	
}
?>
	</body>
</html>

Moufle2mer · 10 Novembre 2012

Un petit up pour mon dernier (long) message...

zeb · 10 Novembre 2012

Pas le temps de me pencher sur ton problème (désolé

) Mais put1 que c'est beau ! :wink:

Moufle2mer · 10 Novembre 2012

Ya pas de smiley "rougi"...merci pour le compliement...

luchduck · 10 Novembre 2012

Salut,

Tu peux très bien refaire la même chose (effets d'animations très réussis) mais avec des pages bien différentes sans le gérer en js. Et conserver un Html / Css propre pour les moteurs sur chaque page. Une fois que la base est bonne et fonctionne, le js prend la main, pas l'inverse !