Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Metadata

Best practices for implementing metadata on government websites.

Why it matters

Metadata is data about data. It provides details and context to help describe and organize it. On the web search engines use metadata to understand and categorize web pages. This information is not visible to users, but it is to search engines and other services.

Standard metadata protocols

Standard metadata protocols are the foundation of consistent and interoperable metadata practices across the web. By following these protocols, we can ensure that search engines and other services can easily interpret and index our content.

Dublin Core

Dublin Core is a set of simple and widely used metadata standards that provide a basic framework to describe the most fundamental characteristics of a web page like Title, Description, Date, Author, and Format.

HTML

<meta name="dcterms.title" content="Page title" />

Open Graph

The Open Graph protocol provides additional meta tags that allow you to enhance and control how website links shared on social media platforms are displayed, including support for images, video, and audio.

HTML

<!-- Note that you need the full URL to your image -->
<meta property="og:image" content="https://gnb.ca/img/placeholder.jpg" />
<meta property="og:image:alt" content="Brief description of your image" />

Schema.org

Schema.org was founded by a consortium of major search engines (Google, Microsoft, Yahoo and Yandex) and provides schemas for structured data. This markup allows search engines to extract specific information from web content and display it as rich snippets in search results.

HTML

<div itemscope itemtype="https://schema.org/Organization">
	<span itemprop="name">Government of New Brunswick</span>
	<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
	  <p>
		<span itemprop="streetAddress">675 King Street</span><br />
		<span itemprop="postalCode">E3B 1E9</span><br />
		<span itemprop="addressLocality">Fredericton, New Brunswick</span>
	  </p>
	</div>
</div>

Writing good metadata

Good metadata describes a webpage accurately in a concise manner.

Titles

It is important to remember that some search engines limit how much text they will display, so aim to keep your meta title length under 60 characters.

Descriptions

Your meta description should provide a brief explanation in less than 150-160 characters, the goal is for users to determine whether your page has what they need.

Keywords

Meta keywords are little tags or labels that summarize the main topics or themes of a web page. It is important to know that modern search algorithms rely on analyzing the actual content of the page rather than meta keywords (due to misuse), but they still play a role in helping provide insights into page content even if they are no longer the most influential factor in determining search visibility.

It helps to reflect common terms that people use for things in your keywords. You can review acquisition data in your web analytics to help guide you, by examining the kinds of keywords users are already searching with.

Another good resource to assist your decision making is Google Trends a tool that allows you to compare keywords and get insights on which wording is more common.


Social card

A social card (also known as “social preview”) is what a website looks like when someone shares it on social channels or text message. Metadata allows us to control the image, title and description that will display when links to the government website are shared.

Facebook

Preview card of a website shared on Facebook

Messenger

Preview card of a website shared on Messenger

SMS message

Preview website shared via SMS message

The Open Graph protocol has tags that can help you optimize how your web pages appear when shared on social platforms and messaging applications.

HTML

<!-- Note that you need the full URL to your image -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Description of your page" />
<meta property="og:image" content="https://gnb.ca/img/placeholder.jpg" />
<meta property="og:image:alt" content="Brief description of your image" />


Testing and validation tools