5568 sujets

Sémantique web et HTML

Mon logo est ma balise H1

Bonjour à tous,

Je suis face à un problème. Mon logo est actuellement ma balise H1, hors j'aimerai que ce ne soit pas le cas ou tout du moins que le logo reste ce qu'il est évidemment, mais que la balise H1 soit le nom de mon site.

Je suis très très novice en codage, je ne comprend pas grand chose à ce langage. C'est donc pour cela que je requiert votre aide.

Voici quelques clichés pour illustrer mon problème. N'hésitez pas à m'en demander d'autres si ça peut vous servir, ainsi que des questions ou des détails.

Je suis sur Shopify si ça peut aider.

J'ai peur de toucher quoique ce soit et que ça fasse n'importe quoi.

Merci d'avance pour votre aide. upload/1652437257-84548-capturedaeacran2022-05-13aa12.png
Bonjour. Selon votre code, le logo se retrouve dans une balise h1 seulement pour la page d'accueil, sinon c'est une div, un autre titre h1 doit alors logiquement prendre le relais ailleurs dans la page.

Pour la page d'accueil, je ne vois pas d'inconvénient à ce que le logo soit dans une balise h1 du moment qu'un alt est renseigné avec le titre du site (et non "la lumière logo blanc"). Personnellement je ne l'ai jamais fait mais je me rapelle que cette technique se pratiquait beaucoup à une époque, je ne sais pas où on en est aujourd'hui avec cette pratique. De même, ça peut sembler étrange mais un h1 n'était pas obligatoire en page d'accueil. Je n'ai jamais tenté cette dernière approche non plus, elle ne me plaisait pas sur le principe.

Pour votre question proprement dite, gardez le conteneur, faites sauter tous les if else et h1 et ne gardez que la div.Header__Logo. Vous mettrez un h1 ailleurs dans la page.

Si vous voulez le code tout fait, copier/collez votre code plutôt que poster une image. Là je suis sur mobile, c'est dur de devoir tout retaper...
Modifié par Olivier C (13 May 2022 - 13:34)
Merci beaucoup pour votre aide. C'est vraiment très gentil, j'ai tout compris, vous m'avez très bien expliqué la situation.

Et si je veux faire en sorte que le H1 soit le nom de mon site sur la page d'accueil sans qu'il soit en gros sur celle-ci, comment dois-je m'y prendre ? (même s'il est invisible cela m'arrange, mais je sais pas si c'est bien perçu par Google)
infamcaz a écrit :
Merci beaucoup pour votre aide. C'est vraiment très gentil, j'ai tout compris, vous m'avez très bien expliqué la situation.

Et si je veux faire en sorte que le H1 soit le nom de mon site sur la page d'accueil sans qu'il soit en gros sur celle-ci, comment dois-je m'y prendre ? (même s'il est invisible cela m'arrange, mais je sais pas si c'est bien perçu par Google)


Il faut que le alt="" de ton logo soit ce titre que tu souhaites
Sais-tu comment je peux l'écrire ? Car lorsque je le fais, j'ai le logo et en-dessous il y'a le texte qui apparaît en mettant alt="lalumiere"
infamcaz a écrit :
Sais-tu comment je peux l'écrire ? Car lorsque je le fais, j'ai le logo et en-dessous il y'a le texte qui apparaît en mettant alt="lalumiere"


Je ne sais pas par quoi est codée la variable { { header_logo } }, ne m'y connaissant pas assez. Quand tu auras trouvé par quoi elle est codée, tu auras une correspondance pour une balise <img...>. Dans cette balise il y a à un endroit alt="..." : tu remplaces ce texte ... par celui que tu veux.
kerlutinoec a écrit :


Je ne sais pas par quoi est codée la variable { { header_logo } }, ne m'y connaissant pas assez. Quand tu auras trouvé par quoi elle est codée, tu auras une correspondance pour une balise &lt;img...&gt;. Dans cette balise il y a à un endroit alt="..." : tu remplaces ce texte ... par celui que tu veux.


upload/1652449566-84548-capturedaeacran2022-05-13aa15.jpg

Est-ce que ce serait là-dedans ?
Voyons donc ici deux images pour le logo, deux cas d'utilisation en fonction d'un contexte (utilisateur connecté ou non ?). Quoi qu'il en soit, elles disposent toutes les deux d'une balise alt. Deux solutions :
1. vous pouvez les modifier en dur à cet emplacement.
2. plus proprement, vous pouvez rechercher les variables incriminées pour chacun de vos alt, en deçà de votre template jinja2 ("section.settings.logo.alt" et son alterego pour le logo transparent) et les modifier à ce niveau.

PS : n'oubliez pas de vérifier le contenu de la balise title, placée dans le head. C'est la balise la plus importante pour votre page sur ce point de SEO, avant même le h1.
Modifié par Olivier C (14 May 2022 - 02:12)
Merci encore, tout cela m'aide beaucoup.

Justement à ce propos, j'ai aussi un léger problème sur cette balise title dans le head.
Je vous montre à quoi elle ressemble.

<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

Le problème étant que cela m'ajoute une deuxième fois le nom de ma boutique dans le titre. upload/1652517829-84548-capturedaeacran2022-05-14aa10.png
Ho là là ! Il ne devrait pas y avoir une telle soupe de conditions au niveau des templates mais bien plus en amont, au niveau de l'affectation des valeurs aux variables. C'est un thème proposé par défaut par Shopify ça ? Si c'es le cas je ne les félicite pas. De toute façon, le fait est là, on ne va pas recoder tout le thème...

Donc, je vous propose une modif', mais soyez attentif au fait que je ne connais pas le contenu des variables utilisées ici, je peux juste tenter de deviner un peu. Il faudrait peut-être faire quelque chose comme ceci :
{% if current_page == 'index' %} &ndash; {{ t: page: current_page }}{% endif %}

C'est pour cette variable que je ne suis pas sûr : `t: page: current_page`. Si ce n'est pas la bonne vous pouvez tenter de la remplacer par une autre. Sinon, en dur :
{% if current_page == 'index' %} &ndash; "LaLumière"{% endif %}

Cette ligne, intégrée à votre code plus haut, pourrait donner ceci (à tester) :
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% if current_page == 'index' %} &ndash; "LaLumière"{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>


PS : attention, dans votre code, parfois on a des accents, parfois non. Pour le titre du site il vaux mieux s'en tenir à un choix unique et être raccord.
infamcaz a écrit :
Ah ! Problème réglé en ce qui concerne ma dernière réponse. Merci quand même

Trop tard, j'ai posté... pas grave.
Sujet clos
Aller à