Mettre en <h1> une image?

danzo66 · 13 Novembre 2012

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 · 13 Novembre 2012

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).

UsagiYojimbo · 13 Novembre 2012

Ou alors, opter pour une librairie comme cuFON.

danzo66 · 13 Novembre 2012

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 · 13 Novembre 2012

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 · 13 Novembre 2012

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 · 13 Novembre 2012

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 · 13 Novembre 2012

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 · 13 Novembre 2012

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 · 13 Novembre 2012

Sa marche, merci beaucoup!

danzo66 · 14 Novembre 2012

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

spout · 14 Novembre 2012

Conditional Tags: http://codex.wordpress.org/Conditional_Tags

julien.hartweg · 20 Novembre 2012

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...