Add SEO Metadata
Set per-page SEO fields and wire them into your Blade layout using Kompass's built-in metadata system.
Step 1: Set Page-Specific SEO
- Navigate to Pages or Posts in the Admin sidebar.
- Edit a specific page.
- Open the SEO / Metadata tab.
- Fill in the fields:
- SEO Title: The title shown in browser tabs and search results.
- SEO Description: The snippet shown in search results.
- OG Image: The image used when sharing the link on social media.
- Click Save.
Step 2: Use Metadata in Your Layout
Update your main layout file (e.g., resources/views/layouts/app.blade.php) to output the stored metadata:
If you're using Kompass's built-in seo() helper and seo-meta component, set the values via seo() and they'll render automatically:
blade
@php
seo()
->title($page->getMeta('seo_title', $page->title) . ' | My Website')
->description($page->getMeta('seo_description', 'Default site description'))
->image($page->getMeta('og_image'));
@endphpThen in your layout's <head>:
blade
<head>
<x-kompass::seo-meta />
</head>The seo-meta component outputs the title, description, and image tags you've set.
Step 3: Global SEO Settings
For site-wide defaults (site name, global description):
- Navigate to Settings > Global.
- Fill in the Website Title and SEO Description.
- Kompass uses these values automatically when a page has no metadata of its own.
Step 4: Adding Custom Fields (Developers)
Use the HasMeta trait to store arbitrary key/value data on any model:
php
// In your controller or a custom block
$page->setMeta('bg_color', '#ff0000');
// In your Blade template
<body style="background-color: {{ $page->getMeta('bg_color', '#ffffff') }}">HasMeta Trait
getMeta($key, $default) returns the stored value or falls back to $default — no null checks required.