web-dev-qa-db-fra.com

Balises d'en-tête avec image et référencement

Est-ce mauvais pour le référencement? Les concepteurs sont venus avec. En gros, il y a une icône à côté de chaque texte d'en-tête. Donc, pour chaque page et l'en-tête respectif, une icône est associée à la page.

Balisage:

<h1>
<span class="span"><img class="spanImg" src="../img/pageIcon.png"></span>
<span class="text">Header Title Text Here</span>
</h1>

CSS:

.span, .text {
vertical-align: middle;
display: table-cell;
color: #CCC;
}

.spanImg {
width: 40px;
height: 40px;
margin-right: 8px;
}

Les balises d'en-tête ont également des balises CSS.

Merci simplement curieux s'il s'agit d'une mauvaise pratique ou non pour les balises d'en-tête SEO.

seohtmlh1
2
Cool Shape

Bien que ce code ne puisse pas causer du tort, il est fortement recommandé de ne pas insérer d'images ni quoi que ce soit d'autre que du texte dans une balise auditive. La raison en est simple. La balise header est un indice sémantique extrêmement important pour les moteurs de recherche. C'est une balise de contenu et non une balise de format. Pour cette raison, les balises d'en-tête ne doivent contenir que du contenu textuel. Il n'y a, par exemple, aucune raison de le faire car vous pouvez avoir l'image avant la balise d'en-tête.

0
closetnoc

Techniquement, les images ne sont pas des en-têtes et les en-têtes sont conçus pour du contenu textuel, un peu comme un chapitre dans un livre. Toutefois, cela étant dit, Google et les autres moteurs de recherche ne donneront pas un canard de ducking!

Cependant, il semble que vous utiliseriez cette méthode parce que vous utilisez du code que vous avez obtenu ailleurs, ou parce que vous ne pouvez pas vous soucier d'adapter votre code actuel. Si vous voulez vertical-align, utilisez un conteneur supérieur pour le faire, par exemple:

<div class="example-container>
    <img src="example.jpg" alt="example">
    <h1>Example</h1>
</div>

Ensuite, utilisez le vertical-align sur le conteneur parent, pas les enfants. Vous pouvez utiliser:

.example-container {
    vertical-align: middle;
    display: table-cell;
    color: #CCC;
}

.example-container img {
    margin: 0 auto;
    display: block;
}    

.example-container h1 {
    text-align: center;
}

N'oubliez pas non plus d'utiliser la balise ALT, ce qui n'est pas le cas de votre exemple de code, ce qui peut aider votre référencement.

1
Simon Hayter