Front Matter

Front matter is used to set page data; it must be at the beginning of the file. Markdown pages use the +++ delimiter whilst for HTML documents a comment is used. The page data must be valid TOML.

Markdown

+++
title = "Page Title"
+++
# {{title}}

HTML

<!--
title = "Page Title"
-->
<h1>{{title}}</h1>

Title & Description

The best practice is to assign a title and description to every page:

+++
title = "Unique Page Title"
description  = "Brief description of the page content"
+++
# {{title}}

Summary

The summary field is intended to be used as an introduction to the page content. It is used primarily when generating feeds but could also be used by convention for an introductory paragraph that is rendered using the markdown helper.

+++
title = "Creating Pages"
description  = "How to create pages"
summary = """
An article about the basic data that can be assigned to pages using [TOML][].
"""
+++

# {{title}}

{{md summary}}

[TOML]: https://toml.io

By using the summary like this you can generate menus with rich text introductions.

Image

Set the image path for an image preview to use when your page is shared on social sites a good practice is to set a default in the site settings:

[page]
image = "/assets/img/social.jpg"

Then you can override it for particular pages:

+++
title = "Article Title"
image = "/assets/img/article-banner.jpg"
+++

# {{title}}

Meta Data

To add custom meta data such as keywords to your pages use the [meta] table:

[meta]
keywords = "Create, Pages, Guide"

Renders to:

<meta name="keywords" content="Create, Pages, Guide">

Open Graph

We automatically create default open graph meta data from the title, description and image. You can customize these values in the [open-graph] table:

[open-graph]
title = "Title to use when shared on social websites"

Renders to:

<meta property="og:title" content="Title to use when shared on social websites">

If you want to set the og:site_name for all pages you can add this to your site settings:

[page.open-graph]
site_name = "UWE / Universal Web Editor"

Permalinks

A permalink variable is available to all pages; to provide a permalink for any page is easy:

<a href="{{permalink}}" title="{{title}}">Permalink</a>

Set the permalink path so you can share a permanent link that will always redirect to the page location making it safer to rename and move pages whilst keeping visitor's bookmarks intact. To configure a permalink redirect just add the path to the front matter:

+++
title = "Article Title"
permalink = "/posts/article-link/"
+++

# {{title}}