IMPORTANTE: Il seguente sito viene monetizzato con le affiliazioni. Cliccando sui link di colore verde e acquistando i servizi proposti, Chiara Scanavino ottiene una commissione.
Marco, se volete che il vostro blog sul calcio prenda il volo e si posizioni bene sui motori di ricerca, dovete curare la user experience.
Ok, Chiara. Ma che cosa devo fare, concretamente? Ho seguito quello che hai detto nella guida “SEO tecnica per negati 2022: Guida di Chiara Scanavino“, ma ancora non va…
Beh, allora… Un po’ occorre aspettare e avere un po’ di pazienza. Ma poi c’è anche un’altra cosa che puoi fare…
Ovvero inserire una barra di ricerca sul tuo sito web.
Perché inserire la barra di ricerca sul tuo sito web?
L’abbiamo detto più sopra. Una barra di ricerca sulle pagine del tuo sito web ti aiuta a migliorare l’esperienza dell’utente col tuo sito. E quindi anche a diminuire la frequenza di rimbalzo.
In fondo, quello che vuoi, Marco, è di fare in modo che i tuoi utenti trascorrano più tempo possibile con i tuoi contenuti, no?
Quindi perché non aiutare i tuoi utenti a cercare gli articoli che desiderano?
Oltre a tutto poi, le ricerche che gli utenti fanno sul tuo sito possono anche essere un ottimo spunto per nuovi articoli sul tuo blog…
In questo modo, quindi, eviterai anche di perderti degli utenti per strada…
Ok. Ma…
Dove inserire la barra di ricerca?
Sul tuo sito web.
Si va beh, grazie, Chiara… Lo so anch’io… Ma io ti stavo chiedendo dove inserire concretamente la barra di ricerca sul mio sito web…
Io qui ce l’ho per le pagine 404. E anche nella sidebar degli articoli sul blog.
Perché così se un utente arriva sul mio sito web e non trova la pagina che si aspettava, può sempre cercarla. E se comunque non la trova (e quindi esce dal mio sito, facendo aumentare la frequenza di rimbalzo), io comunque posso rimediare.
Tramite RankMath, posso fare un redirect 301, se ho già scritto una guida, ma per qualche motivo quella risorsa non viene trovata.
E se ancora non ho trattato l’argomento che il mio utente stava cercando, posso comunque decidere di scrivere una guida che contiene la keyword che ha scritto l’utente.
Ah, ok. Ma dimmi… che cos’è una keyword?
Di questo te ne parlerò un’altra volta.
Scusami ma adesso non c’entra nulla con quello che stiamo dicendo.
E il signor Google vuole delle guide che vadano dritte al punto.
Hai altre domande, Marco?
Beh, si… Innanzitutto rispondi alla domanda del titolo…
Ok. Continua a seguirmi. Te ne parlo nel prossimo paragrafo.
Come inserire la barra di ricerca sul tuo sito web?
Puoi farlo con l’apposito widget di Elementor. Intendo questo qui sotto:
Oppure puoi farlo con l’html.
Uffa, Chiara… Ma ancora sto codice?!
Beh, Marco… porta pazienza. Lo sai benissimo che sono l’ufficio complicazione affari semplici…
Mi mandi in pallone…
Eh va beh. Ma io voglio solo darti un’alternativa. E voglio anche solo spiegarti che cosa fa concretamente Elementor quando aggiungi quel widget…
Chiara, ma a che mi serve?
Beh, sai… conoscere un po’ di codice HTML non ti fa mica male, se hai intenzione di portare avanti il tuo blog sul calcio.
E poi diciamocelo. Anche se non è una cosa molto immediata, c’è di peggio che non creare una barra di ricerca con l’HTML.
Quello che devi fare è copiare il seguente codice:
<input type="search" id="cerca" placeholder="Cerca nel sito">
Quello che ti viene fuori è questo:
Ah, capito. Ma… come faccio a mettere il pulsante per avviare la ricerca?
Con il tag <button>.
Ok. Dammi il codice, per favore…
Eccolo qui:
<button onlick="myfunction()"></button>
Quindi la barra di ricerca che trovi qui sopra può essere fatta anche così:
Chiara, ma la barra di ricerca che hai messo qui sopra non è la stessa che hai messo nella sidebar. Lì hai scritto “cerca”. Nella sidebar, invece, hai messo la lente di ingradimento…
Possiamo metterla. Ti faccio vedere subito come si fa.
Quello che viene fuori è questo:
<input type="search" id="cerca" placeholder="cerca nel sito"><button onclick="myFunction()"><img width="28" height="36" decoding="async" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2" data-src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img width="28" height="36" decoding="async" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2" data-src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img width="28" height="36" decoding="async" src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2"></noscript></noscript></img></button>
Chiara, ma neanche questo è esattamente la barra di ricerca che hai messo su questo sito…
Beh, allora… Sia qui chiaro che quella che vedi è solamente un’approssimazione. L’obiettivo non è quello di riprodurre fedelmente la barra di ricerca di Elementor…
L’obiettivo è solo far vedere come inserire un’immagine all’interno del pulsante “cerca”…
Va beh, ma poi quel modulo nemmeno funziona…
A parte il fatto che le barre di ricerca che sono state inserite qui, in questo articolo, sono a scopo dimostrativo. Quindi non ho alcuna intenzione di farle funzionare realmente. Poi comunque bisogna inserire il codice Javascript per farle funzionare…
Javascript?! No, dai, Chiara… Questo è davvero troppo difficile… Mi stai mandando in pallone…
Eh, infatti è proprio per questo che alla fin fine tutti usano i page builder come Elementor…
Comunque dai su… Ammetti che con il tuo blog stai imparando tante cose che ti permetteranno un giorno di trovare un buon lavoro…
Mah, lo spero, Chiara…
Su dai… Un po’ di autostima…
Va beh, dai… che cosa devo fare?
Copia il seguente codice:
<script>
function myFunction() {
var x = document.getElementById("cerca").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
E mettilo al fondo del tuo documento HTML, prima del tag </body>.
Voglio il codice intero, in modo tale che non ci siano dei fraintendimenti…
Ok. Eccolo qui sotto:
<input type="search" id="cerca" placeholder="cerca nel sito"><button onclick="myfunction()"><img width="28" height="36" decoding="async" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2" data-src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img width="28" height="36" decoding="async" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2" data-src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img width="28" height="36" decoding="async" src="https://www.chiarascanavino.it/wp-content/uploads/2022/10/lente-di-ingrandimento-Elementor.jpg" alt="lente di ingrandimento Elementor" title="Come Inserire la Barra di Ricerca sul Proprio Sito Web? 2"></noscript></noscript></img></button>
<script>
function myFunction() {
var x = document.getElementById("cerca").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
Sia qui chiaro che questa che vedi qui sopra è una prova. E che comunque, per farlo funzionare, devi cambiare tutti i riferimenti. Perché chiaramente devi adattare il codice qui sopra a quello che è il tuo sito web.
Va beh, Chiara… Non mi interessa… Metterò la barra di ricerca con Elementor. Almeno faccio prima e mi evito degli errori…
Bene, Marco. Era proprio quello che volevo fare…
Volevo farti vedere quanto è complesso un sito web e volevo farti vedere come funziona la barra di ricerca. Anche se non utilizzerai mai il secondo metodo, trovo che comunque sia interessante sapere come funziona una barra di ricerca come quella di Google.
E ci sei riuscita bene, Chiara… Ti faccio i miei complimenti perché mi hai dato un buon motivo per acquistare oggi Elementor.
E sarebbe, Marco?
Risparmiare tempo.
Bene, Marco. Sono proprio contenta per te. E visto che vuoi risparmiare tempo, ecco qui il banner di Elementor. Così puoi cliccare direttamente e acquistare senza perdere ulteriore tempo.
Va bene, grazie. Ma senti… Elementor non è un page builder?
Si, certo.
Ma allora perché c’è scritto “host & build your WordPress websites in one place”?
Perché da un po’ di tempo forniscono anche loro un servizio di hosting come SiteGround.
Ah, ma quanto costa?
Guarda qui:
Comunque ne riparliamo un’altra volta.
Presto scriverò una recensione su Elementor. Promesso.
Ok, dai, Chiara. Per ora ti ringrazio. Buona giornata.
A te.
A presto
Articoli correlati
Come Aggiungere il Pulsante di PayPal sul Tuo Sito Web?
PayPal è un metodo di pagamento sicuro per le transazioni online. Scopri qui come aggiungere un pulsante di PayPal sul tuo sito web e aumentare il tasso di conversione delle tue pagine di vendita.
Come Creare Un Menù a Tendina per il Tuo Sito Web?
Scopri nel seguente articolo come creare un menù a tendina per il tuo sito web con Elementor e migliorare l’usabilità del tuo sito web.
Come Creare la Table of Content sul tuo sito web?
La TOC o Table of Contents ti aiuta a migliorare l’usabilità dei tuoi articoli sul blog e quindi a migliorare la SEO. Scopri qui come realizzarla con o senza plugin.
Come Creare un Sito Web da Zero: Guida in 7 Passi
È una cosa che mi sono chiesta anch’io, come creare un sito web. Nel seguente articolo ti racconto quali sono le possibilità sul mercato e ti spiego passo passo come realizzare un sito web con WordPress.
