17 October 2022

What are HTML meta tags and why should I care?

HTML meta tags (including Open Graph tags) store additional information about a web page and provide more context to your page content. They help the web browser understand what the page is about and how to properly display it.

Meta tags play a big part in search engine optimisation (SEO) and social sharing. When you share a link to a friend, the summary snippet you see is coming from the websites’ meta data. Social media platforms such as Facebook, LinkedIn and Twitter also use meta tags to pull in content summaries when users share links.

Having appropriate keywords in your meta tags helps your content to be surfaced in search engines and social media platforms, thus increasing organic traffic to your website.

Why extract meta tags

Since meta tags contain information that adds context to your website, pulling information from them would make your web analysis in Google Analytics 4 (GA4) more insightful. For instance, instead of reporting page view of a specific article, you can send a new dimension ‘article topic’ to GA4 to see the topics your audiences are interested in.

Moreover, information from meta tags can also be used as conditions in your tags. This means you can easily create conversion events on specific page types (e.g. article) without having to ask for further website changes.

As meta tags have plenty of use cases, your website might already have them. You can check by going to your website, opening the Chrome Developer tool (right-click and choose ‘Inspector’), and expanding meta: that is where meta tags are.

How to capture meta tags in GTM

Here we will show you how to extract meta tag information from the HTML file and use it as custom variable in GTM. In this example, we will attempt to extract the author’s name and send this to GA4 if the page type is ‘article’.

Step 1 Visit your container in https://tagmanager.google.com/ and go to Variables

Step 2 In GTM, you can use the DOM element variable to find the meta tag, using an element selector and an attribute name.

Create a DOM Element variable to capture meta tag information and choose ‘CSS selector’:

• Element Selector: the meta tag you want, found in the form meta[search_attribute=value] (when value does not contain non-alpha characters.)
• Attribute name: the value we want to extract

For example, the author meta tag looks like this: . Your DOM Element variable setting should look like this:

• Element Selector = meta[name=author].
• Attribute name = content

Step 3 In this example, we also want to extract page type into a variable to be used in the trigger.

Similar, create another DOM Element in GTM. For meta tag ., your DOM Element variable setting should look like this:

• Element Selector = meta[propertry=’og:type’]
• Attribute name = content

Please note the quotations around the value (‘og:type’)is usually required when value includes non-alpha characters.

Step 4 Now let’s create the trigger. Since we only want the tag to fire on ‘Article’ pages, use the Page View trigger but add the condition ‘DOM - Meta page type’ equals article.

Step 5 Now we need a GA4 tag that fires on the above trigger and send authors’ information to GA4. Create a GA4 event tag, given it a name (preferably GA4 recommend events). Add the author information as a custom event parameter.

Step 6 Don’t forget to set up Author as a custom parameter with event-scope in GA4 at: Admin (Bottom left icon on the left navigation bar) > Custom definitions > Create custom dimensions. Make sure the Event parameter in GA4 and GTM exactly matches (e.g. author in the this example).

Step 7 Now, let’s verify Author is being captured and sent to GA4 correctly in GTM preview mode. Place your GTM container in Preview mode and review the debug panel, inspect your GA4 event tag and check for Event Parameter being set with “author”.

‘Author’ custom dimension is recognised in the event ‘read_blog’ in GA4 as indicated in the blue box.

The ‘read_blog’ event will not be generated if the page type is not article, and Author name will also not be sent to GA4.

All done!

Please do the honour and start leveraging meta tags on your website.