Da Lightroom a WordPress come creare immagini ottimizzate per il SEO

WordPress è un software che alimenta fino al 25% dei siti web del web. I principali siti Web come il New York Times, la CNN e Forbes utilizzano tutti WordPress per alimentare i loro siti web.

Quello che WordPress è per gli sviluppatori web, Adobe Lightroom è per i fotografi. In questo tutorial imparerai come utilizzare questi due potenti strumenti insieme. Imparerai come trasferire le tue immagini da Lightroom e in un sito guidato da WordPress in modo rapido e semplice. Soprattutto, lo faremo in un modo che è SEO-friendly in modo che le tue immagini vengano scoperte.

Immagine SEO per principianti

L'ottimizzazione dei motori di ricerca (nota anche come SEO) è un insieme di pratiche correlate di progettazione, pubblicazione e gestione dei dati che aiutano a trovare le pagine Web. La verità è che non c'è davvero alcuna magia per SEO quando si tratta di immagini. Tutto si riduce ad aggiungere un contesto alle tue foto in un modo che abbia senso per i computer.

Informazioni semantiche

Pensaci in questo modo: inserisci una query di ricerca nel motore di ricerca di tua scelta. Il motore di ricerca ti mostra un elenco di pagine che corrispondono a quello pensa stai cercando. I motori di ricerca utilizzano programmi crawler-computer e algoritmi algonriti che esplorano il Web automaticamente e creano elenchi di siti che corrispondono alle parole chiave. 

Un motore di ricerca può dire che le immagini sono su una pagina web, ma non può facilmente determinare cosa rappresenta un'immagine, quindi dobbiamo integrarla con dati aggiuntivi, un tipo che può capire. Questo tipo di dati è chiamato informazione semantica: è un'informazione che aiuta a costruire un significato per le singole fotografie nel contesto tra loro e il resto della pagina web. Utilizziamo i campi dei metadati per trasmettere questi dati sematici.

Google guarda ad alcuni dei tag nascosto nel nostro codice HTML per aiutare a trovare le immagini. Possiamo aggiungere cose come titoli, tag, e alt testo nel codice del nostro sito web per aiutare un motore di ricerca a indicizzare il nostro sito nel modo più semplice possibile. Non è garantito che aggiungendo informazioni sematic sarai in grado di spostare il tuo sito alla prima pagina dei risultati di Google, ma intraprendere alcuni semplici passaggi SEO può sicuramente aiutare le tue possibilità. È anche solo una buona data hygene!

Ecco quattro parti chiave delle informazioni sull'ottimizzazione SEO da aggiungere alle tue immagini:

Nomi di file

Se non fai altro, assicurati di rinominare le tue immagini in un modo che le descriva. Un semplice nome di file come "resizing-images-tutorial.jpg" è un enorme miglioramento rispetto a "IMG_9052.cr2". Usare un nome di file con alcune parole che lo descrivono migliorerà le sue possibilità di essere trovato.

Quando esporti da Lightroom, il mio modo preferito per farlo è usare il "Denominazione file" sezione della finestra di esportazione. Tieni presente che vogliamo rinominare l'immagine esportata, non il file originale. Trovare la Denominazione dei file sezione e controllare il Rinomina a scatola. Quindi scegli un'opzione di menu a discesa che include "nome personalizzato" in modo che possiamo aggiungere il nostro testo personalizzato.

L'ultimo passaggio consiste nell'aggiungere il testo personalizzato. Per il Web, è meglio separare le parole in un nome file utilizzando trattini anziché spazi. Personalizza il nome del file di ciascuna immagine per i migliori risultati. 

Usa un'opzione personalizzata per dare ai tuoi file una migliore possibilità di essere trovato. Alcune parole che descrivono il contenuto di un'immagine vanno molto lontano!

Alt Text

Il testo alternativo, o "alt text", viene utilizzato per fornire una descrizione testuale del contenuto di un'immagine. Ricorda che un motore di ricerca non può determinare cosa c'è in un'immagine (ancora) quindi dobbiamo aiutarlo usando il testo alternativo.

Probabilmente non vedrai mai il testo alternativo; la parte importante è che un motore di ricerca funzionerà.
Anche il testo alternativo di un'immagine deve essere impostato in HTML. Il testo alternativo dovrebbe descrivere brevemente l'immagine. Possiamo impostare questo alt text nella libreria di WordPress, e WordPress lo aggiungerà automaticamente.

Il testo alternativo viene inserito nello stesso bit di codice HTML che contiene le immagini. Usalo per aggiungere una descrizione dell'immagine. Una breve descrizione dei contenuti di un'immagine è fondamentale per l'ottimizzazione SEO. Se scrivere codice non è cosa, non preoccuparti; vedremo come aggiungere questo alt text usando WordPress nella prossima sezione di questa guida.

Avere alt text per le tue immagini è anche cruciale per i non vedenti. Il software di lettura dello schermo progettato per aiutare coloro che hanno perdita totale o parziale della vista leggerà il testo alternativo al posto di un'immagine. Amherst College ha un'ottima guida per ottimizzare le tue pagine web per l'accessibilità.

Titoli

Il titolo di un'immagine dovrebbe anche essere contenuto nel tag HTML. Il titolo dovrebbe essere una versione ancora più breve della descrizione, con solo poche parole che segnalano il contenuto di un'immagine.

Dovresti anche impostare un titolo dell'immagine in HTML con il tag "title =" nello stesso blocco immagine. Ancora una volta, WordPress rende questo facile da aggiungere.

I titoli sono un altro tassello per aiutare i motori di ricerca a indicizzare il nostro sito. WordPress contiene un campo titolo che aiuterà i nostri sforzi SEO.

didascalie

Pensa a una didascalia come il testo che mostra immediatamente dopo un'immagine che fornisce ulteriori commenti. I sottotitoli non vengono aggiunti direttamente a un tag immagine, ma certamente lo completano. In HTML5, il

il tag è parte del
gruppo, che è ancora meglio. Puoi imparare di più su come scrivere didascalie efficaci in Dawn Oosterhoff Didascalia, Descrizione, Titolo, ALT: Come aggiungere informazioni semantiche alle immagini. scritturauna forte didascalia è una delle abilità più sottovalutate, utile per ogni fotografo!

Mappatura dei metadati da Lightroom a WordPress

Ora che comprendiamo i pilastri dell'immagine SEO, vediamo come aggiungerli facilmente e rapidamente al nostro sito basato su WordPress. Possiamo portare avanti un'immagine titolo didascalia dal nostro catalogo Lightroom a WordPress.

In Lightroom Biblioteca modulo, trova il metadati pannello sul lato destro. Puoi vedere il titolo dell'immagine e la didascalia. 

Quando esporti un'immagine da Lightroom, assicurati di includere "tutti i metadati."Ciò garantirà che il titolo e la didascalia vengano salvati nell'immagine JPEG e vengano letti e inclusi da WordPress.

Assicurati che durante l'esportazione di un'immagine, includi i metadati nel file. Ciò renderà disponibili i metadati in WordPress.

Carica su WordPress

Una volta esportato un file immagine con un nome ordinato e un set di didascalie, sei pronto per caricarlo su WordPress. Vai al WordPress Libreria multimediale e carica questa immagine come faresti normalmente. L'immagine caricata avrà lo stesso titolo e didascalia che abbiamo impostato nel pannello dei metadati di Lightroom!

Finalmente i frutti del nostro lavoro! Il titolo e la didascalia che noi

Dovrai aggiungere manualmente il testo alternativo alle immagini quando raggiungono WordPress. Sfortunatamente, in Lightroom non esiste un campo che esegue il mapping a "testo alternativo" in WordPress. Ricorda che questo è il testo nascosto nel codice HTML che aiuterà i motori di ricerca a trovare e indicizzare le nostre immagini.

Il testo alternativo dovrà essere aggiunto alle immagini all'interno della libreria multimediale di WordPress.

Dopo aver impostato il testo alternativo, premere Aggiornare per salvare l'immagine. Quando lo inserisci in un post o in una pagina, WordPress trasporterà i metadati e includerà i metadati che abbiamo aggiunto nel codice HTML.

Questi passaggi sono un importante aiuto per l'ottimizzazione di un'immagine per il web. Possiamo anche fare un ulteriore passo avanti ridimensionando e comprimendo le immagini per il web.

Ridimensionamento per il Web

Ottenere immagini pronte per il web significa molto più che caricarle con parole chiave e rilasciarle in WordPress. Dobbiamo anche pensare alle dimensioni e alle dimensioni del file. Ricorda che una parte enorme della popolazione connessa a Internet non è abbastanza fortunata da avere una grande connessione a banda larga, e dovremmo considerare anche la loro esperienza.

mobiForge ha recentemente scritto che la dimensione media del file di una pagina web è maggiore di tutto il classico videogioco del 1993 Doom. Questo non è intrinsecamente un male, ma è un ottimo promemoria per dire che le pagine web sono più ricche di immagini multimediali e di grandi dimensioni di quanto non siano mai state. Serve come un ottimo promemoria per ottimizzare sempre le dimensioni del file immagine. 

Quando siamo pronti per inviare immagini al web, ci sono due fattori chiave da ottimizzare per: dimensioni e qualità. Diamo un'occhiata a come perfezionare entrambi.

Dimensioni

Le dimensioni di un'immagine digitale sono la lunghezza e la larghezza dell'immagine, misurate in pixel. Un'immagine che si dice sia "600 per 400 pixel" è dedotta per avere una larghezza di 600 pixel e un'altezza di 400 pixel. 

Le immagini catturate con la mia Canon 6D sono 5472 x 3648 pixel. Quando li vedi su Tuts +, sono vincolati nel layout a 850 pixel sul lato lungo. In teoria, potrei caricare l'immagine completa, ma non importa cosa apparirà ad un massimo di 850 pixel. 

Questo effetto è esattamente il motivo per cui ridimensiono sempre le mie immagini in un formato web-friendly. I miei spettatori non hanno monitor che mostrano ogni singolo pixel, quindi ha senso solo ridimensionare l'immagine e salvarli il tempo di caricamento.

Questa simulazione illustra quanto è grande un'immagine originale da 10 megapixel rispetto a come apparirà sul web. L'anteprima dell'immagine di grandi dimensioni che vedi è una versione ridimensionata dell'intera immagine da 10 megapixel che ho acquisito. Nel riquadro, la dimensione è stata confrontata con il modo in cui appare su Tuts +. Un'immagine a larghezza intera di 10 megapixel ha una larghezza di oltre 4000 pixel, mentre appare in articoli Tuts + a soli 850 pixel sul lato lungo. Questa è un'ottima dimostrazione del perché il ridimensionamento è così importante.

Qual è la dimensione corretta per un'immagine sul web? La risposta è "dipende da dove sta andando". Se utilizzi WordPress, controlla la documentazione del tema per le larghezze dell'immagine supportate. Lo sviluppatore determina come le immagini appariranno in un tema WordPress. Se la documentazione non è disponibile, prova un sito come PiliApp per eseguire le tue misurazioni su un'immagine sul sito che pubblicherai.

Qualità

Le immagini di alta qualità utilizzano più spazio sul disco. Più un'immagine dettagliata e colorata è, più grande sarà il file. Anche se il nostro archivio di immagini dovrebbe includere queste immagini di qualità completa, la preparazione di un'immagine per il Web implica un compromesso tra qualità e dimensioni del file. Dare un po 'di qualità porta a un tempo di caricamento molto più rapido per il visualizzatore.

Quando si esporta in Lightroom, è possibile utilizzare il Qualità cursore per regolare la qualità di stampa di un'immagine. È una scala 0-100, con un'immagine di qualità 0 che rende le dimensioni del file più piccole. Un'immagine di qualità 100 ottimizza sia la qualità che le dimensioni del file.

Questo confronto di qualità dell'immagine mostra una sottile differenza tra le varie impostazioni di qualità. Alcune differenze possono essere osservate nei dettagli più fini, così come i colori nel cielo. Nota che nell'immagine di qualità più bassa, ci sono dei "banding" nel cielo (linee sottili) mentre le immagini di qualità superiore. L'immagine di qualità 25 mi ha dato un'immagine a 91kb, mentre l'immagine di qualità 100 era a 366kb. Si tratta di trovare l'equilibrio tra qualità e dimensioni del file.

Uno dei miei modi preferiti per controllare la dimensione del file è usare il "Limita dimensione file a" opzioneUso spesso questa opzione quando esporto le immagini da pubblicare su Tuts +, dato che Tuts + ha un limite di 150 kilobyte per le immagini negli articoli.

L'uso dell'opzione "Limita dimensioni file a" ignora del tutto il cursore della qualità. Invece di scegliere una qualità tra 0 e 100, puoi semplicemente impostare una dimensione massima del file (in kilobyte) e Lightroom sceglierà un'impostazione di qualità per te.

La casella "Limita dimensioni file a" può essere utilizzata al posto del cursore di qualità. Quando si seleziona la casella nella finestra di esportazione, scegliere la dimensione massima del file per l'immagine e Lightroom lo farà funzionare.

Dalla mia esperienza, quando si utilizza il cursore di qualità per le immagini Web, in genere lascerò le impostazioni di qualità in 60-75 gamma. Questo sembra essere il punto ideale per la dimensione del file e la qualità dell'immagine. Aumentando il dispositivo di scorrimento ben oltre ciò si ottiene un file molto più grande senza molta differenza visiva.

Se vuoi saperne di più sui tasti per ridimensionare le immagini per il web, controlla la mia recensione dello scorso anno, Come esportare JPG per il Web da Adobe Photoshop Lightroom. Mentre il focus di questo tutorial sono i metadati per il SEO, la dimensione dell'immagine è ancora una parte essenziale dell'essere search-friendly. 

Riassegna e continua l'apprendimento

In questo tutorial, abbiamo spiegato come scegliere la frutta a sospensione per esportare le immagini da Lightroom a un sito Web WordPress. Non fare errori; questo non spara all'istante il tuo sito nella parte superiore di Google per termini comuni, ma è così volontà fare molto per aiutare qualcuno a trovare le tue immagini.

Vale la pena notare che ci sono diversi plugin di WordPress, o add-on, che possono automatizzare questo processo. Tuttavia, i plugin che non vengono aggiornati di frequente possono aprire il tuo sito a vulnerabilità di sicurezza. Devi anche contare su uno sviluppatore che mantiene la compatibilità del plugin con le nuove versioni di WordPress. Due popolari plugin includono WP / LR Sync e LR / Blog.

Se vuoi saperne di più su WordPress, la sezione di codice Tuts + ha una vasta gamma di contenuti per la modifica e l'estensione di WordPress. La sezione foto e video ha anche una certa copertura di Adobe Lightroom se si desidera affinare quelle capacità.

Infine, la SEO è un'area di ricerca in continua evoluzione. Google aggiorna costantemente il loro algoritmo utilizzato per trovare le pagine che pensano corrispondano meglio alla query di ricerca. Ci sono un sacco di cattivi consigli e "consigli" per SEO là fuori. Il mio go-to source per SEO è il blog di Moz. I geni di Smashing Magazine hanno anche un ottimo articolo su come costruire un sito web ottimizzato SEO.

Che cosa stai facendo per preparare le tue immagini per il web? Fatemi sapere nella sezione dedicata ai commenti.