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é comme menu principal, puis masqué pour afficher le menu mobile. Chaque fois qu'il s'agit de référencement et d'araignées naviguant sur le site Web, est-ce que je me fais tatouer pour avoir des menus en double? Puis-je faire quelque chose pour indiquer à l'araignée que ce menu est pour mobile et que c'est le principal?
La raison finale pour laquelle j'ai 2 menus différents est à cause de l'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.
seo
web-crawlers
googlebot
navigation
Howdy_McGee
la source
la source
position:fixed
ouposition:absolute
, en outre, la plupart des frameworks tels que bootstrap et zurb foundation ont des tractions de requête qui peuvent déplacer des éléments en fonction de l'appareil qui accède à la page ...<nav>
contenu et le style différemment en fonction d'un point d'arrêt de requête multimédia particulier.<nav>
affichant simplement plus d'éléments dans la version mobile, il est donc plus facile de naviguer.Réponses:
Vous n'avez rien à craindre. Vous pouvez utiliser
display: none;
pour changer de menu. Les moteurs de recherche sont bien meilleurs pour comprendre JS et CSS.Tant que vous n'essayez pas intentionnellement de manipuler les choses pour obtenir un meilleur classement. Utilisation de l'affichage: aucun; cacher de gros blocs de texte vous pénalisera. Donc, si vous utilisez uniquement pour masquer votre menu de bureau sur mobile et visa, vous n'êtes pas en danger. Jetez un œil à cet ancien fil de StackExchange:
À quel point est-il mauvais d'utiliser display: aucun en CSS?
Google aime en fait assez le responsive design et le préfère à un site mobile séparé.
Voici un bon article sur le " SEO du Responsive Design "
Consultez également cet article / vidéo:
Matt Cutts (Google), a déclaré que vous n'avez pas à vous soucier de l'existence d'un inconvénient, lié au référencement, lors de l'utilisation d'une approche de conception réactive pour les sites Web mobiles.
la source
Vous pouvez utiliser
display: flex
puis spécifier uneorder: n
valeur alternative pour les divisions qui déplace votre division de menu au-dessus ou en dessous d'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 d'entre eux.
la source
La plupart des menus mobiles sont «ouverts» via un clic de bouton, s'ouvrant essentiellement dans une fenêtre modale d'une sorte ou d'une autre. Quand il s'agit d'un site Web répondant aux normes d'accessibilité - ces menus doivent être placés dans le DOM de manière délibérée. Il ne suffit pas d'utiliser simplement un NAV dans l'en-tête et d'appliquer différents CSS pour obtenir la mise en page souhaitée (dans la plupart des cas).
En bout de ligne - si votre menu n'est pas initialement visible et recouvre le reste du contenu - il sera probablement nécessaire d'avoir plusieurs éléments de navigation placés dans différentes positions dans le DOM (en masquant l'un et en montrant l'autre en fonction de la taille de l'écran et du désir) ).
la source