> ## Documentation Index > Fetch the complete documentation index at: https://kawax.biz/llms.txt > Use this file to discover all available pages before exploring further. # Laravel Head > Zo gebruik je Laravel Head om de document te beheren in Blade, Livewire en Inertia. Stel title, meta, Open Graph, canonical URL's, robots, performancehints en gestructureerde data in met een fluente API. ## Introductie [laravel/head](https://github.com/laravel/head) is een officieel Laravel-pakket waarmee je de document-`` van je applicatie beheert via een fluente API. Het ondersteunt title- en metatags, Open Graph, canonical URL's, robots-directives, performancehints en gestructureerde data, en werkt met zowel Blade, Livewire als Inertia. Op 28 juli 2026 is v0.1.0 uitgebracht. ```bash theme={null} composer require laravel/head ``` ## Volgorde van resolutie De head-data van een pagina wordt opgelost via de volgende vijf lagen, van laagste naar hoogste prioriteit: 1. Paginadefaults 2. Metadata van routegroepen 3. Routemetadata 4. Runtime-metadata 5. Metadata van foutpagina's Hogere lagen overschrijven lagere lagen per veld. Een title die je bijvoorbeeld tijdens runtime instelt vervangt de title van de route, maar niet de description. ```mermaid theme={null} graph TD A["Paginadefaults"] --> B["Routegroep-
metadata"] B --> C["Routemetadata"] C --> D["Runtime-metadata"] D --> E["Foutpagina-
metadata"] E --> F["Uiteindelijke
<head>-output"] ``` ## Defaults registreren Registreer sitebrede defaults in een serviceprovider. ```php theme={null} use Laravel\Head\Facades\Head; use Laravel\Head\HeadBuilder; use Laravel\Head\Enums\OgType; Head::defaults(function (HeadBuilder $head) { $head ->title('Acme', suffix: ' - Acme') ->description('Build something great.') ->canonical() ->og(siteName: 'Acme', type: OgType::Website) ->searchableByRobots() ->preconnect('https://fonts.example.com'); }); ``` De defaults-laag is de pagina-laag met de laagste prioriteit. Zolang geen hogere laag een title instelt, wordt `Acme` als zodanig weergegeven; stelt een hogere laag wél een title in, dan wordt de overgenomen suffix toegepast (`Head::title('About')` wordt `About - Acme`). ## Routemetadata Bij statische pagina's kun je metadata rechtstreeks aan de routedefinitie koppelen. ```php theme={null} Route::view('/contact', 'contact') ->name('contact') ->withHead( title: 'Contact Us', description: 'Get in touch.', ); ``` Je kunt ook gemeenschappelijke metadata op een hele groep toepassen. ```php theme={null} Route::withHead(robots: 'noindex, nofollow') ->prefix('admin') ->name('admin.') ->group(function () { Route::get('/dashboard', DashboardController::class) ->name('dashboard') ->withHead(title: 'Dashboard'); }); ``` `withHead()` slaat een gewone array op via de standaard routemetadata-API van Laravel (onder de sleutel `head` van `->metadata()`), waardoor de compatibiliteit met gecachte routes behouden blijft. ## Runtime-metadata Waarden die pas bekend zijn wanneer het request binnenkomt, zoals de titel van een post, stel je tijdens runtime in via de `Head`-facade. ```php theme={null} use App\Models\Post; use Laravel\Head\Facades\Head; public function show(Post $post) { Head::title($post->title) ->description($post->description); return view('posts.show', ['post' => $post]); } ``` Voorwaardelijke metadata schrijf je fluent met `when()` / `unless()`. ```php theme={null} Head::title($post->title) ->when($post->isDraft(), fn ($head) => $head->hiddenFromRobots()); ``` ## Foutpagina's Je kunt ook metadata per statuscode registreren. ```php theme={null} use Laravel\Head\ErrorPages; use Laravel\Head\Facades\Head; Head::errors(function (ErrorPages $errors) { $errors->defaults(robots: 'noindex, follow'); $errors->status(404, title: 'Page Not Found', description: 'The page you are looking for could not be found.', ); }); ``` Wanneer een geregistreerde foutstatus wordt gerenderd, krijgt deze metadata voorrang boven alle andere lagen. ## Open Graph en Twitter Cards Met `og()` stel je Open Graph-properties in, en met methoden als `ogImage()` voeg je afbeeldingen, video's en audio toe. ```php theme={null} use Laravel\Head\Enums\ImageType; use Laravel\Head\Enums\OgType; Head::og(type: OgType::Article, title: $post->title) ->ogImage($post->hero_image_url) ->ogImage( $post->gallery_image_url, alt: $post->gallery_image_alt, width: 1200, height: 630, type: ImageType::Jpeg, ); ``` De `title` en `description` van het document vullen automatisch een niet-ingestelde `og:title` / `og:description` aan. Twitter Cards hoef je alleen in de defaults te registreren; ze worden dan automatisch gerenderd op basis van dezelfde title, description en afbeeldingen als Open Graph. ```php theme={null} use Laravel\Head\Enums\TwitterCard; use Laravel\Head\Facades\Head; use Laravel\Head\HeadBuilder; Head::defaults(fn (HeadBuilder $head) => $head->twitter( card: TwitterCard::SummaryWithLargeImage, )); ``` Je kunt de Twitter-waarden op individuele pagina's ook expliciet overschrijven. ```php theme={null} Head::twitter(title: $post->social_title) ->twitterImage($post->social_image_url, alt: $post->title); ``` ## PWA, performance en iconen De `pwa()`-helper stelt in één keer alle ``-tags in die nodig zijn voor een installeerbare webapp. ```php theme={null} Head::pwa( name: 'Acme', manifest: '/site.webmanifest', themeColor: '#0f172a', appleTouchIcon: '/apple-touch-icon.png', appleWebAppStatusBarStyle: 'black', ); ``` ## Themakleur De themakleur kun je globaal, per route of tijdens runtime instellen. Met de `Media`-enum specificeer je ook themakleuren per medium. ```php theme={null} use Laravel\Head\Enums\Media; Head::themeColor('#ffffff', media: Media::Light) ->themeColor('#111827', media: Media::Dark); ``` `Media` bevat ook `Portrait` en `Landscape`. ## App-metadata en iconen Laravel Head bevat helpers voor algemene browser- en app-metadata. ```php theme={null} use Laravel\Head\Enums\ImageType; use Laravel\Head\Enums\Media; Head::applicationName('Acme') ->colorScheme('light dark') ->referrer('strict-origin-when-cross-origin') ->viewport('width=device-width, initial-scale=1') ->appleWebAppTitle('Acme') ->webAppCapable() ->appleWebAppStatusBarStyle('black') ->favicon('/favicon.svg', type: ImageType::Svg) ->icon('/favicon-32x32.png', type: ImageType::Png, sizes: '32x32') ->appleTouchIcon('/apple-touch-icon.png', sizes: '180x180') ->appleTouchStartupImage('/launch.png', media: Media::Portrait) ->maskIcon('/safari-pinned-tab.svg', color: '#111827') ->manifest('/site.webmanifest'); ``` `favicon()` is een alias van `icon()` en accepteert dezelfde argumenten `type`, `sizes` en `media`. ## Performance en vindbaarheid Laravel Head kan ook performancehints, paginatielinks, alternatieve locale-varianten en feed-discovery-tags renderen. ```php theme={null} Head::preload(asset('fonts/inter.woff2'), as: 'font', crossorigin: true) ->prefetch(asset('images/next.webp')) ->preconnect('https://cdn.example.com') ->dnsPrefetch('https://analytics.example.com') ->paginate($posts) ->alternates([ 'en' => 'https://example.com/en/about', 'fr' => 'https://example.com/fr/about', 'x-default' => 'https://example.com/about', ]) ->feed('/feed', title: 'Acme RSS') ->feed('/feed.atom', type: 'atom', title: 'Acme Atom'); ``` `preloadAsset()` / `prefetchAsset()` lossen de URL op via de `asset()`-helper en detecteren het `as`-attribuut automatisch op basis van de bestandsextensie. ```php theme={null} Head::preloadAsset('fonts/inter.woff2') ->prefetchAsset('images/next.webp'); ``` ```html theme={null} ``` ## Aangepaste tags Tags waarvoor geen speciale methode bestaat voeg je toe met `meta()` / `link()`. ```php theme={null} Head::meta('format-detection', 'telephone=no') ->meta('article:author', $post->author->name) ->link('search', '/opensearch.xml', [ 'type' => 'application/opensearchdescription+xml', 'title' => 'Acme Search', ]); ``` `meta()` gebruikt `name=` voor gewone metatags, maar schakelt automatisch over naar `property=` voor sleutels die dat vereisen, zoals Open Graph (`og:`) en artikelmetadata (`article:`). ```php theme={null} Head::meta('description', 'About Acme') ->meta('og:title', 'About Acme'); ``` ```html theme={null} ``` ## Gestructureerde data (JSON-LD) De ingebouwde schemabuilder dekt de belangrijkste JSON-LD-types af. ```php theme={null} use Laravel\Head\Enums\OfferAvailability; use Laravel\Head\Facades\Schema; Head::schema( Schema::product() ->name($product->name) ->offers( Schema::offer() ->price($product->price) ->currency('USD') ->availability(OfferAvailability::InStock) ) ); ``` De ingebouwde factorymethoden zijn `article`, `blogPosting`, `product`, `offer`, `brand`, `breadcrumbs`, `faq`, `organization`, `person`, `webPage` en `webSite`. Onbekende factorymethoden vallen terug op een generiek schema-object, zodat je ook aangepaste schema.org-types kunt uitdrukken. Breadcrumb-items kun je één voor één of in bulk toevoegen. De posities worden automatisch toegewezen in de volgorde van toevoegen. ```php theme={null} Head::schema( Schema::breadcrumbs()->items([ 'Home' => route('home'), 'Shop' => route('shop.index'), 'Shoes' => route('shop.category', 'shoes'), ]) ); ``` FAQ-vragen volgen hetzelfde patroon: met `question()` voeg je ze één voor één toe en met `questions()` in bulk. ```php theme={null} Head::schema( Schema::faq()->questions([ 'What is Laravel Head?' => 'A fluent API for managing the document head.', 'Is it free?' => 'Yes, it is open source.', ]) ); ``` Aangepaste schematypes kun je expliciet registreren. ```php theme={null} use DateTimeInterface; use Laravel\Head\Facades\Schema; use Laravel\Head\Schema\SchemaObject; use Laravel\Head\SchemaType; #[SchemaType('JobPosting')] class JobPosting extends SchemaObject { public function title(string $title): static { return $this->set('title', $title); } public function datePosted(DateTimeInterface|string $date): static { return $this->date('datePosted', $date); } } Schema::register(JobPosting::class); ``` ## Samenvatting `laravel/head` is een pakket waarmee je de metadata die nodig is voor SEO en social sharing centraal beheert over Blade, Livewire en Inertia heen. Dankzij de vijflaagse structuur van defaults, routes, runtime en foutpagina's houd je sitebrede consistentie en behoud je toch flexibele aanpassingen per pagina. Hier vind je de broncode en het laatste nieuws. ## Related topics - [HTTP-client](/nl/http-client.md) - [CSRF-bescherming](/nl/csrf.md) - [Upgradegids van Laravel 12 naar 13](/nl/blog/upgrade-12-to-13.md) - [Google Sheets API for Laravel](/nl/packages/laravel-google-sheets/index.md) - [PHP FFI](/nl/advanced/ffi.md)