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

Version complète: sur le forum Webmaster Hub : Placer le menu en haut pour les user, mais en bas pour les bots

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

El-Cherubin

lundi 6 octobre 2008 à 22:42

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 :

CODE-BOX

<!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 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" />


<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">


<?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 :

CODE-BOX

* {
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%;
}

rdd

mardi 7 octobre 2008 à 09:27

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

El-Cherubin

mardi 7 octobre 2008 à 12:50

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

captain_torche

mardi 7 octobre 2008 à 13:01

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

mardi 7 octobre 2008 à 16:26

+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

mardi 7 octobre 2008 à 16:33

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

mardi 7 octobre 2008 à 19:28

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

mardi 7 octobre 2008 à 19:44

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

El-Cherubin

mercredi 8 octobre 2008 à 01:30

-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

mercredi 8 octobre 2008 à 06:07

Hello El-Cherubin
Tu peux utiliser Joomla comme CMS.
Il a tout se qu'il faut pour ton site.

El-Cherubin

mercredi 8 octobre 2008 à 20:53

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

itsystem

jeudi 9 octobre 2008 à 11:07

Lourde ?
Comment ça ?

captain_torche

jeudi 9 octobre 2008 à 12:03

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

vendredi 10 octobre 2008 à 01:14

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

Merci pour la ptite explication

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.