Mettre la balise H1 a 2 endroits différents selon si c'est un écran de smartphone ou de PC

[Grouik]

Bonjour à tous ,

Le titre explique mon besoin. Je souhaite que ma balise H1 (de ma page produit) se trouve à un endroit si c'est un petit écran et à un autre si c'est un grand écran.

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.

Une balise H1 avec l'ID name_outside :

#name_outside {
@media (min-width: 767px) {
display: none;
}

et l'autre

#name_inside {
@media (max-width: 767px) {
display: none;
}
}

Cela fonctionne bien mais j'ai lu que ce n'était pas une bonne pratique (sans autre explication), pourtant une seule balise ne s'affiche au final, et c'est bien cela qui importe Google non ?
Quelle autre solution puis-je mettre en place ?

Je vous remercie grandement pour votre aide,

Edited May 15 by Grouik (see edit history)

[Prestashop Addict]

Les moteurs de recherche analyse le code et non le rendu, "ils" voient donc tout. Et en effet ce n'est pas une bonne pratique que de "cacher" des données redondantes, cela est souvent perçu comme du bourrage de mot clefs, et peut même vous pénaliser.

[Grouik]

Bonjour,
Merci pour votre contribution. Que le moteur analyse le code je l'entends, mais il devrait comprendre que l'intention est louable, non ?