Logo et balise h1, meilleure solution pour référencement

[jojaba]

Bonjour,

Du calme !
Je sais que ce sujet a été déjà traité à multiples reprises et j'ai trouvé quelques messages qui pourraient répondre à ma question.
Je voudrais afficher un logo à la place de mon texte de la balise h1. La meilleure solution que j'aies pu trouver était de conserver la balise h1 avec son texte et de faire quelque chose comme ça :

html :

<h1><a href="/">Mon titre</a></h1>

css :

h1 {
   background: url('logo.png') no-repeat;
   width: 400px; /* largeur de l'image */
   height: 60px; /* Hauteur de l'image */
   text-indent: -3333px; /* Pour cacher le texte */
}

Le logo est affiché en fond et le texte est décalé pour le faire disparaître.
Le souci est que dans ce cas-là, on ne peut pas demander à l'image de s'adapter aux résolutions d'écran inférieures à 400px (je pense là responsive design).

J'ai pensé faire ceci : Insérer le logo normalement dans la page Web (au début du h1), puis dans la css, faire disparaître le texte. Le code :

html :

<h1><a href="/"><img src="logo.png" alt=""><span>Mon titre</span></a></h1>

css :

h1 span {display: none;}

Qu'en pensez-vous ? Ai-je omis quelque chose ? Est-ce la bonne solution (je sais que la solution parfaite n'existe probablement pas) ?

Merci d'avance.

 

[jojaba]

Ah ben j'ai trouvé ça sur Alsacreations : http://forum.alsacreations.com/topic-2-68310-1-Balise-H1-pour-un-logo.html
Donc le alt du logo doit être renseigné et ça aura le même "poids" que du texte entre les balises h1 ?

 

[Madrileño]

Bonjour,

Complément : https://www.webrankinfo.com/forum/t/titres-h1-en-images.130375/ .

Cordialement.

 

[jojaba]

Merci Madrileño !

J'avais fait de la manière suivante sur un de mes sites :

html :

<h1>Le titre</h1>
<img src="logo.png" alt="Le titre" />

css :

h1 {display: none}

Est-ce également une "bonne solution" ?

 

[Madrileño]

Bonjour,

Il y aura toujours les pour et les contre, pour ce type de technique (cf. le lien précédent).

Cordialement.