This guide discusses creating location pages in the Interface Builder. This is the preferred method of creating Location Pages using the latest templating technology available from MetaLocator.

MetaLocator's SEO solution includes Directory Pages and Location Pages. The directory represents the hierarchy of pages for each geographic area. E.g. city level pages, state level pages and so forth. The Location Pages are the single pages created for each location in your MetaLocator data.

Setup

Initial setup and provisioning of the Location Pages product is done by the MetaLocator Team. Setup of the custom domain, DNS instructions and deployment are handled as part of our Enterprise setup process. This article provides the reference material necessary for the HTML implementation and maintenance of the location and directory pages after setup is complete.

Templates

There are 3 Twig templates involved in the creation of location pages as follows.

  1. The Location Page Template. This is the template used to display each individual location page. This template is used to create the page that displays a single location.

  2. The Directory Page Template. This is the template used to display the hierarchy of geographic pages, e.g. the city page, the state page and so forth.

  3. The Website Template. This optional template, if provided, is wrapped around the location and directory page templates. This allows a single template for the website's common header and footer for both the directory and location pages. However, if the template needs to be different between the location and directory pages, the Website template may be omitted (empty) and the Location Page and Directory Page templates will be responsible for the full page content. The following code must be present and indicates where the system will insert the Location Page and Directory Page after "binding" with the data:

    {{ include(template_from_string(template_item.twig_page_template)) }}

The Location Page Template

This is the template used to display each individual location page. This template is used to create the page that displays a single location.

The template attributes available to the location page can be "dumped" as shown below:

<pre><!-- this is a raw dump of the template variables   -->
{{ template_item | json_encode(constant('JSON_PRETTY_PRINT')) }}
</pre>

An example template can be found here.

The template_item contains the entire location object, including all custom fields. Some special fields include:

template_item.interface_name //the name of the Interface.
template_item.canonical // the canonical tag for the location page.
template_item.page_title // the title of the location
template_item.page_url // the url of the location page.
template_item.year // the current year

The Directory Page Template

This is the template used to display the hierarchy of geographic pages, e.g. the city page, the state page and so forth.

The template attributes available to the location page can be "dumped" as shown below:

<pre><!-- this is a raw dump of the template variables   -->
{{ template_item | json_encode(constant('JSON_PRETTY_PRINT')) }}
</pre>

An example template can be found here.

The Location Page Map & Marker

The location page often includes a static map image which also includes a marker. An example markup for the static map is shown below:

<img loading="lazy" class="ml_static d-block w-100" width="100" src="https://cdn.metalocator.com/index.php?option=com_locator&task=tools.createstaticimage&format=raw&url=pin-m-marker+e63b12({{template_item.location.lng}},{{template_item.location.lat}})&lng={{template_item.location.lng}}&lat={{template_item.location.lat}}&zoom=16&width=500&height=500&density=@2x&style=light-v10" alt="{{template_item.location.name}}"/>

The "src" attribute of this image tag calls our static image API endpoint.

The marker shown on the map can be specified as an icon (pin-m-marker) with a color, as shown in bold below:

https://cdn.metalocator.com/index.php?option=com_locator&task=tools.createstaticimage&format=raw&url=pin-m-marker+FF6A67({{template_item.location.lng}},{{template_item.location.lat}})&lng={{template_item.location.lng}}&lat={{template_item.location.lat}}&zoom=16&width=500&height=500&density=@2x&style=light-v10"

The marker can also be specified as a full URL to a PNG file. The format of the url parameter above is as follows:

&url=url-<iconurl>(<lng>,<lat>)

Where iconurl is the full path to the marker image beginning with https, and url-encoded and lng/lat indicates the position of the marker, which is usually the exact same as the location image, so a full url parameter with an image might look like:

&url=url-https%3A%2F%2Fd23g0hayoxy5dh.cloudfront.net%2Ful%2F156%2Fimages%2Fbulk%2Fgallery%2Fmap_marker_f04d80_34x34.png(-87.683066,30.375339)

The image itself can be uploaded to MetaLocator under Tools > File Uploader, or it can be uploaded in the Interface builder if it's the same marker used in the locator.

Language Constants

Language constants can be accessed via the ml_language object as shown below. As in other areas of MetaLocator the active language is defined by the language set in the interface settings, or as overridden by the lang parameter in the URL.

{{template_item.ml_language.LOCATOR_GET_DIRECTIONS}}

Some language constants include placeholders such as

LOCATOR_FOUND_RESULTS="%s emplacements trouvés correspondant à votre recherche."

Those can be specified in the page template as

{{ template_item.ml_language.LOCATOR_FOUND_RESULTS|format(200) }}

There are also numbered placeholders where multiple placeholders might be specified as

LOCATOR_DIRECTORY_PAGE_TITLE="%1$s locations in %2$s"

Those are handled similarly, as in this example

{{ template_item.ml_language.LOCATOR_DIRECTORY_PAGE_TITLE|format(region.current_value_count,region.label) }}

And this example

{{ template_item.ml_language.LOCATOR_DIRECTORY_PAGE_TITLE|format(nearby.value_count,nearby.value) }}

Linking from the Locator

The location page typically replaces the Details window. To add the link to the results, add the field as shown below:

Did this answer your question?