Home » WordPress Plugins » Local SEO For Divi & Gutenberg Blocks » Create “Local SEO” Optimized Location Page With Gutenberg Blocks

Create "Local SEO" Optimized Location Page With Gutenberg Blocks

Local SEO (Search Engine Optimization) for multi-location businesses is difficult. Ranking for a single location-specific keywords on SERP (search engine results page) is hard.

The difficulty increases if you business has multi-locations.

The solution: Create individual location pages with local SEO.

Unleash targetted local audience on your website with local seo optimized location page.

Local SEO For Divi & Gutenberg Blocks plugin helps you do that. It takes away the complexity of local SEO.

Pre-requisites

Tools

Computer

Estimated Cost : 0 USD

Total Duration : 9 minutes

Start your FREE trial. No credit cards required.

Step 1 - Setup Local SEO Settings

Ensure you've configured Local SEO essential for store locator to work.
- Local SEO settings available at WordPress Admin > Settings > Locations & SEO
- Ignore this setup, if you've done this before.
- For details visit Local SEO Configuration

Start your FREE trial. No credit cards required.

Step 2 - Add Location Data To The WordPress Website

Ignore this step, if you're business location data is setup
- A business location entry will contain fields relevant to your Local SEO.
- Ensure you fill in most data fields.
- For details visit Add Business Locations In WordPress.

Start your FREE trial. No credit cards required.

Step 3 - Add "Location Page Block Pattern" On Location Page

- The Local SEO For Divi & Gutenberg Blocks plugin has 3 blocks to use on a location page.
  - Location Address Block
  - Location Opening Hours Block
  - Location Map Block
- The Location Page Block Pattern adds the above 3 blocks on a visually pleasing layout.
- To add the block pattern
  - Open a location page for edit using the block editor
  - Click on the + sign (Toggle block inserter) on the top bar of the page.
  - A sidebar with list of blocks shows up.
  - Click on the Patterns tab
  - Click on the dropdown, as shown in the video, and select Design - Multi Locations (Local SEO)
  - Click and select the Single Location Page - 01 block pattern
  - A well-designed location address, opening hours and map blocks shows on the block editor.
- Drag these blocks around the page to create your unique layouts and add custom content.

Start your FREE trial. No credit cards required.

Step 4 - Location Address Block

This block helps to publish a location's address using block editor.
The location address block has the panels with content & design options
- General Panel
  - Class Name (Unique) : Add an unique class name.
- Location Post Panel
  - Use Current Location Post : Enable the toggle to use the current post for location address data. When disabled, following fields appear
    - Select Location Post : A dropdown field to select a location from a list of published locations.
- Address (Design) Panel : Design settings for the address text
  - Layout : Select the layout for the address text. Options are
    - Single Line : Prints the address on a single line.
    - Multi Line : Prints the address on multi-lines.
  - Font family : Select the font family for the address. If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color

Start your FREE trial. No credit cards required.

Step 5 - Location Opening Hours Block

This block publishes opening hours for a given location
The location opening hours block has panels with content & design options
- General Panel
  - Class Name (Unique) : Add an unique class name.
- Location Post Panel
  - Use Current Location Post : Enable the toggle to use the current post for location opening hours data. When disabled, following fields appear
    - Select Location Post : A dropdown field to select a location from a list of published locations.
- Opening Hours Panel
  - First Day Of Week : Select the first day of the week. Options are Sunday or Monday
  - Show Closed Days : Enable/disable toggle field to show/hide days closed for business. On toggle enable
    - Closed Label : Text used to show a non-working day.
  - Time Format : Format of time for the opening hours. Options are
    - 12 Hour Format : Time text is between 00:00 and 11:59 with an AM/PM suffixed to it.
    - 24 Hour Format: Time text is between 00:00 and 23:59
- Odd Row Design Panel : Design options for odd rows of the opening hours tabel.
  - Set Background Color / Background Image
- Even Row Design Panel : Design options for even rows of the opening hours tabel.
  - Set Background Color / Background Image
- Data Cell Design Panel : Design options for the table cell.
  - Margin
  - Padding
  - Border width, color & style.
- Day Label Design Panel : Text style for the day labels like "Monday", "Tuesday" etc
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color
- Time Design Panel : Style for the time text
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color
- Closed Label Design Panel : Style for the closed label text
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color

Start your FREE trial. No credit cards required.

Step 6 - Location Map Block

This block adds a Google Map for a given location
The location map block has panels with content & design options
- General Panel
  - Class Name (Unique) : Add an unique class name.
- Location Post Panel
  - Use Current Location Post : Enable the toggle to use the current post for location map data. When disabled, following fields appear
    - Select Location Post : A dropdown field to select a location from a list of published locations.
- Map Setup Panel
  - Map Height : Set the height of the map
  - Map Type: Select a map type
    - Hybrid This map type displays a transparent layer of major streets on satellite images.
    - Roadmap This map type displays a normal street map.
    - Satellite This map type displays satellite images.
    - Terrain This map type displays maps with physical features such as terrain and vegetation.
  - Gesture Handling : Contorls how the map api handles gestures on the map
    - Auto Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or in an iframe.
    - Co-operative Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map. Two-finger touch gestures pan and zoom the map. Scroll events with a ctrl key or ⌘ key pressed zoom the map. In this mode the map cooperates with the page.
    - Greedy All touch gestures and scroll events pan or zoom the map.
    - None The map can't be panned or zoomed by user gestures.
  - Marker Icon : Set icon for the location marker. This will override the icon set in location custom post meta, which in-turn overrides the icon set in global settings.
- Map Controls Setup Panel : Sets the visibility of different controls panels on a map.
  - Show 'Map Type' Controls : Toggle enabled to show the Map Type control on the map
    - Map Types : Select one or more map types. Options are
      
      Hybrid
      
      Roadmap
      
      Satellite
      
      Terrain
    - Map Control Position : Select the position on the map. Options are
      
      Bottom Center
      
      Bottom Left
      
      Bottom Right
      
      Left Bottom
      
      Left Center
      
      Left Top
      
      Right Bottom
      
      Right Center
      
      Right Top
      
      Top Center
      
      Top Left
      
      Top Right
  - Show Zoom Control : Toggle enabled to show zoom control on the map
    - Zoom Control Position : Select the position on the map. Options are
      
      Bottom Center
      
      Bottom Left
      
      Bottom Right
      
      Left Bottom
      
      Left Center
      
      Left Top
      
      Right Bottom
      
      Right Center
      
      Right Top
      
      Top Center
      
      Top Left
      
      Top Right
  - Show Street View Control : Toggle enabled to show street view control on the map
    - Street view Control Position : Select the position on the map. Options are
      
      Bottom Center
      
      Bottom Left
      
      Bottom Right
      
      Left Bottom
      
      Left Center
      
      Left Top
      
      Right Bottom
      
      Right Center
      
      Right Top
      
      Top Center
      
      Top Left
      
      Top Right
  - Show Fullscreen Control : Toggle enabled to show fullscreen control on the map
    - Fullscreen Control Position : Select the position on the map. Options are
      
      Bottom Center
      
      Bottom Left
      
      Bottom Right
      
      Left Bottom
      
      Left Center
      
      Left Top
      
      Right Bottom
      
      Right Center
      
      Right Top
      
      Top Center
      
      Top Left
      
      Top Right
- Info Window Panel : Content options to show on the info window panel
  - Show Info Window : Toggle to show/hide the info window. On toggle on:
    - Show Title : A toggle to show/hide the location title
    - Show Address : A toggle to show/hide the location address
    - Show Description : A toggle to show/hide the location description
    - Show Direction Link : A toggle to show/hide the location driving direction
- Map Design Panel : Add custom style to the map
  - Map Style : To create custom style
    - Goto https://mapstyle.withgoogle.com/
    - Click on No thanks, take me to the old style wizard link
    - Adjust the styles on the map
    - Click on FINISH button when done.
    - On the modal popup, click on COPY JSON link
    - Paste the JSON in the Map Style textarea of the block setting
- Marker Design Panel : Setup designs for the marker
  - Animation : Set the animation of the marker. Options are
    - None : No animation
    - Drop : Marker drops from top to location
    - Bounce : Marker bounces infinitely
- Info Window Title Design Panel: Design settings for info window title text
  - Margin and Padding
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color
- Info Window Description Design Panel: Design settings for info window description text
  - Margin and Padding
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color
- Info Window Address Design Panel: Design settings for info window address text
  - Margin and Padding
  - Font family : If you select a google font, make sure to load the font on the frontend.
  - Font Size
  - Font Weight
  - Font Style
  - Line Height
  - Letter Spacing
  - Word Spacing
  - Text Transform
  - Text Align
  - Font Color
- Driving Direction Icon Design Panel : Settings for driving direction icon
  - Alternate Title : Icon title text
  - Height : Set the height of the icon

Start your FREE trial. No credit cards required.