Inertia.js Laravel SSR Head
Simple SSR Head for Inertia Laravel, solve the social media metadata display of small Inertia.js x Laravel site.
NOT a full SSR solution!!
Inspired by Root template data of Inertia.js docs.
Installation
Install the package via composer:
composer require ycs77/inertia-laravel-ssr-head
Replace <title> to @inertiaHead directive:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>{{ config('app.name') }}</title>
+ @inertiaHead
</head>
<body>
@inertia
</body>
</html>
Install client plugin
And install the client npm package:
npm install inertia-title
// or
yarn add inertia-title
The package just auto update client <title> tag.
Add plugin for Vue 2 in app.js:
...
+import InertiaTitle from 'inertia-title/vue2'
+Vue.use(InertiaTitle)
createInertiaApp({
...
})
Use in Vue 3 in app.js:
...
+import InertiaTitle from 'inertia-title/vue3'
createInertiaApp({
...
setup({ el, app, props, plugin }) {
createApp({ render: () => h(app, props) })
.use(plugin)
+ .use(InertiaTitle)
.mount(el)
},
})
Config
Publish the config file with:
php artisan vendor:publish --provider="Inertia\SSRHead\InertiaSSRHeadServiceProvider" --tag="inertia-ssr-head-config"
You can setting the twitter site username or many in config inertia-ssr-head.php:
<?php
return [
'fb_app_id' => env('FB_APP_ID'),
'twitter_site' => env('TWITTER_SITE'),
'twitter_site_id' => env('TWITTER_SITE_ID'),
'twitter_creator' => env('TWITTER_CREATOR'),
'twitter_creator_id' => env('TWITTER_CREATOR_ID'),
'twitter_app_name' => env('TWITTER_APP_NAME', env('APP_NAME')),
'twitter_app_ios_id' => env('TWITTER_APP_IOS_ID'),
'twitter_app_ios_url' => env('TWITTER_APP_IOS_URL'),
'twitter_app_googleplay_id' => env('TWITTER_APP_GOOGLEPLAY_ID'),
'twitter_app_googleplay_url' => env('TWITTER_APP_GOOGLEPLAY_URL'),
];
Usage
Setting page title and description:
return Inertia::render('Home')
->title('My homepage')
->description('Hello, This is my homepage~');
Then will be rendered to this HTML tags:
<head>
<title inertia>My homepage</title>
<meta name="description" content="Hello, This is my homepage~" inertia>
</head>
The head tags just render with server-side on first visit page, client only update <title>, no update other meta tags.
The title will injection to $page, you can get the page title with using prop title or $page.props.title in client Vue 2/3:
export default {
props: {
title: String,
},
mounted() {
this.title // => 'My homepage' (with props)
this.$page.props.title // => 'My homepage' (with $page)
},
}
Also, if you are using this package, it is not recommended to use Inertia <Head>.
Title template
If you want add the Web site name after title, use titleTemplate() in AppServiceProvider:
use Inertia\Inertia;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
Inertia::titleTemplate(fn ($title) => $title ? "$title - My App" : 'My App');
}
}
Or setting for one Inertia page:
return Inertia::render('Home')
->title('My homepage', '%s - '.config('app.name'));
If you want to disable title template only one page, you can set in title():
return Inertia::render('Home')
->title('My homepage', false);
Open Graph meta tags
Render Open Graph tags, have title, description, ogMeta() is generate the Open Graph meta og:title, og:description, og:image:
return Inertia::render('Home')
->title('My homepage')
->description('Hello, This is my homepage~')
->image('https://example.com/image')
->ogMeta();
// Same...
return Inertia::render('Home')
->title('My homepage')
->description('Hello, This is my homepage~')
->image('https://example.com/image')
->ogTitle('My homepage')
->ogDescription('Hello, This is my homepage~')
->ogImage('https://example.com/image');
Or if you want only render og:title, og:description meta tags:
return Inertia::render('Home')
->title('My homepage')
->ogTitle('Custom og title')
->ogDescription('Custom og description...');
Twitter Card meta tags
Add Twitter Summary card meta tags with twitterSummaryCard():
return Inertia::render('Home')
->title('My homepage')
->description('Hello, This is my homepage~')
->image('https://example.com/image')
->twitterSummaryCard();
Add Summary large image card meta tags with twitterLargeCard():
return Inertia::render('Home')
->title('My homepage')
->description('Hello, This is my homepage~')
->image('https://example.com/image')
->twitterLargeCard()
->twitterCreator('@creator_twitter_name');
Add App card meta tags with twitterAppCard():
return Inertia::render('AppHome')
->title('App title')
->description('App description...')
->twitterAppCard()
->twitterAppForIphone([
'name' => 'Your APP',
'id' => '123456789',
'url' => 'https://example.com/iphone_app',
])
->twitterAppForIpad([
'name' => 'Your APP',
'id' => '123456789',
'url' => 'https://example.com/ipad_app',
])
->twitterAppForGoogleplay([
'name' => 'Your APP',
'id' => '123456789',
'url' => 'https://example.com/googleplay_app',
]);
Add Player card meta tags with twitterPlayerCard():
return Inertia::render('AppHome')
->title('Video title')
->description('Video description...')
->image('https://example.com/video_thumbnail')
->twitterPlayerCard([
'url' => 'https://example.com/video',
'width' => 640,
'height' => 360,
]);
Custom
Add custom tag
Use head() method will add the custom HTML tag:
return Inertia::render('AppHome')
->title('Video title')
->head('<meta name="my-meta" content="some data...">')
->head('<meta name="my-meta" content="%s">', e('some data...')) // escape data
Testing
composer test
Alternatives
If need full SSR solution, please using Inertia.js Official Server-side Rendering.
Reference
- Inertia.js docs: Root template data
- Facebool for Developers: Webmasters - Sharing
- Twitter Developer Platform: About Twitter Cards | Docs
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
- Lucas Yang
- Jonathan Reinink, creator for Inertia.js
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
227 Dec 25, 2022
1.7k Jan 6, 2023
6 Aug 25, 2022
948 Mar 15, 2022
2.3k Dec 29, 2022
509 Dec 30, 2022
15 Jun 26, 2021
12 Jan 17, 2022
191 Dec 30, 2022
173 Dec 23, 2022
1 Nov 17, 2021
9 Oct 3, 2022
23 Sep 29, 2022
87 Dec 28, 2022
76 Dec 12, 2022
4 Dec 17, 2022
6.9k Jan 2, 2023
52 Jul 17, 2022