Chaque fois que je crée un site Web réactif, je crée généralement 2 menus: 1 masqué et utilisé pour mobile et l'autre affiché en tant que menu principal, puis masqué pour afficher le menu mobile. Est-ce que je me sens obligé d'avoir des menus en double chaque fois qu'il s'agit de référencement et de navigation sur le Web? Est-ce que je peux faire quelque chose pour indiquer à l'araignée que ce menu est pour mobile et qu'il s'agit du menu principal?
La raison finale pour laquelle j'ai 2 menus différents est en raison de son emplacement, généralement le menu principal est dans une sorte de barre sous le logo, etc., mais le menu mobile que je veux par-dessus tout, donc au-dessus du logo, etc.
Vous n'avez rien à craindre. Vous pouvez utiliser display: none;
pour changer de menu. Les moteurs de recherche comprennent beaucoup mieux JS et CSS.
Tant que vous n'essayez pas intentionnellement de manipuler les choses pour obtenir un meilleur classement. Utilisation de display: none; Cacher de gros blocs de texte vous pénalisera. Donc, si vous ne faites que masquer le menu de votre bureau sur votre mobile et votre visa, vous ne courez aucun danger. Jetez un oeil à ce vieux fil de StackExchange:
Quel est le degré d'utilisation de display: none en CSS?
En fait, Google aime beaucoup le design réactif et le préfère à un site mobile séparé.
Voici un bon article sur " SEO of Responsive Design "
Consultez également cet article/cette vidéo:
Vous pouvez utiliser display: flex
, puis spécifier une valeur alternative order: n
pour les divisions qui déplacent votre division de menu au-dessus ou au-dessous des autres divisions.
En d'autres termes, vous n'avez pas besoin de deux menus avec le même contenu si vous masquez toujours l'un ou l'autre.