Novità: Alexa Skill-Cosa sono, a cosa servono. Le applicazioni vocali tutti gli vantaggi.

Novità: Alexa Skill-Cosa sono, a cosa servono. Le applicazioni vocali tutti gli vantaggi.

Cos’è una skill di Alexa?

Una nuova tecnologia basata sulla voce che in America e in altri paesi europei sta già spopolando. Non più applicazioni, navigazione di siti web o ricerche scritte, ma semplicemente richieste vocali.
Questa nuova tecnologia di Amazon, che può essere controllata con la voce, si basa su due elementi principali: la parte hardware, il piccolo altoparlante, che è Echo e la parte software, cioè quella che dà l’intelligenza e la voce, che è Alexa.
Oltre alle sue capacità di base, puoi ottenere di più e personalizzare quello che Alexa può fare per te utilizzando le skill. Le skill, o applicazioni vocali, sono per Alexa l’equivalente delle applicazioni per lo smartphone, che vengono attivate con la voce.
La cosa interessante, e quella da cui nascono grandi opportunità di business, è che ognuno di noi può far sviluppare la propria skill e metterla a disposizione di chi ha un dispositivo Amazon o accesso ad Alexa.

Skill Alexa

Quali sono i 2 tipi principali di Alexa skill e quali consigli di avere?

Oltre a sviluppare skill per la domotica, per Amazon Alexa possiamo realizzare altri due tipi di skill. La più semplice, e già standardizzata, è quella per il sommario quotidiano, mentre l’altra, più complessa, è la skill custom. La skill sommario quotidiano ci consente di far rientrare i nostri contenuti, testo letto da Alexa o audio, in quello che possiamo immaginare come il feed di Alexa, dove al comando predefinito “Alexa, dammi le notizie di oggi”, per esempio, questa riprodurrà i nostri contenuti, possibilmente brevi. Mentre con la skill custom abbiamo piena libertà nel definire i comandi che l’utente può usare per accedere ai nostri contenuti e servizi. Viene da sé quindi, che mentre per una skill sommario quotidiano è bene realizzare contenuti brevi come notizie e liste, come se fossero i titoli dei giornali, su quella custom possiamo offrire dei contenuti più lunghi, come podcast da un’ora, così da intrattenere l’utente e fidelizzarlo.
Le skill hanno senso solo per il personal branding o anche per le aziende?
Io vedo le skill come un nuovo canale di comunicazione, e come tale possiamo trovarne il giusto utilizzo se capiamo prima bene il contesto in cui l’utente potrà usare la skill, permettendoci quindi di entrare nella sua routine. Questo può portare vantaggio sia ad un personal brand che ad un’azienda, l’importante è capire bene quando un utente può trarre vantaggio nell’utilizzare la nostra skill, risolvendo un suo problema, intrattenendolo o fornendogli informazioni.

Hai un paio di esempi di skill per aziende realizzate per l’Italia?

Ci sono diverse skill di aziende nello store di Alexa in Italia, i due macro settori con più rapida crescita sono sicuramente le skill di domotica, quindi aziende produttrici di elettrodomestici che permettono di controllare con la voce i propri dispositivi, e aziende che utilizzano le skill per offrire contenuti di intrattenimento e informazione. Trenitalia, per esempio, ha realizzato una skill che ti permette di conoscere gli orari dei treni con la voce. Un altro esempio interessante che ho visto da poco è quello di Poste Italiane che permette di trasferire denaro agli utenti in rubrica.

Si possono vendere prodotti e servizi tramite le skill di Alexa?

Assolutamente sì, integrando in particolare il servizio Amazon Pay nella propria skill per vendere servizi o prodotti, pensa alla vendita di biglietti o prodotti di un eCommerce, ma anche offrire funzionalità o contenuti premium all’interno della propria skill con l’in-skill purchase, che purtroppo non è ancora arrivata in Italia, ma che spero possa arrivare presto.

Meglio puntare sulle skill di Alexa o sulle Google Action di Google Home?

Stiamo parlando di una tecnologia agli albori, secondo me l’errore più grande è cercare di definirlo guardando la situazione attuale. Volendo fare una previsione, secondo il mio punto di vista il duopolio in questo mercato sarà proprio di Amazon e Google e, come succede nel mercato degli smartphone, quando realizzi un’applicazione mobile non ti poni il problema se farlo per Android o iPhone, lo fai semplicemente per entrambi. In questo momento se si hanno le risorse si possono realizzare skill ed action allo stesso momento, in alternativa consiglio di partire dalle skill per Alexa, perché lo vedo più maturo come prodotto con le sue oltre 90.000 skill a livello globale rispetto a Google.

Come si fa a creare una skill di Alexa?

Esistono diverse soluzioni per creare una Skill. Se abbiamo le capacità possiamo iniziare programmando o assumendo un programmatore, altrimenti esistono alcune soluzioni per non programmatori, come Web Digit e Latina-Online.it che sono tra i primi CMS della voce. La cosa particolare, e secondo me interessante, in questo settore è che per sviluppare una skill di buona qualità non basta essere un programmatore, ma entra in gioco una nuova figura: il voice designer.

Cos’è il voice design e perché è così importante per creare una skill Alexa?

Quando interagiamo con un sito internet o un’applicazione mobile, abbiamo dei riferimenti visibili che ci guidano nell’utilizzo del sito o dell’app: pulsanti, colori, animazioni, etc. Nel caso delle skill invece non abbiamo nessuno di questi riferimenti. È quindi compito del voice designer creare, grazie alle conversazioni, un contesto comune tra l’utente e la Skill, così che l’utente non si senta disorientato su cosa chiedere. Quello del voice designer è nuovo mestiere che si sta definendo man mano, e personalmente lo trovo molto stimolante perché mi fa sentire parte attiva nel definire un ruolo e la storia di questo settore.
Non me ne vogliano i colleghi sviluppatori, ma il voice design è più un lavoro che si avvicina ad uno sceneggiatore o copywriter per intenderci. Spesso però sono proprio i programmatori ad essere chiamati a svolgere questo ruolo, il che è sbagliato.

Per un programmatore e un voice designer ci vuole un budget adeguato. Chi non l’avesse a disposizione cosa può fare?
Come per ogni lavoro custom il budget varia da professionista a professionista/team. Come accennavo anche prima, stanno già nascendo delle soluzioni standardizzate per realizzare una skill in autonomia. Voiceflow è un tool che permette di creare una skill senza saper programmare, operando con dei blocchi logici, come nei famosi tool di Marketing Automation o Chatbot. A mio avviso il problema è che in questo caso si risolve solo parte del problema, infatti se da una parte non abbiamo bisogno di programmare con Voiceflow dobbiamo però saper costruire un buon voice design e ad oggi ci sono più programmatori che voice designer. Per questo con la mia azienda abbiamo realizzato un tool che facilita la realizzazione di una skill senza bisogno di saper programmare e realizzare il voice design: WebDigit.it  definito da alcuni il “wordpress” della voce.

Quante sono le skill Alexa nel mondo e quante in Italia?

Ad oggi al mondo ci sono più di 90.000 Alexa Skills e circa 4.500 Google Actions. In Italia in poco più di 6 mesi siamo arrivati a 2.400 skill, di cui più di 200 sviluppate dalla mia azienda e con DigitItalia.com

Quanti Eco prevedi potrebbero esserci entro 2 anni nel mondo e in Italia?

Secondo dati ufficiali a dicembre 2018 sono stati venduti in totale più di 100 milioni di dispositivi Echo. Al ritmo di crescita attuale credo che si arriverà tranquillamente a 500 milioni di dispositivi, boom che si registrerà con l’entrata dei dispositivi Echo Auto a mio avviso. Da notare inoltre si parla di dispositivi condivisi, a differenza degli smartphone che sono personali. Spesso infatti, un solo dispositivo Echo viene utilizzato da più persone all’interno della stessa casa, quindi in realtà il numero di utenti che utilizzano questa tecnologia è superiore rispetto al numero di dispositivi. Basti pensare al numero medio di persone che compone una famiglia.

Perché è importante investire ora sulle skill Alexa?

La potenza di una Skill risiede nella sua capacità di riuscire a diventare indispensabile, entrare pienamente nella routine delle persone. Riusciamo in sostanza ad occupare una parte del tempo dei nostri utenti, risolvendo facilmente per loro un problema, fornendo informazioni o intrattenendo in una situazione in cui abbiamo la quasi totalità della loro concentrazione, a differenza dello smartphone dove riversiamo tempo spesso per noia e dove siamo costantemente bombardati da distrazioni. Penso che solo questo basti a giustificare un qualsiasi investimento.

Ma se questo non basta, essere tra i primi a sfruttare una nuova tecnologia e un canale di comunicazione, difficilmente non porterà benefici: da un lato essendo i primi possiamo crescere facilmente, facendoci trainare dalla diffusione della tecnologia stessa, e dall’altro canto ci posizioniamo meglio rispetto ai concorrenti.

Come cambiare colore in un tema wordpress

Come cambiare colore in un tema wordpress

6.12 Colors

This is probably the most powerful options section in theme options panel. You can set up any color for any part of your page.

6.12.1 General

Only two options are available in this section:

  • Theme skin – choose one of the predefined styles, or set your own colors. Note: Custom color can be used only with the Custom Skin.
  • Body background – select your background color.
  • One Color – select one color for all elements; within this option you can create your own skin color.

 

6.12.2 Header

  • Action Bar background – enter hex number for the background color for the action bar
  • Header background – enter header section background color
  • Top Bar Left background – enter background color for left top bar section
  • Top Bar Middle background – enter background color for middle top bar section
  • Top Bar Right background – enter background color for right top bar section
  • Menu Link color – enter menu item link color
  • Menu Active Link color – enter link color for active menu item
  • Submenu background – enter background color for submenu section
  • Submenu Link color – link color for submenu section
  • Submenu Hover Link color – link for submenu section on hover
  • Search Bar background – background color for search bar section
  • Subpage Title color – title text color for subpage

 

6.12.3 Content

  • Theme color – you can choose a single color for multiple icons, buttons and page elements.
  • Text color – text color for content
  • Link color – text color for links
  • Link Hover color – hover color for links
  • Note color – color for note
  • List color – color for list’s icons
  • Dropcap & Highlight background – background color for highlight and dropcap shortcodes
  • Highlight Section background – font color for highlight section
  • Hr color – color for line shortcode
  • Button background – background color for button shortcode
  • Button color – text color for button shortcode

 

6.12.4 Footer

  • Footer Theme color – color for icons and other small elements
  • Footer background – background color for footer section
  • Footer Text color – text color for footer section
  • Footer Link color – link color for footer section
  • Footer Hover Link color – link color for footer section on hover
  • Footer Heading color – heading text color for footer section
  • Footer Note color – note color for footer section

 

6.12.5 Sliding Top / Widgetized area

  • Sliding Top Theme color – color for icons and other small elements
  • Sliding Top background – background color for Sliding Top section
  • Sliding Top Text color – text color for Sliding Top section
  • Sliding Top Link color – link color for Sliding Top section
  • Sliding Top Hover Link color – link color for Sliding Top section on hover
  • Sliding Top Heading color – heading text color for Sliding Top section
  • Sliding Top Note color – note color for Sliding Top section

 

6.12.6 Headings

  • Heading H1 color – text color for h1 (Subpages header title font color)
  • Heading H2 color – text color for h2
  • Heading H3 color – text color for h3
  • Heading H4 color – text color for h4
  • Heading H5 color – text color for h5
  • Heading H6 color – text color for h6

 

6.12.7 Shortcodes

  • Accordion & Tabs Active Title color – title color for active Accordion & Tabs shortcodes
  • Blockquote color – text color for Blockquote shortcode
  • Content Link Icon color – icon color for Content Link shortcode
  • Counter Icon color – icon color for Counter shortcode
  • Get in Touch background – background color for Get in Touch shortcode
  • Icon Bar Hover Icon color – icon color for Icon Bar shortcode while hover
  • Icon Box Icon color – icon color for Icon Box shortcode
  • Image Frame Link background – link background color for Image Frame shortcode
  • Image Frame Link color – link text color for Image Frame shortcode
  • List & Feature List Icon color – icon color for List and Feature List shortcodes
  • Pricing Box Price color – price color for Pricing Box shortcode
  • Pricing Box Featured background – featured item background color for Pricing Box shortcode
  • Progress Bar background – background color for Progress Bar shortcode
  • Quick Fact Number color – number color for Quick Fact shortcode
  • Sliding Box Title background – title background color for Sliding Box shortcode
  • Trailer Box Subtitle background – subtitle background color for Trailer Box item

 

Ottimizzazione SEO delle immagini su WordPress ( e non solo ): guida facile

Ottimizzazione SEO delle immagini su WordPress ( e non solo ): guida facile

Le immagini ottimizzate a livello SEO possono creare molta rilevanza, portare significato e completare i tipi di media richiesti dalla query. Per fare tutto questo però, Google deve essere in grado di capirle, e vanno dunque ottimizzate.

Farlo è relativamente semplice una volta capiti i limiti di Google e come aggirarli, ma non è facile spiegarlo a chi non è molto ferrato sul mondo del web e dell’informatica, così come lo sono alcuni miei clienti che mi chiedono aiuto in qualità di consulente SEO ( che hanno altro a cui pensare! ).

Per questo ho creato questa guida all’ottimizzazione SEO delle immagini per la nonna, perchè sono sicuro che se a mia nonna venisse in mente di fare un bel sito web su come fare i suoi squisiti tortellini e dovesse ottimizzare delle immagini, sarebbe in grado di farcela con questa guida in mano! La guida contiene passaggi specifici per l’ottimizzazione SEO di immagini su WordPress.

Prima di partire: questa guida di fatto è un estratto adattato al blog di un manuale SEO che sto scrivendo, Manuale eterno della SEO sostenibile, ma questa è un’altra storia… per saperne di più iscrivetevi alla newsletter SEO!

Inoltre, sul fondo dell’articolo, troverete una comoda versione stampabile della guida: l’unica cosa che chiedo in cambio è una condivisione ai vostri amici sui social. Buona lettura!

Ottimizzare immagini SEO: guida per la nonna

Una delle mie beta tester ( non è vero ).

Perchè è importante ottimizzare lato SEO le immagini

Per curare al meglio il posizionamento del sito è necessario preparare e ottimizzare scrupolosamente le immagini per diversi motivi:

  • Non sono immediatamente comprensibili a Google. L’algoritmo che le analizza non è ancora in grado di capire esattamente di cosa tratti un’immagine solo “osservandola” ( anche se esistonotecnologie incredibili a riguardo ): per questo dobbiamo utilizzare gli strumenti che ci vengono messi a disposizione per dargli delle indicazioni specifiche sul contenuto dell’immagine.
  • Se Google non le capisce, non sono utili a livello SEO. Le immagini ottimizzate SEO possono iniettare significato, e quindi rendere più rilevante per una specifica query ( ricerca utente ) la vostra pagina web. Quelle incomprensibili per Google rendono solo più bassa la qualità del sito ( ed il suo posizionamento ).
  • Immagini pesanti possono rallentare il sito e quindi far scappare gli utenti. Le immagini vanno sempre adeguatamente ridimensionate e compresse per occupare il minor spazio possibile sul server e al momento di essere servite ai vostri utenti. Un sito pesante in quanto non ottimizzato è un sito poco fruibile, e quindi un sito che non piacerà a Google.

Cosa ottimizzare per rendere un’immagine SEO friendly

Tecnicamente bisogna curare 5 caratteristiche fondamentali delle immagini:

  • nome del file;
  • il testo alternativo ( alt text );
  • il titolo dell’immagine ( title );
  • dimensioni in pixel;
  • dimensione in termini di spazio su disco utilizzato;

Ognuna di queste componenti è cruciale per far capire a Google e ad un certo tipo di utenza di cosa tratta l’immagine, e per fornire un’esperienza utente positiva. Le immagini sono una componente molto importante del web moderno, e come tali vanno opportunamente ottimizzate lato SEO.

Nome del file

Il nome del file immagine deve descriverla al meglio, in modo preciso e conciso.

Il classico esempio in negativo che si fa sono i nomi che le fotocamere digitali danno ai file immagine, spesso sigle progressive che servono a capire in che sequenza sono state scattate le foto ma non le descrivono.

Esempio di nome immagine ottimizzato per la SEO

La keyword “annoiato” l’ho infilata perchè attinente e interessante, sono sicuro che si posizionerebbe subito per la long tail!

La foto d’esempio con nome immagine ottimizzato SEO che vedete qua sopra viene descritta dal nome file “maine-coon-black-tortie-annoiato.jpg” e non di certo da “DSC_2330.jpg”.

Un nome di file immagine ottimale deve descrivere l’immagine in modo sensato e realistico: niente foto di palloni blu con il nome del file “quadrati-rossi.jpg” perchè vogliamo posizionare la pagina per “quadrati rossi” e pensiamo di farlo forzando attraverso il nome del file immagine.
Se vi succede questo, il problema in questo caso è che avete selezionato delle immagini poco attinenti e rilevanti, e non il contrario!

Naturalmente, come succede in questa guida, se l’immagine rappresenta uno specifico oggetto di conoscenza astratto il suo nome può ( e deve ) rappresentarlo. Le foto di questa guida infatti si chiamano “ottimizzare-immagini-seo-guida-esempio-[numero] perchè, effettivamente, sono esempi!

Quello da non fare è riempire forzatamente di parole chiave il nome del file, ovvero sovraottimizzare (la cosiddetta overoptimization), veramente una pessima idea: è una pratica penalizzata da Googleattraverso algoritmi che regolano lo spam, come il famigerato Penguin ( che di fatto non è una penalità ma un algoritmo penalizzante, per essere precisi ) . Intendiamoci, una pagina con nomi d’immagine sovraottimizzati non farà colare a picco il sito, ma farlo dovunque potrebbe farvi passare un brutto quarto d’ora ( o anche un annetto intero visti i tempi biblici dei refresh di questi algoritmi e delle riconsiderazioni da penalizzazione manuale ). I più “precisini” potranno pensare che io stesso l’abbia fatto proprio in questo post, ma non credo che un revisore manuale considererebbe spam la nomenclatura delle immagini che ho utilizzato per questa guida.

In conclusione, la domanda giusta da farsi è “se chiudo gli occhi e mi viene descritta l’immagine attraverso il suo nome, posso capire cosa rappresenta?” Le parole chiave contenute nel nome del file devono descrivere l’immagine in modo sensato per quello che contengono o per l’oggetto di conoscenza che rappresentano, punto.

NOTA: In WordPress, così come in tanti altri CMS, il nome del file non è modificabile una volta fatto l’upload del file stesso! Ora però è apparsa l’opzione “sostituire”, con la quale si può sostituire il file, io ho sempre usato il plugin “Enable Media Replace“, anche se bisogna fare attenzione a questi plugin che martellano la tabella del DB, una sorpresina può sempre stare dietro l’angolo e trovarsi col database corrotto non è divertentissimo.

Come scrivere correttamente il nome del file ottimizzato SEO

Si utilizzano solo le parole chiave (niente articoli, preposizioni o punteggiatura, le famigerate stopwords), preferibilmente separate dal simbolo “-” ( il “meno” ,non l’underscore “_” ).
NOTA: se avete 10mila immagini ottimizzate con l’underscore, non fa nulla non correggetele, se invece iniziate ora utilizzate il simbolo del “meno” come da convenzione.

Le parole chiave più importanti e caratterizzanti, che descrivono l’immagine e che vorreste avessero maggiore peso per Google vanno inserite più “a sinistra”, ovvero più verso l’inizio del nome del file, per il principio di prominenza. Cercate sempre di descrivere già dal nome l’immagine, utilizzando anche particolari ( come la key “annoiato” nell’esempio che ho fatto nel passaggio precedente).

Se più di un’immagine ha lo stesso nome e lo stesso soggetto, utilizzate proprio i particolari per differenziare il nome del file. Inoltre, come per le parole nel testo, avere immagini che toccano più aspetti della query aumenta la rilevanza del documento. Non date quindi lo stesso nome file alle immagini e non siate troppo generici: perdete una buona occasione per creare rilevanza.

Solitamente come prima immagine di un articolo si cerca qualcosa che possa avere verosimilmente il nome dell’articolo stesso, in modo da rafforzare la rilevanza per quella query principale.

Come ultima nota tecnica vi consiglio vivamente di evitare caratteri speciali nel nome del file: lettere accentate o altri simboli grafici, come quelli matematici o di valute, vengono solitamente “tradotti” in entity codes dentro l’html ma possono mettere in difficoltà browser e server per motivi tecnici con i quali non ti annoierò. In buona sostanza evita simboli e lettere accentate nei nomi dei file immagineandando a inserire semplicemente le lettere “normali” corrispondenti.

Testo Alternativo o alt text

Il “Testo Alternativo” ( o testo alt / alt text / alt tag / tag alt ) è tecnicamente la stringa di testo che viene visualizzata quando non è possibile per il browser stampare a schermo l’immagine, per esempio perché si sta utilizzando un browser text only o un browser per persone non vedenti, che di norma “leggono” le pagine web e utilizzano il tag alt per leggere le immagini all’utente affetto da disabilità.

Il testo alternativo è l’elemento più importante di tutti insieme al nome del file : dal tag alt Google estrapola le parole chiave che descrivono l’immagine e per le quali si andrà a posizionare. E’ facilmente inseribile in ogni CMS moderno: WordPress, Joomla, Drupal e Magento hanno tutti campi facilmente modificabili.

Teniamo sempre a mente che suo scopo è fornire informazioni sull’immagine in modo “alternativo” a quello puramente visivo: per questo dovrà contenere una descrizione attinente alla realtà dell’immagine. Non bisogna ottimizzare un’immagine contente un gatto con “allevamento di gatti” perchè si mira a questa parola chiave: si tratta di fatto di una pratica di spam. Bisognerà descrivere la foto come se lo faceste per una persona con gli occhi chiusi.

Come ottimizzare il testo alternativo

Come regola pratica, il testo alternativo dell’immagine può essere semplicemente composto dalla stringa che avete utilizzato nel nome del file, con le dovute proposizioni/articoli al post dei separatori “-“.

ad esempio per l’immagine per l’immagine d’esempio avremo il seguente codice HTML:

<img src="https://www.webdigit.it/wp-content/uploads/2016/09/maine-coon-black-tortie-annoiato" alt="Un gatto maine coon black tortie annoiato"/>

Il testo alternativo è in questo caso “Un gatto maine coon black tortie annoiato“, che nel codice viene incapsulato nel tag HTML ‘alt=‘.

Come già detto, inserire montagne di parole chiave nel testo alternativo va contro il suo scopo e viola le regole di condotta di Google, quindi fate i vostri conti. Insieme al nome file, ottimizzare il tag alt per la SEO è il miglior metodo per creare rilevanza nel documento rispetto alla query principale attraverso una immagine, andando a completare semanticamente il significato della pagina.

Su WordPress si può modificare il testo alternativo sia durante l’inserimento dell’immagine sia dopo l’upload in qualsiasi momento.

Come inserire un alt tag su WordPress

Ci sono due modi per inserire il testo alternativo su WordPress: tramite la sezione Media o direttamentenell’editor del post, in ambedue i casi sia all’atto dell’inserimento dell’immagine o tramite modifica a posteriori.

All’atto dell’inserimento di un’immagine, sia tramite la sezione media che tramite l’editor degli articoli/pagine troverete questa finestra con il campo “testo alternativo”:

Come modificare su WordPress l'alt text durante l'inserimento di un immagine

Nel caso la modifica avvenga dopo l’upload dell’immagine potrete cambiare il testo alternativo semplicemente cliccando sull’immagine, selezionando poi la matita di “modifica” e andando quindi a compilare il campo “testo alternativo” ottimizzandolo come descritto in questa guida.

Come modificare un tag alt in WordPress

Attenzione: modificare il testo alternativo nel post farà si che esso  venga cambiato nella libreria media e viceversa!

Titolo dell’immagine o tag title

Il titolo dell’immagine ( o image title ) è invece un campo che serve ad espandere il significato dell’immagine nel browser utente.

Viene infatti visualizzato quando ci si ferma con il puntatore del mouse sull’immagine stessa, generando il cosiddetto tooltip.

Esempio di tag title ottimizzato per la SEO

Come vedete, il tooltip può dare più significato all’immagine, che Google lo consideri e in che maniera mi interessa il giusto: io lo ottimizzo comunque pensando all’utente

Come buona norma l’image title deve essere comunque conciso e rilevante, ma può ( e secondo me deve ) contenere informazioni aggiuntive o di natura differente rispetto a quelle riportate dal nome del file e dal testo alternativo.

Cosa inserire come titolo dell’immagine

Mi piace considerare il tag title come il momento di “testo commerciale” dell’articolo, dove semplicemente rendere ancora più efficace e accattivante l’immagine.

Alcuni colleghi dicono che incida direttamente sul posizionamento, altri dicono “assolutamente no!” , io dico che non ho mai avuto problemi di posizionamento utilizzandolo come descritto in questa guida. Lascio a voi decidere!

Il mio consiglio rimane di mantenere una certa rilevanza, anche “laterale” se volete, con l’immagine e il documento nella quale è inserita. Se le thumbnail del mio canale YouTube fossero selezionabili, invitare all’iscrizione non sarebbe sbagliato, seppur non strettamente correlato tanto all’immagine quanto alla sua natura di “preview di un video”.

Su WordPress si può modificare il title sia durante l’inserimento dell’immagine sia dopo l’upload in qualsiasi momento.

Dimensioni in Pixel

Anche se i moderni browser e i moderni CMS tendono a ridimensionare in output schermo le immagini in base alla risoluzione del nostro schermo, dal browser viene caricata comunque la versione presente sul server ( o nel caso di WordPress, la thumbnail relativa): se il proprietario del sito carica in questo un’immagine troppo grande, ovvero che occupa più spazio di quello che dovrebbe perchè ad esempio non può visualizzarla interamente e basterebbe la stessa immagine in scala, abbiamo uno spreco di banda da parte di server ed utente fruitore del sito.

Se parliamo di un blog visualizzato su desktop, in linea di massima, un’immagine non dovrebbe essere più larga di 800px e non più alta di 400px ( stime fatte in base alla grandezza media del content dei temi premium di WordPress, intorno ai 960px ).

Generalmente un’immagine ottimizzata non deve essere più grande del contenitore del sito, non ha alcun senso ( o per meglio dire, lo ha in particolari casi dove plugin necessitano di immagini più grandi ad esempio per funzioni di zoom via Javascript )!

Cerchiamo quindi di ottimizzare le dimensioni in pixel delle immagini pensando, ad esempio, a quale tipo di traffico riceviamo maggiormente ( desktop o mobile ), quali sono i tipi di schermo più utilizzati per navigare il nostro sito e quale tipologia di immagine starà meglio sul nostro sito, decidendo una dimensione e rispettandola quando la carichiamo sul server.

Se masticate l’inglese, vi rimando ad una lettura molto interessante: “What is the best screen size to design for?” ( si lo so che vostra nonna non sa l’inglese, traducete voi! ).

NOTA: Sono conscio che esistono metodi per servire immagini scalate e responsive ( come srcset che WordPress mi pare usare in automatico ora ), ma è un concetto troppo avanzato per la povera nonna non credete?

Come ridimensionare facilmente un’immagine

Se lavorate in ambiente Windows ( come dice il saggio “Nonne e Linux, ci diventi cretinux” ) per ridimensionare un’immagine è sufficiente utilizzare Paint!

Ridimensionare un'immagine con Paint

Paint, amico delle nonne che ottimizzano immagini

Una volta entrati nel programma ed avere aperto il file immagine da ridimensionare, alto a sinistra troverete questi strumenti, molto semplici e intuitivi, in grado di selezionare parte di un immagine, tagliarla (crop) e ridimensionarla (resize). Nonna approved.

Se la nonna usa Linux o MacOS, scaricatele qualcosa di simile!

Su WordPress è possibile decidere le dimensioni dell’immagine da inserire che non verrà scalata dal file originale: verrà generata una thumbnail con le dimensioni selezionate dell’immagine.

Spazio occupato su disco

E’ importantissimo, sopratutto ora dove il traffico mobile è al centro dell’attenzione di Google, far si che il tempo di caricamento di una pagina web sia il minore possibile . Generalmente una adeguata compressione delle immagini gioca un ruolo fondamentale in questo senso.

Come mia personalissima considerazione, la dimensione massima che mi sento di consigliare per una qualsiasi immagine inserita in un blog è di 100 kb. Naturalmente bisogna tenere conto non solo del “peso” della singola immagine, quanto di tutte quelle presenti in una specifica pagina. Nel complesso, cercherei sempre di non sforare i 500 kb .

Queste sono indicazioni dettate dall’esperienza, non regole scritte nella pietra!

Quando valutate quanto spazio in memoria dovranno occupare le vostre immagini cercate di capire prima di tutto chi sono i vostri utenti e quali sono le loro esigenze: un utente mobile ha bisogno di immagini più piccole e leggere, mentre un utente desktop è maggiormente disposto nei confronto di immagini di altissima qualità, anche se pesanti.

Come comprimere una immagine

Una volta tagliata e ridimensionata l’immagine con il proprio editor, se siete in ambiente Windows per comprimerla ed ottimizzarne lo spazio occupato in memoria basterà passarne una copia ( sempre meglio mantere una versione “originale” a parte ) in un programma gratuito dall’utilizzo molto semplice chiamato Riot ( scaricabile gratuitamente all’indirizzo http://luci.criosweb.ro/riot/ ).

Dopo aver lanciato il programma, trascinando una qualsiasi immagine nella sua finestra otterremo una schermata di questo tipo:

Comprimere un'immagine con Riot

Schermata di Riot con gli onnipresenti gattoni Maine Coon

A sinistra si trova l’immagine originale, in modo da poterne paragonare la qualità con l’anteprima della versione ottimizzata sulla destra; inoltre, dopo aver fatto uno zoom sull’immagine utilizzando ad esempio la macro CTRL + rotella del mouse, cliccando sulla foto e trascinando il cursore è possibile scorrere l’immagine per verificare l’impatto della compressione sui dettagli dell’immagine.

Gli aspetti che più vi interessano del programma, i quali vi permetteranno già di comprimere in modo efficace le immagini trascurando gli altri, sono i seguenti ( troverete per ogni numero un’indicazione corrispondente nell’esempio precedente ).

1. Dimensioni in Kb originali dell’immagine;
2. Dimensioni in Kb della versione compressa dell’immagine;
3. Tipologia di immagine della versione compressa ( mantenere la stessa!);
4. Livello della qualità dell’immagine compressa : trascinare la barra ( o immettere un numero da 0 a 100) per ridurre la qualità dell’immagine e conseguentemente lo spazio utilizzato. Potete osservare l’impatto visivo del cambiamento nell’immagine a destra;
5. Chroma Subsampling : è una tecnica di compressione dell’immagine che può alterare leggermente i colori riducendo però lo spazio occupato su disco. E’ utile valutare se l’impatto sull’immagine è accettabile utilizzando l’anteprima;

Comprimere immagini con Riot

Se vi siete scordati di ridimensionare l’immagine ci pensa Riot a ricordavi questo importante passaggio!

Nel caso l’immagine data in input al programma abbia delle dimensioni in pixel troppo elevate, apparirà la finestra che potete vedere qui accanto.

Selezionando “Yes” verrete portarti ad una finestra dove sarà possibile ridimensionare l’immagine: qui potrete inserire lalarghezza ( width ) e la lunghezza ( height ). Lasciare la spunta su “keep aspect ratio” per non intaccare le proporzioni dell’immagine.

Cliccare quindi “save” per salvare l’immagine nel nuovo file compresso, pronto per l’upload.

Su WordPress esistono plugin come EWWW Image Optimizerche consentono di comprimere le foto durante e dopo l’upload, ma sinceramente consiglio di farlo a mano quando la mole di fotografie lo consente, i risultati saranno sicuramente migliori.

Vi segnalo anche:

 

E gli altri elementi nell’editor di WordPress riguardanti le immagini?

In WordPress troverete anche altri due campi che però non hanno un’incidenza forte sulla SEO come quelli descritti in precedenza:
• Didascalia: questo campo viene utilizzato per inserire una didascalia che apparirà sotto l’immagine nel post. Essendo il testo inserito nell’articolo, ed essendo vicino all’immagine, può essere utilizzato per rafforzare il contesto semantico dell’immagine e aumentare la rilevanza;
• Descrizione: viene utilizzato internamente da WordPress per tenere traccia di ciò che contengono le immagini nelle liste dei media. Ininfluente a livello SEO;

L’ordine di inserimento nel codice di alt e title è importante?

Assolutamente no! L’ordine di inserimento nel codice di questi elementi non influisce in nessun modo sulla SEO ( così come l’ordine di inserimento di qualunque altro “pezzo” di HTML dentro al tag <img> ).

Consigli sull’utilizzo delle immagini “per fare SEO”

Voglio riportare alcuni consigli e sfatare alcuni miti riguardo il connubio “Immagini e SEO”.

Quante immagini devo mettere in ogni pagina / post ?

Diciamolo chiaramente: non esiste un numero ottimale di immagini applicabile per ogni tipologia di sito web.

Dipende tutto dalla query!
Digitate su Google quella per la quale vorreste posizionare il documento e guardate nei primi 10/20 risultati quante e quali immagini vengono utilizzate: saprete quello che Google si aspetta dai documenti che ha premiato come i migliori per quella specifica query.

E’ l’unico modo per potersi orientare in questa decisione.

In linea di massima un post o una pagina possono anche non avere nessuna immagine, ma solitamente si perde l’occasione di rendere più comprensibile il contenuto e di renderlo più rilevante iniettando materiale utile ( se ben ottimizzato come ho spiegato fin qua in questa sezione della guida ).

La prima immagine deve essere ottimizzata per la stessa parola chiave della pagina / post

Una cosa che io e altri colleghi usiamo fare è quella di utilizzare come prima immagine una che si possa ottimizzare per la stessa parola chiave centrale dell’articolo.

Ricordate però: sarà l’immagine a dover essere adatta alla query, e non il contrario: forzando la parola chiave su di un immagine non pertinente avrete sicuramente problemi in un futuro dove le macchine diventano in grado di riconoscere i contenuti di un’immagine,

La prima immagine in un articolo sui Maine Coon sarà, senza molte sorprese, una bella foto di Maine Coon! Posso anche ottimizzare l’immagine per keyword più specifiche, l’importante è che la preminenza sia data a quella “ad ampio spettro” del titolo del post.

Esempio di immagine ottimizzata seo

Si la smetto di usarti per questa guida SEO all’ottimizzazione delle immagini!

  • Titolo del post: Il Maine Coon, il gatto che sembra un cane
  • Nome file: maine-coon-black- tortie.jpg
  • Titolo: La nostra Penny, Maine Coon black tortie di 1 anno e mezzo!
  • Testo Alt: Maine Coon black tortie Penny
  • Dimensioni: 350*300px
  • Spazio in memoria: 40kb

Più avanti nell’articolo, dove si parla di cuccioli di Maine Coon ( che è una query molto ricercata e sviluppa il topic principale “Maine Coon” ) metto questa foto:

Esempio di immagine ottimizzata seo con gattini

…ECCOLI

  • Nome file: maine-coon-cuccioli-2-mesi.jpg
  • Titolo: Un paio di splendidi esemplari cuccioli di Maine Coon
  • Testo Alt: Maine Coon cuccioli 2 mesi
  • Dimensioni: 300*300px
  • Spazio in memoria: 43kb

Questa immagine sviluppa il topic principale e inietta un sub topic molto rilevante, pertinente e ricercato: i cuccioli.

Attenzione però a che tipo di intenzione di ricerca è collegato ai piccoletti qui di fianco, ma questa è un’altra storia…

Dove trovare immagini gratuite e valide?

Per trovare immagini gratuite legalmente utilizzabili esistono diversi siti, il mio preferito è flickr.com ( selezionate la licenza adeguata! ).

Potete trovarne molti altri su questo sito.

Utilizzare immagini protette da copyright

Se volete utilizzare un’immagine protetta da copyright, il minimo che possiate fare è citare la fonte: basterà fare un bel link in nofollow come didascalia verso la fonte.

Controllate, nel caso il vostro blog monetizzi direttamente con advertising, che l’uso commerciale sia consentito. Vi avevo avvertiti eh…