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 #
Extracted metadata is stored in the page.meta object within the component's state.
- Meta Tags: Tags formatted as
<meta name="X" content="Y">are stored aspage.meta.X. For example,<meta name="author" content="Coralite Team">is stored inpage.meta.author. - Title Tag: The text content of the
<title>tag is stored aspage.meta.title. - Language: The
langattribute on the root<html>tag is extracted and stored aspage.meta.lang.
Example Usage #
Let's define a page with metadata:
<!-- src/pages/blog-post.html -->
<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>
<!-- We use a custom component here -->
<post-header></post-header>
</body>
</html> Now, any component used on that page can access the metadata by mapping it in their data or getters.
Note: Templates do not support dot notation for tokens, so you must map page.meta properties to flat state variables.
<!-- src/components/post-header.html -->
<template id="post-header">
<header class="blog-header">
<!-- Accessing the title -->
<h1 class="display">{{ title }}</h1>
<div class="meta-info">
<!-- Accessing the custom meta tags -->
<span>Written by: {{ author }}</span>
<span>Published: {{ publishDate }}</span>
<span class="badge">{{ category }}</span>
<span>Language: {{ language }}</span>
</div>
</header>
</template>
<script type="module">
import { defineComponent } from 'coralite'
export default defineComponent({
data ({ page }) {
return {
title: page.meta.title,
author: page.meta.author,
publishDate: page.meta.publishDate,
category: page.meta.category,
language: page.meta.lang
}
}
})
</script> 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 state.
<!-- src/components/seo-bundle.html -->
<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:
<!-- src/pages/index.html -->
<head>
<seo-bundle></seo-bundle>
</head> The resulting page.meta object will include generator, robots, and theme-color properties.