[Javascript] Creare sezione apri/chiudi in stile Wikipedia

Lenigmista · 15 Giu 2016

Non voglio fare cose sleali, come l'uso di keyword nascoste, oppure rendere il testo di colore bianco su sfondo bianco (Google penalizza solo se il testo non può essere letto dalle persone reali.). Ma fare come la versione mobile di Wikipedia, cioè creare una "linguetta" in una sezione che si apra con un click e mostri il testo. Mi interessa per non spoilerare i finali dei film, ma allo stesso tempo vorrei che venisse considerato il testo perché è pur sempre originale e dettagliato...

Nel loro caso anche il testo è indicizzato (vedi esempio), mentre se uso questo codice sottostante non lo è:

Codice:

<div class="nascosto">
<input type="button" value="Mostra" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Nascondi'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostra'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>Contenuto da nascondere</p>
</div></div>

Per caso sapete indicarmi il css utilizzato da Wikipedia per ottenere questo risultato? So fare Ispeziona elemento e vedere il codice, ma non ne vengo a capo.

Max 1 · 15 Giu 2016

Siccome io sono un po' duro di comprendomio, non ho capito a quale linguetta ti riferisci nella pagina che hai linkato.
Se me la indichi con più precisione forse posso aiutarti.
Fare un codice apri e chiudi non è molto complicato, in tutti i casi bisogna usare JS

Lenigmista · 16 Giu 2016

Prova a cliccare su "Filmografia parziale" o su "Voci correlate" e noterai l'effetto. Ti ho linkato la pagina della versione mobile di Wikipedia.
A me interessa che Google visualizzi ciò che scrivo e che gli utenti lo vedano facendo click su di esso; la soluzione che ho postato io non viene notata da Google nemmeno se faccio copia e incolla del testo in esso contenuto. L'aspetto estetico me lo sbrigo da solo.

Max 1 · 16 Giu 2016

Vedi se questo:

Codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/ecmascript" language="javascript">
function Mostra(id) {
if (document.getElementById(id).style.display=="none") {
document.getElementById(id).style.display = "";
}
else{
document.getElementById(id).style.display = "none";
}
}
</script>

</head>

<body>
<div>
<a href="#" target="_self"
onclick="Mostra('d1');">
Clicca qui
</a>
</div>
<div id="d1" style="display:none;border: 1px #000000 solid;width:100px;">
Testo da Visualizzare
</div>

</body>
</html>

può andarti bene.
Ovvio che al posto del link puoi mettere immagini e variare diomensioni, aspetto, posizione, exx..

Lenigmista · 16 Giu 2016

Funziona, ma perché questo nuovo codice dovrebbe indicizzare il testo in esso contenuto rispetto al mio? Entrambi non usano il display:none; ?

Max 1 · 16 Giu 2016

Uno dei possibili motivi è che hai assegnato la stessa classe al div del pulsante e al div del contenuto nascosto è sempre meglio usare un id univoco per il contenuto nascosto ed elaborarlo con getElementById(id). Un'altro ipotetico motivo è che a google non piace i div annidati. Poi sai per Google i motivi possono essere molteplici.

Come hai verificato in tempo reale quale codice Google indecizza e quale no?

.

Lenigmista · 16 Giu 2016

Il mio non lo indicizza di sicuro, è da mesi che uso questa tecnica... In tempo reale non so come si faccia, in verità il tuo devo ancora provarlo. Ho detto che funziona ma mi riferivo al fatto che apre/chiude il testo e non all'indicizzazione. Ti faccio sapere quando Google avrà metabolizzato la modifica all'articolo.

Max 1 · 16 Giu 2016

È filosofia del forum e buona norma condividere le soluzioni con tutti dopo aver chiesto aiuto e aver ricevuto risposte

Lenigmista · 19 Giu 2016

Non è cambiato nulla rispetto al codice che usavo precedentemente. Se copio parte del testo nascosto sulla barra di ricerca Google, non viene trovato. Evidentemente il display: none non fa indicizzare il testo...

Max 1 · 19 Giu 2016

Lenigmista ha scritto:
Non è cambiato nulla rispetto al codice che usavo precedentemente. Se copio parte del testo nascosto sulla barra di ricerca Google, non viene trovato. Evidentemente il display: none non fa indicizzare il testo...

Non puoi fare di queste prove che non hanno nulla di verifica, perchè molto probabilmente Google non ha ancora ripassato il tuo sito e non indicizzato il testo.
Lo spider di Google non è che ripassa i siti continuamente a volte passano molti giorni prima che ripassi di li, in particolare modo se nei metatag c'è l'istruzione di ripassare ogni mese o ogni tot giorni

Cerca

Cerca

[Javascript] Creare sezione apri/chiudi in stile Wikipedia

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Discussioni simili