SEO & Metadata
Search Engine Optimization (SEO) in InertJS is fully customizable and straightforward since you have complete control over the HTML document through Layouts (shell.js).
Dynamic Metadata
Because the data fetched by flux() is automatically passed into the shell.js wrapper, you can easily inject dynamic SEO tags for every route.
// src/routes/shell.js
import { vec } from 'inertjs-vector';
export function render({ children, data }) {
return vec`
<!DOCTYPE html>
<html lang="en">
<head>
<title>${data?.title || 'Default Title'}</title>
<meta name="description" content="${data?.description || 'Default description'}">
<!-- Open Graph tags for rich previews -->
<meta property="og:title" content="${data?.title || 'Default Title'}">
<meta property="og:image" content="${data?.ogImage || '/default-og.png'}">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png">
</head>
<body>
${children}
</body>
</html>
`;
}
Simply return title and description properties from your route's flux() function, and the global shell will inject them into the <head> automatically!