Placer le menu en haut pour les user, mais en bas pour les bots

El-Cherubin · 6 Octobre 2008

Bonsoir,

J'aimerai modifier mon site et placer le menu qui se trouve en haut de mon code source, en bas, afin de laisse la possibilité a google de choisir un texte plus pertinent pour le snipet de description.

Ou alors, toujours avec le CSS si je ne me trompe pas, comment dissocier l'emplacement d'une div pour les users et pour les bots. Car le plus simple pourrait etre de placer la div qui contiendrait les termes m'interessant pour la description de google, en haut du code source, le plus haut possible.

Ma structure de site est la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $pluxml->mode; echo ' : '; __('pagetitle'); ?> </title>
<meta name="keywords" content="" />
<meta name="description" content="" />

	<link rel="stylesheet" type="text/css" href="<?php __('template'); ?>/style.css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="Rss" href="core/rss.php" />
	<link rel="alternate" type="application/atom+xml" title="Atom" href="core/atom.php" />

<!-- script lightbox -->
<script type="text/javascript" >var PLX_DOC = "<? echo PLX_DOC ?>"; </script>
<script type="text/javascript" src="<? echo PLX_DOC ?>plugins/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<? echo PLX_DOC ?>plugins/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<? echo PLX_DOC ?>plugins/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="<? echo PLX_DOC ?>plugins/lightbox/css/lightbox.php" type="text/css" media="screen" />
<!-- fin script lighbox -->

<script type="text/javascript" src="bnew.js"></script>

</head>
<body>
<div id="top">
<div id="header">
	<h1><?php __('maintitle', 'link'); ?></h1>
	<h2><?php __('subtitle'); ?>.</h2>
</div>
</div>
<div id="menu">
	<ul>
		<li class="first"><a href="/" accesskey="1" title="">Accueil</a></li>
		<li>...</li>
	</ul>
</div>
<hr />
<div id="page" class="post">
<br />


<?php # En mode 'recherche' # ?>
<?php if($pluxml->mode == 'recherche'): ?>

	<div class="entry">
		<div class="post">
			<h2 class="title">Résultat(s) de la recherche</h2>
			<div class="entry">
			<p>
				<?php echo $pluxml->getSearch(); ?>
			</p>
			</div>
		</div>
	</div>
<?php endif; ?>


<?php #en mode plan #?>
<?php if ($pluxml->mode=="plan"): ?>
<?php //debut plan du site 

// ACCUEIL

?>
   <div class="entry">
		<div class="post">

	<h2 class="ulplan">Plan du site : <b> <?php __('maintitle'); echo '</b><em> - ';__('subtitle'); ?></em></h2>
	<h2>index</h2>
	<ul class="ulplan">
	<li>liens principaux
	<ul>
	<li><?php __('maintitle', 'link'); ?></li>
	<li><a href="index.php?contact=contact" title="formulaire de contact">Contactez Nous </a></li>
	</ul>
	</li>
	</div>
	</div>

<?php endif;  // fin mode plan?>



<?php # En mode 'contact' # ?>
<?php if($pluxml->mode == 'contact'): ?>
	<div class="entry">
		<div id="form" class="post impair">
			</div>
	</div>
<?php endif; ?> 

<?php # En mode 'accueil' ou 'catégorie' # ?>
	<?php if($pluxml->mode == 'accueil' || $pluxml->mode =='cat') : ?>
	<div id="content">

		<?php # Liste d'articles # ?>
		<?php while($pluxml->result->loop()):?>
		<div class="post">
			<!--<h2 class="articletitle"><?php __('title', 'link'); ?></h2>-->

			<?php __('chapo'); ?>
			<p class="comment_nb"><?php __('nb_comment_mod_gc_04_08'); ?></p>
		</div>
		<?php endwhile; ?>

		<?php __('pagination_mod_gc_04_08'); ?>

	</div>
	<?php endif; ?>
<?php # Fin mode 'accueil'/'catégorie' # ?>


<?php # En mode 'article' # ?>
		<?php if($pluxml->mode == 'article') : ?>
		<div class="entry">

		<?php # Liste d'articles # ?>
		<?php while($pluxml->result->loop()):?>
			<div class="post">
				<h2 class="title"><?php __('title'); ?></h2>
				<?php __('categorie'); ?></p>
				<?php __('content'); ?>
			</div>
		<?php endwhile; ?>


	   <?php if($pluxml->coms):
		$i=0;
		?>	
		<div id="comment">
			<h2>Commentaires</h2>

	</div>
		<?php endif; ?>

		</div>
		<?php endif; ?>
<?php # Fin mode 'article' # ?>	


</div>

<div id="sidebar">
	<ul>
		<li></li>
				<li></li>
	</ul>
	<div style="clear: both; height: 40px;"> </div>
</div>
<hr />
<div id="footer">

</div>

La partie que je souhaiterai utiliser pour mes descriptions de moteur de recherche serait celle du mode article ou accueil ou plan de site, en fonction de la page evidemment. Au lieu de cela, pour le moment j'ai toujours les menu qui se situe en haut pour le moment.

Pourriez vous m'orientez?

Merci d'avance.

Edit: voici le CSS :

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF url(images/img01.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
}

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin : 0;
	padding: 0;
	border: none;
	}

select {
	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

label {
	display : block;
	}
input.text,textarea { 
		width:300px;
		font:12px/12px 'courier new',courier,monospace;
		color:#333;
		padding:3px;
		margin:1px 0;
		border:1px solid #ccc; 
		}

input.submit { 
	padding:2px 5px;
	font:bold 12px/12px verdana,arial,sans-serif; }

textarea {
	width : 50%;
	height: 250px;
	}


h1, h2, h3 {
	margin-top: 1.5em;
	font-weight: normal;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	margin-top: 1.5em;
	line-height: 160%;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-left: 3em;
	margin-right: 3em;
}

a {
	color: #CC6B47;
}

a:hover {
	text-decoration: none;
	color: #3760BF;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}

hr {
	display: none;
}

/* Header */

#header {
	width: 830px;
	height: 110px;
	margin: 0 auto;
}

#header h1, #header h2 {
	margin: 0;
	letter-spacing: -0.05em;
	font-weight: normal;
}

#header h1 {
	float: left;
	padding-top: 40px;
	font-size: 4em;
	display:inline;
}

#header h1 a {
	text-decoration: none;
}

#header h2 {
	position: relative;
	top: 65px;
	left: 12px;
	padding: 0 0 0 8px;
	font-size: 2em;
	font-style: italic;
	color: #858585;
}

/* Menu */

#menu {
	width: 820px;
	height: 40px;
	margin: 0 auto;
	background: #4471CA url(images/img02.png) no-repeat;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: inline;
}

#menu a {
	float: left;
	height: 28px;
	padding: 12px 20px 0 20px;
	background: url(images/img03.gif) no-repeat;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .first a {
	background: none;
}

/* Page */

#page {
	width: 820px;
	min-height: 400px;
	margin: 0 auto;
}

/* Post */

.post {
}

.post .title {
	margin: 0;
}

.post .title a {
	text-decoration: none;
}


.post .entry {
	width: 800px;
	min-height: 400px;
}

.post .meta {
	clear: both;
}

.post .meta a {
	text-decoration: none;
	font-weight: bold;
}

.post .meta a:hover {
	text-decoration: underline;
}

.post .meta .comments {
	padding-left: 20px;
	background: url(images/img07.gif) no-repeat left center;
}

.post .meta .permalink {
	padding-left: 20px;
	background: url(images/img08.gif) no-repeat left center;
}

#pagination { /* Conteneur des liens 'page suivante' et 'page précédente' */
	text-align : center;
	margin : 0; padding : 0;
	}

/*-------
pagination recherche 
----------*/
.pagsearch {
	text-align:left;
	padding:2px 2px 2px 3.6em;
	text-indent:-3.5em;
	font-weight:bold;
	font-size:90%;
}

	/*------
	plan de site
	--------*/
h2.ulplan {
	height:1%;
	border-top:2px solid #F1F1F1;
	border:1px solid #F1F1F1;
	margin-top:10px;
}
h2.ulplan em
{
	color:#E47736;
}
h2.ulplan  b {
	color: #366436;
}

li {
	color:#444;
}
li li {
	color:#DC4D00;
}
.ulplan li {
	background:#FBFBFB url(img/fondcorps.png) repeat-x;
	list-style-position:inside;
	margin-top:0.5em;
}
.ulplan li li{
	background:none;
	margin:0;
}
li li li {
color:#D229DF;
} 


/*Comments*/

.comment {
	padding : 2px 10px 5px 10px;
	}
.comment blockquote{
	padding : 2px 30px 2px 40px; margin : 0;
	}
.ligne0{
	background : #222;
	}

/* Sidebar */

#sidebar {
	clear: both;
	width: 820px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	float: left;
	width: 273px;
	background: url(images/img09.gif) no-repeat;
}

#sidebar li ul {
	padding-left: 20px;
}

#sidebar li li {
	float: none;
	width: auto;
	padding: 0;
	background: none;
}

#sidebar h2 {
	height: 19px;
	margin: 0 0 20px 0;
	padding-top: 1px;
	background: url(images/img10.gif) no-repeat right top;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .5em;
	font-size: .9em;
	font-weight: bold;
	color: #FFFFFF;
}

/* Search */

#search {
	text-align: center;
}

#search #s {
	width: 70%;
	margin-bottom: 10px;
}

/* Calendar */

#calendar {
}

#calendar table, #calendar caption {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

#calendar caption {
	font-weight: bold;
}

#calendar a {
	font-weight: bold;
}

/* Footer */

#footer {
	clear: both;
	margin: 0 auto;
	padding: 20px 0;
	background: url(images/img11.gif) repeat-x;
	text-align: center;
}

#footer p {
	margin: 0;
	font-size: .8em;
	color: #666666;
}

/*contenu*/

/*1_| 2 colonnes 50%*/

#left1 div {
	float : left;
	width : 400px;
}
#right1 div {
	float : right;
	width : 400px;
}

/*2_| 2 colonnes 1/3 - 2/3*/
#left2 div {
	float : left;
	width : 33%;
}
#right2 div {
	float : right;
	width : 66%;
}

/*3_| 2 colonnes 2/3 - 1/3*/
#left3 div {
	float : left;
	width : 66%;
}
#right3 div {
	float : right;
	width : 33%;
}

Modifié 7 Octobre 2008 par Dan
Merci d'utiliser les balises CODEBOX au lieu de CODE pour des long programmes (plus de 10 lignes)

rdd · 7 Octobre 2008

Salut,

En fait pour ce que tu veux faire, je vois 2 solutions possible, mais utilisant toutes les 2 le principe du cloacking (detection sur le User-agent et sur l'IP).

La premiere consiste a faire 2 fichier css. Un pour tes user (avec ton menu en haut) et un pour GG (ou tu places tes elements differement). En fonction du visiteur tu charges le css adequat.

La deuxieme solution comme tu le dis dans ton post, consisterai a placer ton div a l'endroit voulu en fonction du User-agent/IP.

Il y avait un vieil article, qui doit etre adapte maintenant (surement de nouvelles IP pour les Bots google) : exemple cloacking

Modifié 7 Octobre 2008 par rdd

El-Cherubin · 7 Octobre 2008

Il n'y a pas un risque de pénalisation à faire du cloaking dans mon cas...?

**captain_torche** · 7 Octobre 2008

Je ne comprends pas ta préoccupation : normalement, un moteur de recherche est suffisamment doué pour déterminer de lui-même le texte important (ou du moins pertinent), et le placer en snippet.

Si tu remplissais tes meta description, ça serait un premier pas.

Tu peux également déclarer ton contenu avant ton menu dans le HTML, et arranger ta mise en page avec le CSS. Je ne vois pas en quoi le cloaking serait utile dans ce cas.

PotatoesJunky · 7 Octobre 2008

+1 avec Captain Torche : tu rajoutes une phrase bien descriptive tout en haut de ta page, ça devrait suffire, c'est le premier truc que lira le moteur.

Sebastien · 7 Octobre 2008

Si ton menu est bien garni, ce serait même plutôt pertinent de le mettre après le contenu : les utilisateurs utilisant autre chose qu'un navigateur graphique (synthèse vocale, plage braille, navigateur texte...) éviteront ainsi de se voir resservir le menu en premier à chaque chargement de page

El-Cherubin · 7 Octobre 2008

Avec le CMS que j'utilise, je ne peux pas mettre des meta différentes, ma seule option est de ne pas en mettre et laisser google choisir et contrairement à ce qu'on pourrait croire, ce con ne me ressort en snipet que le menu...

**captain_torche** · 7 Octobre 2008

Peux-tu donner un lien vers ton site, qu'on puisse constater (ainsi que la requête en question) ?

El-Cherubin · 8 Octobre 2008

-http://www.google.fr/search?hl=fr&q=site%3Aaccapel.com

le site cotoie anciennes et nouvelles urls.

Mais je pense m'orienter vers un autre CMS compatible avec fckeditor pour ne pas perdre trop de mise en page, car celui ci est trop rigide au point de vu référencement.

itsystem · 8 Octobre 2008

Hello El-Cherubin

Tu peux utiliser Joomla comme CMS.

Il a tout se qu'il faut pour ton site.

El-Cherubin · 8 Octobre 2008

le souci c'est que joomla est une solution assez lourde ...

itsystem · 9 Octobre 2008

Lourde ?

Comment ça ?

**captain_torche** · 9 Octobre 2008

Pour en revenir à tes soucis de snippet, ils ne sont pas pertinents parce que tu ne cherches aucun terme.

Avec des recherches plus ciblées, c'est tout de suite mieux !

http://www.google.fr/search?hl=fr&q=ét...rcher&meta=

http://www.google.fr/search?hl=fr&rlz=...rcher&meta=

El-Cherubin · 10 Octobre 2008

il faut que je revois ma définition de snipet et surtout comment ils sont gérer alors

Merci pour la ptite explication

Connexion

Placer le menu en haut pour les user, mais en bas pour les bots

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter