Skip to main content

Ontario.ca Developer Hub

View on GitHub GitHub logo
NOTICE

Customize site metadata

Adding metadata to pages (such as a title or description) helps search engines understand your content and surface it in search results. Having good metadata available helps your project rank and perform better in search queries.

Ontario.ca Frontend includes a number of sensible default tags for the document head of the pages that it generates, but to make sure that those pages present the most useful information to search engines, you can customize the metadata for each page.

Customizing metadata using front matter

The front matter for each page in your project can be augmented with tags that correspond to common elements of the Open Graph protocol schema. The following tags are currently supported:

  • og_title: The title of the page as it should appear in search engine results (e.g. "Home Page").
  • og_description: A one to two sentence description of your page.
  • og_type: The type of your page (e.g. "website").
  • og_site_name: The name which should be displayed for the overall site (e.g. "Ontario.ca").
  • og_url: The canonical URL of your page (e.g. "ontario.ca/my-application/home-page").
  • og_image: An image URL that represents your page.

Set any or all of these tags in your page's front matter:

src/home-page.njk
og_title: "Custom page title"og_description: "Custom page description"og_type: "Custom type"og_site_name: "Custom site name"og_url: "Custom URL"og_image: "Custom image URL"

Each tag is optional. If a page doesn't have an image to represent it, for example, there would be no need to include og_image in its front matter.

Adding custom <head> tags

Ontario.ca Frontend includes a component for adding custom tags to your project, should you need to include something that isn't added by default.

In src/_includes/app/_head_custom.njk, you can add new HTML tags as needed.

src/_includes/app/_head_custom.njk
<script defer src="{{ templateGlobals.assetsRoot }}/js/script.js"></script><base href="https://ontario.ca/" target="_blank">

Any tag added here will be included in every <head> tag generated by your project.