Metadata

Metadata provides browsers and search engines with information about a page, such as its title and description.

In a standard HTML document, metadata is written directly inside <head>.

<head>
    <title>About Us</title>

    <meta
        name="description"
        content="Learn more about our company and services."
    >
</head>

If your website has multiple pages, each page needs a different title and description in its <head>.

In Essepage, you can manage page-specific metadata using the <essepage-meta> element and the essepage-meta directive.

The overall process works as follows.

Attributes of <essepage-meta> on the page
                    ↓
The essepage-meta directive in <head>
                    ↓
Title and metadata in the final HTML

For example, set the values on a page as follows.

<essepage-meta
    title="About Us"
    description="Learn more about our company and services."
></essepage-meta>

In <head>, use the following directives to retrieve the values.

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >
</head>

When Essepage builds the page, the following content is generated in the final HTML.

<head>
    <title>About Us</title>

    <meta
        name="description"
        content="Learn more about our company and services."
    >
</head>

Adding values to <essepage-meta> does not change <head> by itself. You must use the essepage-meta directive in <head> to retrieve those values.

Setting Metadata on a Page

Add <essepage-meta> to the page file.

<essepage-meta
    title="About Us"
    description="Learn more about our company and services."
></essepage-meta>

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>
</main>

Placing <essepage-meta> near the top of the page file makes it easier to distinguish the page settings from the content displayed on the screen.

title and description are attributes of <essepage-meta>.

Attribute	Value
`title`	About Us
`description`	Learn more about our company and services.

At this point, you have set the metadata values that the page will use.

To provide these values to browsers and search engines, you must retrieve the attributes in <head>.

Displaying Metadata in `<head>`

The essepage-meta directive retrieves the value of an attribute defined on <essepage-meta>.

The basic syntax is as follows.

{{$ essepage-meta : attribute name $}}

To retrieve the value of the title attribute, use:

{{$ essepage-meta : title $}}

To retrieve the value of the description attribute, use:

{{$ essepage-meta : description $}}

Use these directives with standard HTML elements inside <head>.

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >
</head>

The attribute name must exactly match the name used in <essepage-meta>.

`<essepage-meta>` attribute	Directive
`title="About Us"`	`{{$ essepage-meta : title $}}`
`description="Learn more..."`	`{{$ essepage-meta : description $}}`

The value of title is used as the content of <title>, while the value of description is used in the content attribute of <meta name="description">.

Using Metadata on a Single Page

If you are not using a layout, you can write <essepage-meta> and <head> together in the page file.

<essepage-meta
    title="About Us"
    description="Learn more about our company and services."
></essepage-meta>

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >
</head>

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>
</main>

When Essepage builds the page, the metadata is connected through the following process.

Essepage reads the title and description values from <essepage-meta>.
The directives in <head> retrieve the corresponding attribute values.
The values appear in <title> and <meta name="description"> in the final document.

Using a Shared `<head>` in a Layout

<essepage-meta> is especially useful when multiple pages share the same layout.

You can define the <head> structure once in the layout and set only the page-specific values in each page file.

Consider the following file structure.

/public
├── +layout.essepage
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

Creating the Layout

Add the shared <head> to /public/+layout.essepage.

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >
</head>

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

<essepage-slot></essepage-slot>

The layout is configured to retrieve the values of the title and description attributes.

Configuring the About Page

In /public/about/+page.essepage, set the values for the About page.

<essepage-meta
    title="About Us"
    description="Learn more about our company and services."
></essepage-meta>

<main>
    <h1>About Us</h1>

    <p>We create tools that help people build websites.</p>
</main>

The following metadata is generated in the final document.

<head>
    <title>About Us</title>

    <meta
        name="description"
        content="Learn more about our company and services."
    >
</head>

Configuring the Contact Page

In /public/contact/+page.essepage, set different values.

<essepage-meta
    title="Contact"
    description="Contact our team with questions about our services."
></essepage-meta>

<main>
    <h1>Contact</h1>

    <p>Send us your questions.</p>
</main>

Although the Contact page uses the same layout, the following values appear in its <head>.

<head>
    <title>Contact</title>

    <meta
        name="description"
        content="Contact our team with questions about our services."
    >
</head>

With this structure, you do not need to repeat the same <head> code on every page.

The layout defines the metadata structure, while <essepage-meta> on each page provides the actual values.

Connecting Attribute Names to Directives

The essepage-meta directive uses the attribute names defined on <essepage-meta>.

<essepage-meta
    title="About Us"
    description="Learn more about our company."
    image="https://example.com/images/about-cover.jpg"
></essepage-meta>

You can retrieve each attribute with the corresponding directive.

{{$ essepage-meta : title $}}
{{$ essepage-meta : description $}}
{{$ essepage-meta : image $}}

These values can be used wherever they are needed inside <head>.

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >

    <meta
        property="og:title"
        content="{{$ essepage-meta : title $}}"
    >

    <meta
        property="og:description"
        content="{{$ essepage-meta : description $}}"
    >

    <meta
        property="og:image"
        content="{{$ essepage-meta : image $}}"
    >
</head>

The same attribute value can be reused in multiple metadata elements.

In this example, title is used for both the browser title and the Open Graph title. description is used for both the search result description and the Open Graph description.

Attribute Names Must Match Exactly

If the attribute name in <essepage-meta> differs from the name used in the directive, Essepage cannot retrieve the value.

The following example defines an attribute named description.

<essepage-meta
    title="About Us"
    description="Learn more about our company."
></essepage-meta>

The directive must therefore also use description.

<meta
    name="description"
    content="{{$ essepage-meta : description $}}"
>

Creating Multilingual Metadata

On a multilingual website, you can use multilingual syntax in the attributes of <essepage-meta>.

<essepage-meta
    title="{{# About Us [@ko] 소개 [@ja] 私たちについて #}}"
    description="{{# Learn more about our company and services. [@ko] 회사와 서비스에 대해 자세히 알아보세요. [@ja] 私たちの会社とサービスについて詳しくご紹介します。 #}}"
></essepage-meta>

You do not need to write separate directives for each language in the layout’s <head>.

<head>
    <title>{{$ essepage-meta : title $}}</title>

    <meta
        name="description"
        content="{{$ essepage-meta : description $}}"
    >
</head>

The appropriate title and description values are selected according to the current page language and displayed in <head>.

URL	Title
`/about`	About Us
`/ko/about`	소개
`/ja/about`	私たちについて

To learn how to configure languages and write translations, see Multilingual Content.

Next Steps

Once you understand how to manage metadata and basic SEO settings, continue with the following guides.

Write titles and descriptions in multiple languages: Multilingual Content
Learn about the basic page structure and how to use <head>: Page File Structure
Use a shared <head> across multiple pages: Layouts
Use URLs for images and PDF files: External Files
Connect your own domain: Custom Domains
Apply saved changes to the public site: Publish, Apply, and Apply All

Languages

On this page

Title

Setting Metadata on a Page

Displaying Metadata in `<head>`

Using Metadata on a Single Page

Using a Shared `<head>` in a Layout

Creating the Layout

Configuring the About Page

Configuring the Contact Page

Connecting Attribute Names to Directives

Attribute Names Must Match Exactly

Creating Multilingual Metadata

Next Steps

On this page

Languages

On this page

Title

Metadata

Setting Metadata on a Page

Displaying Metadata in <head>

Using Metadata on a Single Page

Using a Shared <head> in a Layout

Creating the Layout

Configuring the About Page

Configuring the Contact Page

Connecting Attribute Names to Directives

Attribute Names Must Match Exactly

Creating Multilingual Metadata

Next Steps

On this page

Displaying Metadata in `<head>`

Using a Shared `<head>` in a Layout