Add Google Maps & GBP to Your Website — Beginner's Guide

1 Why a Google Maps embed and GBP link matter for local SEO

Before you add anything to your website, you need to understand what these three things are and why Google uses them as local ranking signals.

What is a Google Maps embed?

A Google Maps embed is an interactive map that you add to your website — typically on your contact or location page. It shows visitors exactly where your business is and lets them get directions without leaving your site. But beyond helping visitors, it also signals to Google that your website is associated with a physical location, which strengthens your local search ranking.

What is a Google Business Profile link?

Your Google Business Profile (GBP) is the listing that appears in Google Maps and in the local results box when people search for businesses like yours. A link from your website to your GBP explicitly connects your website to your Maps listing — something Google uses to verify that they are the same business. Without this link, Google has to guess whether your website and your GBP belong together.

What is a mixed content / HTTP embed problem?

If your website uses HTTPS (which all modern websites should) but your Google Maps embed URL starts with http:// instead of https://, browsers will block the map from loading entirely. Visitors will see a blank space where the map should be. This is called a mixed content error and it also affects your Core Web Vitals score.

What does the AIPageSEO audit flag?

2 Generate your Google Maps embed code

Google gives you a free embed code generator inside Google Maps itself. You do not need any special tools or accounts — just a few clicks. Here is exactly how to get the code.

1. 1 Go to Google Maps Open a new browser tab and go to https://maps.google.com.
2. 2 Search for your business In the search box at the top, type your business name. If your business is listed on Google, it will appear in the results. Click on your business name to open your listing. If you are adding a map for an address rather than a business listing, just search for the full address instead.
3. 3 Click Share In the panel on the left side of the screen you will see a button that says Share. Click it. A pop-up window will appear with two tabs — Send a link and Embed a map.
4. 4 Click the Embed a map tab Click Embed a map. You will see a preview of the map and below it a box containing HTML code. It will look something like this:
   <iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>
5. 5 Check the URL starts with https:// Look at the src="..." part of the code. Make absolutely sure it starts with https:// — not http://. Google now always generates HTTPS embeds, but older embeds copied from the web may use HTTP. If yours says http://, change it to https:// before using it.
6. 6 Click Copy HTML Click the Copy HTML button below the code box. The embed code is now copied to your clipboard. Keep this browser tab open — you will use this code in the next section.

3 Add the Google Maps embed to your HTML file

You now have the embed code copied. In this section you will open your contact or location page HTML file and paste the map code into the right place.

Which file should you edit?

The map should go on whichever page shows your business address and contact details — usually your contact page. The file will typically be called contact.html or similar. If you are not sure, look at the URL of your contact page — the last part of the URL usually matches the filename.

1. 1 Open FileZilla and connect to your server Fill in the four boxes at the top of FileZilla — Host, Username, Password, leave Port blank — and click Quickconnect. If you need help with this step, see the Before You Start guide linked above.
2. 2 Download a backup and your working copy Navigate to httpdocs (Plesk) or public_html (cPanel). Right-click your contact page file and choose Download. Rename it to contact-backup.html in the left panel. Download it again to your Desktop as your working copy.
3. 3 Open the file in Notepad++ Open Notepad++ → File → Open → navigate to your Desktop → click the file → click Open.
4. 4 Find where to paste the map Press Ctrl + F and search for your business address or the word contact to jump to the relevant part of the page. You want to paste the map code directly below your address and phone number — somewhere a visitor would naturally expect to see a map.
5. 5 Update the width to 100% Before pasting, update the embed code so the map fills the full width of its container. Change width="600" to width="100%" in the code. This makes the map responsive — it will resize correctly on mobile screens.
6. 6 Paste the embed code Click at the end of the line just before where you want the map to appear and press Enter to create a new blank line. Press Ctrl + V to paste the embed code. Your code should look like this:
   <p>12 High Street, Sheffield, S1 1AA</p> <p><a href="tel:+441142000000">0114 200 0000</a></p> <iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_ID" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>
7. 7 Save the file Press Ctrl + S. The red dot on the tab disappears when saved.

4 Find your Google Business Profile link

Your Google Business Profile link is the URL that takes people directly to your business listing on Google Maps. You need this URL to add to your page and to your LocalBusiness schema. Here is exactly how to find it.

1. 1 Search for your business on Google Open a browser tab and go to https://www.google.com. Type your business name and town or city into the search box and press Enter.
2. 2 Find your business in the results Your Google Business Profile should appear in the right-hand panel or in the local results box. You will see your business name, address, phone number and a map pin.
3. 3 Click View on Google Maps In your GBP panel, look for a link that says View on Google Maps or simply click your business name. This will open your full GBP listing on Google Maps.
4. 4 Copy the URL from the address bar Look at the URL in your browser address bar. It will be a long URL starting with https://www.google.com/maps/place/ or a shortened version starting with https://maps.app.goo.gl/. Click on the address bar, press Ctrl + A to select the whole URL, then Ctrl + C to copy it. Write this URL down — you will need it in the next two sections.

5 Add your GBP link to your page and your LocalBusiness schema

Your GBP link needs to appear in two places — as a visible link on your page and inside your LocalBusiness schema. Both are separate signals that Google uses to connect your website to your Maps listing.

Part A — Add a visible GBP link to your page

1. 1 Open your contact page file in Notepad++ If you still have your contact page open in Notepad++ from the previous section, continue with that file. If not, download it again from FileZilla and open it in Notepad++.
2. 2 Find a good place for the link The GBP link should appear near your address and phone number — either in your footer or on your contact page. A natural place is directly below your phone number or address, or below the Google Maps embed you added in Section 3.
3. 3 Add the link to your HTML Click at the end of the line where you want to add the link and press Enter to create a new blank line. Then type the following, replacing the URL with your actual GBP link:
   <a href="https://maps.app.goo.gl/YOUR_GBP_LINK" target="_blank" rel="noopener"> Find us on Google Maps </a>

Part B — Add your GBP link to your LocalBusiness schema

If your page already has LocalBusiness schema markup, you need to add your GBP URL to the sameAs array inside it. If you do not yet have LocalBusiness schema, see the tutorial on adding schema markup first.

1. 4 Find your LocalBusiness schema in Notepad++ Press Ctrl + F and search for LocalBusiness. This will jump to your schema block in the <head> section.
2. 5 Find or add the sameAs array Look inside your LocalBusiness schema for a sameAs property. If it already exists, add your GBP URL to the list. If it does not exist, add it. The result should look like this:
   "sameAs": [ "https://maps.app.goo.gl/YOUR_GBP_LINK", "https://www.facebook.com/yourbusiness", "https://www.yell.com/biz/your-business" ]
3. 6 Save the file Press Ctrl + S to save.

6 Fix a Google Maps embed that uses HTTP instead of HTTPS

If your website already has a Google Maps embed but the AIPageSEO audit flagged it as using HTTP, this section shows you exactly how to fix it. The fix takes less than a minute.

Why is this a problem?

All modern websites use HTTPS — the secure version of the web. When your website is served over HTTPS but loads content from an HTTP URL (like an old Google Maps embed), browsers treat this as a security risk called mixed content. The browser blocks the HTTP content from loading entirely. Your visitors see a blank space where the map should be, and your Core Web Vitals score is affected.

1. 1 Open your contact page file in Notepad++ If you have been following this tutorial from the beginning, your file is already open in Notepad++. If not, download it from FileZilla and open it in Notepad++.
2. 2 Use Find and Replace to fix the URL Instead of searching manually, use Notepad++'s Find and Replace feature to fix it automatically. Press Ctrl + H on your keyboard. A Find and Replace dialog box will open with two fields.
3. 3 Enter the search and replace values In the Find what field type:
   http://www.google.com/maps/embed
   
   In the Replace with field type:
   https://www.google.com/maps/embed
   
   Then click Replace All. Notepad++ will tell you how many replacements were made.
4. 4 Also check for the older Google Maps URL format Some older embeds use a slightly different URL format. Repeat the find and replace for:
   
   Find: http://maps.google.com/maps
   Replace: https://maps.google.com/maps
5. 5 Verify the fix visually Press Ctrl + F and search for maps/embed. Look at the result — the URL in the src= attribute should now start with https://. If you see http:// anywhere, repeat the find and replace step.
6. 6 Save the file Press Ctrl + S to save.

7 Upload your file and verify all three fixes

1. 1 Switch back to FileZilla Click on the FileZilla window in your taskbar. If it has disconnected, fill in the boxes again and click Quickconnect.
2. 2 Upload the edited file Find the edited file on your Desktop in the left panel. Right-click it and choose Upload. Click Overwrite when prompted. When the progress bar disappears the upload is complete.
3. 3 Check the map is showing in your browser Open a browser tab and go to your contact page. You should see an interactive Google Map showing your business location. If the map is not showing, right-click the page and choose View Page Source. Press Ctrl + F and search for maps/embed to verify the embed code is there and starts with https://.
4. 4 Check the GBP link is visible on the page Scroll to where you added the GBP link on your contact page. You should see a clickable "Find us on Google Maps" link. Click it to confirm it opens your Google Business Profile correctly.
5. 5 Run the AIPageSEO audit again to confirm Go to https://aipageseo.com/seo-audit-platform.html, run the audit on your contact page, and check that the Maps and Local SEO sections now show green passes for MAPS_EMBED_MISSING, MAPS_GBP_LINK_MISSING and MAPS_EMBED_HTTP.
6. 6 Request indexing in Google Search Console Log in to Google Search Console, use the URL Inspection tool, enter your contact page URL and click Request Indexing. This tells Google to re-crawl the page and pick up your new Maps embed and GBP link.

8 Common mistakes to avoid

1. ⚠ Loading the map with JavaScript instead of static HTML Some website themes or page builders load the Google Maps embed using JavaScript after the page has loaded. The AIPageSEO checker reads the raw HTML source — if the map is injected by JavaScript it will not be detected even if it appears to work in the browser. Always paste the iframe code directly into your HTML file.
2. ⚠ Using a fixed pixel width instead of 100% If you leave the embed width as width="600", the map will overflow on mobile screens causing a horizontal scroll. Always change the width to width="100%" so the map resizes correctly on all screen sizes.
3. ⚠ GBP link in schema but not visible on the page — or vice versa The AIPageSEO checker looks for your GBP link in both places — as a visible link on the page AND in your LocalBusiness schema sameAs array. Missing from either one will still flag as an issue. Make sure you add it in both places as covered in Section 5.
4. ⚠ Linking to a search result instead of your GBP listing When finding your GBP link, make sure you copy the URL of your actual business listing — not a search results page. Your GBP URL should contain your business name or a unique identifier. A Google search results URL starting with https://www.google.com/search?q= is not the same as your GBP link.
5. ⚠ Forgetting to save before uploading If you forget to press Ctrl + S in Notepad++ before going back to FileZilla, you will upload the unchanged file. Always check the red dot on the tab is gone before uploading.