Meilleure pratique de conception réactive: dupliquer des éléments HTML pour une interrogation des médias et un impact sur le référencement?
J'ai une page avec, dans l'ordre d'affichage html, une balise figure, une balise headgroup et une balise article.
Afin de rendre la conception d'une page sensible à l'aide de requêtes multimédia, j'ai besoin d'un ordre différent pour les éléments, de sorte que l'image apparaisse après le titre.
La solution la plus simple à laquelle je puisse penser consiste à cloner la balise headgroup dans le code source et à placer la copie avant la balise figure, permettant ainsi d'afficher/masquer la balise appropriée en fonction de la taille de la fenêtre.
Mais j’ai le sentiment que ce n’est pas l’idéal pour le référencement.
Ma question est simple:
Cette technique simple a-t-elle vraiment un impact sur le référencement?
Existe-t-il un attribut HTML pour déclarer les éléments en double dans une page?
Y a-t-il une autre solution recommandée? Meilleur entrainement?
Merci d'avance pour toute contribution conseillée!
Mais j’ai le sentiment que ce n’est pas l’idéal pour le référencement.
Oui, je ne le ferais pas.
Pire encore, c’est mauvais pour vos utilisateurs qui s’appuient sur votre document (lecteur d’écran,…) ou pour ceux qui n’utilisent pas de CSS (navigateurs de texte, lecteurs de flux,…).
Y a-t-il une autre solution recommandée? Meilleur entrainement?
Utilisez CSS.
Utilisation de la "classique" float ou position ou de nouvelles méthodes telles que Régions , Boîte souple , Grid Layout , - Mise en page du modèle ,…
Existe-t-il un attribut HTML pour déclarer les éléments en double dans une page?
Non, pas exactement. Il y a le hidden attribut :
Lorsqu'il est spécifié sur un élément, il indique que l'élément n'est pas encore, ou n'est plus, directement pertinent pour l'état actuel de la page, ou qu'il est utilisé pour déclarer le contenu à réutiliser par d'autres parties de la page au lieu d'être directement accessible par l'utilisateur.
Dans votre cas, vous devez utiliser JS pour le changer (et pour reconnaître quelle requête multimédia a été déclenchée).
<hgroup>est obsolète et ne doit donc pas être utilisé.
D'après mon expérience, la différence d'impact de la commande en termes de référencement naturel est négligeable. Utilisez du code HTML sémantique (titres appropriés, légendes, etc.) et tout ira bien.
Comme indiqué ci-dessus, utilisez simplement CSS pour le positionnement.