SEO - Sito Web reattivo e menu duplicati

Ogni volta che creo un sito Web reattivo di solito creo 2 menu: 1 nascosto e utilizzato per dispositivi mobili e l'altro visualizzato come menu principale, quindi nascosto per mostrare il menu mobile. Ogni volta che si tratta di SEO e spider che navigano nel sito web mi viene offeso per avere menu duplicati? C'è qualcosa che posso fare per indicare al ragno che questo menu è per dispositivi mobili e questo è il principale?

Il motivo finale per cui ho 2 menu diversi è a causa della posizione, di solito il menu principale si trova in una sorta di barra sotto il logo ecc., Ma il menu mobile che voglio sopra tutto, quindi sopra il logo ecc.

— Howdy_McGee
fonte

Perché non usare query responsive e creare il menu position:fixedo position:absolute, inoltre, la maggior parte dei framework come bootstrap e zurb foundation hanno pull pull di query che possono spostare elementi in base al dispositivo che accede alla pagina ...

— Simon Hayter

Se crei 2 menu, questo non è Responsive. Un menu reattivo utilizza lo stesso <nav>contenuto e lo stile in modo diverso dato un particolare punto di interruzione della query multimediale.

— hexalys,

@hexalys non necessariamente. Potrei avere un menu parziale per un "Navigazione desktop principale", quindi un "Menu mobile" con una navigazione più completa, sia in una <nav>visualizzazione più elementi nella versione mobile che è più facile da navigare.

— Howdy_McVedi

@Howdy_McGee Certo. Ma non è proprio quello che descrivi nella domanda. La problematica di trasformare una barra di navigazione centrale in un menu principale o di hamburger per dispositivi mobili, ad esempio, può essere difficile, ma è realizzabile tramite modifiche al layout CSS. Sono riuscito bene qui: goo.gl/v8HdLD. E ora sono qui, perché sono anche estremamente preoccupato per quel tipo di approccio pigro deliberato del povero uomo per due cosiddetti plugin "menu responsive" per wordpress e per le loro implicazioni in termini di conformità, accessibilità e prestazioni dei motori di ricerca.

— hexalys,

@hexalys Penso che ci siano pro e contro; entrambi hanno il loro posto rispettivamente dipende solo dalla situazione. Da quando ho chiesto questo ho visto più favore a un singolo menu, ma non ho visto nulla che dica che avere due menu separati sia una brutta cosa o che sia oscurato dal SEO.

— Howdy_McVedi

Risposte:

Non hai nulla di cui preoccuparti. È possibile utilizzare display: none;per cambiare menu. I motori di ricerca sono molto più bravi a comprendere JS e CSS.

Finché non stai intenzionalmente cercando di manipolare le cose per ottenere una classifica migliore. Usando display: none; nascondere grandi blocchi di testo ti penalizzerà. Quindi, se stai usando solo per nascondere il menu del desktop sul dispositivo mobile e il verso non sei in pericolo. Dai un'occhiata a questo vecchio thread di StackExchange:

Quanto è male usare display: none in CSS?

Google in realtà è piuttosto appassionato di design reattivo e lo preferisce a un sito mobile separato.

Ecco un buon articolo su " SEO of Responsive Design "

Inoltre, dai un'occhiata a questo articolo / video:

Matt Cutts (Google), ha affermato che non devi preoccuparti che ci sia un lato negativo, legato al SEO, quando usi un approccio di design reattivo per i siti Web mobili.

— dasickle
fonte

La maggior parte delle citazioni e degli articoli si riferisce al fatto di avere un sito Web reattivo e di un sito Web mobile, che non è necessariamente quello che sto chiedendo (scusate la confusione) ma più per quanto riguarda i dis / advangages o l'utilizzo di 2 menu, un menu per un cellulare menu principale e uno per il menu principale del desktop. Sembra avere 2 menu e i crawler che leggono il codice sorgente li interpretano separatamente.

— Howdy_McVedi

Quelli erano lì per supportare la mia seconda affermazione sul design reattivo in generale. Ho incluso un altro link in cima per te e ce ne sono alcuni là fuori.

— dasickle,

@dasickle Dato questo approccio con più menu, quando si cerca un dominio specifico su google (ad esempio, cercare "warmane") includerà nei risultati di ricerca la navigazione di quel sito Web, che sarà influenzato in qualche modo?

— Dragos Rizescu,

È possibile utilizzare display: flexe quindi specificare un order: nvalore alternativo per le divisioni che sposta la divisione del menu sopra o sotto le altre divisioni.

In altre parole, non hai bisogno di due menu con lo stesso contenuto se ne nascondi sempre uno o l'altro.

— RedGrittyBrick
fonte

La maggior parte dei menu per dispositivi mobili viene "aperta" tramite un clic sul pulsante, essenzialmente aprendosi in una finestra modale di un tipo o di un altro. Quando si tratta di un sito Web che soddisfa gli standard di accessibilità, tali menu devono essere inseriti nel DOM in modo deliberato. Non è sufficiente utilizzare un solo NAV nell'intestazione e applicare CSS diversi per ottenere il layout desiderato (nella maggior parte dei casi).

In conclusione - se il tuo menu non è inizialmente visibile e si sovrappone al resto del contenuto - probabilmente sarà necessario disporre di più elementi di navigazione posizionati in diverse posizioni nel DOM (nascondendo uno e mostrando l'altro a seconda delle dimensioni dello schermo e del desiderio ).

— Cody
fonte