Core Concepts: Page Metadata
In a standard HTML page, the <head> element contains metadata crucial for SEO, social sharing, and page structure. Coralite provides a built-in metadata plugin that automatically extracts this information and makes it available globally to all your components during the build process.
How It Works #
During the onPageSet lifecycle hook, the metadata plugin scans the <head> of your page (e.g., src/pages/index.html) for standard <meta> and <title> tags.
It extracts the data and stores it globally with a specific prefix format, making it accessible as tokens inside your components.
Prefixes and Structure #
- Meta Tags: Tags formatted as
<meta name="X" content="Y">are stored asmeta_X. For example,<meta name="author" content="Coralite Team">becomes accessible via the token{{ meta_author }}. - Title Tag: The text content of the
<title>tag is stored specifically asmeta_pageTitle. - Language: The
langattribute on the root<html>tag is extracted and stored as$lang.
Example Usage #
Let's define a page with metadata:
<html lang="en">
<head>
<title>Understanding Coralite Metadata</title>
<meta name="author" content="Jane Doe"></meta>
<meta name="publishDate" content="2023-10-27"></meta>
<meta name="category" content="Framework Guide"></meta>
</head>
<body>
<post-header></post-header>
</body>
</html>Now, any component used on that page can access the metadata via tokens without needing the data passed manually as attributes!
<template id="post-header">
<header class="blog-header">
<h1>{{ meta_pageTitle }}</h1>
<div class="meta-info">
<span>Written by: {{ meta_author }}</span>
<span>Published: {{ meta_publishDate }}</span>
<span class="badge">{{ meta_category }}</span>
<span>Language: {{ $lang }}</span>
</div>
</header>
</template>Dynamic Components in #
The metadata plugin is smart enough to handle nested components. It recursively processes custom components placed inside the <head> tag.
This means you can create reusable metadata components, like an <seo-bundle>, that inject standard tags across your site. The plugin will render the component and extract any <meta> tags it generates into the global context.
<template id="seo-bundle">
<meta name="generator" content="Coralite"></meta>
<meta name="robots" content="index, follow"></meta>
<meta name="theme-color" content="#3498db"></meta>
</template>Usage in a page:
<head>
<seo-bundle></seo-bundle>
</head>The resulting global context will include meta_generator, meta_robots, and meta_theme-color.