Non solo un sito ottimizzato per dispositivi mobili consentir\u00e0 a pi\u00f9 visitatori di utilizzare dispositivi diversi, ma disporre di un sito Web ottimizzato per dispositivi mobili \u00e8 anche fondamentale per la SEO (ottimizzazione dei motori di ricerca \u2013 vedi il prossimo articolo)! Google d\u00e0 la priorit\u00e0 ai siti ottimizzati per i dispositivi mobili nei risultati di ricerca. E nel marzo 2020 hanno annunciato che Google passer\u00e0 all’indicizzazione mobile-first per tutti i siti Web a settembre 2020<\/a>.<\/p>\n L’ottimizzazione per i motori di ricerca (SEO) \u00e8 fondamentale in questi giorni per te che desideri che i visitatori arrivino al tuo sito. Devi fare in modo che il tuo sito web si posizioni il pi\u00f9 in alto possibile nei motori di ricerca come Google per sperare che i visitatori si convertano in clienti. Senza SEO il tuo sito Web annegher\u00e0 in miliardi di altre pagine Web concorrenti e nessuno verr\u00e0 a conoscenza o trover\u00e0 il tuo sito Web.<\/p>\n La SEO consiste nell’ottimizzare il tuo sito web in modo da aumentare la quantit\u00e0 e la qualit\u00e0 del traffico verso il tuo sito. Ci\u00f2 include argomenti come il contenuto, gli aspetti tecnici e il modo in cui l’esterno vede, utilizza e recensisce il tuo sito. \u00c8 un argomento piuttosto ampio, ma per questa checklist mi sto concentrando sugli aspetti tecnici.<\/p>\n Molto probabilmente (dovresti) utilizzare un plug-in SEO. Ad esempio Yoast SEO<\/a> \u00e8 il plugin SEO pi\u00f9 conosciuto e utilizzato per WordPress. Ha una versione premium, ma la versione gratuita va benissimo. Un plug-in SEO dovrebbe consentirti di definire titoli, meta descrizione, parole chiave e generare sitemap dei motori di ricerca. Yoast SEO analizzer\u00e0 anche il contenuto del tuo post e ti dar\u00e0 indicazioni su come migliorare la tua scrittura per posizionarti pi\u00f9 in alto.<\/p>\n Ma ci sono un paio di cose che devi controllare all’interno del tema: qualcosa che un plug-in SEO non pu\u00f2 risolvere.<\/p>\n Una buona struttura HTML gioca un ruolo nel rendere un tema SEO-friendly. L’HTML \u00e8 la struttura del contenuto di una pagina web, indipendentemente dal suo stile. Lo stile potrebbe nascondere una cattiva struttura HTML, ma tieni presente che i crawler di Google leggono il sito Web senza uno stile.<\/p>\n Una regola importante in una buona struttura HTML sono i tag di intestazione; Il tema dovrebbe anche utilizzare tag HTML5 pi\u00f9 recenti come Un’altra caratteristica molto sottoutilizzata \u00e8 il markup dello schema, spesso indicato come microdati. Il markup dello schema<\/a> \u00e8 una tecnologia che aiuta i bot e i crawler a capire di cosa si tratta. Il wrapping delle informazioni sul prodotto con il markup dello schema consente a Google di sapere in modo specifico dove pu\u00f2 trovare il prezzo, le recensioni, l’immagine del prodotto e altro ancora. Ci\u00f2 consente a Google di presentare i prodotti in modo diverso nei risultati di ricerca. Sfortunatamente \u00e8 raro trovarlo in un tema WordPress, ma se trovi un tema con il markup dello schema, questo \u00e8 un buon suggerimento che lo sviluppatore del tema ha avuto in mente la SEO.<\/p>\n Infine, il tema dovrebbe assicurarsi di generare tag appropriati negli incorporamenti di contenuti ricchi, in particolare le immagini. Le immagini dovrebbero almeno avere La velocit\u00e0 di caricamento del tuo sito Web \u00e8 molto importante per la SEO. Non dovrebbero volerci pi\u00f9 di 5 secondi per completare il caricamento di una pagina sul tuo sito web. Il tema pu\u00f2 ottimizzare la velocit\u00e0 della pagina in diversi modi.<\/p>\n Tieni presente che un tema potrebbe implementare risorse pesanti e talvolta esterne per farlo sembrare elegante. Ad esempio caratteri personalizzati, icone e un sacco di elementi interattivi. Le richieste di fogli di stile, file javascript e soprattutto risorse esterne come ad esempio GoogleFonts<\/a> per i caratteri e Fontawesome<\/a> per le icone, riducono davvero la velocit\u00e0 della pagina.<\/p>\n Il tema dovrebbe anche supportare il ridimensionamento delle immagini che carichi in dimensioni diverse e utilizzarle di conseguenza alle dimensioni dell’immagine necessarie attorno al tuo contenuto. Il caricamento di immagini di grandi dimensioni \u00e8 uno dei maggiori svantaggi della velocit\u00e0 della pagina. Non ha senso utilizzare un’immagine a grandezza naturale con una larghezza di 1900 px per una piccola miniatura nel pi\u00e8 di pagina.<\/p>\n Puoi controllare la velocit\u00e0 della pagina con un altro degli strumenti gratuiti di Google: PageSpeed \u200b\u200bInsights<\/a>. Inserisci l’URL del sito demo del tema e fai clic su Analizza. Lascia che funzioni e ti dovrebbe essere presentato un voto e un rapporto sulle cose che puoi fare per risolvere eventuali problemi che riducono la velocit\u00e0 della pagina. Ricordati di controllare sia i rapporti Mobile che Desktop. La velocit\u00e0 della pagina sui dispositivi mobili \u00e8 oggigiorno pi\u00f9 importante; sia perch\u00e9 i dispositivi mobili utilizzano spesso i dati mobili (che costano denaro), sia perch\u00e9 la compatibilit\u00e0 con i dispositivi mobili \u00e8 importante. Non hai saltato la voce della lista di controllo precedente, giusto?<\/p>\n Accessibilit\u00e0 significa rendere il tuo sito web accessibile a tutti i tipi di visitatori, compresi quelli con disabilit\u00e0, indipendentemente dal fatto che siano o meno udenti, ipovedenti e altro ancora. Esiste una serie internazionale di linee guida chiamate Web Content Accessibility Guidelines (WCAG) che delineano come i siti Web dovrebbero implementare l’accessibilit\u00e0. Non essendo conforme alle WCAG, stai effettivamente infrangendo una serie di leggi e regolamenti su scala internazionale (perch\u00e9 i visitatori del tuo sito possono provenire da qualsiasi parte del mondo).<\/p>\n Le linee guida delineano un’ampia serie di specifiche e requisiti tecnici per un sito web. La conformit\u00e0 alle WCAG viene valutata in tre livelli; A, AA e AAA. Il livello AAA \u00e8 il livello di accessibilit\u00e0 pi\u00f9 basso accettabile, mentre il livello A \u00e8 considerato accessibile di prim’ordine, ma il livello A pone forti limitazioni al design, alle funzionalit\u00e0 e ai contenuti avanzati. La maggior parte dei siti Web, a meno che non siano rivolti a persone con disabilit\u00e0, non si sforzano di raggiungere il livello A di accessibilit\u00e0.<\/p>\n Il tuo tema dovrebbe raggiungere almeno il livello AAA. Puoi controllare i livelli di accessibilit\u00e0 su un sito utilizzando uno strumento gratuito chiamato WAVE, disponibile come estensione per Chrome e Firefox<\/a>. Una volta installato nel tuo browser puoi visitare il sito demo del tema, eseguire il check e controllare il report.<\/p>\n Rapporto WAVE del mio sito. A quanto pare ho qualcosa su cui lavorare!<\/p>\n WordPress ha un editor di menu integrato per creare menu e posizionarli attorno al tuo tema. Il tema scelto non dovrebbe solo supportare questo editor di menu, ma anche fornire posizioni per posizionare i menu.<\/p>\n Come minimo il tema dovrebbe fornire una posizione di menu; il menu principale. Il menu principale di solito si trova da qualche parte in alto nell’intestazione. \u00c8 comune consentire anche menu aggiuntivi nell’intestazione, ad esempio menu di supporto. L’aggiunta di menu in altri luoghi pu\u00f2 essere generalmente risolta aggiungendo un widget di menu, se il tema supporta i widget (vedi argomento successivo).<\/p>\n PS: Ricordi il punto 1 della lista di controllo. ottimizzazione mobile che menziona il menu mobile? Verifica che la posizione del menu principale si converta bene in un menu mobile. Se il tema consente menu di supporto, questi dovrebbero essere inclusi anche nel menu mobile e non semplicemente scomparire.<\/p>\n Un’altra funzionalit\u00e0 integrata in WordPress sono i widget: piccoli frammenti di contenuto che possono essere inseriti all’interno di aree widget definite. Come per i menu, il tema deve aggiungere specificamente il supporto per i widget e aggiungere almeno un’area dei widget.<\/p>\n Le aree widget comuni si trovano nel pi\u00e8 di pagina e nella barra laterale, se il tema presenta un layout della barra laterale.<\/p>\n Verifica che il tema ti permetta di posizionare i widget dove ne hai bisogno. \u00c8 comune inserire menu e informazioni aggiuntivi nel pi\u00e8 di pagina e in WordPress ci\u00f2 si ottiene solitamente utilizzando i widget.<\/p>\n Questa \u00e8 una caratteristica ovvia necessaria che il tema deve supportare: devi essere in grado di caricare la tua immagine del logo e posizionarla nell’intestazione.<\/p>\n WordPress ha una funzione di caricamento del logo personalizzato in Customizer, ma spetta al tema aggiungere il supporto per questo. Se il tema non supporta lo strumento WordPress, deve supportare un modo alternativo. Molti temi hanno le proprie impostazioni del tema, all’interno di WordPress Customizer o come pagina di amministrazione separata. Qualunque sia il metodo utilizzato dal tema, assicurati di poter caricare il tuo logo.<\/p>\n Consentire ai visitatori del sito di effettuare ricerche \u00e8 molto pi\u00f9 importante di prima. A meno che i tuoi contenuti e menu non siano estremamente ottimizzati e snelli, le persone generalmente cercheranno semplicemente invece di fare clic.<\/p>\n WordPress ha un motore di ricerca interno per cercare tutti i contenuti e modelli pronti per l’uso per il modulo di ricerca e i risultati della ricerca. Ma ancora una volta spetta al tema implementarlo.<\/p>\n \u00c8 comune offrire un input di ricerca sul tuo sito Web, di solito situato nella parte superiore dell’intestazione. La funzionalit\u00e0 di ricerca \u00e8 disponibile in molte forme; un input di ricerca nell’intestazione (o pi\u00e8 di pagina) o un’icona di ricerca che rivela in qualche modo un input. Se il tema non offre automaticamente un input di ricerca, puoi sempre aggiungere un widget di ricerca, supponendo che il tema supporti i widget (elemento dell’elenco di controllo 5).<\/p>\n WordPress CMS supporta un’ampia gamma di modelli per visualizzare i tuoi contenuti in diversi modi. Man mano che il tuo sito cresce, troverai sempre pi\u00f9 necessario appoggiarti a modelli come archivi e risultati di ricerca.<\/p>\n Assicurati che il tema implementi una buona parte dei modelli predefiniti di WordPress e che tutti abbiano un bell’aspetto. Controlla modelli come categoria, tag, archivi di date e risultati di ricerca. Dovrebbero indicare chiaramente che tipo di archivio stiamo guardando e visualizzare bene il contenuto e con funzionalit\u00e0 di impaginazione.<\/p>\n Se desideri abilitare i commenti, il tema dovrebbe aver implementato e progettato correttamente anche questi modelli.<\/p>\n Molto probabilmente hai un insieme definito di colori che desideri utilizzare sul tuo sito Web, comunemente gli stessi colori che si trovano nel tuo logo. Il marchio del tuo sito con il tuo logo \u00e8 un minimo (punto 6 della lista di controllo), ma il tema dovrebbe anche permetterti di scegliere alcuni dei colori del tema. In quanto tale, ottieni un design pi\u00f9 coerente quando i collegamenti, i pulsanti e altri elementi di design sono i colori del tuo marchio.<\/p>\n Non esiste un supporto integrato in WordPress per la definizione di una serie di colori utilizzati nel tema. Gli sviluppatori di temi devono sviluppare il supporto per questo da soli. I colori sono generalmente definiti nei fogli di stile del tema e lo sviluppatore deve trovare una soluzione per sovrascrivere queste variabili di colore con i colori scelti da te in admin.<\/p>\n Questa \u00e8 una funzionalit\u00e0 piuttosto difficile da implementare e pu\u00f2 essere risolta in vari modi, dal buono al cattivo. Una cattiva soluzione sarebbe generare una grossa fetta di styling in testa semplicemente sovrascrivendo e duplicando lo stile con colori personalizzati. Un file di foglio di stile di grandi dimensioni o pi\u00f9 fogli di stile hanno un impatto sulla velocit\u00e0 della pagina (consultare l’elemento 2 dell’elenco di controllo). Una buona soluzione sarebbe incorporare un modo per sovrascrivere le variabili di colore e rigenerare un foglio di stile pulito dopo aver scelto diversi colori personalizzati.<\/p>\n I giorni in cui un sito Web presentava contenuti a sinistra e una barra laterale a destra indipendentemente dalla pagina in cui ti trovi, sono finiti. I siti Web moderni presentano layout diversi: una prima pagina a larghezza intera, articoli con una o pi\u00f9 barre laterali, articoli senza barra laterale o qualsiasi tipo di configurazione di colonna diversa.<\/p>\n Questa voce dell’elenco di controllo dipende dal design e dalle esigenze del tuo sito web. Se il tuo sito web \u00e8 un piccolo sito con un requisito minimo di layout diversi, questo non ha molta importanza. Ma pi\u00f9 contenuti ha il tuo sito, pi\u00f9 trovi la necessit\u00e0 di creare pagine di destinazione con design diversi.<\/p>\n Se il tema \u00e8 dotato di una barra laterale, dovrebbe essere possibile scegliere come minimo post per post se andare o meno a larghezza intera (rimuovere la barra laterale) o meno. Con Gutenberg (vedi voce successiva della lista di controllo) ora \u00e8 pi\u00f9 facile creare pagine di destinazione a larghezza intera, se il tema lo supporta.<\/p>\n Il mio tema auto-sviluppato per A White Pixel presenta opzioni di layout per i post<\/p>\n Quando WordPress ha rilasciato la versione 5.0 a dicembre 2018, \u00e8 arrivato con un editor di post completamente nuovo, chiamato Gutenberg. L’editor Gutenberg ha rivoluzionato il modo in cui puoi creare contenuti consentendoti di creare facilmente sezioni con immagini o colori di sfondo, contenuti avanzati, colonne e altro ancora. Cose del genere non erano possibili prima.<\/p>\n Tuttavia, poich\u00e9 Gutenberg richiede un linguaggio di programmazione diverso (Javascript, React) rispetto al linguaggio con cui WordPress \u00e8 stato originariamente creato (PHP), il supporto nella comunit\u00e0 di sviluppo \u00e8 stato lento. \u00c8 comunque l’anno 2020 e il tema dovrebbe sostenere Gutenberg.<\/p>\n C’\u00e8 un’abbondanza di temi WordPress l\u00e0 fuori che si basano su pagebuilder come Visual Composer, Elementor e Divi. Gutenberg rende praticamente ridondanti questi plugin. Fatti un favore e non scegliere un tema che richieda un plug-in per la creazione di pagine, poich\u00e9 puoi ottenere gli stessi risultati con la nuova funzionalit\u00e0 standard di WordPress.<\/p>\n Questa voce dell’elenco di controllo \u00e8 per te che desideri un sito Web in una lingua diversa dall’inglese. Non dimenticare che anche se scrivi tutti i tuoi contenuti in una lingua diversa, il tema di solito include alcuni testi nel frontend, come "Leggi di pi\u00f9", "Visualizza", "Pagina successiva" e cos\u00ec via. Se \u00e8 importante per te implementare completamente una lingua diversa per i lettori, dovresti controllare se il tema \u00e8 pronto per la traduzione.<\/p>\n Esistono diversi modi per tradurre un tema. Se sei uno sviluppatore \u00e8 una questione di usare le funzioni di dominio di testo nel tuo tema e aggiungere un file Ma tutto questo richiede che il tema sia scritto con il supporto per la traduzione delle sue stringhe.<\/p>\n Se sei arrivato fino a qui con un segno di spunta verde in ciascuno dei 12 elementi della lista di controllo sopra, hai scelto un buon tema! Il tema supporta la funzionalit\u00e0 standard di WordPress e soddisfa i requisiti di un sito Web per il 2020 in termini di SEO, accessibilit\u00e0 e ottimizzazione dei dispositivi mobili.<\/p>\n Se il tuo tema \u00e8 carente in alcune aree, dedica del tempo a cercare come risolverlo in modi alternativi o continua a cercare un altro tema. Se sei uno sviluppatore, questa checklist dovrebbe averti fornito alcune linee guida sui requisiti minimi per creare un buon tema WordPress.<\/p>\n2 SEO friendly<\/h2>\n
Buona struttura HTML<\/h3>\n
h1<\/code>, h2<\/code>, e cos\u00ec via fino a h6<\/code>. I titoli dovrebbero essere usati per informare su una nuova sezione e di cosa si tratta, e i tag dovrebbero essere in ordine (ad es. i tuoi contenuti non dovrebbero saltare da h2<\/code>a h4<\/code>senza una via di h3<\/code>mezzo). h1<\/code>dovrebbe essere riservato al titolo pi\u00f9 importante; di solito il titolo del post o il nome del sito. E h2<\/code>dovrebbe essere utilizzato per servire i titoli pi\u00f9 importanti all’interno di questo post. Anche se Google ha annunciato che consentono pi\u00f9 h1<\/code>tag (secondo le linee guida per HTML5), \u00e8 ancora comune garantire che ne h1<\/code>esista solo uno in ogni pagina.<\/p>\n<header><\/code>, <main><\/code>, <footer><\/code>, <aside><\/code>poich\u00e9 forniscono informazioni semantiche a Google su quale sia effettivamente il contenuto specifico.<\/p>\nalt<\/code>-tag. I tag alt vengono utilizzati per descrivere l’aspetto e la funzione di un’immagine su una pagina. Ricorda che i crawler dei motori di ricerca non possono interpretare le immagini come fanno gli umani.<\/p>\nVelocit\u00e0 di pagina<\/h3>\n
3 Accessibilit\u00e0<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d2db3e82.png\")
<\/a><\/p>\n4 Men\u00f9<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d30990dc.png\")
<\/a><\/p>\n5 Supporto per widget<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d31d9baa.png\")
<\/a><\/p>\n6 Logo personalizzato<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d32d3134.png\")
<\/a><\/p>\n7 Cerca<\/h2>\n
8 Modelli predefiniti<\/h2>\n
9 colori personalizzati<\/h2>\n
10 Opzioni di layout<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d339e9e4.png\")
<\/a><\/p>\n11 Gutenberg-supporto<\/h2>\n
12 Pronto per la traduzione<\/h2>\n
.pot<\/code>or .po<\/code>. Se sei un utente di temi con poca o nessuna conoscenza del codice, ci sono modi alternativi. Ad esempio, puoi utilizzare il plugin Loco Translate<\/a> per accedere direttamente ai file di traduzione del tema. Oppure potresti usare WPML<\/a> o altri plugin per creare un sito multilingue.<\/p>\n
\nConclusione<\/h2>\n