Mettre en <h1> une image?

Discussion dans 'Référencement Google' créé par danzo66, 13 Novembre 2012.

Tags:
  1. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    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 :)
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
    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).
     
  3. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 928
    J'aime reçus:
    78
    Ou alors, opter pour une librairie comme cuFON.
     
  4. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    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?
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
    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)
     
  6. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    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?
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
    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>
     
  8. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    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 :(
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
    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.
     
  10. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    Sa marche, merci beaucoup! :)
     
  11. danzo66
    danzo66 Nouveau WRInaute
    Inscrit:
    14 Octobre 2012
    Messages:
    14
    J'aime reçus:
    0
    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
     
  12. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
  13. julien.hartweg
    julien.hartweg Nouveau WRInaute
    Inscrit:
    20 Novembre 2012
    Messages:
    3
    J'aime reçus:
    0
    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...
     
Chargement...
Similar Threads - Mettre <h1> image Forum Date
Mettre des <H1> dans des <div> Débuter en référencement 19 Août 2011
Mettre tout les mots de son titre dans l'url? Rédaction web et référencement 16 Septembre 2021
Impossible de mettre à jour mes articles comment faire? Débuter en référencement 25 Août 2021
Mettre plusieurs fois les mêmes itemprop dans un itemscope Débuter en référencement 21 Mai 2021
Mettre un itemprop="name" ou itemprop="url" sans avoir de itemscope ou itemtype ? Débuter en référencement 13 Avril 2021
Astuce Cahier des charges pour mettre un presta en sous domaine. Développement d'un site Web ou d'une appli mobile 12 Avril 2021
Lien d'affiliation Amazon : mettre nofollow ou sponsored ? Monétisation d'un site web 25 Février 2021
WordPress Mettre les pages catégories en NOINDEX ? Débuter en référencement 25 Août 2020
WordPress Balise title: où mettre le H1 ? Débuter en référencement 30 Mai 2020
Campagne Google Ads : mettre en veille ou réduire le budget ? AdWords 19 Avril 2020