Med många års erfarenhet av att optimera WordPress-webbplatser för lokala företag förstår vi vikten av att hjälpa kunderna att hitta dig enkelt. Att lägga till en Google Maps-butikslokalisering på din WordPress-webbplats är ett enkelt men effektivt sätt att uppnå detta.
En butikslokalisering pekar ut ditt företags läge på en karta, vilket gör det enkelt för kunderna att få vägbeskrivningar och dela ditt företags läge med vänner.
I den här guiden visar vi dig hur du enkelt lägger till en Google Maps-butikslokalisering i WordPress.
Varför lägga till Google Maps Store Locator i WordPress?
Många WordPress-användare run småföretagswebbplatser som betjänar en viss stad eller region. Detta inkluderar företag som gillar restauranger, fastighetsmäklare, rörmokare, leverantörer av underhållstjänster, små butiker, salonger och mycket mer.
Dessa lokala företag förlitar sig på synlighet online för att locka kunder. Dessutom visar statistik att 53 % av användarna av mobila enheter söker efter vägbeskrivningar till lokala butiker i Google-sökningar.
Att lägga till en Google Maps-butikslokalisering på din webbplats är viktigt för att driva fottrafik eftersom det kan hjälpa människor att hitta ditt företag lättare. De kommer att kunna få köranvisningar till din butik och dela platsen med sina vänner.
Det kan också bidra till att förbättra din sites synlighet i search engines och locka fler besökare till din website.
Låt oss ta en titt på hur du lägger till en Google Maps store locator på din WordPress site. Vi visar dig både gratis och betalda metoder med sina för- och nackdelar, så att du kan välja den som bäst passar dina behov.
Metod 1: Lägga till en enkel locator för butiker till WordPress (gratis)
Den här metoden är gratis och enkel eftersom den inte kräver extra ansträngning för att skapa en Google Maps API key. Den rekommenderas för användare som vill add to en enkel karta över sin stores location.
Först måste du besöka Google Maps website på din dator. Därefter enter du din stores adress i search-fältet och Google Maps kommer att visa den på kartan med en fastnålad markör.
Se till att markören är placerad på korrekt location. Du kan välja en zoomnivå genom att clicka på zoomknapparna längst ner i högra hörnet.
När du är nöjd med hur kartan ser ut måste du klicka på delningsknappen i den vänstra colonnen. Detta kommer att visa en popup där du måste byta till tabben ”Embed a Map”.
Du kommer nu att se din searchade location på kartan med HTML-kod. Du bör clicka på länken ”Copy HTML” för att få embed-koden.
Nu head över till admin area på din WordPress webbplats och redigera posten eller sidan där du vill visa kartan för store locator.
Normalt lägger användare till en karta över butikslokalisering på sin kontaktformulärsida med företagets telefonnummer och öppettider.
På vyn för edit av post måste du lägga till ett ”Custom HTML”-block.
Du ska klistra in koden som du kopierade från Google Maps i textområdet i blocket ”Custom HTML”.
You can now preview the page to see Google Maps embed into your page. Det kommer att visa din stores location markerad på kartan med links för att få vägbeskrivningar dit eller för att save platsen.
Den här metoden fungerar för snabb embedning av Google Maps, men den ger dig inte maximala sökmotorsoptimering. Med andra ord hjälper den dig inte att ranka högre och få mer trafik från search engines eller Google Maps-sökningar.
Om du är ett litet företag, en restaurang eller en webbutik med en eller flera fysiska platser rekommenderar vi att du använder nästa lösning för att förbättra din lokala SEO-ranking.
Metod 2: Lägga till en Store Locator med Local SEO (rekommenderas)
Nästan 46% av all search på Google har lokal avsikt. All in One SEO (AIOSEO) är det bästa WordPress SEO plugin på marknaden och hjälper dig att få mer gratis trafik från search engines till din website.
AIOSEO är också ett bra plugin för butikslokalisering eftersom du kan ange dina butiksplatser, kontaktuppgifter och öppettider med hjälp av schemamarkup så att informationen visas på sökmotorernas resultatsidor.
När du till exempel söker efter ”McDonald’s-ställen i Florida” på Google visas en featured snippet med de olika destinationerna och en karta med utmarkerade platser.
Detta kommer att förbättra din websites sökmotorsoptimering och öka antalet clicks i search.
Obs/observera: Du behöver minst AIOSEO Plus-planen för att få tillgång till den utvalda Local SEO-funktionen som behövs för denna tutorial.
Först måste du installera och aktivera plugin-programmet AIOSEO för WordPress. Mer detaljer finns i vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Vid aktivering kommer plugin att run en setup wizard. Om du behöver hjälp med att konfigurera pluginet, vänligen ta en titt på vår guide om hur du konfigurerar AIOSEO för WordPress.
När installationsprocessen är klar måste du heada över till All in One SEO ” Local SEO på din WordPress dashboard.
Du kan klicka på knappen ”Activate Local SEO” för att komma igång med att konfigurera de lokala inställningarna.
Därefter måste du klicka på tabben ”Maps” högst upp på Local SEO page.
På sidan Maps bör du se fältet ”API Key”.
Du kan få en API key för Google Maps genom att gå till Google Maps Platform och logga in med ditt Google account.
Efter det klickar du på knappen ”Kom igång”.
Google Cloud resources är organiserade efter projekt. Om du inte redan har ett projekt kommer ett att skapas åt dig automatiskt.
Obs/observera att du måste aktivera fakturering för projektet för att kunna använda Google Maps API. Det är dock osannolikt att you någonsin kommer att betala något.
Förfrågningar om embed av Google Maps är gratis med obegränsad användning enligt detaljerna i Googles documentation, och du får också 200 USD i månadskredit varje månad.
Du måste klicka på knappen ”Create Billing Account”.
You will now see the Account Information page. You should select your country from the drop-down menu and agree to the terms of service.
När du är klar klickar du på knappen ”Fortsätt”.
Nu måste du välja en befintlig profil för betalningar eller skapa en new.
Profilen kommer antingen att vara för en enskild person eller ett företag och kommer att innehålla namnet på den enskilda personen eller företaget, en betalsätt och en adress.
När du har enter den informationen måste du clicka på knappen ”Start My Free Trial”.
Oroa dig inte för formuleringen ”gratis provperiod”. Map embed requests förblir gratis även när den kostnadsfria provperioden har avslutats, och ditt credit card kommer aldrig att debiteras förrän du manuellt uppgraderar till ett betalt account.
You may also be asked to fill in a 30-second survey of your business to make sure you are given the most relevant information.
När du klickar på knappen ”Submit” kommer din Google Maps API key att visas. Du måste enter den här nyckeln i plugin-inställningarna för metoderna 2 och 3.
Sedan kan du klicka på ikonen ”Copy to Clipboard” i slutet av fältet ”Your API Key”. När du har gjort det är det bara att dismissa popupen genom att clicka på knappen ”Go to Google Maps Platform”.
Begränsning av din API Key för Google Maps
Vi rekommenderar att du begränsar nyckeln så att den inte kan användas av andra.
När du har skapat din API key kommer Google att visa en ”Protect your API key” popup där du kan begränsa din key så att den bara fungerar på din egen website.
I rullgardinsmenyn ”Select restriction type” måste du välja ”HTTP referrers (web sites)”. I nästa fält ska du skriva in domain name för din website i fältet ”New object” med mönstret *example.com/*
.
Du bör se ett message som säger: ”Successfully restricted your API key. Nu fungerar nyckeln bara för Google Maps som är embedade på din specifika website.
Tillbaka på din website ska du enter din API key i fältet. Därefter kan du rulla ner för att editera kartinställningarna.
AIOSEO låter dig visa Google Maps med hjälp av ett Gutenberg (WordPress editor) block, shortcode, widget eller PHP-kod. Det låter dig också välja olika kartstilar och add to en customize-markör till din karta.
För denna tutorial, se till att inställningen ”Gutenberg Block” är vald. Glöm inte att clicka på knappen ”Save Changes” när du är klar.
Nu kan du skapa din karta för lokalisering av butiker. Hur du gör detta beror på om ditt företag bara har en store eller flera locations.
Lägga till en karta för en enskild location
Om ditt företag har en enda fysisk location kommer kartan att använda den information som du tillhandahåller på All in One SEO:s page ”Locations Settings”.
Gå vidare nu och byt till tabben ”Locations” på All in One SEO ” Local SEO page.
Eftersom you har en enda fysisk location bör du se till att alternativet ”Multiple Locations” är inställt på ”No”.
Därefter ska du rulla ner till ”Business Info” -sektionen och fylla i så mycket information om ditt företag som möjligt.
Detta är viktigt eftersom informationen kan visas när någon söker efter ditt företag med hjälp av Google search eller Google Maps.
Därefter rullar du ner till ”Maps” -sektionen för att fästa din exakta location.
Du behöver bara enter din address i fältet ”Enter a query”. En nål kommer att läggas till på den platsen, och du kan flytta nålen genom att dra den till en new location om det behövs.
När du är slutförd måste du rulla högst upp eller längst ner på sidan och klicka på knappen ”Save Changes” för att lagra dina inställningar.
Nu kan du add to din store locator map till valfri WordPress post eller page. För att börja, redigera eller lägg till ett nytt post eller page på din website.
När du är i block editor, click the ’+’ button at the top and add the ’AIOSEO Local – Map’ block anywhere on the page. Se till att du klickar på knappen ”Update” eller ”Publicera” när du är slutförd.
Grattis, du har utan problem addat en Google Maps Store Locator till din site.
Lägga till kartor för flera locations
För att add to en karta för en annan location måste du navigera till tabben Locations på All in One SEO ” Local SEO page. När du är där måste du klicka på alternativet ”Ja” för flera locations och sedan klicka på knappen ”Save Changes” högst upp på vyn.
När du har sparat dina ändringar kommer du att notera att en new Locations custom post type har lagts till i admin sidofältet. Det är här du kommer att enter dina företags locations.
Gå vidare och navigera till Locations ” All Locations och klicka sedan på knappen ’Add New’.
Då kommer du till Editorn för Locations. Du måste add to en titel för den location du lägger till, t.ex. namnet på butiken eller staden.
Nu ska du rulla ner till ”AIOSEO Local Business” -sektionen på sidan, under innehållet i posten.
Se till att du enter så mycket information som möjligt eftersom den kan visas när någon söker efter ditt företag i Google search eller Google Maps.
Efter det ska du hitta ”Maps” section och enter your address i fältet ”Enter a query”.
En nål kommer att displayed på den location.
När du har angett din location på kartan och lagt till platsinformation kan du klicka på knappen ”Publicera”.
You can now repeat this step and add to your other business locations.
När du har slutfört kan du add to en karta över butiken på din website för varje location genom att använda blocket ”AIOSEO Local – Map” i WordPress editor.
Nu måste du välja vilken location som ska visas på kartan.
Det gör du genom att titta på rutan för blockinställningar till höger på vyn och välja den store du vill visa i rullgardinsmenyn ”Location”.
Lägg bara till ytterligare block med lokala kartor för alla andra locations. Glöm inte att klicka på knappen ”Publicera” eller ”Update” högst upp på sidan för att visa kartorna på din website.
Metod 3: Ompekning av flera olika locations för butiker på en enda karta
Med de två första metoderna kan du lägga till kartor för butikslokalisering med en enda plats. Om du har flera platser måste du lägga till en separat karta för varje plats.
Alternativt kan du använda vår tredje metod för att visa flera locations på en och samma karta.
Det första du behöver göra är att installera och aktivera Locatoraid Store Locator plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Vid aktivering måste du gå till Locatoraid ” Configuration och konfigurera tillägget.
I fliken ”Google Maps” måste du klistra in en Google Maps API key. Du kan följa metoden ovan i metod 2 för att skapa en.
Sedan måste du clicka på ’Save’ iconen för att store nyckeln. You should notice that Google Maps is able to load correctly in the ’Map Style Preview’ window.
Därefter kan du gå till tabben ”Configuration” och välja om du vill visa miles eller kilometer på kartan.
Du kan också kontrollera de andra alternativen, till exempel adressformat, de detaljer som du gillar att visa på kartan och vilka användare som kan använda plugin.
När du är nöjd med inställningarna för pluginet, se till att du klickar på knappen ”Save” för att spara dina inställningar.
Nu är du redo att add to locations för dina butiker. Du ska navigera till Locatoraid ” Locations. Väl där måste du klicka på knappen ”Add New”.
Detta kommer att ta dig till ”Add New Location” page. Här kan du skriva in namnet på butiken, location och andra details.
När du har slutfört ska du klicka på knappen ”Add New Location” längst ner på sidan.
You will be taken to the ”Edit Location” page where you can see the store location on a map.
Om allt ser bra ut ska du klicka på knappen ”< Location” högst upp på skärmen för att återgå till Locatoraid ” Locations page i din dashpanel.
Du kan lägga till fler locations genom att clicka på knappen ”Add Location” och upprepa dessa steg.
När du har skapat alla dina stores locations kan du add to kartan på din website.
Lägg bara till eller edit en page och click den blå ikonen ”+ Add Block”. Du ska dra ett Shortcode block till sidan och sedan enter shortcode [locatoraid]
i fältet.
Denna standard shortcode fungerar bra för de flesta websites. Du kan dock customize kartan genom att använda en annan shortcode. Besök sidan Locatoraid ” Publicera för att lära dig mer.
Nu kan du publicera eller updating the page och besöka din website för att se kartan över din store locator.
Alla dina stores locations kommer att visas på samma karta. Om dina användare skriver in sin adress eller klickar på länken ”Locate Me” kan de hitta de närmaste butikerna och få vägbeskrivningar.
Vi hoppas att denna handledning hjälpte dig att lära dig hur du lägger till en Google Maps-butikslokalisering i WordPress. Du kanske också vill lära dig hur du skapar en interaktiv karta i WordPress eller kolla in vår lista över de bästa schema markup-pluginsen för din webbplats.
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.
Priscilla
Hi there, the shortcode you have in the instructions on this page for the store locator is incorrect and conflicting.
you have [wpls] in the instructions but the actual shortcode which you have in the screenshot is [wpsl].
The s and the l are around the wrong way
WPBeginner Support
Thank you for catching that, we will be sure to fix that typo.
Administratör
Pablo Cardozo
Since Google Maps charges for using its service, would not it be nice to also offer the option to use Open Street Map? I’m sure there must be plugins that do it and doing it by hand is not so different from the Google option either.
WPBeginner Support
We do not have a specific plugin we would recommend at the moment but we will certainly keep an eye out.
Administratör