Per le aziende locali, visualizzare la propria posizione su una mappa interattiva non è solo una comodità: è un elemento cruciale della strategia digitale.
L’aggiunta di Google Maps al vostro sito web può migliorare significativamente l’esperienza dell’utente, rendendo più facile per i visitatori trovare la vostra posizione. Inoltre, può aumentare la visibilità del sito sui motori di ricerca, attirando più visitatori e potenziali clienti.
Abbiamo studiato i modi migliori per integrare perfettamente Google Maps nel vostro sito web WordPress, migliorando sia l’esperienza dell’utente che la SEO.
In questo articolo vi mostreremo come sbloccare la potenza di Google Maps in WordPress.
Perché aggiungere Google Maps a WordPress?
Sapevate che Google Maps è l’app di navigazione più popolare su tutte le piattaforme?
Se avete l’indirizzo di un ufficio o di un negozio fisico, l’aggiunta di Google Maps al vostro sito web WordPress facilita agli utenti la localizzazione rapida dei vostri negozi, ristoranti o punti vendita. Questo vi aiuta ad attirare più clienti e a generare più affari.
Non solo, ma incorporare Google Maps può anche migliorare la SEO di WordPress. Secondo Google, il 46% di tutte le ricerche sono locali. L’aggiunta di Google Maps a WordPress può incrementare la SEO locale e migliorare la vostra visibilità nelle ricerche locali.
Ora ci sono due modi per incorporare Google Maps in WordPress, e noi ve li mostreremo entrambi.
Il vantaggio del secondo metodo è che segue tutte le best practice della SEO locale, quindi se lo utilizzate, Google inizierà a includere la vostra posizione su Google Maps. Inoltre, visualizzerà le informazioni sulla vostra attività, come nome, logo, indirizzo, telefono e orari di apertura, nei risultati della ricerca locale.
Detto questo, vediamo come aggiungere Google Maps a WordPress. Di seguito sono riportati i collegamenti rapidi che potete utilizzare per andare alla sezione che preferite:
Come aggiungere Google Maps in WordPress senza un plugin
Se volete solo incorporare rapidamente Google Maps in un post o in una pagina di WordPress, potete utilizzare il metodo iFrame predefinito.
È sufficiente andare sul sito web di Google Maps e digitare un indirizzo stradale qualsiasi nell’area di ricerca.
Successivamente, è necessario fare clic sull’icona Condividi e apparirà un popup con l’opzione di inviare un link alla posizione o di incorporare una mappa.
È necessario selezionare l’opzione “Incorpora una mappa”.
A questo punto, è sufficiente copiare il codice HTML di Google Maps e aprire la pagina in cui si desidera incorporare la mappa.
All’interno dell’editor di blocchi, è necessario aggiungere un blocco HTML personalizzato.
Ora è sufficiente incollare il codice embed copiato da Google Maps.
Successivamente, è necessario aggiornare o pubblicare la pagina per visualizzare l’anteprima delle modifiche.
Questo metodo funziona per incorporare rapidamente Google Maps, ma non offre i massimi vantaggi SEO.
Se siete una piccola impresa, un ristorante o un negozio online con una o più sedi fisiche, vi consigliamo di utilizzare la prossima soluzione per massimizzare le vostre classifiche Local SEO, perché utilizza i dati open graph corretti per aiutarvi a posizionarvi meglio su Google.
Come aggiungere Google Maps a WordPress con un plugin per il SEO locale
Il modo migliore per aggiungere Google Maps e ottimizzare il sito per la SEO locale è utilizzare All in One SEO (AIOSEO).
È il miglior plugin SEO per WordPress perché vi aiuta a ottenere un posizionamento SEO più elevato senza dover modificare il codice o assumere uno sviluppatore. Oltre 3 milioni di professionisti utilizzano AIOSEO per migliorare il loro posizionamento sui motori di ricerca.
Per questo tutorial utilizzeremo la versione AIOSEO Pro, che include la funzione Local SEO e altre potenti opzioni di ottimizzazione. Esiste anche una versione gratuita di AIOSEO che potete utilizzare per iniziare a ottimizzare il vostro sito per i motori di ricerca.
Per prima cosa, è necessario installare e attivare il plugin AIOSEO in WordPress. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.
Dopo l’attivazione, il plugin avvia la procedura guidata di configurazione. È possibile fare clic sul pulsante “Cominciamo” per configurare il plugin. Se avete bisogno di aiuto, consultate la nostra guida su come configurare correttamente All in One SEO in WordPress.
Successivamente, potete andare su All in One SEO ” Local SEO dalla vostra dashboard di WordPress.
Quindi fare clic sul pulsante “Attiva SEO locale” per iniziare a configurare le impostazioni locali.
Una volta attivato l’addon Local SEO per WordPress, è possibile aggiungere una singola località o più località in AIOSEO e visualizzarle su Google Maps. Vi mostriamo come aggiungere entrambi al vostro sito web.
Aggiunta di una singola sede
Per aggiungere le vostre sedi, le informazioni sull’attività, gli orari di apertura e altro ancora, dovete prima andare su All in One SEO ” Local SEO e aprire la scheda “Sedi”.
Se avete una sola sede fisica, mantenete l’opzione “Sedi multiple” impostata su No.
Successivamente, scorrere fino alla sezione “Mappe” per appuntare la propria posizione esatta.
È sufficiente inserire il vostro indirizzo nel campo “Inserisci una richiesta” e Google Maps mostrerà la vostra posizione.
Una volta inserita la posizione, non dimenticate di fare clic sul pulsante “Salva modifiche”.
Aggiunta di più sedi
Se avete più di una sede fisica, dovrete attivare l’impostazione “Sedi multiple” nella scheda “Posizione” di Local SEO.
A questo punto, nel pannello di amministrazione di WordPress apparirà un nuovo menu Locations.
Andare avanti e navigare in Posizioni e poi fare clic sul pulsante “Aggiungi nuovo”.
Una volta entrati nell’editor di WordPress, scorrete verso il basso fino alla sezione “Mappa”.
Qui potete inserire il vostro indirizzo nel campo “Inserisci una domanda”.
Dopo aver inserito la vostra posizione sulla mappa e aver aggiunto le informazioni sulla località, fate clic sul pulsante “Pubblica”.
Ora è possibile ripetere questo passaggio e aggiungere tutte le sedi desiderate per la propria attività.
Una volta terminata l’aggiunta delle località, si può andare alla scheda ‘Mappe’ nel menu All in One SEO ” Local SEO.
Qui si dovrà inserire una chiave API di Google Maps.
Vediamo ora come creare una chiave API per Google Maps.
Creare una chiave API di Google Maps
Per iniziare, è necessario visitare il sito web di Google Maps Platform e fare clic sul pulsante “Inizia”.
Dopo aver effettuato l’accesso con il vostro account Google, dovrete impostare un account di fatturazione.
Google Maps Platform ha una tariffa a consumo e offre i primi 300 dollari di utilizzo mensile gratuitamente per tutti gli utenti. Per la maggior parte dei siti web, questa cifra coprirà facilmente un semplice embed di mappa come quello che stiamo creando in questa esercitazione.
Non preoccupatevi, non vi addebiteranno alcun costo a meno che non passiate manualmente a un account a pagamento.
Per iniziare, fate clic sul pulsante “Crea account di fatturazione”.
Successivamente, è possibile selezionare il proprio Paese e scegliere ciò che meglio descrive la propria organizzazione dal menu a tendina.
Una volta selezionate queste informazioni, fare clic sulla casella di controllo relativa ai Termini di servizio e quindi sul pulsante “Continua”.
Nella schermata successiva, dovrete inserire il vostro numero di telefono per la verifica.
Una volta fatto ciò, fare clic sul pulsante “Invia codice”.
Dopo aver verificato il codice, la cosa successiva da fare è inserire la ragione sociale, i dettagli del metodo di pagamento e l’indirizzo di fatturazione.
Una volta inseriti questi dati, fate clic sul pulsante “Inizia la mia prova gratuita”.
Successivamente, vi verranno poste una serie di 4 domande sulla vostra organizzazione e sull’uso che farete della piattaforma Google Maps.
Google Maps vi chiederà l’obiettivo principale dell’utilizzo della piattaforma, il settore in cui operate, la selezione di un caso d’uso e le dimensioni della vostra azienda.
Dopo aver risposto a queste domande, fare clic sul pulsante “Invia”.
A questo punto apparirà un popup con la chiave API di Google Maps.
È possibile copiare e salvare questa chiave in un file di testo per un uso futuro.
Ora che avete creato una chiave API di Google Maps, dovrete tornare alla vostra dashboard di WordPress per inserirla nelle impostazioni di AIOSEO Local SEO.
Configurazione delle impostazioni di Google Maps in WordPress
Ora è possibile tornare a All in One SEO ” Local SEO dalla dashboard di WordPress e navigare nella scheda “Mappe”.
Inserire la chiave API di Google Maps nel campo “Chiave API”. Appena aggiunta la chiave, verrà visualizzata un’anteprima della mappa in AIOSEO.
Successivamente, è possibile scorrere verso il basso per modificare le impostazioni della mappa.
AIOSEO consente di visualizzare Google Maps utilizzando un blocco Gutenberg, uno shortcode, un widget o un codice PHP. Inoltre, consente di scegliere diversi stili di mappa e di aggiungere un indicatore personalizzato alla mappa.
Non dimenticate di fare clic sul pulsante “Salva modifiche” quando avete finito.
Visualizzazione di Google Maps in WordPress
Quindi, potete aggiungere Google Maps a qualsiasi post o pagina di WordPress. Per iniziare, basta modificare o aggiungere una nuova pagina al vostro sito web.
Una volta entrati nell’editor dei blocchi, fare clic sul pulsante “+” in alto e aggiungere il blocco AIOSEO Local – Map in qualsiasi punto della pagina.
Dopodiché, la vostra Google Map verrà aggiunta alla pagina.
AIOSEO consente anche di modificare le impostazioni della mappa dalle opzioni sulla destra. Ad esempio, è possibile mostrare etichette e icone, aggiungere un indicatore personalizzato e modificare la larghezza e l’altezza della mappa.
Se si dispone di più sedi, è possibile selezionare la sede da evidenziare scegliendo tra le opzioni presenti nel menu a destra.
È sufficiente fare clic sul menu a discesa “Località” e selezionare la località preferita da visualizzare sul sito web.
Una volta soddisfatti delle impostazioni, procedere alla pubblicazione della pagina.
Ora è possibile visitare il sito web per vedere Google Maps in azione.
Potete anche aggiungere Google Maps alla sezione widget del vostro sito, come la barra laterale o il piè di pagina.
Per iniziare, andate su Aspetto ” Widget dal pannello di amministrazione di WordPress. Quindi, fate clic sul pulsante “+” e aggiungete il blocco di widget “AIOSEO Local – Map” dove desiderate visualizzare la vostra posizione.
Successivamente, è possibile modificare le impostazioni del widget.
Ad esempio, è possibile aggiungere un titolo, modificare la larghezza e l’altezza della mappa, scegliere quale località visualizzare se si hanno più località e modificare l’etichetta.
Ecco fatto!
Ora, quando aggiornate il vostro sito web, vedrete Google Maps nell’area dei widget.
Guide esperte sull’uso delle mappe in WordPress
Ora che sapete come aggiungere Google Maps al vostro sito, potreste voler vedere altre guide relative alle mappe e alla localizzazione in WordPress.
- Come incorporare Bing Maps in WordPress (passo dopo passo)
- Come aggiungere una mappa interattiva in WordPress
- Come incorporare una mappa di Google nei moduli di contatto (con il pin della mappa)
- I migliori plugin di Google Maps per WordPress (la maggior parte sono gratuiti)
- Come aggiungere il localizzatore di negozi di Google Maps in WordPress
- I migliori plugin per WordPress Store Locator per aumentare la SEO locale
- Come aggiungere Schema di località multiple per le aziende locali in WordPress
- Come aggiungere il completamento automatico per i campi indirizzo in WordPress
- I migliori plugin WordPress per la geolocalizzazione e il geoIP
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere Google Maps al vostro sito WordPress. Potreste anche voler vedere le nostre scelte dei migliori plugin WordPress per le piccole imprese e imparare come aggiungere un localizzatore di negozi Google Maps in WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Dennis Muthomi
thanks for this well-explained guide! I have an issue that I need help with though. One of my websites has a dark mode color design because tha;ts how the theme was designed and coded. I also use Google Maps quite often, and I know there is a dark mode version available.
is there a way to add the dark mode version of Google Maps to my website instead of the regular version? I just want the map to match my website’s dark theme design.
WPBeginner Support
At the moment we do not have a recommended easy method for changing the map to their dark mode variant in embeds. If that changes we will be sure to share!
Admin
Moinuddin Waheed
This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
Both the methods without plugin and with AIOSEO are good and serves my need.
But I would go with AIOSEO to implement this feature as it will also help in local seo.
Thanks for this helpful guide for embedding Google map.
melanie bund
Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
Thank you in advance
Melanie
WPBeginner Support
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Donata
I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?
WPBeginner Support
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Admin
Sharon
Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.
Mark
Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free
WPBeginner Support
Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.
Admin
Kamil
Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.
WPBeginner Support
While we have not tested it yet, we will be sure to take a look at it.
Blessy
I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?
Miranda Olding
Thanks – so clear x
Sara C
Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.
Many, many thanks for this tutorial.
Sara
Denny Png
Dear Sir/Madam,
I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.
Seek yr kind advise on it!
Thankyou!
Rdgs,
Denny Png
Kathy
Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!
divi
Great Work Bro!!!!
Andy Kramer
I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?
Karen
I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?
Mari
Hi!
I can’t find the code.. There’s no “flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
Thanks in advance.
Andy Meuleman
A great lesson, easy to follow and implement.
Much thanks, Andy
Karthik
Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??
Parmod
Can you be more specific about what exactly do you need
Bigg Tobias Inspired
So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?
Carla Spacher
Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?
By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on “Share and embed map”. Then click on “Embed map” and enter into your WP page/or post.
WRC
Thank you. Very helpful post.
Rory
Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
Thanks for your help.
aamir
hello sir,
i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.
Thanks & Regards,
aamir
Trang Tran
Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?
Guilherme
Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?
Thanks
Bongo
Powerful stuff man. Thanks
Erwin
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
Christopher Rose
Thanks for all the informative WP articles you’re posting.
Is it possible to add a Google Map to a site that
1. automatically adds the location of all site visitors or commenters to a map
and
2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.
Widdershins
That is so cool! … thanks
zakaria
Thank you very much!
I have already founded (MapPress Easy Google Maps) and it is nice plugin.
And of course, your attention is very nice support. THANKS!!!
One more thing, please.
I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
May be you would be so kind to advice some other plugins to solve this problem.
Thanks advance
Best regards
Zakaria