Metatag - Introduction

Last revision:

Goals

  • You will learn what meta tags are used for.
  • You will install and configure the Metatag module.
  • You will generate basic meta tags for all of your content.

Introduction

The Metatag module lets you add meta tags to your site's source code in a flexible and controllable way.

Meta tags are HTML elements that add metadata to the HTML document:

Meta tags are used for various purposes, including:

  • Specifying the language and character set
  • Specifying compatibility with certain browsers and browser versions
  • Adding machine-readable metadata that describes and enriches the content:
    • Title, description, keywords
    • Geographic / location information
    • Image(s) to use in automatic link previews
    • …

Structure of meta tags

The meta tag referenced in the breakdown diagram above is called the description meta tag.

Meta tags usually have the following structure:

  • A name or property attribute with a value that indicates the type of meta tag.
  • A content attribute with a value that indicates the actual value of the tag - in this case the description itself.

Two examples:

<meta name="description" content="This is the page description.">
<meta property="twitter:url" content="https://example.com/path/to/this/page">

The difference between name and property

Some meta tags use the name attribute while other use the property attribute.

The name attribute is the "usual" way for specifying metadata in HTML as defined in the HTML5 specification.

The property attribute comes from RDFa, a metadata standard that extends the HTML5 specification. It's used for OpenGraph-based meta tags such as the ones specified by Twitter and Facebook:

<meta property="og:title" content="Title Goes Here">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Goes Here">

Browsers accept both notations. If your meta tags are not being detected correctly by Twitter / Facebook / Google / … try to use the name attribute instead of property, or the other way around. Some tools and platforms are very forgiving and will do their best to correctly interpret your meta tags, while others can be much stricter.

Meta tags and Search Engine Optimisation

Search Engine Optimization (SEO) is the process of improving the quality and volume of website traffic from search engines to your website.

The algorithms used by search engines for ranking pages are complex, change often, and are based on many factors including:

  • Security
  • Performance
  • Mobile-friendliness
  • Visual stability
  • Semantically correct source code
  • Number of external links leading to the page
  • Amount of machine-readable information (meta tags)

As SEO is such a big topic, in the next units we will cover the basic meta tag aspects of SEO.

Summary

  • Meta tags add machine-readable metadata to each page.
  • Search engines use meta tags for SEO.
  • Many platforms use meta tags to generate content previews for posted links.