Image entre balise H1

[blman]

Suite à ce post : https://www.webrankinfo.com/forum/t/premiers-mots-de-la-page-daccueil-importance-pour-google.48840/ , je me suis un peu fait descendre :

Met juste ton logo avant ton tableau avec un beau <h1><img src="..." alt="The wind power - Atlas photographique d'éoliennes et de parc éolien"/></h1>

Scandaleux comme conseil... T'es webmaster toi?

[edit: j'me suis un peu emporté, mais si ce n'est pas scandaleux, c'est tres moche, c'est eu baaaaaaaaaaaaaaa :x ]

La discussion s'est continuée en MP et vu que nous ne sommes toujours pas d'accord, j'aurais voulu connaitre votre avis (et oui, j'ai un doute là, du coup)

L'utilisation d'une image (avec balise alt correctement renseignée) entre balise H1 est-elle correcte ou non ?
<h1><img src="mon_image.jpg" alt="Mon titre"/></h1>

Au niveau de la sémantique et de l'accessibilité, je ne vois rien qui peu géner. Je me trompe ?

 

[Szarah]

Les balises Hn sont prévues pour hiérarchiser le document en titre (H1), titres des chapitres (H2) etc ...
Y placer autre chose que du texte est vide de sens.

 

[blman]

Pourquoi ? la balise alt de l'image fait bien référence a du texte... Si tu visualise une telle page avec un navigateur textuel (style lynx), le alt sera bien identifier comme un titre.

 

[gripsous]

Y placer autre chose que du texte est vide de sens.

je suis d'accord les balise Hn sont prévues pour hierarchiser du texte, et non des images. L'image n'a pas de place dans un titre, elle est là pour argumenter un texte.

Quel interêt de mettre une image en h1 avec une alt ?! Autant mettre le texte de la alt dans le h1 à la vue de tous. Et l'image à coté

 

[TOMHTML]

tu peux très bien avoir un titre sous forme d'image
moi je ne vois rien de choquant là dedans, tant que tu n'oublie pas le ALT...


(et j'emmerde le HTML validator et ses pourfendeurs)

 

[Szarah]

Oui blman.
Mais la structure traditionnelle est utilisée par d'autres analyseurs que Lynx, par exemple par les décodeurs vocaux comme le ViaVoice de IBM, et dans ce cas la description d'une image après l'annonce Titre ne correspond à strictement rien.

Dans le temps (1997), j'ai rédigé une thèse qui préconisait à l'ISO d'implémenter une balise <H0> dans le HTML, balise qui contiendrait tous les éléments de la paraphrase Web d'une COUVERTURE de bouquin.

Peut-être dans dix ans ?

Enfin-bon, la vraie question est de savoir si Google pénalise la présence d'une image dans un H1 ... et je n'en sais fichtre rien.

 

[spidetra]

a priori, je serais plutôt de l'avis général : du texte dans des Hn.

Je ne vois rien de scandaleux à mettre une image dans un Hn, mais effectivement je n'y aurais jamais pensé.

La question intéressante est posé par Szarah : quel est le comportement des moteurs de recherches / cette syntaxe ?

 

[Sébastien Billard]

Mettre une image dans un <hn> est parfaitement valide quand cette image est effectivement un titre. Il faut bien sûr utiliser un attribut alt reprenant le texte du titre graphique.

 

[Sumatrapointfr]

Enfin-bon, la vraie question est de savoir si Google pénalise la présence d'une image dans un H1 ... et je n'en sais fichtre rien.

Je serais curieux aussi

Car si cela est prit en compte au même titre qu'un H1, on peut raisonnablement penser qu'un site dont le menu est constitué d'images découpées serait du coup autant structuré qu'un menu tout en texte aux yeux d'un moteur

J'en doute quand meme mais pourquoi pas

 

[blman]

Oui blman.
Mais la structure traditionnelle est utilisée par d'autres analyseurs que Lynx, par exemple par les décodeurs vocaux comme le ViaVoice de IBM, et dans ce cas la description d'une image après l'annonce Titre ne correspond à strictement rien.

Viavoice lira le alt en temps que titre...

L'image entre H1 est valide et accessible. Que quelqu'un qui est contre cette idée me donne la preuve du contraire...

Mettre une image (avec alt) entre H1 revient au même que d'y mettre du texte. La seule différence, c'est que les utilisateurs de navigateur graphique auront une image à la place de texte.

 

[e-kiwi]

blman, sans voir si ca "se fait ou pas" je m'interroge sur "est-ce utile". en parcourant les posts, on s'apercoit que beaucoups en sont venus à la conclusion que le "alt" d une image n'avait d'utilité que dans le cas d'une image faisant lien avec un href. dans ton cas ou l'image est juste un titre, il me semble bien que google ignore le "alt". il ne le penalise pas, il l'ignore juste.

voilou. je l'affirmes pas mais c'est ce que j'ai lu de ceux que je considères comme les "webmasters références" de ce forum dont je tairai les noms

 

[Sébastien Billard]

Le alt est du contenu, alternatif certes, mais du contenu avant tout. Il n'y a aucune raison de faire l'impasse dessus pour les images porteuses d'information, qu'il s'agisse d'accessibilité ou de référencement.

 

[e-kiwi]

je ne dis pas de faire l'impasse, je dis que si l image ne fait pas lien, ca n aide pas pour le referencement. je ne parles pas d'accessibilité.

 

[Szarah]

Tu sais, French Dread, je serais assez de ton avis si je n'avais pas observé que Google, petit à petit, est en train de déstructurer complètement l'organisation des documents telle qu'elle était prévue : abandon des METAs, ... tu connais tout ça.
Et beaucoup le suivent dans ses délires parce que bon, ça paie.
Je ne veux pas d'un Web à la Google mais des normes universelles.

 

[blman]

Enfin-bon, la vraie question est de savoir si Google pénalise la présence d'une image dans un H1 ... et je n'en sais fichtre rien.

Non, la vrai question est : est-ce que ce genre de pratique est valide et accessible ?

Si oui : Google le prend ou le prendra en charge (normalement puisque notre but à tous est d'arriver vers des normes universelles)
Si non : dans ce cas, Google ne le prend pas en charge et ne le prendra jamais en charge

 

[Szarah]

Autant pour moi, French Dread

-http://www.w3.org/TR/html4/sgml/dtd.html
Si tu cherches IMG, il dit que c'est un special et special c'est un inline et H1 n'accepte que des inline.
Tous les inline sont des text-level
Un objet, une applet, sont tous des tags qui sont au même niveau que du texte.

Donc, une image dans un H1, c'est valide.

 

[zimounet]

Mon point de vue:

Vis a vis de la sémantique: les balises <Hx> sont prévu pour hiérarchiser un document en titre, sous titre, soussoustitre etc.

Tout comme vous structurez vos copie de francais ou de philo pour ceux qui sont encore au bahu.

L'idée vous viendrais de mettre une image en titre dans un livre ou un devoir ou n'importe quel document?

Vis à vis de google: des erreurs de xhtml et de html, google à l'habitrude, donc pénalisé, je ne penses pas.

Par contre, comme cela à déjà été dit, tout le monde a constaté que l'attribut alt d'une image n'influt pas ou d'une manière insignifiante sur le référencement. Donc c'est pas le h1 qui vas lui rajouter de la "valeur" je penses.

 

[blman]

Tout comme vous structurez vos copie de francais ou de philo pour ceux qui sont encore au bahu.

Je pourrais aussi prendre les docs commerciales, journaux d'information, et autres plaquettes ou publicité : les titres sont souvent en image. C'est pas pour ça que le contenu n'est pas structuré.

 

[rikew]

A partir du moment ou l'image est le titre de la page, ca me parait complement logique de la placer dans un <h1>.

Mais il y a plus logique je pense. tu n'as qu'a mettre ton titre normalement dans le <h1> :

<h1>ton titre</h1>

Ensuite avec les css tu met ton image en background et pour pas que le texte apparaisse tu utilise par exemple la propriété : text-indent: -1000em;

tu peut faire encore plus propre :
<h1><span>ton titre</span></h1>
avec :
span h1 { display:none; }

Ya pleins d'exemple ici : http://www.csszengarden.com

 

[Kilroy]

Je me suis posé la question des balises H autour d'images car j'ai déjà vu le cas d'un site qui utilisait cette technique.

- Effectivement, ça passe bien sous Lynx

- Google prend bien en compte les textes mais pour ce que j'en ai vu jusqu'ici, il ne leur donne pas un poids très important. Difficile de faire ressortir les pages sur le contenu des alt insérés au milieu des balises H, mais c'est peut être dû à d'autres problèmes.

- le dernier aspect c'est : y a t'il un moyen de faire autrement ? J'avais testé Microsoft Weft pour faire des titres en utilisant des polices autres que les sempiternels Arial et Verdana, mais cette solution ne marche que sous IE.
Si vous connaissez une autre solution qui permette d'éviter de mettre des images dans des balises H...

 

[rikew]

regarde la source :
=> http://www.csszengarden.com/?cssfile=/1 ... css&page=0

 

[Kilroy]

J'ai cherché un peu et je suis tombé sur cette solution qui évite de passer par du remplacement de texte :
http://www.mikeindustries.com/sifr/

 

[cleden]

1: Quand on vise l'accessibilité, on ne place pas, dans une image, un texte que l'on pourrait écrire en html.

:roll:

 

[TOMHTML]

tu peut faire encore plus propre :
<h1><span>ton titre</span></h1>
avec :
span h1 { display:none; }

Google peut considérer ça comme du texte caché.
Perso je ne m'y aventurerais pas...

 

[Romuald]

tu peut faire encore plus propre :
<h1><span>ton titre</span></h1>
avec :
span h1 { display:none; }

Google peut considérer ça comme du texte caché.
Perso je ne m'y aventurerais pas...

J'utilise, et je n'ai pas de soucis.
Cela permet de décrire la bannière non ? Souvent j'y place une description du site (http://ckkoshi.free.fr/).

Par contre, j'avais lu sur un billet de Raphael de Alsacréations que les

display:none;visibility:hidden;

n'était pas pris en compte par les navigateurs voix. Peut-être qu'un

opacity:0;

(avec le hack qui va bien pour IE) pourrait faire... Mais ça reste crade.
Sinon un span en

position:absolute;et un top:-plein de pixel;

Mais ça reste un peu bricolage.