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

  1. WordPress Website
  2. Local SEO For Divi & Gutenberg Blocks plugin

Tools

  1. Computer

Estimated Cost : 0 USD

Total Duration : 9 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Setup Local SEO Settings

  1. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Add Location Data To The WordPress Website

  1. Ignore this step, if you're business location data is setup
FREE DOWNLOAD

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.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Location Address Block

  1. This block helps to publish a location's address using block editor.

  2. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - Location Opening Hours Block

  1. This block publishes opening hours for a given location

  2. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 6 - Location Map Block

  1. This block adds a Google Map for a given location

  2. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.