SEO - Site Web réactif et menus dupliqués

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.

— Howdy_McGee
source

Pourquoi ne pas utiliser des requêtes réactives et créer le menu position:fixedou position: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 ...

— Simon Hayter

Si vous créez 2 menus, ce n'est pas réactif. Un menu réactif utilise le même <nav>contenu et le style différemment en fonction d'un point d'arrêt de requête multimédia particulier.

— hexalys

@hexalys pas nécessairement. Je pourrais avoir un menu partiel pour une "navigation sur le bureau principal" puis un "menu mobile" avec une navigation plus complète, à la fois en <nav>affichant simplement plus d'éléments dans la version mobile, il est donc plus facile de naviguer.

— Howdy_McGee

@Howdy_McGee Bien sûr. Mais ce n'est pas vraiment ce que vous décrivez dans la question. La problématique de la transformation d'une barre de navigation centrale en menu supérieur ou hamburger pour mobile, par exemple, peut être difficile, mais est réalisable via des changements de disposition CSS. J'ai réussi ok ici: goo.gl/v8HdLD. Et je suis ici en ce moment, car je suis également extrêmement préoccupé par ce type d'approche paresseuse délibérée du pauvre homme pour deux plugins dits "responsive menu" pour wordpress, et leurs implications en termes de conformité, d'accessibilité et de performances des moteurs de recherche.

— hexalys

@hexalys Je pense qu'il y a des avantages et des inconvénients; les deux ont leur place respectivement ça dépend juste de la situation. Depuis que j'ai posé cette question, j'ai vu plus de faveur pour un seul menu, mais je n'ai rien vu qui dise que le fait d'avoir deux menus distincts est une mauvaise chose ou que cela se dérobe dans le référencement.

— Howdy_McGee

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.

— dasickle
source

La plupart de vos citations et articles se réfèrent à un site Web réactif et à un site Web mobile, ce qui n'est pas nécessairement ce que je demande (désolé pour la confusion) mais plus concernant les désavantages ou l'utilisation de 2 menus, un menu pour un mobile menu principal et un pour le menu principal du bureau. Il semble avoir 2 menus, et les robots d'exploration lisant le code source les interpréteraient séparément.

— Howdy_McGee

Celles-ci étaient là pour appuyer ma deuxième déclaration sur la conception réactive en général. J'ai inclus un autre lien en haut pour vous et il y en a pas mal.

— dasickle

@dasickle Compte tenu de cette approche avec plusieurs menus, lors de la recherche d'un domaine spécifique sur google (par exemple, recherche de "warmane"), il inclura dans le résultat de la recherche la navigation de ce site Web, cela sera-t-il affecté par tous les moyens?

— Dragos Rizescu

Vous pouvez utiliser display: flexpuis spécifier une order: nvaleur 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.

— RedGrittyBrick
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) ).

— Cody
source