Visibilità SEO di Bootstrap visibile - lg/md/sm/xs - classi

Question

Mi chiedevo se qualcuno è a conoscenza dell'impatto SEO dell'utilizzo delle classi bootstrap visible per la creazione di un sito Web reattivo? Ho creato un nuovo sito Web con Bootstrap utilizzando queste classi. Sulla maggior parte delle pagine il contenuto principale è sulla sinistra e poi ci sono numerosi link sul lato destro della pagina. La mia struttura è così:

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     //Main content here on left of page 
    </div> 

    <div class="col-lg-6 col-md-6 visible-lg visible-md"> 
     //Content on right of page for large and medium devices 
    </div> 

    <!--SMALL STARTS HERE-->  
    <div class="col-sm-12 visible-sm"> 
     //Same content but drops below main content of page for small devices 
    </div> 

    <!--EXTRA SMALL STARTS HERE-->  
    <div class="col-xs-12 visible-xs"> 
     //Same content again but drops below main content and is rendered for phones 
    </div> 
</div> 

Quindi la mia domanda è se questa è una cattiva idea o no? Sono preoccupato che Google/Bing/Yahoo vedano questo come contenuto duplicato sulle mie pagine e mi penalizzino per questo. È un problema di cui dovrei preoccuparmi? Grazie.

Answer 1

Non è necessario disporre di div separati per contenuti simili. Il codice qui sotto è equivalente a quello che hai scritto purché il contenuto sono gli stessi come scritto nel commento nel codice cioè // Stesso contenuto

<div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      //Main content here on left of page 
     </div> 

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
    //Content on right of page for large and medium devices 
</div> 
</div> 

per il diritto tirare e tirare a sinistra si può ottenere che con l'aggiunta del classi pull-sinistra e pull-destra

 <div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left"> 
      //Main content here on left of page 
     </div> 

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right"> 
    //Content on right of page for large and medium devices 
    </div> 
    </div> 

se si desidera che il contenuto del diritto a non far cadere poi si deve istruire specificatamente a non cadere come questo

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left"> 
     //Main content here on left of page 
    </div> 

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right"> 
     //Content on right of page for large and medium devices 
    </div> 
</div> 

Non ti consiglierò di duplicare il tuo contenuto div in quanto sai già che non è buono per te SEO e non è manutenibile (aggiorna tutte le div per ogni modifica invece di un solo div)

Answer 2

Provare a non pubblicizzare i div per ciascun dispositivo. La classe visible non è per Content afaik, è usata per impostare galleggianti speciali, riempire aree e punti di interruzione.

combina le classi col per raggiungere il tuo obiettivo senza moltiplicare il contenuto. dato che vuoi tirare a sinistra/a destra potresti voler guardare .pull-left .pull-right.

Answer 3

Utilizzo di classi nascoste/visibili in questo modo sconfigge lo scopo di utilizzare le classi di bootstrap per le interruzioni delle dimensioni dei supporti. Mentre è difficile dare una risposta concreta a potenziali problemi di SEO, è importante ricordare che anche se il contenuto è impostato su display: none;, è ancora visibile nel codice sorgente. Questo è ciò che viene scansionato e indicizzato dai motori di ricerca. Anche se il tuo contenuto non è visibile a un utente, è visibile al motore di ricerca, quindi il tuo contenuto duplicato è ancora "visto". Come regola generale, il contenuto duplicato è negativo per SEO, anche se nessuno sarà in grado di dirti ESATTAMENTE quanto male o in quale punto esatto il contenuto duplicato diventa dannoso per i tuoi ranghi.

Oltre ad essere una pratica SEO rischiosa, è solo disordinato e difficile da mantenere come altri hanno menzionato. Il seguente markup realizza la stessa cosa:

<div class="row"> 
    <div class="col-md-6"><!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Main content here on left of page 
    </div> 

    <div class="col-md-6"> <!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Content on right of page - THIS WILL GET PUSHED BELOW OTHER CONTENT ON SMALL AND XS SCREENS 
    </div> 
</div> 

Answer 4

Google utilizzerà il contenuto visualizzato per desktop per le classifiche. Ciò significa anche classifiche mobili. Altri contenuti saranno ignorati. Non credo che Bing abbia rilasciato alcuna informazione rilevante sul modo in cui procedono.

Non esiste una penalità per contenuti duplicati. Nel tuo caso il tuo SEO non soffrirà affatto. Non devi preoccuparti.

Si consiglia di utilizzare lo stesso contenuto primario (ad esempio contenuto della pagina Web meno menu, annunci, piè di pagina e materiale presente su tutte le pagine) per desktop e dispositivi mobili.

Mantengo un summary per SEO mobile per ulteriori informazioni.

Answer 5

Utilizzare il sistema di griglia per acquisire i risultati reattivi desiderati. Ricordati di adattare il viewport in modo appropriato. Potrei riferirti a here!