Metadata

The vite-plugin-vanjs plugin provides metadata management via the exported @vanjs/meta module. This module works with both SSR and CSR, and is very easy to work with.

Generally very easy to setup the system properly, we only need to make sure that we execute functions in a specific order:

• first we define a set of default tags for all pages that don't come with any metadata tags;
• next, on other pages, we define tags that override both the existing and the default tags.

App Global Tags

Here's a quick example, first let's start again with the src/app.ts:

import van from 'vanjs-core'
import { Title, Link, Meta, Style, Script } from "@vanjs/meta";

function App() {
  const { div, h1, p } = van.tags;

  // a good practice is to define some default tags
  // they are used on pages where no tags are set
  Title("VanJS + Vite App");
  Meta({ name: "description", content: "Sample app description" });
  Meta({ property: "og:description", content: "Some open graph description for your app" });
  Link({ href: 'path-to/your-font.woff', rel: "preload", as: "font", type: "font/woff" });

  return div(
    h1('Hello VanJS!'),
    p('Sample paragraph.')
  );
}

// render or hydrate the app
van.add(document.body, App());

IMPORTANT

• don't use Link() for stylesheets, import .css files in your pages/components directly, let vite handle those for you dynamically. The Link() is supposed to be used for preloading assets (.css, .js, .woff or various images).
• don't use Script() for .js files, just like for .css files. The Script() is meant to add <script type="application/ld+json"> tags to your pages for SEO optimization.

Page Tags

When using the router, tags defined in your pages can look like this:

// pages/about.ts
import van from 'vanjs-core'
import { Title, Meta } from '@vanjs/meta'

export function Page() {
  const { div, h1, p } = van.tags;
  // override default metadata for this page
  Title("About Us | VanJS + Vite App");
  Meta({ name: "description", content: "Learn more about VanJS" });
  Meta({ id: "og-description", property: "og:description", content: "About VanJS and its contributors" });

  return div(
    h1("About Us"),
    p("The story started...")
  );
}

Remove Tags

In some situations, you want to remove a certain tag to keep consistency of your SEO tags. Considering the above example as an important page, another page may not need <meta id="og-description">.

Here's how to do that:

// pages/not-found.ts
import { Title, Meta, removeMeta } from '@vanjs/meta'

export function Page() {
  const { div, h1, p } = van.tags;
  // override default metadata for this page
  Title("Page not found | VanJS + Vite App");
  Meta({ name: "description", content: "Learn more about VanJS" });
  // Remove by passing the exact same tag object that was added
  removeMeta(van.tags.meta({ id: "og-description" }));
  // or removeMeta("META.og-description");

  return div(
    h1("About Us"),
    p("The story started...")
  );
}

The removeMeta() utility is client only and expects either:

• A tag object that was previously added via addMeta() (must match exactly)
• A string key in the format TAG_NAME.ATTRIBUTE_VALUE (e.g., META.og-description for <meta id="og-description">)

Important: The tag must have been previously added with addMeta() for removal to work. For server-side removal, you should conditionally avoid adding the tag in the first place.

Notes

• both Style and Script are intended to be used for static assets, usually fonts, analytics, etc;
• when JSX is enabled, you can use the same workflow, no need to include these meta tags in your JSX markup;
• when the user lands on a page without any meta tags, the app global tags will be used;
• all provided metadata components don't return any markup, their function is to register new tags or update existing ones.