# Head & SEO
> Title, canonical, Open Graph, Twitter, JSON-LD, hreflang, feeds, sitemap and OG images.
## How the head works
Each route's `.head(ctx)` returns a small object: `title`, `description`, `canonical`, `image`
and extra `elements`. The `head` plugin composes the full `` from it, in this order:
1. **Title.** `head.titleTemplate` with `%s` replaced by the route title, or the site name.
2. **Description.** The route description, or `site.description`.
3. **Open Graph and Twitter.** Title, description, URL, and `og:image` / `twitter:image` from the route `image` or `head.defaultOgImage`, made absolute against `site.url`. `og:locale` when `i18n.ogLocaleMap` has the page locale.
4. **Canonical.** The route `canonical`, or `site.url` joined with the page URL.
5. **hreflang.** One alternate link per locale, plus `x-default`.
6. **Your elements.** The route `elements`, last. An element with the same key as a generated one replaces it.
The build writes this into every page. On client navigation `spa` copies the head from the
fetched page, or sets the title through `head.composeTitle` on the data path. A head element is
a plain object, not a Preact node, so the same descriptors serialize at build and apply in the
browser.
The `build` plugin adds the site-wide files: feeds, `sitemap.xml`, `robots.txt` and OG images.
## Example
```ts
import { buildPlugin, contentPlugin, createApp, fileSystemContent } from "@moku-labs/web";
import { routes } from "./routes";
export const app = createApp({
plugins: [contentPlugin, buildPlugin],
pluginConfigs: {
site: { name: "My Blog", url: "https://blog.dev", author: "Ada", description: "Notes." },
head: {
titleTemplate: "%s · My Blog",
defaultOgImage: "/og-default.png",
twitterCard: "summary_large_image",
twitterHandle: "@moku_labs"
},
i18n: { locales: ["en", "uk"], defaultLocale: "en", ogLocaleMap: { en: "en_US", uk: "uk_UA" } },
router: { routes },
content: { providers: [fileSystemContent({ contentDir: "content" })] }
}
});
```
1. Must contain `%s`, or `createApp` throws.
```tsx
import { buildArticleHead, contentPlugin, defineRoutes, feedLink, route } from "@moku-labs/web/browser";
export const routes = defineRoutes({
post: route("/{slug}/")
.load(ctx => ctx.require(contentPlugin).load(ctx.params.slug, ctx.locale))
.render(ctx => )
.head(ctx => ({
title: ctx.data.frontmatter.title,
description: ctx.data.frontmatter.description,
image: `/og/${ctx.data.computed.slug}.png`,
elements: [
...buildArticleHead(
{
title: ctx.data.frontmatter.title,
author: ctx.data.frontmatter.author ?? "Ada",
published: ctx.data.frontmatter.date,
tags: ctx.data.frontmatter.tags
},
`https://blog.dev${ctx.data.url}`
),
feedLink("My Blog", "/feed.xml")
]
}))
});
```
1. Relative is fine here: the head plugin makes it absolute.
2. Canonical, `og:type=article`, published time, author, tags and an Article JSON-LD block.
## What the build writes
```sh
$ bun run build
▟▙ moku web build v2.4.11
✓ pages · 5ms
✓ feeds · 2ms
✓ sitemap · 1ms
✓ BUILD · 9 pages 1252ms · ./dist/
$ cat dist/robots.txt
User-agent: *
Allow: /
Sitemap: https://blog.dev/sitemap.xml
```
The head of `/uk/hello-world/`, as the build wrote it (one tag per line here):
```html
Привіт, світ · My Blog
```
The `build-id` meta and the asset tags are added by the build, after the head plugin. The sitemap lists the canonical URLs
only, so the `/en/…` copies of default-locale pages are not in it.
## Head helpers
Plain functions that return head elements. Use them in `elements`. Each one is exported from
both entries.
| Helper | Signature | Emits |
|---|---|---|
| `meta` | `meta(name, content)` | ``, key `meta:` |
| `og` | `og(property, content)` | ``, key `meta:` |
| `twitter` | `twitter(name, content)` | ``, key `meta:` |
| `jsonLd` | `jsonLd(data)` | `