Laravel SEO

# Laravel-Mix

You can include your mix-manifest.json file generated by Laravel-Mix (opens new window) to automatically add preload/prefetch link elements to your document head.

# Basic example

seo()
    ->mix()
    ->load();

mix-manifest.json

{
  "/js/app.js": "/js/app.js?id=123456789",
  "/css/app.css": "/css/app.css?id=123456789"
}

document <head>

<link rel="prefetch" href="/js/app.js?id=123456789" />
<link rel="prefetch" href="/css/app.css?id=123456789" />

# Specify an alternate manifest path

seo()
    ->mix()
    ->load(public_path('custom-manifest.json'));

# Ignore certain assets

By default, all assets are added to the document head. You can specify filters or rejections to hide certain assets like admin scripts. The callbacks are passed through the Laravel collection instance.

In this example, we will stop all admin frontend assets from prefetching by returning null within the provided map callback.

use romanzipp\Seo\Conductors\Types\ManifestAsset;

seo()
    ->mix()
    ->map(static function(ManifestAsset $asset): ?ManifestAsset {

        if (strpos($asset->path, 'admin') !== false) {
            return null;
        }

        return $asset;
    })
    ->load();

mix-manifest.json

{
  "/js/app.js": "/js/app.js?id=123456789",
  "/js/admin.js": "/js/admin.js?id=123456789",
  "/css/app.css": "/css/app.css?id=123456789",
  "/css/admin.css": "/css/admin.css?id=123456789"
}

document <head>

<link rel="prefetch" href="/js/app.js?id=123456789" />
<link rel="prefetch" href="/css/app.css?id=123456789" />

# Provide an absolute URL

You can force your preloaded/prefetched assets to use an alternate URL by modifying the url attribute.

use romanzipp\Seo\Conductors\Types\ManifestAsset;

seo()
    ->mix()
    ->map(static function(ManifestAsset $asset): ?ManifestAsset {

        $asset->url = "http://localhost{$asset->url}";

        return $asset;
    })
    ->load();

mix-manifest.json

{
  "/js/app.js": "/js/app.js?id=123456789",
  "/css/app.css": "/css/app.css?id=123456789"
}

document <head>

<link rel="prefetch" href="http://localhost/js/app.js?id=123456789" />
<link rel="prefetch" href="http://localhost/css/app.css?id=123456789" />

# Change mechanism

By default, all assets found in your mix file are inserted with the prefetch mechanism. You can read more about preloading and prefetching in this article by css-tricks.com (opens new window).

You are also free to change the default prefetch value to preload using the map callback. The following code example will preload all assets containing "component" or otherwise fall back on prefetch.

use romanzipp\Seo\Conductors\Types\ManifestAsset;

seo()
    ->mix()
    ->map(static function(ManifestAsset $asset): ?ManifestAsset {

        $asset->rel = 'prefetch';

        if (strpos($asset->path, 'component') !== false) {
            $asset->rel = 'preload';
        }

        return $asset;
    })
    ->load();

mix-manifest.json

{
  "/js/app.js": "/js/app.js?id=123456789",
  "/js/app.routes.js": "/js/app.routes.js?id=123456789",
  "/js/app.user-component.js": "/js/app.user-component.js?id=123456789",
  "/js/app.news-component.js": "/js/app.news-component.js?id=123456789"
}

document <head>

<link rel="prefetch" href="/js/app.js?id=123456789" />
<link rel="prefetch" href="/js/app.routes.js?id=123456789" />
<link rel="preload" href="/js/app.user-component.js?id=123456789" />
<link rel="preload" href="/js/app.news-component.js?id=123456789" />

# Asset resource type

Preloading content required a minimum of href and as attribute. This package will guess a resource type (opens new window) based on the provided file extension. Currently script, style, font, image and video are supported. Feels free to change the resource type.

use romanzipp\Seo\Conductors\Types\ManifestAsset;

seo()
    ->mix()
    ->map(static function(ManifestAsset $asset): ?ManifestAsset {

        if (strpos($asset->path, 'virus') !== false) {
            $asset->as = 'virus';
        }

        return $asset;
    })
    ->load();

mix-manifest.json

{
  "/css/app.css": "/css/app.css?id=123456789",
  "/js/app.js": "/js/app.routes.js?id=123456789",
  "/data/totally-not-a-virus": "/data/totally-not-a-virus?id=123456789",
  "/data/totally-not-a-virus": "/data/totally-not-a-virus?id=123456789"
}

document <head>

<link rel="prefetch" as="style" href="/css/app.css?id=123456789" />
<link rel="prefetch" as="script" href="/js/app.js?id=123456789" />
<link rel="prefetch" as="virus" href="/data/totally-not-a-virus?id=123456789" />
<link rel="prefetch" as="virus" href="/data/totally-not-a-virus?id=123456789" />

← Schema.org Integration →