Download the PHP package ycs77/inertia-laravel-ssr-head without Composer
On this page you can find all versions of the php package ycs77/inertia-laravel-ssr-head. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package inertia-laravel-ssr-head
Inertia.js Laravel SSR Head
English | 繁體中文
Simple SSR Head for Inertia Laravel
- 😎 Solved the Open Graph Meta crawling problem in Inertia.js x Laravel app
- ❌ No Headless Chrome, Node.js, or PHP V8 Extension
- ✨ Auto-update Inertia page title
Inspired by Root template data of Inertia.js docs.
NOT a full SSR solution!! It doesn't solve the SEO problem!
Because I made this package to make it easier for the bot to crawl Open Graph Meta on Inertia.js App without installing (or can't installing) Headless Chrome, Node.js, or PHP V8 Extension. This is applicable in situations where you are not familiar with how to install the above packages on the server, or the server does not support them (e.g. shared hosting).
If you need a full SSR solution, please use Inertia.js Official Server-side Rendering.
Supported Versions
Version | Laravel Version | PHP Version |
---|---|---|
1.x | >=7.0 | >=7.3 |
2.x | >=11.0 | >=8.2 |
Installation
Install the package via composer:
Replace <title>
to @inertiaHead
directive:
Install client plugin
And install the client npm package:
The package just auto-updates the client <title>
tag.
Add plugin for Vue 2 in resources/js/app.js
:
Use in Vue 3 in resources/js/app.js
:
Use in React or other client-side frameworks:
Config
Publish the config file with:
You can set the twitter site username or many in config inertia-ssr-head.php
:
Usage
Setting page title and description:
Then will be rendered to this HTML tags:
The head tags just render with server-side on first visit page, the client only updates <title>
, no update other meta tags. Because the purpose of this package is only to allow the bot to crawl meta tags, it is omitted on the client-side.
The title will injection to props, you can get the page title with using prop title
or $page.props.title
with the Vue Options API:
Or using the Vue Composition API:
Also, if you are using this package, it is don't use Inertia <Head>
.
Title template
If you want to add the Web site name after the title, use titleTemplate()
in AppServiceProvider
, support using string and Closure:
Or setting for one Inertia page:
If you want to disable title template only one page, you can set false
in title()
:
Open Graph meta tags
Render Open Graph tags, have title
, description
and ogMeta()
, the ogMeta()
will generate the Open Graph meta og:title
, og:description
, og:image
:
Or if you want only render og:title
, og:description
meta tags:
Twitter Card meta tags
Add Twitter Summary card meta tags with twitterSummaryCard()
:
Add Summary large image card meta tags with twitterLargeCard()
:
Add App card meta tags with twitterAppCard()
:
Add Player card meta tags with twitterPlayerCard()
:
Custom head tag
Use tag()
method will add the custom HTML tag in <head>
:
Testing
Reference
- Inertia.js docs: Root template data
- Meta 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
License
The MIT License (MIT). Please see License File for more information.
All versions of inertia-laravel-ssr-head with dependencies
laravel/framework Version >=11.0
inertiajs/inertia-laravel Version >=1.0.0