Mettre en <h1> une image?

danzo66

Nouveau WRInaute
Bonjour à tous,

Voila, j'aimerais ajouter sur chacune de mes articles une image particulière qui contient du texte (sous forme d'image). Ce texte correspondrait à ce que je voudrais avoir en <h1> mais n'est bien sur pas référencé car il est pour actuellement sous forme d'image.
J'ai pour l'instant deux idées :

- Ajouter un '<h1>Titre de l'article</h1>' avec l'image juste en bas puis cacher ce <h1> avec un display:none. L'image n'aurait alors aucune valeur sémantique.

- Encadrer l'image à l'intérieur de la balise <h1> puis ajouter le texte dans la propriété alt.

Quel est selon vous la technique à adopter pour avoir le meilleur référencement? Connaissez-vous d'autres manières de procéder plus correctes svp?

Merci d'avance :)
 

spout

WRInaute accro
Solution 1, mais avec text-indent au lieu de display none (sinon même l'image on la verra pas). A condition toutefois que le texte dans le <h1> soit le même que celui de l'image (bref, pas en vue de gruger Google).
 

danzo66

Nouveau WRInaute
Merci pour ta réponse spout.

J'ai essayé de mettre un text-indent mais j'ai un petit soucis. Au fait le texte à disparu mais le "bloc" de <h1> est toujours présent ce qui donne un espace blanc juste au dessus de mon image. Que dois-je faire s'il te plaît?
 

spout

WRInaute accro
Oui si c'est pour simplement afficher une fonte custom. Cufon ou mieux @font-face.

Edit: tu dois mettre en style ce h1 (padding, margin, etc)
 

danzo66

Nouveau WRInaute
J'ai supprimé des padding, margin... mais j'ai toujours le bloc qui était sencé afficher mon texte. Est-ce une bonne pratique dans ce cas de mettre un height:0px?
 

spout

WRInaute accro
height et width sont censés être de la même taille que l'image, vu que tu vas mettre l'image en "background-image" du <h1>
 

danzo66

Nouveau WRInaute
Ah ok. Je pensais qu'il s'agissait de rajouter un <img/> à la suite de <h1>, donc sans aucun lien avec ce dernier.
Ceci étant, je conçois mon site grâce à Wordpress et il met directement les titres de mes articles en <h1>. Il y a bien une classe "entry-title", cependant, mettre un background-image sur cette classe affecterait la même image de fond sur tous mes articles alors que j'aimerais avoir des images différentes.
Il faudrait modifier le code afin de sorte à obtenir une classe différente sur tous les articles?
Peux-tu me conseiller stp car je ne vois vraiment pas comment procéder :(
 

spout

WRInaute accro
WP (ça dépend évidemment du thème), ajoute différentes classes sur <body>. Prend ton débuggeur préféré, inspecte l'element, tu verras tout ses parents.

Edit: Je viens de tester sur un WP par défaut (twenty eleven):
Code:
<body class="single single-post postid-1 single-format-standard single-author singular two-column right-sidebar" cz-shortcut-listen="true">

[...]

<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-non-classe">
Il est donc aisé de sélectionner le <h1> voulu.
 

danzo66

Nouveau WRInaute
Je me permets de reprendre ce sujet pour poser une autre question ^^
Le text-indent avec background-image par parfaitement mais j'ai certaines pages auquel je ne voudrais pas rajouter d'image d'en-tête ni afficher le texte (<h1>). Que me conseillez vous de faire dans ce cas s'il vous plaît? Merci
 

julien.hartweg

Nouveau WRInaute
Une petite question, si on cache le texte, Google utilisera t'il cette donnée pour le référencement naturel de la page ?

Je pose cette question car j'ai très souvent lu comme quoi les pages contenant des mots "cachés" ne sont pas ou mal référencé par Google...
 

Discussions similaires

Haut