Global Head Content in +head.essepage • Essepage Blog

Essepage now supports a global <head></head> content file via /public/+head.essepage!

You can now write your common head configurations once, and they'll be automatically loaded across all your pages.

How to Use

Create a file at the following path:

/public/+head.essepage

Write your <head></head> content in this file,
and it will be automatically injected at the beginning of every page.

<!-- /public/+head.essepage -->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
</head>

That’s all there is to it! Every page will now automatically include this content without any additional component configuration.

Why We Built This

When building HTML pages, you've probably experienced the hassle of copy-pasting meta tags, fonts, scripts, and CSS links into the <head> section of every single page.

To solve this, we've been creating separate components:

<essepage-component path="/components/head.essepage"></essepage-component>

While this approach wasn't bad, the hassle of adding the component to each page still remained.

We asked ourselves: "Can't we do this just once?"

/public/+head.essepage is the answer.

Once you try it, you'll wonder how you ever lived without it. 😊