Categoria: Tutto su WP

Che cos’è il web design al femminile?

È l’ennesimo stereotipo di genere o è solo un modo per identificare uno stile, un modo di fare, vedere e rappresentare le cose che potremmo etichettare con un qualsiasi altro aggettivo? Io voglio credere che sia la seconda opzione: design al femminile e temi femminili sono forse solo due espressioni un po’ approssimative per identificare layout eleganti e puliti, forme arrotondate, font gentili. E credo così tanto che sia solo un’espessione infelice, che propongo e uso molto spesso temi codiddetti femminili anche per siti di attività non necessariamente orientate ad un pubblico femminile.

(altro…)

Negli ultimi due giorni mi è capitato di vedere in tv un nuovo spot di Barilla che è un eccellente esempio di Marketing Emozionale.

(altro…)

Magari hai già sentito parlare di alt text o testo alternativo quando si parla di immagini. In questo articolo ti spiego che cos’è, perché è così importante impostarlo per ogni immagine significativa del tuo sito, blog o e-commerce e come fare.

Che cosè l’alt text o testo alternativo

L’alt text è un attributo HTML che serve per specificare il cosiddetto testo alternativo.

Il testo alternativo è quella frase che deve descrivere a parole il contenuto di un’immagine posta in una pagina web: specificare una descrizione per ciascuna immagine serve essenzialmente per chi non può vedere il contenuto dell’immagine, e per navigare fra i contenuti online usa un software speciale che si chiama screenreader.

Lo screeenreader legge a voce alta tutto ciò che è contenuto a monitor, dall’alto verso il basso, da sinistra a destra (o al contrario, nelle lingue RTL), come farebbe qualsiasi persona. Uno screenreader legge quindi essenzialmente testo. Quando lo screenreader incontra nel flusso un’immagine, può comportarsi in due modi:

• se impostato l’attributo HTML alt-text, lo screenreader leggerà il testo alternativo, che descrive l’immagine.
• viceversa, se l’alt text NON è stato impostato, lo screenreader passerà oltre, precludendo di fatto ad un ipovedente una parte del contenuto presente sulla pagina.

Un immagine vale più di mille parole, si dice, e a proposito di immagini, ti ho già raccomandato di caricare immagini ottimizzate. Lo step ulteriore nell’ottimizzazione consiste proprio nell’aggiungere l’alt text all’immagine, una volta che l’hai caricata.

L’alt text non è importante solo per i non vedenti: anche a Google piacciono di più le pagine con immagini in cui l’alt text è stato compilato.

Sebbene la tecnologia si è molto evoluta negli ultimi anni ed esistono software potenti in grado di leggere ed interpretare con precisione le immagini grazie a sistemi ad intelligenza artificiale, scrivere l’alt text è, tuttavia, una buona prassi da acquisire e mantenere, anche per riuscire a posizionare su Google le nostre immagini.

Come e dove si compila l’alt text su WordPress?

È molto semplice: tutte le volte che carichi un’immagine, hai la possibilità di farlo.

Una volta caricata l’immagine nel corpo del testo dell’articolo o della pagina, occorre compilare opportunamente l’apposito spazio nelle opzioni del blocco immagine, sulla colonna di destra.

Il testo alternativo è talmente importante che perfino WordPress ci spiega il motivo sotto al campo da compilare: “Il testo alternativo descrive la tua immagine per le persone che non la possono vedere. Aggiungi una breve descrizione con i dettagli fondamentali.”

Se, facendo un rapido “esame di coscienza” ti renti conto che non hai mai impostato un alt text per nessuna delle immagini del tuo sito/ blog, puoi rimediare così.

Vai alla sezione Media > Libreria, seleziona il layout a griglia e inizia dalla prima foto che trovi. Clicca sopra l’immagine.

Ti si apre davanti agli occhi una finestra a due colonne. Sulla sinistra hai l’anteprima dell’immagine, sulla colonna di destra invece, trovi i dettagli del file. Inizia a compilare su questa colonna i campi vuoti, tenendo presente che:

• testo alternativo è la descrizione di ciò che l’immagine raffigura per essere letta dagli screenreader agli ipovedenti;
• titolo è un attributo molto simile al titolo pagina di cui ti ho parlato qui, compilalo con alcune parole chiave. Ciò che scrivi in questo campo ti apparirà come frase in sovraimpressione al passaggio del mouse.
• didascalia è il commento da rendere visibile sotto all’immagine stessa. Tipicamente contiene riferimenti al testo oppure i crediti della foto
• descrizione è più un testo per uso interno.

Pensi che il testo alternativo non sia importante?

Il testo alternativo è uno degli aspetti dell’accessibilità di un sito che sono esclusiva responsabilità di chi ne gestisce direttamente i contenuti. Ed è così importante ché perfino Instagram, da un po’ di tempo a questa parte, ha aggiunto la possibilità di scrivere il testo alternativa sulle foto che postiamo nel nostro feed. Leggi qui per approfondire.

Quindi corri ad aggiungere il testo alternativo a tutte le immagini del tuo sito/ blog 😉

Il tag title è un elemento HTML che specifica il titolo di una pagina web. È importante perché è visualizzato nelle pagine dei risultati dei motori di ricerca (SERP) come titolo cliccabile per un determinato risultato. Non è fondamentale solo per la SEO, ma anche per l’usabilità di un sito e nella condivisione sui social. Il tag del titolo di una pagina web deve essere una descrizione accurata e concisa del contenuto della pagina stessa.

Perché il title tag è così importante?

I meta tag, come title e description (di cui parleremo presto) sono un fattore importante per aiutare i motori di ricerca a capire gli argomenti trattati dalla tua pagina e sono il primo incontro che le persone fanno con la tua pagina, fra i risultati di ricerca. Insomma dai meta tag dipende la prima impressione che molte persone hanno di te e del tuo sito. 

I tag del titolo, in particolare, vengono utilizzati in tre punti chiave:

• le pagine dei risultati del motore di ricerca (SERP),
• nei browser Web e
• sui social network.

Risultati dei motori di ricerca

Il title tag determina (con poche eccezioni) il titolo visualizzato in SERP ed è la prima esperienza del tuo sito da parte del visitatore. Anche se il tuo sito si posiziona bene, un buon titolo può essere il fattore decisivo nella scelta di fare clic sul tuo sito e di entrare.

Browser Web

Il titolo viene visualizzato anche nella parte superiore del browser come una specie di segnaposto, in particolare per le persone (come me) che hanno (il “vizio” di tenere) molte schede aperte contemporaneamente. Titoli facilmente riconoscibili, con parole chiave visibili più a sinistra favoriscono le persone a non perdersi durante la navigazione.

Social network

Alcuni social network, come Facebook, Twitter o Pinterest, usano il title tag nelle anteprime quando qualcuno condivide pagine dal tuo sito. Ecco uno screenshot di Facebook, ad esempio:

Tieni presente che alcuni social network, Facebook e Twitter, ad esempio, hanno i propri meta tag , che consentono di specificare titoli diversi dal tag title principale. in questo modo è possibile personalizzare le anteprime per ogni social e fornire titoli più lunghi quando e dove sono più utili.

---

Dove si modifica il tag title?

Il modo più semplice e più comune è installare il plugin Yoast. Su ciasuna pagina o post comparirà l’apposito riquadro sotto l’area di scrittura, dove è possibile intervenire e personalizzare il tag title

Per personalizzare invece i titoli di Facebook e Twitter, usa l’apposita scheda Social di Yoast SEO:

---

Come scrivere un buon tag title?

Scrivere un tag title in modo efficace è un’attività SEO fondamentale, che con poco “sforzo”, produce un alto impatto. Ecco alcuni consigli per l’ottimizzazione dei titoli per Google, usabilità e social:

La lunghezza del titolo conta

Se il tuo titolo è troppo lungo, i motori di ricerca potrebbero interromperlo aggiungendo dei puntini di sospensione (“…”), troncandolo e lasciando fuori a loro discrezione parole importanti.

Un buon tag title non oltrepassa la larghezza di 600px, il ché, tradotto in numero di caratteri si aggira intorno ai 60 caratteri.

Perché dico “intorno a 60 caratteri”? Perché alcuni caratteri occupano naturalmente più spazio. “M” maiuscolo è più largo di “i” o “t” minuscoli. Dai un’occhiata agli esempi seguenti:

Cerca di evitare i titoli TUTTI MAIUSCOLI. Possono essere difficili da leggere e possono limitare fortemente il numero di caratteri che Google visualizzerà.

Tieni presente che, anche entro un limite di lunghezza ragionevole, i motori di ricerca possono scegliere di visualizzare un titolo diverso rispetto a quello fornito nel tag title. Ad esempio, Google potrebbe aggiungere il tuo brand al titolo visualizzato, come nell’immagine sopra.

È bene essere consapevoli di come appaiono i titoli nei risultati di ricerca, ma avere un titolo lungo non implica affatto una penalizzazione. Perciò, usa il buon senso e pensa principalmente al tuo lettore.

Non esagerare con le parole chiave

Sebbene non vi sia alcuna penalità integrata nell’algoritmo di Google per i titoli lunghi, puoi incorrere in problemi se inizi a riempire il tuo titolo di parole chiave in modo da creare una brutta esperienza per l’utente, come:

Acquista widget, i migliori widget, widget economici, widget in vendita

Evita i titoli che sono solo un elenco di parole chiave o siano ripetute varianti e sinonimi della stessa parola chiave. Questi titoli non aiutano affatto i lettori nello scegliere il risultato sulla pagina di ricerca. Oltretutto i motori di ricerca comprendono semanticamente le variazioni delle parole chiave ed è inutile e controproducente inserire tutte le possibili versioni di una parola chiave in un titolo.

Assegna a ogni pagina un titolo unico

I titoli univoci facilitano i motori di ricerca a capire che i tuoi contenuti sono unici e di qualità, oltre a generare percentuali di clic più elevate. Sulla scala di centinaia o migliaia di pagine, può sembrare impossibile creare un titolo unico per ogni pagina, ma i CMS, e WordPress in primis, contentono di creare titoli unici per tutte le pagine importanti del tuo sito. Ad esempio, se si dispone di migliaia di pagine di prodotti con un database di nomi e categorie di prodotti, è possibile utilizzare tali dati per generare dinamicamente titoli unici come:

[Nome prodotto] – [Categoria prodotto] | [Marchio]

Evita assolutamente di usare più volte i titoli predefiniti, come “Home” o Titoli banali come “Nuova pagina”: questi titoli potrebbero indurre Google a pensare a contenuti duplicati sul tuo sito (o persino copiati da altri siti web). Inoltre, i titoli banali riducono quasi sempre la percentuale di clic. Chiediti infatti se faresti clic su una pagina intitolata “Senza titolo” o “Pagina prodotto”.

Inserisci prima le parole chiave importanti

In genere le parole chiave più vicine all’inizio del tag title potrebbero avere un impatto maggiore e performare meglio sui risultati di ricerca. Inoltre, alcuni ricerche dimostrano che gli utenti percepiscono molto rapidamente solo le prime due parole di un titolo. Questo è il motivo per cui i titoli in cui viene mostrata la keyword più a sinistra ricevono più clic. Evita quindi titoli come:

Marchio | Categoria di prodotto principale – Categoria di prodotto minore – Nome del prodotto

Il valore univoco di questo titolo sta tutto in fondo. E con buona probabilità, proprio a causa della lunghezza sarà troncato. Risultato: la parte più “interessante” è molto molto probabile che scompaia.

Approfitta del tuo brand

Se hai un brand forte e conosciuto, aggiungerlo ai tuoi titoli può aiutare ad aumentare le percentuali di clic ricevuti nelle SERP. Metti il tuo brand alla fine del titolo per tutte le pagine tranne che in home page o sulla pagina About, in cui l’interesse centrale è far proprio “passare” proprio il tuo brand. 

Scrivi per i tuoi clienti

Mentre i tag title sono molto importanti per la SEO, ricorda che il tuo primo obiettivo è quello di attirare clic da visitatori ben mirati, che probabilmente riterranno preziosi i tuoi contenuti.

È fondamentale pensare all’intera esperienza utente durante la creazione dei tag title, oltre all’ottimizzazione e all’utilizzo delle parole chiave. Il tag del titolo è la prima interazione di un nuovo visitatore con il tuo brand quando lo rintraccia nei risultati di ricerca: dovrebbe trasmettere un messaggio più positivo e accurato possibile. Mica vorrai fartelo scappare?!

Se carichi immagini e foto non ottimizzate sul tuo sito, significa che non ti importa di far attendere oltremodo il caricamento della pagina ai tuoi lettori… i quali, nell’attesa, potrebbero – anche – decidere di andare altrove… Insomma caricare immagini non ottimizzate significa perdere traffico (e clienti). Quindi che fare? Contiuna a leggere e lo scoprirai.

Un’immagine o una foto vale più di mille parole, dice il saggio, perché parla un linguaggio universale, senza bisogno di alcuna traduzione. Un’immagine evoca, ispira, sottolinea, enfatizza, va oltre ciò che è umanamente spiegabile con un testo scritto. Ma un’immagine o una foto valgono più di mille parole se e solo se fai in modo che “appaiano” sulla pagina nel minor tempo possibile…

Pensi di poter scattare foto con la tua macchina fotografica o con il cellulare e di poterle caricare così come l’obiettivo le ha catturate, senza un minimo di editing? Mi spiace contraddirti: continua a scattare in altissima definizione per il miglior risultato, ma poi prenditi un po’ di tempo e ottimizza le tue immagini prima di caricarle su WordPress.

4 cose da ricordare per convincerti a caricare immagini ottimizzate

1 Non caricare mai immagini o fotografie in alta definizione, indipendentemente dai formati dei file (JPG, PNG, GIF, TIF ecc.): non utilizzare mai le fotografie alle loro dimensioni massime. È vero che quasi tutti abbiamo connessioni veloci, ma spesso navighiamo da mobile: risparmiare kb da caricare significa diminuire i tempi di caricamento di una pagina e risparmiare sul traffico dati dei nostri clienti.

2 Segui le istruzioni del tema WordPress che hai installato sul tuo sito: nella documentazione, infatti, in genere, designer e sviluppatori specificano le dimensioni ottimali per ciascun elemento inserito nel layout: il logo, le immagini in evidenza dei post, le immagini di sfondo, i video incorporati da YouTube, ecc…

3 Ricorda che per ogni immagine che carichi su WordPress, vengono generate delle copie, di dimensioni e ratio (ovvero rapporto larghezza/altezza) differenti. Alcune di queste copie sono di default e sono riferibili a WordPress (ad esempio la thumbnail 150x150px che vedi nella libreria media), altre copie di altre dimensioni sono richieste dal tema che hai installato: questo perché ogni formato della medesima foto trova un posto ben preciso nel layout. Ad esempio troverai un formato specifico per l’immagine in evidenza, uno per la photogallery, uno per le anteprime dei servizi in home page, ecc… Il numero di queste copie e il formato sono impostate dal designer in fase di sviluppo del tema e variano appunto da tema a tema. Per questo dovresti caricare un’immagine della dimensione corretta per il posto dove deve essere visualizzata.

4 Se carichi immagini non ottimizzate e di dimensioni eccessive, riempirai in poco tempo lo spazio web messo a disposizione dall’hosting. Inoltre aumenteranno sensibilmente i tempi di caricamento della pagina, anche se WordPress si farà carico di ridimensionare e tagliare le immagini. Fra l’altro, lasciare a WordPress il compito di ridimensionare e/o ritagliare le immagini significa delegargli l’editing, un compito per cui WordPress non è molto performante, perché risulterebbe un processo del tutto automatico. Meglio che l’editing e l’ottimizzazione delle immagini venga gestito consapevolemente da te, prima di caricare le immagini.

Fai così

Non è necessario usare strumenti super professionali per ottenere risultati comunque accettabili e alla portata di tutti.

Per ritagliare le immagini a misura, consiglio di usare Canva. Tenendo sottomano la documentazione del tuo tema, apri un nuovo progetto con dimensioni personalizzate, scrivi le dimensioni in px suggerite e fai clic su “Crea un nuovo progetto”. Aggiungi una griglia a tutta pagina, carica l’immagine non ottimizzata, trascina nell’area di lavoro. Fatto. Scaricala in formato jpg.

Per comprimere e alleggerire le immagini consiglio di usare tinypng.com. Ti sarà sufficiente caricare l’immagine da ottimizzare, lasciar eseguire la compressione…

e scaricare l’immagine ottimizzata sul tuo pc.

Ora sei pronta per caricare l’immagine sul tuo sito WordPress.

Quando impari a programmare in un qualsiasi linguaggio, lo scopo del primo programma è mostrare a monitor la frase “Ciao, Mondo”. Il primo vero passo verso un nuovo universo di conoscenze. Forse è per questo che anche in WordPress c’è un Hello, World. Ma devi trovarlo e… cancellarlo subito!

Quando installi WordPress, vengono generati in automatico alcuni contenuti dimostrativi:

• Sample Page, la pagina di esempio
• Hello World, il primo articolo del blog
• alcuni commenti al post Hello, World.

A cosa servono?

• Servono a chi si avvicina per la prima volta a WordPress: l’apprendimento per imitazione è quello più rapido. Quindi avere dei modelli da cui partire aiuta a diventare operativi e autonomi in minor tempo [ed è per questo che ho creato un videocorso per te: per imparare subito WordPress e fare il tuo sito da sola, ma meglio];
• inoltre, servono a popolare di qualche contenuto il tuo nuovo sito per farti comprendere, per esempio, dove finisce l’anteprima del tuo articolo una volta che l’hai pubblicato oppure come appare il blocco “citazione evidenziata” agli occhi del tuo lettore.

Ora: poiché, appunto, sono contenuti dimostrativi, una volta che hai preso un po’ confidenza con WordPress, dovresti avere a mente di cancellarli nelle rispettive sezioni e in questo ordine:

• Sezione Commenti: selezionali tutti e cancellali
• Sezione Articoli: seleziona Hello World e cancellalo
• Sezione Pagine: seleziona Sample Page e cancellala

e sostituirli al più presto con i tuoi contenuti.

Perché cancellare i contenuti dimostrativi?

Cancellali prima che puoi, cancellali soprattutto prima che il sito vada on line, prima che Google mandi i suoi bot a scovare cosa c’è di veramente interessante sul tuo sito/ blog: sarebbe poco simpatico fargli trovare i contenuti di prova, non pensi?

Ti sembra una banalità? Ho visto fin troppo spesso siti, fatti da blasonate agenzie, on line anche da parecchio tempo, che hanno ancora Sample Page e Hello, World pubblicati: è indice di scarsa attenzione ai dettagli e a mio avviso, di una mancanza di rispetto verso i tuoi potenziali clienti.

Il tuo sito/ blog è uno dei punti di contatto (il primo, direi e il più importante) con i tuoi potenziali clienti: ti presenteresti ad un appuntamento di lavoro con il rossetto sbaffato o con la zip dei pantaloni abbassati?! Io dico di no.

---

Quindi ti concedo 5 secondi di tempo per verificare che questi contenuti siano stati cancellati dal tuo sito: semmai vedi di provvedere immediatamente (e dai una tirata d’orecchie a chi li ha lasciati lì, in bella mostra 😉 )