Pages, Header, Footer & SEO
The site-shape surface (Pages, Header, and Footer collections plus the SiteMetaData and Settings globals) that gives every project the structure of a website.
One plugin gives every project the same website shape: a Pages collection for content, Header and Footer collections for the chrome around it, and globals for site-wide metadata and settings.
Overview
Where every other feature contributes one capability, the site feature contributes the shape of an Atomic Payload site. It registers the collections and globals every project needs to look like a website:
pages: the main content collection.header: site-wide navigation.footer: site-wide footer.siteMetaDataglobal: the single source of truth for site-level metadata (SEO).settingsglobal: site-wide settings.
Locking this shape down means every project models pages, header, and footer the same way, so navigation wires up consistently and seeding has a known set of slugs to populate.
How it works
Each piece owns a distinct part of the site:
pagesis the main content collection. Each page carries an SEO tab and a settings tab, plus a children-blocks field for Atomic content, so a page is composed from the same atomic blocks you build elsewhere in the admin.headeris site-wide navigation. It's modeled as a collection rather than a global, so you can keep several versions and mark one active. The active document is the one the frontend renders.footerfollows the same pattern as the header: a collection where one document is marked active and rendered.siteMetaDatais a global holding the site name, default description, default Open Graph image, and light/dark favicons. It's the single source of truth for SEO defaults across the site.settingsis a global for the persistent store version (a draft and a published value). Bumping it resets the stored client state, which you reach for when you change actions and things stop behaving.
Together these compose the site: pages supply the content, the header and footer frame it as navigation and chrome, and the globals supply the metadata and store settings that apply site-wide.
Using it
Everything is managed from the Payload admin:
- Pages: create and edit pages in the
pagescollection. Fill in the page's content with atomic child blocks, set per-page options in its settings tab, and override SEO in its SEO tab. - Header: edit the
headercollection to manage site-wide navigation. Because it's a collection, you can maintain more than one and flip the active toggle to choose which one renders. - Footer: manage the
footercollection the same way as the header, marking one active. - Settings: open the
settingsglobal if you need to reset the persistent store version. - SEO / metadata: open the
siteMetaDataglobal to set your site name, default description, favicons, and default Open Graph image. These act as the defaults that a page's own SEO tab can override.
Page SEO
Every page carries an SEO tab (stored on the page as its meta group) where editors override the site-wide defaults for that one page:
| Field | Type | What it does |
|---|---|---|
title | text | The page's meta title. |
description | textarea | The page's meta description. |
image | upload | The page's Open Graph image, overriding the global Open Graph image. |
lightFavicon / darkFavicon | upload | Per-page favicons that override the global light and dark favicons. |
noIndex | checkbox | Prevents the page from being indexed by search engines. Off by default. |
priority | number (0 to 1) | The page's sitemap priority relative to other pages. Defaults to 0.5; the home page should be 1. |
changeFrequency | select | How often the page is updated, for the sitemap: daily, weekly, monthly (the default), yearly, or never. |
The site-wide defaults these fields override live in the siteMetaData global (site name, fallback description, fallback Open Graph image, fallback light/dark favicons), so a page's SEO tab only needs values where that page should differ.
The Open Graph image picker uploads to the images collection and the favicon pickers to the favicons collection, both registered by the images plugin. See Images & Video; the template wires this up for you.
Configuration
The site feature is registered by a single sitePlugin(), with no required options: adding the plugin wires up all the collections and globals above. The plugin is intentionally unopinionated about cross-package wiring (the atomic hook, the nested-docs plugin, the live-preview URL, JSON-schema setup), which is the template's job, because those choices depend on which other plugins you've enabled.
The pieces are also exported individually, so you can reuse them in your own collections. The SEO tab ships as a SEOTab() factory: drop it into another collection's tabs array to give that collection the exact same SEO shape pages use:
import type { CollectionConfig } from 'payload'
import { SEOTab } from '@pro-laico/site'
export const Articles: CollectionConfig = {
slug: 'articles',
fields: [
{ name: 'title', type: 'text', required: true },
{ type: 'tabs', tabs: [SEOTab()] },
],
}SEOTab() takes no options, and the registered collections ship as fixed configs (the plugin's only option is enabled), so customizing means composing the exports (Pages, Header, Footer, SEOTab, SettingsTab) into your own collections rather than passing overrides.
For collection and global slugs, subpath imports, and the full export list, see the site plugin reference.