Site "one-page" & "scrolling-site" et SEO

guile1er · 16 Novembre 2012

Bonjour,

J'ai besoin de vos lumières, conseils et avis en terme de SEO.

. Présentation

J'ai créé un site "pseudo" one-page : le contenu principal du site se trouve sur une page précise et il existe 2-3 autres pages indépendantes.
La "one page" se développe au fur et à mesure que l’utilisateur scroll avec son navigateur, comme sur le site mediaParker par exemple.

. Problèmes actuels

Je cherche à optimiser le référencement de cette one-page qui contient pas mal de contenu. Mais comment attirer l'attention des moteurs de recherches sur des expressions / mots clés spécifiques, alors que ces termes sont dilués dans la masse de texte ?

. Structure de la page

Schématiquement voilà ce que donne ma page d'index :

Code:

<html>
	<head>
		<title>Index</title>
		<meta name="description" content="description index" />
		<meta name="keywords" content="keywords index" />
	</head>
	<body>
		<header>
			<nav>
				<a href="#Section1">Section 1</a>
				<a href="#Section2">Section 2</a>
				<a href="#Section3">Section 3</a>
				<a href="/autre-page-1">Autre page 1</a>
				<a href="/autre-page-2">Autre page 2</a>
			</nav>
		</header>
		<div id="container">
			<section id="Section1">
				...
				<!--- Contenu du bloc Section 1 -->
				...
			</section>
			<section id="Section2">
				...
				<!--- Contenu du bloc Section 2 -->
				...
			</section>
			<section id="Section3">
				...
				<!--- Contenu du bloc Section 3 -->
				...
			</section>
		</div>
		<footer>
			<!--- Contenu du footer -->
		</footer>
	</body>
</html>

A chaque clic sur les liens de type "#Sectionxx", on va vers la section demandée.

. Solution proposée

Après réflexion, je suis arrivé à cette solution pour la page d'index :

Code:

<html>
	<head>
		<title>Index</title>
		<meta name="description" content="description index" />
		<meta name="keywords" content="keywords index" />
	</head>
	<body>
		<header>
			<nav>
				<a href="/Section1">Section 1</a>
				<a href="/Section2">Section 2</a>
				<a href="/Section3">Section 3</a>
				<a href="/autre-page-1">Autre page 1</a>
				<a href="/autre-page-2">Autre page 2</a>
			</nav>
		</header>
		<div id="container">
			<section id="Section1">
				...
				<!--- Contenu du bloc Section 1 -->
				...
			</section>
			<section id="Section2">
				...
				<!--- Contenu du bloc Section 2 -->
				...
			</section>
			<section id="Section3">
				...
				<!--- Contenu du bloc Section 3 -->
				...
			</section>
		</div>
		<footer>
			<!--- Contenu du footer -->
		</footer>
	</body>
</html>

J'ai supprimé les liens vers les ancres et créer des liens "normaux" vers des pages. Au niveau de l'expérience utilisateur rien ne change : à l'aide de Javascript, lors du clic sur les liens du type "/Sectionxx", je vais toujours vers les sections respectives sans interpréter le lien.

Par contre au niveau de Google (et les autres), ces nouveaux liens sont interprétés (ai-je tort ?).

Du coup j'ai créé des pages (Section1, etc.) qui reprennent le contenu de ma page d'index :

Code:

<html>
	<head>
		<title>Section 1</title>
		<meta name="description" content="description section 1" />
		<meta name="keywords" content="keywords section 1" />
	</head>
	<body>
		<header>
			<nav>
				<a href="/Section1">Section 1</a>
				<a href="/Section2">Section 2</a>
				<a href="/Section3">Section 3</a>
				<a href="/autre-page-1">Autre page 1</a>
				<a href="/autre-page-2">Autre page 2</a>
			</nav>
		</header>
		<div id="container">
			<section id="Section1">
				...
				<!--- Contenu du bloc Section 1 -->
				...
			</section>
		</div>
		<footer>
			<!--- Contenu du footer -->
		</footer>
	</body>
</html>

Le code n'est pas rigoureusement le même, comme on peut le voir.

Du coup je profite d'une page par section avec tous les avantages que cela comporte au niveau du SEO.

Oui mais si l'utilisateur clic sur le lien de google "http://monsite.com/Section1", que se passe t-il ?

Toujours à l'aide de Javascript, je charge le contenu de de ma "one-age" en me positionnant à la section voulue.

. Conclusion

Avec ce système j'ai un site mieux (?) indexable, tout en conservant le comportement classique du site actuel pour l'utilisateur lambda (à condition d'avoir Javascript d'activer).

. Interrogations

Si j'extrapole à fond cette technique je peux faire référencer à Google un "contenu A" et faire arriver mon utilisateur vers une page avec un "contenu B".

- Est ce que cette solution est viable sachant que ne veux pas tromper Google (comme dans l'exemple cité ci-dessus), mais juste me focaliser sur des expressions / mots clés ciblés par page ?

- La perte au classement et / ou blacklist me guette ?

- Que me conseillez vous, refaire un site avec une structure plus classique, optimiser le SEO malgré tout en conservant l'architecture actuel, etc. ?

Merci de vos réponses.

Bonne journée

.

ph.gras · 16 Novembre 2012

Comme ça, il n'y a normalement pas de problème pour l'indexation des pages, sauf que :
— Sur quel type de contenu le visiteur va-t-il atterrir après avoir cliqué sur un résultat de recherche ?
— Quel est l'intérêt de faire une seule page, dépliable uniquement après avoir été captivé au début ?
— Comment aller facilement de la page 3 à la page 25 par exemple ?
— La navigation du visiteur sera-t-elle réellement facilitée, sachant que ce mode est inhabituel ?

J'utilise un système similaire avec les timelines de BuddyPress. La navigation d'une page à l'autre est établie par une query string (/?page…), qui ne pose pas de difficultés pour les bots.

À mon avis, ce système pose plus de problèmes de navigation aux internautes qu'aux moteurs de recherche. Le fait est qu'il n'a pas été repris par la plupart des sites, après avoir été popularisé par les réseaux sociaux.

guile1er · 16 Novembre 2012

Merci de d'être penché sur la question

. Je vais essayé de répondre à tout.

ph.gras a dit:
— Sur quel type de contenu le visiteur va-t-il atterrir après avoir cliqué sur un résultat de recherche ?

2 cas de figure possible :
- l'utilisateur a Javascript d'activé et donc lorsqu'il clic dans Google sur "http://monsite.com/Section1", il arrive vers la scrolling page sur la section voulue (chargement dynamique via Javascript),
- l'utilisateur n'a pas Javascript d'activé (comme un bot au final), et donc il arrive sur la page réel "Section1".

ph.gras a dit:
— Quel est l'intérêt de faire une seule page, dépliable uniquement après avoir été captivé au début ?

C'est une contrainte qui a été établie dès le départ. Pas eu le choix

.

ph.gras a dit:
— Comment aller facilement de la page 3 à la page 25 par exemple ?

Dans mon cas il n'y a "que" 4-5 sections maximum qui sont accessibles via des liens dans une barre de navigation. De plus lorsque l'utilisateur scroll, le header devient "collant" (sticky) et se positionne en haut de la fenêtre. L'utilisateur conserve un moyen de navigation "classique".

ph.gras a dit:
— La navigation du visiteur sera-t-elle réellement facilitée, sachant que ce mode est inhabituel ?

Certes inhabituel, mais avec le "sticky header" (voir ci-dessus), la navigation reste simple.

ph.gras a dit:
J'utilise un système similaire avec les timelines de BuddyPress. La navigation d'une page à l'autre est établie par une query string (/?page…), qui ne pose pas de difficultés pour les bots.

À mon avis, ce système pose plus de problèmes de navigation aux internautes qu'aux moteurs de recherche. Le fait est qu'il n'a pas été repris par la plupart des sites, après avoir été popularisé par les réseaux sociaux.

Google t’indexe des pages de type monSite.com/?page=Section1 avec des résultats cohérents ?
Il n'y a pas de duplicate content ?

Parce que j'étais persuader qu'aux yeux de Google que les pages :
- monsite.com/?page=Section1
- monsite.com/?page=Section2
- monsite.com/?page=Section3

étaient considérés comme la même page et que tu du coup DC assuré et tous ce qui s'en suit.

ph.gras · 16 Novembre 2012

guile1er a dit:
Google t’indexe des pages de type monSite.com/?page=Section1 avec des résultats cohérents ?
Il n'y a pas de duplicate content ?

Parce que j'étais persuader qu'aux yeux de Google que les pages :
- monsite.com/?page=Section1
- monsite.com/?page=Section2
- monsite.com/?page=Section3

étaient considérés comme la même page et que tu du coup DC assuré et tous ce qui s'en suit.

Comme j'utilise un plugin pour afficher les paramètres SEO et que la question des query strings n'a même pas effleuré le développeur, et que d'autre part, je n'ai pas envie que le visiteur se retrouve au milieu de nulle part, toutes mes pages à query strings sont en noindex, follow.
Il faut évidemment coder un truc spécial pour les en-têtes, afin d'éviter le contenu dupliqué. Mais cela va de soi… Si on considère qu'il s'agit d'une nouvelle page, elle doit pouvoir présenter un titre original, une description spécifique, et pourquoi pas, des mots-clés dédiés. Ça passe très bien en faisant débuter le contenu des meta tags par Section X du site MonSite sur le duplicated string for all X pages.
Ce qui m'intéresse est que les visiteurs tombent directement sur les entrées en passant par un moteur de recherches. Inutile de les mener en bateau en les baladant sur une page qui recense toutes les activités sur la recherche d'emploi du site, c'est parfaitement inutile.

guile1er · 19 Novembre 2012

Salut,

Dans mon cas je suis quasi obligé de faire indexer tout le contenu du site en question.

Moi aussi je veux que les visiteurs tombent sur le bon contenu : ce qui est le cas avec la méthode que je décris. Seule la forme change au finale.

Si des webmasters avait des retours d’expérience par rapport au référencement de site comme celui que je décrit, voir même "full ajax", je suis preneur

.

Bonne journée.