Dla lokalnych firm wyświetlanie twojej lokalizacji na interaktywnej mapie to nie tylko wygoda – to kluczowy element strategii cyfrowej.
Dodanie Map Google do Twojej witryny internetowej może znacznie poprawić komfort użytkowania, ułatwiając odwiedzającym znalezienie Twojej lokalizacji. Dodatkowo może to zwiększyć widoczność Twojej witryny w wyszukiwarkach, przyciągając więcej odwiedzających i potencjalnych klientów.
Zbadaliśmy najlepsze sposoby na płynną integrację Map Google z twoją witryną internetową WordPress, poprawiając zarówno komfort użytkowania, jak i SEO.
W tym artykule pokażemy, jak odblokować moc Map Google w WordPress.
Dlaczego warto dodać Mapy Google w WordPress?
Czy wiesz, że Mapy Google to najpopularniejsza aplikacja nawigacyjna na wszystkich platformach?
Jeśli masz biuro lub fizyczny adres sklepu, to dodanie Map Google do Twojej witryny internetowej WordPress ułatwia użytkownikom szybkie zlokalizowanie Twoich fizycznych sklepów, restauracji lub punktów sprzedaży detalicznej. Pomaga to przyciągnąć więcej klientów i wygenerować większy biznes.
Nie tylko to, ale osadzanie Google Maps może również poprawić twoje WordPress SEO. Według Google 46% wszystkich wyszukiwań to wyszukiwania lokalne. Dodanie Map Google do WordPressa może zwiększyć Twoje lokalne SEO i poprawić Twoją widoczność w lokalnych wyszukiwaniach.
Istnieją dwa sposoby osadzania Map Google w WordPressie, a my pokażemy ci oba.
Zaletą drugiej metody jest to, że jest ona zgodna ze wszystkimi najlepszymi praktykami lokalnego SEO, więc jeśli z niej skorzystasz, Google zacznie uwzględniać Twoją lokalizację w Mapach Google. Wyświetli również informacje o twojej firmie, takie jak nazwa, logo, adres, telefon i godziny otwarcia w lokalnych wynikach wyszukiwania.
W związku z tym zobaczmy, jak można dodać Mapy Google do WordPressa. Poniżej znajdują się szybkie odnośniki, za pomocą których można przejść do wybranej sekcji:
Jak dodać Mapy Google do WordPressa bez wtyczki?
Jeśli chcesz szybko osadzać Mapy Google we wpisie lub na stronie WordPress, możesz użyć domyślnej metody iFrame.
Wystarczy przejść do witryny internetowej Google Maps i wpisać dowolny adres ulicy w polu wyszukiwania.
Następnie należy kliknąć ikonkę Udostępnij, co spowoduje wyświetlenie wyskakującego okienka z opcją wysłania odnośnika do lokalizacji lub osadzania mapy.
Należy wybrać opcję „Osadzanie mapy”.
Następnie wystarczy skopiować kod HTML dla Google Maps, a następnie otworzyć stronę, na której chcemy osadzać mapę.
Wewnątrz edytora bloków należy dodać własny blok HTML.
Teraz wystarczy wkleić kod osadzania skopiowany z Google Maps.
Następnie należy zaktualizować lub opublikować stronę, aby wyświetlić podgląd zmian.
Ta metoda sprawdza się do szybkiego osadzania Map Google, ale nie zapewnia maksymalnych korzyści SEO.
Jeśli jesteś małą firmą, restauracją lub sklepem internetowym z jednym lub wieloma ustawieniami regionalnymi, zalecamy skorzystanie z następnego rozwiązania, aby zmaksymalizować Twoje lokalne rankingi SEO, ponieważ wykorzystuje ono odpowiednie dane otwartego wykresu, aby pomóc Ci uzyskać wyższą pozycję w Google.
Jak dodać Mapy Google do WordPressa za pomocą wtyczki Local SEO?
Najlepszym sposobem na dodanie Map Google i zoptymalizowanie Twojej witryny pod kątem lokalnego SEO jest użycie All in One SEO (AIOSEO).
Jest to najlepsza wtyczka SEO dla WordPressa, ponieważ pomaga uzyskać wyższe rankingi SEO bez edytowania kodu lub zatrudniania programisty. Ponad 3 miliony profesjonalistów korzysta z AIOSEO, aby poprawić swoje rankingi w wyszukiwarkach.
W tym poradniku będziemy używać wersji AIOSEO Pro, ponieważ zawiera ona funkcję regionalnego SEO i inne zaawansowane opcje optymalizacji. Istnieje również darmowa wersja AIOSEO, której możesz użyć, aby rozpocząć optymalizację twojej witryny pod kątem wyszukiwarek.
Najpierw musisz zainstalować i włączyć wtyczkę AIOSEO w WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat instalacji wtyczki WordPress.
Po włączaniu wtyczka uruchomi kreator konfiguracji. Możesz kliknąć przycisk „Let’s Get Started”, aby skonfigurować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat prawidłowej konfiguracji All in One SEO w WordPress.
Następnie możesz przejść do All in One SEO ” Local SEO z twojego kokpitu WordPress.
Następnie kliknij przycisk „Włącz Local SEO”, aby rozpocząć konfigurację ustawień lokalnych.
Po włączeniu dodatku Local SEO dla WordPress można dodać pojedynczą lokalizację lub wiele lokalizacji w AIOSEO i wyświetlać je na Mapach Google. Pokażemy ci, jak dodać obie te opcje do twojej witryny internetowej.
Dodawanie pojedynczej lokalizacji
Aby dodać twoje ustawienia regionalne, informacje o firmie, godziny otwarcia i inne, musisz najpierw przejść do All in One SEO ” Local SEO i otworzyć kartę „Lokalizacje”.
Jeśli masz jedną fizyczną lokalizację, pozostaw opcję „Wiele lokalizacji” ustawioną na Nie.
Następnie przewiń w dół do sekcji „Mapy”, aby przypiąć twoją dokładną lokalizację.
Wystarczy, że wpiszesz swój adres w polu „Wpisz zapytanie”, a Mapy Google wskażą Twoją lokalizację.
Gdy już wpiszesz swoją lokalizację, nie zapomnij kliknąć przycisku „Zapisz zmiany”.
Dodawanie wielu lokalizacji
Jeśli masz więcej niż jedną fizyczną lokalizację, musisz włączyć ustawienie „Wiele lokalizacji” na karcie „Lokalizacja” w Local SEO.
Następnie w twoim panelu administratora WordPress pojawi się nowe menu Locations.
Przejdź do sekcji Lokalizacje, a następnie kliknij przycisk „Utwórz nową”.
Gdy znajdziesz się w edytorze WordPress, przewiń w dół do sekcji „Mapa”.
Tutaj możesz wpisz swój adres w polu „Wpisz zapytanie”.
Po wpiszeniu twojej lokalizacji na mapie i dodaniu informacji o lokalizacji, kliknij przycisk „Opublikuj”.
Możesz teraz powtórzyć ten krok i dodać dowolną liczbę lokalizacji dla Twojej firmy.
Po zakończeniu dodawania Twoich ustawień regionalnych, możesz przejść do karty „Mapy” z powrotem w menu All in One SEO ” Local SEO.
Tutaj będziesz musiał wpisz klucz API Google Maps.
Zobaczmy teraz, jak utworzyć klucz API dla Google Maps.
Tworzenie klucza API Map Google
Aby rozpocząć, należy przejść na witrynę internetową Google Maps Platform i kliknąć przycisk „Rozpocznij”.
Po zalogowaniu się na twoje konto Google, będziesz musiał skonfigurować konto rozliczeniowe.
Platforma Google Maps ma ceny płatności zgodnie z rzeczywistym użyciem i oferuje pierwsze 300 USD miesięcznego użytkowania za darmo dla wszystkich użytkowników. W przypadku większości witryn internetowych z łatwością pokryje to proste osadzanie map, takie jak to, które tworzymy w tym poradniku.
Nie martw się, nie będą pobierać żadnych opłat, chyba że ręcznie uaktualnisz konto do płatnego.
Aby rozpocząć, kliknij przycisk „Utwórz konto rozliczeniowe”.
Następnie możesz wybrać swój kraj i z rozwijanego menu wybrać to, co najlepiej opisuje twoją organizację.
Po wybraniu tych informacji kliknij pole wyboru dla opcji Warunki korzystania z usługi, a następnie kliknij przycisk „Kontynuuj”.
Na następnym ekranie będziesz musiał wpisz swój numer telefonu w celu weryfikacji.
Gdy to zrobisz, kliknij przycisk „Wyślij kod”.
Po zweryfikowaniu kodu, następną rzeczą do zrobienia jest wpisz nazwę twojej firmy, szczegóły metody płatności i adres rozliczeniowy.
Po wpiszeniu tych danych kliknij przycisk „Rozpocznij mój bezpłatny okres próbny”.
Następnie zostaniesz poproszony o udzielenie odpowiedzi na serię 4 pytań dotyczących Twojej organizacji i sposobu korzystania z platformy Google Maps.
Mapy Google zapytają o główny cel korzystania z platformy, branżę, w której działasz, wybierz przypadek użycia i wielkość Twojej firmy.
Po udzieleniu odpowiedzi na te pytania, kliknij przycisk „Wyślij”.
Zobaczysz teraz wyskakujące okienko z twoim kluczem API Google Maps.
Klucz ten można skopiować i zapisać w pliku tekstowym do wykorzystania w przyszłości.
Teraz, gdy utworzyłeś klucz API Google Maps, musisz wrócić do kokpitu WordPress, aby wpisz go w ustawieniach AIOSEO Local SEO.
Konfigurowanie ustawień Google Maps w WordPress
Możesz teraz wrócić do All in One SEO ” Local SEO z kokpitu WordPress, a następnie przejść do karty „Mapy”.
Następnie wpisz klucz API Google Maps w polu „Klucz API”. Zaraz po dodaniu klucza zobaczysz podgląd mapy w AIOSEO.
Następnie możesz przewinąć w dół, aby edytować ustawienia mapy.
AIOSEO pozwala wyświetlać Mapy Google za pomocą bloku Gutenberg, krótkiego kodu, widżetu lub kodu PHP. Pozwala także wybrać różne style map i dodać własny konfigurator do twojej mapy.
Nie zapomnij kliknąć przycisku „Zapisz zmiany” po zakończeniu.
Wyświetlanie map Google w WordPressie
Następnie możesz dodać Mapy Google do dowolnego wpisu lub strony WordPress. Aby rozpocząć, po prostu edytuj lub utwórz nową stronę w Twojej witrynie internetowej.
Po przejściu do edytora bloków kliknij przycisk „+” u góry i dodaj blok AIOSEO Local – Map w dowolnym miejscu na stronie.
Następnie twoja mapa Google zostanie dodana do strony.
AIOSEO pozwala również edytować ustawienia mapy z poziomu opcji po twojej prawej stronie. Można na przykład wyświetlać etykiety i ikonki, dodawać własne znaczniki oraz edytować szerokość i wysokość mapy.
Jeśli posiadasz wiele lokalizacji, możesz wybrać, które położenie ma zostać wyróżnione, wybierając jedną z opcji podanych w menu po prawej stronie.
Wystarczy kliknąć menu rozwijane „Lokalizacja” i wybrać preferowane położenie, które ma być wyświetlane na Twojej witrynie internetowej.
Gdy będziesz zadowolony z twoich ustawień, przejdź dalej i opublikuj stronę.
Teraz użytkownik może przejść na Twoją witrynę internetową, aby zobaczyć Mapy Google w działaniu.
Możesz także dodać Mapy Google do sekcji widżetów twojej witryny, takich jak panel boczny lub stopka.
Aby rozpocząć, przejdź do Wygląd ” Widżety w twoim panelu administracyjnym WordPress. Następnie kliknij przycisk „+” i dodaj blok widżetu „AIOSEO Local – Map” w miejscu, w którym chcesz wyświetlić swoją lokalizację.
Następnie można edytować ustawienia widżetu.
Możesz na przykład dodać tytuł, zmienić szerokość i wysokość mapy, wybrać lokalizację do wyświetlenia, jeśli masz wiele lokalizacji, i edytować etykietę.
To wszystko!
Teraz, gdy zaktualizujesz swoją witrynę internetową, zobaczysz Mapy Google w obszarze widżetów.
Przewodniki ekspertów na temat korzystania z map w WordPressie
Teraz, gdy już wiesz, jak dodać Mapy Google do twojej witryny, być może spodoba ci się kilka innych przewodników związanych z mapami i lokalizacją w WordPress.
- Jak osadzać Bing Maps w WordPress (krok po kroku)
- Jak dodać interaktywną mapę w WordPress
- Jak osadzać mapę Google w formularzach kontaktowych (z pinezką mapy)
- Najlepsze wtyczki Google Maps dla WordPress (większość jest darmowa)
- Jak dodać lokalizator sklepów Google Maps w WordPress?
- Najlepsze wtyczki WordPress Store Locator do zwiększenia lokalnego SEO
- Jak dodać schemat wielu lokalizacji dla lokalnego biznesu w WordPressie?
- Jak dodać autouzupełnianie dla pól adresowych w WordPress?
- Najlepsze wtyczki WordPress do geolokalizacji i GeoIP
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać Mapy Google do twojej witryny WordPress. Możesz również zapoznać się z naszymi typami najlepszych wtyczek WordPress dla małych firm i dowiedzieć się, jak dodać lokalizator sklepu Google Maps w WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and 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!
Administrator
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/
Administrator
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/
Administrator
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.
Administrator
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