Mettre des <H1> dans des <div>

paikan06

WRInaute discret
Bonjour à tous,

Comme vous pouvez vous en douter, je viens vers vous car j’ai un petit souci.
J’essaye d’optimiser un site pour le référencement, le web-master qui nous la fourni a juste fait un travail graphique (a oui ça c’est sûr il est jolie son site !!) mais côté référencement c’est le désert :

-Aucune hiérarchie (h1, h2, h3)
-toutes les balises description, titre et keywords sont les mêmes pour les 5 versions linguistique
-les images s’appellent image1.jpg, image2.jpg etc…
-toutes les pages sont déclarées = xml:lang="en"
-tout le site est structuré autour de balise <div>, pas de <p>, pas de <stong>, etc…., etc …..

J’ai déjà effectué un gros travail de refonte mais je me retrouve dans une impasse :
J’essaye par tous les moyen d’incorporer des <h1, h2, h3> dans les <div>, j’ai fait des recherches sur mon cher ami Google et j’ai cru comprendre que cela été possible.

http://www.siteduzero.com/forum-83-489445-p1-balises-div-et-h1.html (par exemple)

Mais de mon côté c’est impossible, je retrouve mon <h1> complétement en bas de page.
Juste pour exemple voici le code :

<div class="quickcentre3">texteblablabla</div>

Si quelqu’un a une idée lumineuse, elle est très bien venue 

Merci d’avance pour votre aide et vos pistes de travail.
 

fredfan

WRInaute accro
Bonjour
Il n'y a aucun problème à mettre un h1 dans un div, à moins que le CSS l'envoie en bas de page. Dans ton code il n'y a pas de h1, difficile de voir le rapport avec ta question
 

paikan06

WRInaute discret
Salut fredfan, merci pour ta réponse.
Effectivement il n'y a aucun H1 ou H2 ou H3 dans tout le site, c'est la raison pour laquelle je cherche a les rajouter.
Si j'ai bien compris c'est très important pour le référencement google.

voici le code css lié à la balise div :

.quickcentre3
{
width:350px;
float:left;
height: 20px;
background-color:#190d09;
text-align: left;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
text-transform: uppercase;
font-size:9px;
line-height:22px;
letter-spacing:2px;

color:#f1e8cd;
}

Je vais faire des recherche du côté du code css, merci
 

fredfan

WRInaute accro
Un line-height ne peut pas s'exprimer en pixels
De toute façon il vaut mieux mettre le h1 sans classe, regarder comment il se comporte dans son environnement, et réécrire ensuite le css du h1 si nécessaire
 

paikan06

WRInaute discret
Je te remercie pour ta réponse qui est pour moi légèrement technique, je fais des recherches, j'essaye avec ta solution et je reviens donner des nouvelles.
merci
 

u93598

WRInaute discret
De toute façon, pour mettre en page un site internet lors de la découpe, il faut des divs. Et à l'intérieur, on y retrouve très souvent des balises H1, H2, ..., p. Donc aucun souci au niveau du référencement. ;-)
 

paikan06

WRInaute discret
merci pour vos réponses
j'ai essayé plusieurs solutions, apparemment ma balise <div> refuse le h1.
la seul solution que j'ai trouvé c'est :

<div class="quickcentre3"><h1 style="left: 204px; bottom: 1353px; width: 280px">texteblabla</h1></div>

et de modifier le css pour que font-size ne soit pas plus grand que le <div>
Mais bon je trouve que tout ça n'est pas très jolie jolie

Si vous avez des idées, je les testes avec plaisir.

Bon Weekend !!!!!!!
 

fredfan

WRInaute accro
Ton div est trop petit et tout rigide. Tu ne feras jamais rien tenir dedans.
Et comme il est fait uniquement pour pallier à l'absence de h1 il vaut mieux le supprimer
 

paikan06

WRInaute discret
Bonjour à tous, j’ai été un peu long mais j’ai testé vos conseils.

Le fait de supprimer les div en question me font sauter la mise en page, alors oui je pourrai tout supprimer en recommencer plus proprement, mais vue que le travail graphique du web master nous convient parfaitement je ne souhaite pas reprendre tout son code source.

D’après vous, pour pouvoir implémenter des H1, si je laisse le code suivant :

<div class="quickcentre3"><h1 style="left: 204px; bottom: 1353px; width: 280px">texteblabla</h1></div>

Cela aura-t-il un impact négatif sur le référencement de Google ?

Merci d'avance.
 

Amauri

WRInaute occasionnel
Sur le référencement non, c'est une mise en page très classique et le fait que les h1 soient dans des div ou non ne changera rien.

Par contre la mise en page en positionnant les elements par le bas est bizarre.. Ca s'affiche correctement avec tous les navigateurs et résolutions d'écrans ?
 

Leonick

WRInaute accro
déjà, les "style" sont à proscrire, il va mieux mettre des css externes.
le bottom: 1353px; ressemble à s'y méprendre à un top:-300px, histoire de cacher visuellement le h1, sauf à avoir des geeks avec des écrans 24" et, surtout, qui naviguent en plein écran :roll:
 

paikan06

WRInaute discret
Chose extrêmement bizarre le H1 ne rentre pas dans mon div alors qu’un H2 rentre parfaitement.
Pourtant dans mon code css lié à la balise h1 je spécifie bien un font-size correcte
 

longo600

WRInaute passionné
C'est simplement que les navigateurs réserve la hauteur normale d'un H1 , et que toi tu as réduit cette hauteur, donc, ca pousse dehors le contenu H1 ... si tu supprime la hauteur ou qu'elle soit au minimum de celle d'un H1 normal , ca marche.

un H1 est vital pour une page en SEO, c'est un élément très important pour le classement d'une page. négliger cette balise perd énormément en référencement. Le poids n'est pas aussi fort qu'un titre ou qu'un lien , mais il viens juste après.
On peu s'en passer avec beaucoup de liens ponant vers cette page, mais c'est une perte énorme.

Tapez le mot clé secret sur Google et vous verrez un site de test : merci de ne jamais transmettre cette url ni le mot clé secret, enfin, si vous cassez le secret, vous n'aurez plus de repere pour voir quelques effet du H1, ou taille des images etc. Vieux site de test abandonné . le mot cle secret est : MARC suivi de 2 fois A , ensuite deux fois Q et la me^me chose pour W , attaché . dans Google ou bing.

vous verrez que parmi les nombreuses pages de test qui ont toutes ce même mot clé, le classement de google du H1 est parmi les 14 meilleurs résultats ... il est stable parmi les première place depuis le début, contrairement au H2 et H3 qui font le yoyo selon les changement de Google.

Je reviens avec un code pour "forcer" le H1 a rester dans un espace réduit ...
 

longo600

WRInaute passionné
voilà, déjà avec ca , ca va un peu mieux sur mon navigateur :

<div class="quickcentre3"><h1 style="float:left;margin:1px;text-shadow:black;font-size:16px;vertical-align:middle"">texteblabla</h1></div>

La div ne chasse plus le H1 a l'extérieur du bloc ... bonne continuation.
 

paikan06

WRInaute discret
Bonjour longo600,

Je te remercie très sincèrement pour ton aide.

Je viens d’essayer le code sous Firefox mais la balise H1 est quand même chassée du div vers le bas de la page,
Je vais me servir de ton exemple pour approfondir mes recherches.

Je suis également en train de faire des recherches sur Google mais je ne comprends toujours pas pourquoi mon div refuse le H1. :evil:

Merci encore
 

longo600

WRInaute passionné
c'est curieux oui. Peut-être que tu as une mauvaise imbrication de tes div? Le contenu s'affiche bien dans la div si tu ne met que du texte?

ou tu as un style css en conflit. A ce stade, je me casse deja la tete avec les css que je connais moyennement, un spécialiste pourra t'aider plus.
 

fredfan

WRInaute accro
Quand on fait des fautes de syntaxes c'est toujours la loterie.
Tant qu'il y aura le line-height en pixels il y aura une interprétation aléatoire selon le navigateur.
 

paikan06

WRInaute discret
En tout cas je te remercie d’avoir pris un peu de temps pour me donner un coup de main

Quel que soit la version linguistique les textes apparaissent correctement dans les <div>
<div class="quickcentre3">&nbsp;Главная страница Краткий обзор</div>

Si je qualifie le texte en <H2>, cela fonctionne aussi parfaitement avec les caractéristiques par défaut du <h2>
<div class="quickcentre3"><h2>&nbsp;Главная страница Краткий обзор</h2></div>

J’ai même essayé <h3> et <h4> et tout fonctionne très bien, il n’y à que la balise <h1> qui est refusé et renvoyé en bas de page.

A tout hasard je vous redonne le code css telle une bouteille lancée à la mer :
.quickcentre3
{
width:350px;
float:left;
height: 20px;
background-color:#190d09;
text-align: left;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
text-transform: uppercase;
font-size:9px;
line-height:22px;
letter-spacing:2px;
color:#f1e8cd;
}

Merci fredfan, je regarde de ce côté et je reviens vous donner mes sensations !!!
 

paikan06

WRInaute discret
J’ai regardé du côté du paramètre « line-heigh », j’ai essayé différentes valeurs : normal, inherit, em, 100%, 2.8em etc……

Mais apparemment mes <div> et la balise <h1> ne sont toujours pas copain.

Je souhaite préciser un point, je n’utilise pas de navigateur pour visualiser les modifications que j’effectue sur le code source mais le logiciel Microsoft Expression Web 2 qui me permet de visualiser le code en même temps que son execution.

J’ai quand même fait des vérifications sous Firefox, Iexplorer et Google Chrome avant de venir vers vous.
 

paikan06

WRInaute discret
Salut Jano !!!

Ta question me laisse perplexe, j'utilise Expression web car je trouve que c'est un très bon éditeur de code, après être passé par notepad++, je lui trouve beaucoup plus de fonctionnalité.
 

UsagiYojimbo

WRInaute accro
Et tu n'as pas, dans ton css, un style par défaut pour le h1 qui trainerait quelque part ? Ou la possibilité de nous envoyer une url de test ?
 

paikan06

WRInaute discret
Bonjour et un grand merci à vous tous, j’ai enfin trouvé la source de mon problème !!!!! :D

Comme me l’avait suggéré longo600, il y avait effectivement des erreurs dans l’imbrication des <div>, mais je dois avouer que ça me laisse toujours dubitatif.
J’ai tout simplement modifié le code css des <div> présents sur les côtés de quelques Px. :?:

Je dois avouer que cette réponse me parait bizarre mais elle fonctionne !!! :D

Je vous remercie une dernière fois sincèrement de votre aide et de votre patience.
Je vous souhaite à tous une très bonne continuation.
 

Discussions similaires

Haut