Déplacer balise H1 en fonction de la taille de l'écran

Bonjour,

Le titre explique mon besoin. Je souhaite placer ma balise H1 dans une DIV pour un écran de bureau et la mettre dans une autre DIV pour un écran de smartphone.

J'ai imaginé l'outrage suivant : placer 2 balises H1 sur ma page dont l'une est cachée selon la taille de l'écran.

L'une avec l'ID name_outside :
Code:

#name_outside {
[USER=46533]@media[/USER] (min-width: 767px) {
display: none;
}

et l'autre
Code:

#name_inside {
[USER=46533]@media[/USER] (max-width: 767px) {
display: none;
}
}

Cela fonctionne au poil mais j'ai lu que ce n'était pas une bonne pratique SEO. Pourtant une seule balise ne s'affiche au final ?
Quelle autre solution puis je mettre en place ?

Je vous remercie grandement pour votre aide,

Grouiiik

Bonjour,

Grouik33 a écrit :
Quelle autre solution puis je mettre en place ?

Ne pas utiliser de balise div du tout !

Sinon, bah, du javascript.

Amicalement,

Bonjour Parsimonhi,
Je te remercie pour ta réponse.
Comme je n'ai pas envi de déstructurer toute la page (page produit de Prestashop), je vais étudier les possibilités en javascript. Merci pour cette piste.

++

salut
pas besoin de div (ni de js) tu déplace ton h1 avec les mediaquerries

Hello,

Pour la déplacer physiquement dans le DOM, les media queries seront inefficaces (en tout cas je ne vois pas comment).

Effectivement la solution JS me semble être une bonne piste.

Il existait à l'époque une spécification CSS en brouillon qui s'appelait "Regions" et qui permettait de réaliser ce que tu souhaites, mais elle a été abandonnée. EDIT : en fait le brouillon existe encore mais les navigateurs ont cessé de l'implémenter : https://caniuse.com/css-regions

Bonne nouvelle : quelqu'un s'était amusé à créer un Polyfill (une simulation) qui fait le job. Tu peux le voir sur ce Codepen : https://codepen.io/raphaelgoetter/pen/aNrrNO

EDIT 2 : Peut-être que Anchor Positioning pourrait y parvenir mais il faudra sans doute bidouiller un peu (et le support navigateur n'est pas génial). Un exemple : https://codepen.io/raphaelgoetter/pen/raBjPZJ
Modifié par Raphael (15 May 2025 - 17:10)

Merci pour toutes ces contributions !
Je vais étudier tout ça au microscope.

Peut-on m'expliquer l'intérêt de changer l'affectation de la balise H1 pour les mobiles ?
La balise H1 devrait correspondre au titre principal de la page (pas le title). Si la version mobile n'a plus le même titre principal sur H1, il s'agit d'un autre agencement de la page, non ? La version mobile ne correspond alors plus à la version desktop.
Je demande à être éclairé sur ce point.

Bonjour,

Pareil, pourquoi 2 divs et deux titre principaux ?

Il est possible de n'avoir qu'un seul titre et de modifier le texte visible avec une indentation négative importante puis en insérant un pseudo flottant sans indentation qui affiche le contenu d'un attribut de donnée (data-attribute) https://developer.mozilla.org/fr/docs/Web/HTML/How_to/Use_data_attributes


Un exemple CSS , qui peut néanmoins être consolidé avec du javaScript.

<h1 data-small="titre court">Un titre pas trop court qui a de la place.</h1>

@media (max-width:620px) {
  h1 {
    text-indent:-100em;/* mettre une valeur suffisante */
    overflow:hidden; /* double emploi: 
      - cache le texte initial si encore dans l'espace de l'écran
      - englobe le pseudo flottant 
      */
  }
  h1::after {
    content:' ' attr(data-small);
    text-indent:0;/* reset */
    float:inline-start /* ou left / right selon la direction du document */
  }
}

J'ai une impression de déjà vue ....
trouvé: https://forum.alsacreations.com/topic-4-91284-1-Est-il-possible-de-masquer-un-mot-d-une-phrase.html Modifié par gcyrillus (16 May 2025 - 15:59)

C'est effectivement mieux.
Mais je n'ai pas compris la question initiale. S'agit-il de deux versions de H1, l'une plus courte pour les mobiles. Ou de mettre ce H1 à deux emplacements différents. Dans ce dernier cas, le css devrait suffire.
Maintenant, pour le SEO et vu l'importance de cette balise H1, il est préférable que le titre soit le même pour les desktop et les mobiles. Le site étant le même, le référencement aussi. Avec le "Mobile Index First" De Google, ce sont les versions mobiles qui sont prises en compte pour l'indexation.
Ne pas oublier non plus que la taille de ces balises est proportionnelle à la taille par défaut de la police du navigateur. Elles sont normalisées et descendantes. Les manipuler en taille peut apporter des incohérences sur le site si on ne respecte pas leurs proportions.

salut
avec 2 blocs h1 placées aux endroits voulus et affichées alternativement selon l'écran avec 'display'
Modifié par drphilgood (19 May 2025 - 04:07)

Bonjour à tous,
Merci pour vos généreuses contributions.

@drphilgood, c'est exactement ce que j'ai fait, et ça fonctionne !!!
Mais j'ai lu je ne sais plus où que cela me pénaliserait lourdement au niveau SEO. Et comme il s'agit d'une page produit d'un gros site de ecommerce je n'ai pas envi de jouer. Je dois donc revoir la copie.

@Bongota
Il s'agit de la même balise H1.
Sur un écran supérieur à 767px la balise H1 se trouve en haut de page dans la 2ème colonne. Dans la 1ère colonne (DIV) il y a la photo de l'article. Cette présentation me convient parfaitement.
Sur un Smartphone, la 1ère colonne (la photo) apparait naturellement en 1er, il faut scroller pour voir le Titre de la page. Je voudrais tout simplement remonter la balise H1 dans la 1ère DIV.

@gcyrillus
Je ne vois pas comment je peux changer la balise H1 de DIV avec cette méthode. Mais je vais regarder de plus près.

Pour l'instant j'étudie la solution JS. Merci encore pour vos retours.

Bonsoir,

Sur votre site, au lieu de déplacer le <h1>, ne serait-il pas possible de déplacer le conteneur du <h1> ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="container2colonnes">

        <div id="colonne1" class="col">
            <p>PHOTO</p>
        </div >
        
        <div id="colonne2" class="col">
            <h1>h1</h1>
        </div>

    </div>

</body>
</html>

#container2colonnes{
    display: flex;
    justify-content: center;
}

.col{
    height: 50px;
    padding: 20px;
    text-align: center;
    flex-grow: 1;
}

#colonne1{background-color: yellow;}
#colonne2{background-color: pink;}

@media (max-width: 500px) {
    #colonne2{ order: -1;}
    #container2colonnes{flex-direction: column;}
}

grand ecran



petit ecran


Modifié par alain_47 (19 May 2025 - 17:55)