#Tags

When building a website, there are many times you will need to add a specific Tag to a Page. For example, you may need to add a Google Analytics tag, or a verification code may need to be added temporarily, or you may need to use a dependency like "dayjs".

The Tags system makes adding and managing these Tags easy.

#Adding Tags

You can add a Tag to every Page on the Site, any Page that uses a Layout, an individual Page or set of dynamic Pages, or any Page that uses a specific Component.

In this example, let's add a font that's used across the entire Site. We can go to the Site screen in the Nav Bar, then go to the Tags tab, then click 'New Tag'.

In the content field, we can paste the following that we copied from Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

We'll call the Tag "Ubuntu Font" and we'll leave the location as "Head". Now let's set the style for the Site in the Style tab:

body
  font-family 'Ubuntu', sans-serif

Then we can make a Page called "Home" at the path "/".

p Welcome to the site!

Here's what we'll get:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Home</title>
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu&amp;display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <meta property="og:title" content="Home">
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://example.com/">
        <meta property="og:description" content="Home">
        <meta property="og:locale" content="en_US">
        <meta property="og:site_name" content="My Site">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="Home">
    </head>
    <body>
        <p>Welcome to the site!</p>
    </body>
</html>

#Tag Properties

We used the "Head" location, but you can also choose "Body Start" and "Body End", which will either add the Tag right after the <body> tag opens or right before the <body> tag closes, respectively.

Tags added to the <head> will be added after any hardcoded tags within the Page's Layout. Automatic SEO tags are then added below Tags added by the Tags system.

You can also change the language. You can write your tags in either HTML or Pug.

#Tag Ordering

You can reorder Tags in the Tags tab. The order you see them is the order they will appear on the Page. Tags are added to the Page in the following order:

All Site Tags are added first
If the Page uses a Layout, the Layout's Tags are added
If the Page has any Tags, those are added
If any Components are used on the Page, those Components' Tags are added in the order they appear on the Page

#Tag Merging

The name field is used to handle Tag merging. This is a simple, effective, and easy to understand way to have dependencies without causing conflicts.

Let's say you have a Component that requires a JavaScript package like dayjs. You can then add the <script> tag for dayjs as a Tag. Now this script will only be added to pages that actually use that Component.

Now, let's say you have a Page that also uses it. Now, will the script be added twice? Not if you name the Page's Tag and the Component's Tag the same thing. The Tag system will notice they have the same name and only include the first one it encounters.

The name doesn't have to be exact. It's case insensitive and it ignores all but letters and numbers. For example "DayJS", "dayjs", "day.js" and "day js" are all considered the same. For this reason, it's good practice to name your Tags consistently across the site.

#Best Practices

For best practices regarding adding and using Tags, see Tags Best Practices.