包简介

Simple SSR Head for Inertia Laravel

README 文档

README

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
3.x	>=13.0	>=8.3

Installation

Install the package via composer:

composer require ycs77/inertia-laravel-ssr-head

Replace <title> to <x-inertia-ssr::head /> component:

<!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>
+   <x-inertia-ssr::head />
</head>

<body>
    <x-inertia::app />
</body>
</html>

Install client plugin

And install the client npm package:

npm install inertia-title
// or
yarn add inertia-title

The package just auto-updates the client <title> tag.

Add plugin for Vue 2 in resources/js/app.js:

...
+import InertiaTitle from 'inertia-title/vue2'

+Vue.use(InertiaTitle)

createInertiaApp({
  ...
})

Use in Vue 3 in resources/js/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)
  },
})

Use in React or other client-side frameworks:

...
+import { inertiaTitle } from 'inertia-title'

+inertiaTitle()

Config

Publish the config file with:

php artisan vendor:publish --tag="inertia-ssr-head-config"

You can set 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>My homepage</title>
    <meta name="description" content="Hello, This is my homepage~">
</head>

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:

export default {
  props: {
    title: String,
  },
  created() {
    this.title             // => 'My homepage'  (with props)
    this.$page.props.title // => 'My homepage'  (with $page)
  },
}

Or using the Vue Composition API:

<script setup>
import { usePage } from '@inertiajs/vue3'

const props = defineProps({
  title: String,
})

const page = usePage()

props.title      // => 'My homepage'  (with props)
page.props.title // => 'My homepage'  (with page.props)
</script>

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:

use Inertia\Inertia;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Inertia::titleTemplate(fn ($title) => $title ? "$title - My App" : 'My App');
        // or pass string and %s will be replaced with the page title
        Inertia::titleTemplate('%s - My App');
    }
}

Or setting for one Inertia page:

return Inertia::render('Home')
    ->title('My homepage', '%s :: My App');

If you want to disable title template only one page, you can set false in title():

return Inertia::render('Home')
    ->title('My homepage', false);

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:

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('Home')
    ->title('Video title')
    ->description('Video description...')
    ->image('https://example.com/video_thumbnail')
    ->twitterPlayerCard([
        'url' => 'https://example.com/video',
        'width' => 640,
        'height' => 360,
    ]);

Custom head tag

Use tag() method will add the custom HTML tag in <head>:

return Inertia::render('Home')
    ->title('My homepage')
    ->tag('<meta name="my-meta" content="some data...">')
    ->tag('<meta name="my-meta" content="%s">', e('some data...')) // escape data

Testing

composer test

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.

ycs77/inertia-laravel-ssr-head 适用场景与选型建议

ycs77/inertia-laravel-ssr-head 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 14.13k 次下载、GitHub Stars 达 33，最近一次更新时间为 2021 年 10 月 15 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「seo」「opengraph」「open graph」「laravel」「meta」「metatags」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 ycs77/inertia-laravel-ssr-head 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 ycs77/inertia-laravel-ssr-head 我们能提供哪些服务？

定制开发 / 二次开发

基于 ycs77/inertia-laravel-ssr-head 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 ycs77/inertia-laravel-ssr-head 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

netgen/open-graph-bundle 14

Netgen Open Graph Bundle is an Ibexa Platform bundle that allows simple integration with Open Graph protocol.

mapkyca/php-ogp 26

Simple PHP Open Graph Protocol parser library

gorriecoe/silverstripe-meta 1

Improves silverstripes html meta data options.

yarri/essence 0

Extracts information about medias on the web, like youtube videos, twitter statuses or blog articles.

novius/laravel-meta 0

Help to manage meta data on Laravel Eloquent model

hypejunction/http-parser 5

A tool for scraping URL resources (oEmbed, OpenGraph, Twitter cards, JSON-LD)

ycs77/inertia-laravel-ssr-head

包简介

关键字：