How To Add Local Business Schema Markup via Google Tag Manager (GTM)

How To Add Local Business Schema Markup via Google Tag Manager (GTM)

In Analytics, The Digital Marketing Blog by Jon Hibbitt0 Comments

In this post, we’ll show you how to ramp up your local SEO visibility by adding Local Business Schema to your site with Google Tag Manager.

You’ll learn how to create the JSON-LD notation which contains key details about your local business, including business name, opening hours, telephone number and map location. Then you’ll add it to your contact page using a Custom HTML Tag in GTM.

Finally, you’ll publish the GTM Tag to your contact page and verify Google can see it using Google’s Structured Data Testing Tool. If it sounds technical and complicated, don’t worry, this is a quick win and it’s easier than it sounds.

If you’re a complete GTM newbie and find this a little overwhelming, we suggest you read these two posts first and return here when you’re ready:

Adding Local Business Schema allows search engines to read and display key marketing information about your business to users in search results. This can lead to more more enquiries and higher click through rates to your site for search engine results pages (SERPs). Doing it with GTM speeds up overall delivery of the project and greatly reduces developer requirements.

What is Schema Markup?

Schema markup is a way of adding machine readable information to your content. It’s used by search engines to gain a detailed understanding of your content. Schema markup uses microdata to ‘notate’ information to HTML Markup which can then be read by search engines.

The most commonly used methods of adding this data to your page are:

  • Microformats
  • Microdata
  • RDFa
  • JSON-LD

Here’s an example of review data on a page for the film ‘Rogue One’:

Rogue 1 IMDb

Image Source: http://www.imdb.com/title/tt3748528/

imdb.com used their site’s customer review data to create ‘Review’ schema, which you can see here displayed in Google’s search results:

Rogue 1 GoogleSearch

And this is what the HTML source code with the schema markup looks like on the page:

Rogue 1 HTML Code

Although the example above was for Reviews, the same principles apply for Local Business Schema Markup.

What is LocalBusiness Schema?

LocalBusiness is a type of schema used to tell machines details about a business. This includes business name, type, geo location, reviews, logo, image, business hours and price:

Local Business Listing

Source: https://developers.google.com/search/docs/data-types/local-businesses

More information

http://schema.org/

https://moz.com/learn/seo/schema-structured-data

What is JSON-LD?

JSON-LD is another type of microdata notation and was designed to make it easy for developers to create machine readable data. It can be used with a wide range of programming languages including JavaScript. Python, PHP, Ruby. Java, C# and Go.

JSON-LD has gained support and popularity due to how easy it is for developers to work with. See http://www.thesempost.com/json-ld-googles-preferred-structured-data-markup/.

Here’s an example of JSON-LD markup for a person:

JSON-LD markup for a person

Source: http://json-ld.org/

More Information

http://json-ld.org/

https://www.youtube.com/watch?v=vioCbTo3C-4

Step 1: Review your Current Schema Markup In Google Search Console

Before you get started with JSON-LD, you’ll need to review what is currently implemented on your site. It is not recommended to switch to JSON-LD markup if you are already using another method of Schema. 

Action

  1. Check the ‘Structured Data’ report in Google Search Console for your site to check if there is any other Schema markup present on your contact page(s) before you go begin.
  1. If you are using another type of markup, speak to the team responsible for implementing it; ask them to create the code for Local Business Schema using the same format.

More Information

https://support.google.com/webmasters/answer/2650907?hl=en.

Assuming you don’t have any existing schema markup in different formats, move onto Step 2.

Step 2: Select A JSON-LD Markup Generator

Your first step is to create your JSON-LD code for your local business. There’s a couple of easy to use online resources you can use to rapidly build your JSON-LD script:

http://microdatagenerator.org/localbusiness-microdata-generator/

https://www.jamesdflynn.com/json-ld-schema-generator/

https://www.schemaapp.com/tools/jsonld-schema-generator/LocalBusiness/ (granular)

Step 3: Add Your Information To The JSON-LD Generator

Begin by adding your information to the JSON-LD Generator. In the example that follows, w. Schemapp has a lot more options than the other if you want more granularity, but comes with steeper learning curve as there are many markup options you can add.

Step 3.1: Select the Schema Type

We’re selecting ‘Local Business’ by clicking the dropdown arrow in the form list box. As you click out of the list field, you should see the JSON-LD auto populated in the right-hand text box.

Schema Type

Step 3.2: Add Your Business Type

Add Your Business Type, we used ‘ProfessionalService’. If you’re not sure what @type to use, check out this excellent Google Sheet which has most local business types mapped to Schema: https://docs.google.com/spreadsheets/d/1Ed6RmI01rx4UdW40ciWgz2oS_Kx37_-sPi7sba_jC3w/edit#gid=0

Step 3.3: Add Your Business Name

Add your business name. E.g. ‘My Business’.

Step 3.4: Add Your site URL

Add your site URL. E.g. http://www.mybusiness.co.uk/

Step 3.5: Add Your ‘Same As’ Online URLs

Add any alternate URLS for your business. We added our social media profiles, but you could also add Yelp listings and other relevant business listings too. Click the ‘Same As’ button for each URL you want to add:

‘Same As’ Online URLs

Step 3.6: Add Your Logo

Add Your Logo

Ensure you have a logo uploaded at a URL which is publicly accessible, preferably on your site. : At least 160×90 pixels and no more than 1920×1080 pixels. Make sure it will work if cropped square, or there’s a risk Google won’t use it.

Step 3.7: Add Your Image

Add Your Image

Add the URL of your business location image, preferably the building exterior or alternatively, your office interior.

Step 3.8: Add Your Description

We used our meta description tag as the description. A short summary of your business and the products and services offered is what’s needed.

Step 3.9: Add Your Address

Add the physical address of your business for each field. If you have multiple locations, then you’ll want to create contact pages for each location and create a JSON-LD script for each one. You’ll also need a GTM Tag and GTM trigger for each one. We’ll get to that later.

Step 3.10: Add Your Geo Coordinates

The easiest way to get this info is to look up your business on Google Maps. (If you want to learn more about Google Maps Marketing, check out Marcos’ blog post where he shows you the steps to take in order to dominate local results).

Locate your latitude and longitude data from the URL for your Google Map listing:

Google Maps Listing

Add these to the JSON-LD form fields.

Step 3.11: Add Your Map URL

In the browser window with your business listing in Google Maps, click on the hamburger menu:

Add Your Map URL

Select Share or Embed Map:

Share or Embed Map

Click ‘Short URL’

Copy the Short URL link into the JSON-LD field:

Step 3.12: Add Your Business Hours

Leave any checkboxes for days when your business is closed unchecked!

Step 3.13: Add Your Business Telephone Number

Click out of the field. Good job, you have got the basic JSON-LD script ready to go. Next we’ll save the JSON-LD script and prepare our Custom HTML Tag in Google Tag Manager.

Step 4: Save Your JSON-LD Code

Copy and paste the JSON-LD markup into notepad or another text editor and save it somewhere safe.

OK, I had some trouble with the JSON-LD which was generated with this tool. Warnings we can live with, errors we can’t. Once the code was input and checked in Google’s Structured Data Testing Tool, three errors were found.

Here’s the code which came out of the online JSON-LD generator:

<script type=’application/ld+json’>

{

“@context”: “http://www.schema.org”,

“@type”: “ProfessionalService”,

“name”: “SiteVisibility”,

“url”: “http://www.sitevisibility.co.uk/”,

“sameAs”: [

“https://www.linkedin.com/company/sitevisibility-a-division-of-ai-digital-ltd\””,

“https://www.facebook.com/SiteVisibility”,

“https://twitter.com/sitevisibility”,

“https://plus.google.com/+SiteVisibilityCoUk”,

“https://www.instagram.com/sitevisibility/”

],

“logo”: “http://www.sitevisibility.co.uk/wp-content/uploads/2014/10/admin_logo.jpg”,

“image”: “http://www.sitevisibility.co.uk/wp-content/uploads/2016/09/Capture1.png”,

“description”: “Search Engine Optimisation Agency also offering, Analytics, PPC, Social Media and Display delivering digital growth to ambitious mid-market online brands”,

“address”: {

“@type”: “PostalAddress”,

“streetAddress”: “3 Kings Place”,

“addressLocality”: “Brighton”,

“addressRegion”: “East Sussex”,

“postalCode”: “BN1 1GA”,

“addressCountry”: “United Kingdom”

},

“geo”: {

“@type”: “GeoCoordinates”,

“latitude”: “50.823891”,

“longitude”: “-0.1437547”

},

“hasMap”: “https://goo.gl/maps/vYe5ib1c4qD2”,

“openingHours”: “Mo, Tu, We, Th, Fr 09:00-17:30”,

“contactPoint”: {

“@type”: “ContactPoint”,

“contactType”: “telephone”,

“telephone”: “01273733433”

}

}

</script>

And this was Google Structured Data Tool’s validation report for the contact page:

Google Structured Data Tool’s validation report for the contact page

It took me a while to research, experiment and iron out the cause of the errors. That would be a mini post in its own right! To save time, I’d recommend you rearrange your code as per the example below and use this as your base code template in GTM. It’s not as elegant as the online generators, but It works. Replace anything with a ‘#’ with your own data.

You can review the screenshot of our own JSON-LD snippet below if you get stuck.

<pre>

<script type="application/ld+json">

{

"@context" : "http://schema.org",

"@type" : "ProfessionalService",

"name" : "#",

"url" : "http://#",

"logo": "http://#",

"image": "http://#",

"description": "#",

"address": {

"@type" : "PostalAddress",

"streetAddress": "#",

"addressLocality": "#",

"addressRegion": "#",

"postalCode": "#",

"telephone" : "#"

},

"openingHours": [ "Mo-Fr 09:00-17:30" ],

"geo": {

"@type": "GeoCoordinates",

"latitude": "#",

"longitude": "#"

},

"hasmap" : "https://#",

"sameAs" : [

"https://#",

"https://#",

"https://#",

"https://#",

"https://#"

]

}

</script>

</pre>

You should end up with a code block which looks like this:

Next, we’ll test it using Google’s Structured Data Testing Tool.

Step 4. Test Your localBusiness JSON-LD Code In Google’s Structured Data Testing Tool

Copy your JSON-LD code snippet from notepad and paste into . Click RUN TEST:

Test Your localBusiness JSON-LD Code In Google’s Structured Data Testing Tool

You should see a report with no errors. In our example, GSDTT complains there is no value for priceRange. It’s an optional setting and you can add it or ignore it.

If you want to add price data, add it under “name” : “#”, The example below is illustrative only.

priceRange : “£2000-£12000”,

We retested the code snippet with the price included. Zero errors and zero warnings were found. Happy days.

Step 5: Copy The URL Of Your Contact Page

Locate the contact page URL you want to add the JSON-LD Schema to and copy and paste it into notepad for reuse in GTM.

Step 6: Open Google Search Console and navigate to your website Property:

https://www.google.com/webmasters/

Step 6.1: Open the Structured Data tab:

Step 6.2: Locate Current Local Business Markup

Locate any existing Local Business markup. If you don’t have any, move on to the next step. In our case the Data Highlighter Tool was used to create structured data. You can see a pen next to Local Businesses. Click on the link to see what was added using the Data Highlighter Tool:

Click on the Local Businesses link:

OK, it looks like the contact page has been marked up as ‘Contact’ and the Category is ‘Us’ for our office location:

Let’s remove the inaccurate data.

Step 6.3: Remove Any Inaccurate Schema Markup Applied Using Data Highlighter

With the Local Business Page checked, click Unpublish. You should see the status change:

Great we’ve cleared the inaccurate data and are ready to add accurate information using Google Tag Manager.

Step 7: Add Your localBusiness Schema / JSON-LD In Google Tag Manager Using a Custom HTML Tag

Once your JSON-LD code validates in Google’s Structured Data Testing Tool, it’s time to set up GTM.

Step 7.1 Sign In To Google Tag Manager

Click on the GTM Account link: https://www.google.co.uk/analytics/tag-manager/

If you don’t have a GTM Account, follow our How To Install Google Tag Manager guide and return here once you’re up and running.

Step 7.2: Open Your GTM Container

Once you’re signed into GTM, Open your GTM Container:

Step 7.3: Click On Tags

Step 7.4: Click New

Step 7.5: Name Your Tag

Name your tag, E.g.

Utility – JSON-LD localBusiness Brighton Office

Step 7.6: Choose Custom HTML Tag Type

Click anywhere in the ‘Tag Configuration’ window:

Select Custom HTML

Great, you’ve got the right type of tag selected. Now it’s time to add the JSON-LD for your business we created in Step 2.

Step 7.7 Add Your localBusiness JSON-LD Script To The Custom HTML Tag In GTM

With the Tag Configuration window for your Custom HTML Tag open, copy and paste your JSON-LD script from your text editor file into the HTML field:

Click SAVE

Step 7.8: Configure Your Custom HTML GTM Trigger

  • Click on Triggering
  • Click on the + button
  • Click Page View

  • Name the Trigger E.g. Contact Page JSON-LD localBusiness Trigger
  • Click the radio button ‘Some Page Views’
  • Select ‘Page URL’ from the dropdown list.
  • Select ‘equals’ from the dropdown list.
  • Add the full URL of your contact page for your business listing, E.g. http://www.mybusiness.com/contact/
  • Click ‘Save’

That’s your tag configured and ready for testing.

Step 7.9: Preview Your GTM Custom HTML Tag

Back in the Workspace View, Click Preview:

You should now see the GTM Preview window displayed:

Visit your contact page. The GTM preview pane should be visible in the bottom of your browser and you should see your Custom HTML tag has fired on the page:

With preview mode still enabled, check your site over and ensure no key functionality has broken.

Step 8: Submit Your GTM Custom HTML Tag

  • Click SUBMIT:

  • Add some details about the changes you made, e.g. ‘Added JSON-LD locaBusiness Schema to Contact Page.’
  • Click PUBLISH. You are now injecting the JSON-LD script directly into your contact page. Once you press CONTINUE on the next screen, It’s live.

Excellent, nearly there. We want to test Google can see your work. It’s time to test your JSON-LD localBusiness Schema with Google’s Structured Data Testing Tool. Fire it up:

https://search.google.com/structured-data/testing-tool

Add your URL to Google’s Structured Data Testing Tool and click RUN TEST:

Check everything is correct:

One warning displays about priceRange which as discussed earlier is optional and is nothing to worry about.

Step 9: Check Local Business JSON-LD Data in Google Search Console

The final check is to come back to Google Search Console in 48 hours and confirm your data is being picked up by Google and accurately reported in Google Search Console

This is what you should see:

That’s it on how to add Local Business Schema using GTM. It’s a great way of increasing your brand’s visibility in search results which can result in more enquiries and higher click through rates from the SERPs. Using GTM to do this instead of traditional methods will save you money, time and hassle!

Let us know how you get on in the comments and if you have any suggestions, feel free to share them.

Additional Resources:

Schema

https://developers.google.com/search/docs/data-types/local-businesses

https://www.schemaapp.com/tutorial/how-to-do-schema-markup-for-local-business/

http://searchengineland.com/schema-markup-structured-data-seo-opportunities-site-type-231077

GTM

https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

https://www.simoahava.com/analytics/enrich-serp-results-using-gtm/

https://measureschool.com/video/enrich-search-results-json-ld-markup-google-tag-manager/

Related Posts Plugin for WordPress, Blogger...

Leave a Comment