Introduction to metadata and Laravel Head

04 Sep 2026 | Peter Cornelis
Introduction to metadata and Laravel Head

Introduction

Every web application needs metadata. In this post, we will take a closer look at the metadata stored inside the <head> of a page and explore a simple and clean way to manage this in Laravel using the recently introduced Laravel Head package.

What is metadata?

Before going further into the package, let’s first discuss what metadata is.

Simply put, metadata is information that describes other data. In web development it provides information about the page rather than the content the visitors see.

For example:

  1. Title: Displayed in the browser tab and used as title by search engines.
  2. Description: A short summary about the page, used by search engines when displaying the page in search results.
  3. Canonical link: Tells search engines which URL is the primary version of a page. This way, search engines can know which URL is the preferred option when multiple URLs are possible.
  4. Viewport: Tells the browser how to control the page's dimensions and scaling, which is used for responsive websites.
  5. Robots: Tells search engines whether a page should be indexed and if links can be followed.
  6. Open Graph: Controls how a page appears when shared on platforms that support Open Graph metadata like LinkedIn, Facebook and many others. It allows you to set a distinct title, description, preview image and URL to be displayed when the page is shared.
  7. Twitter/X Cards: Does essentially the same thing as Open Graph, but specifically for the X platform.

As you can see, there can be quite a bit of information to manage inside the <head> of a page. This is where Laravel Head comes in to manage the metadata throughout your application.

Laravel Head

Laravel Head provides you with a simple and clean way to manage all the metadata inside your HTML <head> tag. It works with Blade, Livewire and Inertia and allows you to define metadata from both your routes and controllers.

Supported properties by category:

  1. Document: title, description, canonical, robots
  2. Application metadata: themeColor, applicationName, colorScheme, referrer, viewport
  3. Social: og, ogImage, ogVideo, ogAudio, twitter, twitterImage
  4. Performance: preload, prefetch, preconnect, dnsPrefetch
  5. Discovery: alternates, feed, icon, favicon, appleTouchIcon, appleTouchStartupImage, maskIcon, manifest
  6. Structured data: schema
  7. Custom tags: meta, link

You can install the package using Composer:

composer require laravel/head

Once the package is installed, you need to add the @head Blade directive inside the <head> tag of your layout:

<head>
@head
</head>

This directive is responsible for rendering the metadata that you defined using the Laravel Head package.

Set the metadata

Now that we are all set to start implementing our metadata, let’s start by defining some default metadata. This can be done in the boot method of the AppServiceProvider by calling the Head::defaults() method.

Example:

public function boot(): void
{
    Head::defaults(fn (HeadBuilder $head) => $head
        ->title('My Personal Website')
        ->description('Welcome to my personal website! Learn more about my work, projects, and things I’m passionate about.')
        ->favicon('/favicon.svg')
    );
}


It’s also possible to add metadata directly to routes or route groups using the withHead() method.

Example:

Route::get('/', [HomeController::class, 'index'])->name('home')->withHead(
robots: 'index, follow',
colorScheme: 'dark',
favicon: ['href' => '/green_favicon.svg', 'type' => ImageType::Svg],
);

In this example, we allow robots to index the page and follow its links, while only allowing the dark theme and setting a custom favicon.

However, in some cases it’s necessary to set the metadata in a controller. For example, if you want to add in the name of a user, or a product to the title of a page. In this case you would need access to the User model.

Example:

public function show(User $user): View
{
Head::title('Welcome ' . $user->fullName)
->hiddenFromRobots();
  //
}

In this example, we set a custom title with a welcome message for the user, and prevent search engines from indexing the page or following its links.

It's also possible to set metadata for error pages. Just like with the Head::defaults() method, this is done within the boot method of your AppServiceProvider.

Example:

public function boot(): void
{
Head::errors(function (ErrorPages $errors) {
$errors->status(404, fn (HeadBuilder $head) => $head
->title('Page Not Found')
->description('The page you are looking for could not be found.'));
});
}

Conclusion

Using metadata is powerful for improving your website's search engine optimization and so much more. Laravel Head is a powerful tool for managing this metadata with better oversight and simplicity.

This was an introduction to Laravel Head, however there is so much more you can do with this package.

Peter Cornelis

Peter Cornelis

Software Engineer

Categorieën

English Dennenboom Academy
Terug naar blog overzicht