• ModSenior

    @gleenk said:

    Non mi trovo d'accordo (capita .D).
    Le opinioni differenti sono alla base della crescita di ogni comunità, quindi sono benvenute. Tuttavia gleenk qui dovrebbe essere Google a scendere dal suo piedistallo e a parlare con gli operatori del settore.

    @gleenk said:

    Quindi se hai 40 icone in una pagina fai fare 40 chiamate al server?
    Sono cose differenti non confondiamoli.
    Migliorare le prestazioni di una pagina è un'ottima cosa, sempre, quindi usare gli sprites è consigliabile, ma non c'entra niente con l'uso di "text-indent: -9999px;" che al momento è considerato da Google un campanello d'allarme (e qui evidenzio che non basta solo "text-indent: -9999px;" per far penalizzare una pagina).
    Si possono ottenere gli stessi effetti con altre tecniche ed evitare quindi l'uso di "text-indent: -9999px;" ed è quello che Google suggerisce nelle sue best practises.

    Valerio Notarfrancesco


  • Moderatore

    Hehe! Si vede mi sono spiegato male.
    Non ho siti con 40 icone, ma volevo dire che non nascondo testi ecc...

    Se il titolo del sito è un Immagine che non posso rifare con i Java allora metto l'immagine nell'H1 e il titolo nel alt.

    Non mi sembra che mi abbia creato problemi, cerco di far capire al cliente che qualcosa va scritto e quindi metto il testo visibile, nNiente tecniche speciali.


  • User Attivo

    @vnotarfrancesco said:

    quindi usare gli sprites è consigliabile, ma non c'entra niente con l'uso di "text-indent: -9999px;
    Non c'entra se lasci i div, i link o chi per essi vuoti. Ma per i loghi ad esempio mi sembra che c'entri 😉

    @vnotarfrancesco said:

    Si possono ottenere gli stessi effetti con altre tecniche ed evitare quindi l'uso di "text-indent: -9999px;" ed è quello che Google suggerisce nelle sue best practises.

    Quali tecniche? Curiosità 😉


  • ModSenior

    Ogni caso è diverso e può essere risolto in modi diversi.
    Ad esempio, visto che tu accennavi al logo, per questa esigenza un modo sarebbe questo:

    <body>
    <h1><a href="/"><img id="logo" src="logo.png" alt="Descrivi il logo con le keywords" /></a></h1>
    ...

    Google legge l'attributo alt, quindi si ottengono 3 benefici:

    • si può usare tranquillamente una sprite per ridurre le richieste http e ridurre l'esecuzione di codice js
    • non si usano tecniche viste da Google come campanello d'allarme per la presenza di spam (text-indent: -9999px;)
    • ci si può posizionare anche in Google Immagini e prendere un po' di visite (a volte sorprendenti)

    Valerio Notarfrancesco


  • User Attivo

    Non riesco a capire nel tuo esempio dove useresti la sprite però :D!


  • ModSenior

    Logo.png è la mega immagine che è composta da tutte le icone.
    Associandolo il tag img all'identificativo "logo" (id="logo") faccio visualizzare solo quella porzione della mega immagine che corrisponde a quello che voglio visualizzare io in quel punto (nel file css ovviamente sono definite tutte le posizioni delle icone).

    Ho sempre pensato che le immagini sprite fossero queste (carico solo un'immagine e poi visualizzo un pezzo per volta), ma forse intendiamo cose diverse.

    Valerio Notarfrancesco


  • User Attivo

    Sono abbastanza stupito dalla forma utilizzata, non ho mai utilizzato gli sprites in questo modo, farò un tentativo perchè mi hai incuriosito. Io conosco la strada classica di usare un'immagine di background via css (anche perchè così si fa realmente una sola chiamata al server, con il metodo da te esplicato ogni volta che io metto img src faccio una chiamata) e poi sempre via css usare il background-position per "spostarla" dove mi interessa :wink3:


  • Super User

    Gleenk guarda l'HTML di una SERP di Google, usa un codice molto simile a quello.

    C'è un solo tag IMG, quello del logo, tutto il resto è fatto con la proprietà CSS background-image su SPAN o DIV, e sfruttando l'immagine caricata dal logo:

    image


  • User Attivo

    Ho finalmente verificato bene e le cose stanno a metà tra quanto detto. O così pare. Diciamo che prendendo ad esempio Google non si riesce a scoprire molto di più, o meglio, guardando il sorgente si vede che si usano gli sprites, il richiamo al logo una volta col tag img non è indispensabile ai fini grafici. Avrebbero potuto usare tranquillamente anche lì uno span ed un background-image + background-position. Hanno fatto questa cosa carina che val la pena utilizzare per i loghi (farò tesoro). Purtroppo per quanto riguarda il text indent non è una fonte attendibile il sorgente di google perchè non ho mai link (a) in display block con immagini al posto del testo. Il caso specifico di cui parlavo (oltre ai loghi per cui ho capito il meccanismo di cui parlavate) è questo. Resta il fatto che personalmente reputo molto strano e sospettoso che bigG utilizzi un <img eccc logo.png> (senza mettere l'alt tra l'altro ^^) quando di fatto quello non è il logo. ma è l'immagine di più cose. Secondo me il non mettere l'alt serve a "pararsi" proprio da questo. In tutto ciò ho scoperto come evitare il text-indent sui loghi, è già un'ottima cosa 😄


  • Super User

    @gleenk said:

    Avrebbero potuto usare tranquillamente anche lì uno span ed un background-image + background-position.

    Graficamente puoi ottenere lo stesso risultato, ma piuttosto che

    <a href="/" title="mio sito bello"><span id="logo"></span></a>
    o
    <a href="/" title="mio sito bello" id="logo"></a>

    da un punto di vista semantico, e anche per i motori di ricerca, credo sia meglio qualcosa del tipo

    <a href="/" title="mio sito bello"><img src="/logo.png" id="logo" /></a>

    Anche se manca l'alt, viene preso il title del link, che dai motori (almeno da Google) viene considerato proprio solo per i link non testuali.

    E dato che Google lato client fa delle ottimizzazioni estreme in nome della velocità (arriva a sacrificare la validazione HTML, la semantica, la SEO ...), magari questa tecnica l'aiuta. In ogni caso a me piace.

    Tornando al text-indent:-9999 del thread, è come scrivere display:none, visibility:hidden ... è nascondere del testo, e siccome si può mettere nel title del link dietro al logo e/o nell'alt del logo, non ne vedo il motivo.


  • User Attivo

    Concordo su ciò che dici e anzi ti ringrazio per lo spunto del "title". Sicuramente lo userò al posto del text-indent e farò dei confronti SEO se riesco. Non concordo però sull'ultima frase 🙂
    Non ritengo possibile che Google penalizzi display:none ecc... Significherebbe penalizzare praticamente tutti i siti che utilizzano jquery per fare un banale accordion, una navigazione a tabs o in AJAX. Mi pare del tutto inverosimile e, forse, più aapropriato ciò che ho letto secondo cui (un po' in linea con tutto quello che dicono da sempre) l'importante è l'attinenza contenutistica e la possibilità di "vedere" quell'elemento.


  • Super User

    @gleenk said:

    Concordo su ciò che dici e anzi ti ringrazio per lo spunto del "title".
    Prego.

    @gleenk said:

    Non concordo però sull'ultima frase 🙂
    Non ritengo possibile che Google penalizzi display:none ecc...

    Infatti non l'ho detto.
    Penalizza solo se lo ritiene ingannevole. E anche Google può sbagliare.
    Se la soluzione A non da problemi, e quella B ne potrebbe causare, anche se solo raramente, io preferisco la soluzione A.