Indice dei contenuti dell'articolo:
In merito all’importanza della User Experience e dei nuovi criteri e metriche di valutazione di Google chiamati Google Core Web Vitals ne abbiamo parlato parecchio.
Abbiamo anche parlato di quanto sia importante fornire dei valori buoni e validi all’utente finale reale e non ingannare il test Pagespeed di Google.
Oggi abbiamo avuto la conferma reale di un modus operandi fortemente deleterio e negativo, che porta dei danni a chi lo utilizza al fine di ingannare Google e ottenere un punteggio PageSpeed migliore, o almeno migliore dai test LABS.
Abbiamo voluto scriverci un post per dimostrare ancora una volta come la non conoscenza di un argomento possa solo che danneggiarti.
Il caso specifico da esaminare e il punteggio PageSpeed.
Tutto nasce dal commento di una persona su Facebook in merito al suo sito di Ricette che stenta da sempre a decollare. Abbiamo già detto in altri articoli che gestiamo importanti brand e siti di ricette di cucina con oltre 60 milioni di pagine viste al mese e pertanto gestendone ben tre tra i primi sei siti in Italia ci permettiamo di dire che qualcosa forse ne sappiamo.
L’interlocutore viene informato che il suo sito non supporta la compressione Brotli, una feature che al giorno d’oggi è molto producente, allo stesso modo di come non supporta TCP BBR veramente molto importante per le connessioni 3G lente o anche le 4G con alta perdita di pacchetti ed alta latenza.
Da parte sua riceviamo una risposta piuttosto egocentrica quanto discutibile, affermando che il suo sito sia un razzo terra-aria e che sia addirittura superiore a Giallo Zafferano.
Focalizziamo dunque l’attenzione sul report del test PSI PageSpeed Insight lasciandoci a primo impatto piuttosto di stucco perché di fatto ha tutti valori ottimali e supera tutte le metriche di Google PageSpeed Insight.
Insomma, a detta del proprietario ci troviamo di fronte ad un sito che supera i valori di Giallo Zafferano, ma Giallo Zafferano fa diverse decine di milioni di visitatori al mese, e questo sito forse qualche migliaio, talmente poche visite da non essere nemmeno stimato da servizi come SimilarWeb Sites.
Iniziamo a vedere nel dettaglio quei valori e ci troviamo di fronte ad un uso / abuso dell’utilizzo della proprietà CSS background-image
Questo sito infatti non carica le immagini nell’HTML utilizzando il tag img ma utilizzando un div con proprietà background-images che carica l’immagine come background.
<a class="penci-image-holder penci-lazy lazyloaded pcloaded" data-bgset="https://www.nomedelsito.it/wp-content/uploads/2022/06/Menta-romana-585x390.jpg" href="https://www.nomedelsito.it/ingredienti/la-menta-romana-nelle-ricette/" title="La menta romana nelle ricette" data-ll-status="loaded" style="background-image: url("https://www.nomedelsito.it/wp-content/uploads/2022/06/Menta-romana-585x390.jpg");"> </a>
E qui iniziano i dolori e la severa critica non tanto al proprietario del sito, mosso dalle migliori intenzioni, ma dei pericoli a cui si va incontro quando si cerca a tutti i costi di ottenere un punteggio PageSpeed elevato in zona verde e dunque superiore al 90, sacrificando importanti feature e funzionalità che impattano in maniera irrimediabile in questo caso sulla SEO e sul posizionamento.
IMG vs Background-image vediamo la differenza tra i due.
È lapalissiano che l’errore madornale che è stato fatto in questo caso è sacrificare l’utilizzo del tag HTML img per sostituirlo col non bloccante background-image che nasce per altri scopi e con funzionalità e relativi pro e contro, sicuramente non idonei all’uso che ne è stato fatto su un blog di ricette online che ha come scopo quello di posizionarsi ed essere cercato sui motori di ricerca.
Definizione del tag HTML IMG
Il tag img di HTML è utilizzato per includere immagini all’interno di una pagina web. Questo tag necessita di due attributi obbligatori: src e alt.
Il tag <img> viene utilizzato per incorporare un’immagine in una pagina HTML.
Le immagini non sono tecnicamente inserite in una pagina web; le immagini sono collegate a pagine web. Il tag <img> crea uno spazio di attesa per l’immagine di riferimento.
Il tag <img> ha due attributi obbligatori:
- src – Specifica il percorso dell’immagine
- alt – Specifica un testo alternativo per l’immagine, se l’immagine per qualche motivo non può essere visualizzata
Nota: inoltre, specificare sempre la larghezza e l’altezza di un’immagine. Se la larghezza e l’altezza non vengono specificate, la pagina potrebbe presentare uno sfarfallio durante il caricamento dell’immagine.
Definizione della proprietà CSS background-image
La proprietà background-image imposta una o più immagini di sfondo per un elemento.
Per impostazione predefinita, un’immagine di sfondo viene posizionata nell’angolo superiore sinistro di un elemento e ripetuta sia verticalmente che orizzontalmente.
Google non indicizza le immagini dichiarate e caricate tramite background.image
John Mueller di Google ha affermato in un hangout per webmaster che la ricerca di immagini di Google non indicizza e classifica le immagini dal codice di sfondo CSS. Ha detto che se vuoi che le tue immagini si classifichino nella ricerca di immagini di Google, allora è meglio utilizzare il normale tag immagine con l’attributo sorgente che punta all’immagine.
Il riferimento è pubblico sin dal 2018 e visualizzabile al minuto 20:55 del video qui sotto.
Se preferite accedere a della documentazione alternativa affidabile potete comprendere la stessa cosa leggendo le stesse nozioni a questa URL : https://www.seroundtable.com/google-image-search-css-25068.html
Usare un tag img. È meglio per una serie di motivi.
Quando usare <img />
- Quando la tua immagine deve essere indicizzata dal motore di ricerca
- Se ha una relazione con il contenuto, non con il design.
- Se la tua immagine non è troppo piccola (immagini non iconiche).
- Immagini dove puoi aggiungere
altetitleattribuire che hanno implicazioni molto positive lato SEO.
Quando usare i CSS background-image
- Immagini usate esclusivamente per progettare.
- Nessuna relazione con il contenuto e che non necessitano di essere indicizzate.
- Piccole immagini che possiamo caricare con CSS3.
- Immagini ripetute (nell’icona dell’autore del blog, l’icona della data verrà ripetuta per ogni articolo ecc.).
- Immagini da cui non ci si aspetta una indicizzazione lato SEO.
Sulla base dell’elenco sopra e di alcune osservazioni abbiamo questi motivi per utilizzare un imgtag:
- Un’immagine del logo ha un significato semantico e ha una relazione con il contenuto. Quindi questa è proprio la cosa giusta da fare da un punto di vista semantico.
- Google non indicizza automaticamente le immagini di sfondo, altrimenti i risultati della ricerca di immagini verrebbero riempiti con sprite di immagini. Google non ha ufficialmente rilasciato una dichiarazione al riguardo, ma molto probabilmente aggiungerà più valore al div con un’etichetta di aria, anche se molto probabilmente un’immagine avrà ancora più valore. (Bing presumibilmente non fa nulla con questo però)
Quindi: molto probabilmente è meglio usare un imgtag
Se qualcuno pensa che accedere a documentazione e riferimenti del 2018 sia sbagliato e fuorviante, ricordiamo che John Muller è ritornato recentemente sull’argomento in questo Tweet il 14 Aprile 2021 con una risposta davvero chiara che lascia poco spazio ad interpretazione.
Last I checked, we don't use CSS background images for image search, so the point might not be that relevant (also, what would a background image rank for?). A simple way to check for aria labels indexing is to search for the text in them: https://t.co/w5dOfsjg0a (=not indexed)
— 🐝 johnmu.csv (personal) weighs more than 15MB 🐝 (@JohnMu) April 12, 2021
Cosa possiamo imparare da questa esperienza?
Questa esperienza ci aiuta a comprendere come l’obiettivo di avere un sito web veloce e performante ci abbia posto nella condizione di perdere di vista quelli che sono i fondamentali sulla SEO ad esempio.
Abbiamo sin da sempre descritto il nostro lavoro (quello di sistemisti per Hosting veloci e performanti) come quello di un ottimo ingranaggio tra molti ingranaggi che costituiscono il cuore pulsante di un progetto editoriale di successo.
Ogni compartimento ed ogni branca del progetto ed i vari reparti debbono poter esprimere il meglio senza andare ad invalidare il lavoro di altri reparti e senza rinunciare a dei compromessi gestendo le dovute priorità.
In questo caso specifico abbiamo visto come sia controproducente e poco logico al fine del conseguimento degli obiettivi di business, sacrificare la SEO e la funzionalità offerta dal tag html, solo al fine di avere un sito che supera brillantemente un test PageSpeed Insight barando sulla tipologia di elemento scelto per il caricamento dell’immagine.
Il Pagespeed è molto importante ma la SEO di più.
Abbiate sempre scrupolo di valutare i pro ed i contro ad ogni modifica che apporterete al vostro sito, avendo cura soprattutto di comprendere le reali motivazioni e gli effetti collaterali che potrebbero insorgere anche in modo irreparabile.
