@banulakwin/inertia-seo-engine
v1.1.0
Published
Inertia + React `<Head>` helpers for banulakwin/laravel-seo-engine payloads.
Maintainers
banulalakwinduReadme
@banulakwin/inertia-seo-engine
InertiaSeoHead component + InertiaSeoPayload type for banulakwin/laravel-seo-engine + Inertia.js <Head>.
Installation
npm install @banulakwin/inertia-seo-enginepnpm add @banulakwin/inertia-seo-engineyarn add @banulakwin/inertia-seo-enginePeer Dependencies
react^18.0.0 || ^19.0.0@inertiajs/react^2.0.0 || ^3.0.0
Quick Start
Place InertiaSeoHead in your root layout component. It reads SEO data automatically from Inertia's page context via usePage().
import { InertiaSeoHead } from '@banulakwin/inertia-seo-engine';
export default function AppLayout({ children }) {
return (
<>
<InertiaSeoHead />
{children}
</>
);
}Laravel Backend
Your Laravel app should pass an seo prop matching InertiaSeoPayload, typically from:
inertia_seo($model)inertia_seo_page('slug')inertia_head_from_seo_engine_array()
Also pass appUrl (string base URL) and optionally name (site name for og:site_name) via Inertia shared props.
// In your controller
return inertia('Page', [
// ...your data
], [
'appUrl' => config('app.url'),
'name' => config('app.name'),
]);API Reference
Components
InertiaSeoHead
Zero-prop React component that renders <Head> meta tags from Inertia shared/page seo props.
import { InertiaSeoHead } from '@banulakwin/inertia-seo-engine';
<InertiaSeoHead />;Types
InertiaSeoPayload
The SEO data payload from Laravel banulakwin/laravel-seo-engine.
type InertiaSeoPayload = {
title?: string | null;
description?: string | null;
keywords?: string | string[] | null;
image_path?: string | null;
canonical_url?: string | null;
is_index?: boolean;
is_follow?: boolean;
og_type?: string | null;
og_title?: string | null;
og_description?: string | null;
og_image_path?: string | null;
author?: string | null;
twitter_card?: string | null;
twitter_site?: string | null;
twitter_creator?: string | null;
twitter_title?: string | null;
twitter_description?: string | null;
twitter_image_path?: string | null;
global_head_html?: string | null;
page_head_html?: string | null;
json_ld?: unknown | unknown[] | null;
};InertiaSeoHeadPageProps
Expected Inertia page props shape.
type InertiaSeoHeadPageProps = {
name?: string;
appUrl?: string;
seo?: InertiaSeoPayload | null;
};Features
- Title & Meta:
<title>, description, keywords, robots, author, abstract - Canonical URL: Auto-derived from
appUrl+ current path, or explicitcanonical_url - Open Graph: og:type, og:title, og:description, og:image, og:url, og:site_name
- Twitter Cards: twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator
- JSON-LD: Structured data via
<script type="application/ld+json"> - Custom HTML: Site-wide and per-page HTML snippets parsed via DOMParser (with regex fallback for SSR)
- URL Resolution: Relative image paths resolved against
appUrl
Build
npm run buildLicense
MIT
See Also
- AGENTS.md - Expected Inertia props and AI agent guide
- CHANGELOG.md - Release history