The page's head

Add @nitroHead to your layout's <head>. It prints the page's <title> and the tags that search engines and link previews read. Each page sets only what it needs, and the rest comes from defaults in config/nitro.php.

Setting defaults

// config/nitro.php, used by every page
'head' => [
    'title' => '%s · My Blog',           // The page's title replaces %s.
    'description' => 'Notes on Laravel and the web',
    'image' => 'https://example.com/img/share.png',
],

The title option is the format of every page's <title>. The page's own title replaces %s. A page without a title gets app.name.

Setting fixed text

If a page's head doesn't depend on its data, set it with attributes:

use Nitro\Attributes\Description;
use Nitro\Attributes\Title;

#[Title('About')]
#[Description('Who writes this blog, and why')]
class About extends Component

Setting the head from the page's data

If a page's head depends on its data, set it in mount() with $this->head():

public function mount(Post $post): void
{
    $this->head()
        ->title($post->title)
        ->description($post->excerpt)
        ->image($post->cover_url)
        ->canonical(route('posts.show', $post))
        ->noindex();   // A draft: kept out of search results.
}

Each method prints these tags:

How these docs set their head

This page sets its head in mount(), from the title in the sidebar and the page's lead. The title format is '%s · Nitro':

$this->head()
    ->title($meta['title'])
    ->description($this->lead !== '' ? $this->lead : "{$meta['title']}: {$meta['section']} in the Nitro documentation.")
    ->canonical(url(Nav::url($page)));

For this page, @nitroHead prints:

<title>The page&#039;s head · Nitro</title>
<meta name="description" content="..." data-nitro-head>
<meta property="og:title" content="The page&#039;s head" data-nitro-head>
<meta property="og:description" content="..." data-nitro-head>
<link rel="canonical" href="https://nitro-docs.test/docs/head" data-nitro-head>

Updating the head on a visit

A nitro:navigate visit brings the new page's head along with its data. The browser replaces the previous page's tab title, description and canonical link with the new ones. Move to another page of these docs, and the tab's title follows.

A layout that writes its own <title>{{ $title }}</title> keeps working, because $title is the page's title.

Next steps