ComponentsLumos 0.0.1Open component

BaseHead

Everything that belongs in the document head: titles, meta, canonical URLs, social cards.

BaseHead fills in the <head>: the title, the description, the canonical URL, Open Graph and Twitter cards, the favicon and the viewport tag. BaseLayout renders it, so a page only passes the parts that differ.

astro
<BaseLayout
  title="About"
  description="Who we are and what we make."
  image="/og/about.jpg"
>

Props

PropTypeDefaultWhat it does
titlestringNoneThe page title. Rendered as {title} | {SITE_NAME}; leave it out on the home page for the site name alone.
descriptionstringSITE_DESCRIPTIONThe meta description, also used for the social cards.
imagestring"/og-image.jpg"The social share image. Relative paths resolve against site in astro.config.mjs.
type"website" | "article""website"The Open Graph type. Use article for posts and news pages.
noindexbooleanNoneForces the robots tag on or off for this page. Leave it unset to inherit from NOINDEX_ROUTES.

Keeping robots and the sitemap agreeing

NOINDEX_ROUTES in src/consts.ts is the single list of pages kept out of search. It drives both the noindex tag and the sitemap, so the two cannot disagree: a page excluded from one is excluded from the other.

Adding to the head

BaseLayout has a head slot for anything else: a font preload, a structured-data script, a verification tag.

astro
<BaseLayout title="Home">
  <link slot="head" rel="preconnect" href="https://fonts.example.com" />
</BaseLayout>