https://github.com/butschster/LaravelMetaTags

Laravel プロジェクトで SEO メタタグを管理するための最も強力で拡張可能なツール

Laravel SEO Meta Tags は、Laravel アプリケーション向けの洗練されたソリューションを提供し、開発者がヘッダーメタタグ、CSS、JavaScript、およびその他の関連タグをシームレスに管理できるようにします。その主な目的は、アプリケーション内で検索エンジン最適化 (SEO) タグを管理するプロセスを簡素化することです。

さらに、その汎用性の高い API により、 Inertiajs、VueJS 、その他の JavaScript フレームワークなどのフレームワークとの互換性が得られます。

ご質問やさらなる支援が必要な場合は、公式電報グループにご参加ください。

貢献する

パッケージへのご協力をお待ちしております。バグを発見した場合でも、革新的な機能の提案がある場合でも、その他の立場で貢献したい場合でも、皆様のご参加を心より歓迎いたします。開始するには、問題を開くか、GitHub リポジトリでプルリクエストを送信するだけです。

優れた開発者は皆、かつては初心者だったということを思い出してください。オープンソースプロジェクトに貢献することは、より優れた開発者になるための一歩です。ですから、ためらわずに参加して貢献を始めてください。

パッケージをより良くするために貢献していただければ幸いです。

特徴

メタ管理:タイトル、文字セット、ページネーションリンクなどを簡単に設定します。
スタイルとスクリプト:スタイルとスクリプトを整理し、HTML 内の任意の場所に配置します。
カスタムタグ:特定のニーズに合わせて独自のタグを作成します。
リッチメディア統合: Open Graph と Twitter カードの両方をサポートします。
Analytics Ready: Google Analytics と Yandex Metrika トラッキングコードのサポートが付属しており、後者のコードビルダーも含まれています。
サイト検証:ウェブマスターツールのサイト検証タグをサポートします。
パッケージシステム:タグ、スタイル、スクリプトを名前付きパッケージにグループ化し、どこにでも簡単に含めることができます。
堅牢なドキュメント:シームレスなセットアップのための明確な手順とガイドライン。
徹底的にテスト済み:信頼性と安定性を保証するように構築されています。

要件

Laravel バージョン: 9.x ～ 10.x
PHPバージョン：8.0以上

インストールと構成

パッケージをインストールする:次のコマンドを使用して、素晴らしいアプリケーションにメタタグパッケージをインストールします。

composer require butschster/meta-tags

サービスプロバイダーの登録:パッケージをインストールした後、サービスプロバイダーを登録する必要があります。

次の職人コマンドを使用してこれを行うことができます。

php artisan meta-tags:install

このコマンドはをアクティブ化しApp\Providers\MetaTagsServiceProvider、で設定を公開しますconfig/meta_tags.php。この構成ファイル内で、HTML に自動的に挿入されるデフォルトのタイトル、キーワード、説明、その他のメタタグを設定できます。

検証:App\Providers\MetaTagsServiceProviderが構成ファイルのプロバイダー配列に追加されていることを確認しますconfig/app.php。追加されていない場合は、手動で追加する必要があります。アプリケーションがApp名前空間を使用していない場合は、それに応じてプロバイダークラス名を更新してください。

以上です！これで、Laravel プロジェクトは SEO メタタグを簡単に処理できるようになりました。

使用法

コントローラ

\Butschster\Head\Facades\Metaファサードまたは\Butschster\Head\Contracts\MetaTags\MetaInterfaceコントローラーで使用できます

use Butschster\Head\MetaTags\MetaInterface;

class HomeController extends Controller
{
    public function __contruct(
        protected MetaInterface $meta
    ) {
    }
    
    public function index()
    {
        $news = News::paginate();
        
        // Prepend title part to the default title
        $this->meta
        
            // Will render "Home page - Default Title"
           ->prependTitle('Home page')
           
           // Will include next, prev, canonical links
           ->setPaginationLinks($news)
           
           // Will change default favicon
           ->setFavicon('/favicon-index.ico')
    }
}

// Or you can use the facade

use Butschster\Head\Facades\Meta;

class HomeController extends Controller 
{
    public function index()
    {
        $news = News::paginate();
        
        Meta::prependTitle('Home page')
            ->setPaginationLinks($news)
            ->setFavicon('favicon-index.ico');
    }
}

ビュー

メタタグを HTML に統合するには、{!! Meta::toHtml() !!}必要な場所に挿入するだけです。

注メタタグを挿入するには、{!! Meta::toHtml() !!}Blade ディレクティブの2 つのオプションがあります@meta_tags。

これをビューで使用する方法の例を次に示します。

<!DOCTYPE html>
<html lang="en">
<head>
    {!! Meta::toHtml() !!}
</head>
...
</html>

配置

このパッケージには、ヘッダーを超えてメタタグを挿入する柔軟性が備わっています。テンプレート内で特定の配置を定義できます。

フッターにメタタグを配置するには、次を使用します。Meta::footer()->toHtml()
カスタムプレースメントの場合は、次を使用します。Meta::placement('placement_name')->toHtml()
あるいは、Blade ディレクティブも使用できます。@meta_tags('placement_name')

<body>
...
{!! Meta::placement('middle_of_the_page')->toHtml() !!}
...
{!! Meta::footer()->toHtml() !!}
</body>

パッケージ

コードの繰り返しを避け、コードの構成を改善するために、タグ、アセットなどを名前付きパッケージにグループ化できます。これにより、必要に応じてメタタグやアセットのセットを効率的に含めることができます。

新しいパッケージを作成するには:

サービスプロバイダーに移動します。
内にパッケージを追加します\App\Providers\MetaTagsServiceProvider。

パッケージを定義するには、次のメソッドを使用できますPackageManager::create。

namespace App\Providers;

use Butschster\Head\Facades\PackageManager;
use Butschster\Head\Packages\Package;
use Illuminate\Support\ServiceProvider;

class MetaTagsServiceProvider extends ServiceProvider 
{
    ...
    protected function packages()
    {
       PackageManager::create('jquery', function(Package $package) {
          $package->addScript(
             'jquery.js', 
             'https://code.jquery.com/jquery-3.3.1.min.js', 
             ['defer']
          );
       });
       
       PackageManager::create('calendar', function(Package $package) {
          $package->requires('jquery');
          $package->addScript(
             'fullcalendar.js', 
             'https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.js', 
             ['defer']
          )->addScript(
             'fullcalendar.locales.js', 
             'https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/locales-all.min.js', 
             ['defer']
          )->addStyle(
             'fullcalendar.css', 
             'https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.css'
          );
       });
    }

    ...
}

コントローラでのパッケージの使用

コントローラー内で特定のパッケージが必要な場合は、パッケージ名を参照してそれらを含めることができます。

use Butschster\Head\Facades\Meta;

class EventsController extends Controller {

    public function show(Event $event)
    {
        // Will include all tags from calendar package
        Meta::includePackages(['calendar', ...]);
    }
}

グローバルパッケージの設定

すべてのページに含める必要があるパッケージについては、以下で定義できますconfig/meta_tags.php。

...
'packages' => [
    'jquery', 'calendar', ...
],
...

そして、それができました！これらの手順を実行すると、メタタグとアセットの処理と整理が簡単になります。

注クラスで使用可能なすべてのメソッドは、Metaこれらのパッケージ関数と一緒に利用することもできます。

API

メタ

\Butschster\Head\MetaTags\Meta

このクラスはIlluminate\Contracts\Support\Htmlableインターフェースを実装します

メソッド

メタタイトルの本体部分を設定する

Meta::setTitle('Laravel');
// <title>Laravel</title>

// You can specify max length. (By default it gets from config.)
Meta::setTitle('Laravel', 4);
// <title>Lara...</title>

タイトル部分をメインタイトルの前に付加する

Meta::setTitle('Laravel')
    ->prependTitle('Home page');
// <title>Home page - Laravel</title>

タイトル区切り文字を設定する

デフォルトでは設定から取得します

Meta::setTitleSeparator('->')
    ->setTitle('Laravel')
    ->prependTitle('Home page');
// <title>Home page -> Laravel</title>

説明を設定する

Meta::setDescription('Awesome page');
// <meta name="description" content="Awesome page">

// You can specify max length. (By default it gets from config.)
Meta::setDescription('Awesome page', 7);
// <meta name="description" content="Awesome...">

キーワードを設定する

Meta::setKeywords('Awesome keywords');
// <meta name="keywords" content="Awesome keywords">


Meta::setKeywords(['Awesome keyword', 'keyword2']);
// <meta name="keywords" content="Awesome keyword, keyword2">

// You can specify max length. (By default it gets from config.)
Meta::setKeywords(['keyword', 'keyword2'], 10);
// <meta name="keywords" content="keyword, key...">

ロボットをセットする

Meta::setRobots('nofollow,noindex');
// <meta name="robots" content="nofollow,noindex">

コンテンツタイプを設定する

Meta::setContentType('text/html');
// <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Meta::setContentType('text/html', 'ISO-8859-1');
// <meta http-equiv="Content-Type" content="text/html; ISO-8859-1">

ビューポートを設定する

Meta::setViewport('width=device-width, initial-scale=1');
// <meta name="viewport" content="width=device-width, initial-scale=1">

ウェブマスタータグを追加する複数のタグを追加できます

use Butschster\Head\MetaTags\Entities\Webmaster;

// Supported services [google, yandex, pinterest, alexa, bing]
Meta::addWebmaster(Webmaster::GOOGLE, 'f+e-Ww4=[Pp4wyEPLdVx4LxTsQ');
// <meta name="google-site-verification" content="f+e-Ww4=[Pp4wyEPLdVx4LxTsQ">

Meta::addWebmaster('yandex', 'f+e-Ww4=[Pp4wyEPLdVx4LxTsQ');
// <meta name="yandex-verification" content="f+e-Ww4=[Pp4wyEPLdVx4LxTsQ">

Meta::addWebmaster('bing', 'f+e-Ww4=[Pp4wyEPLdVx4LxTsQ');
// <meta name="msvalidate.01" content="f+e-Ww4=[Pp4wyEPLdVx4LxTsQ">

Meta::addWebmaster('alexa', 'f+e-Ww4=[Pp4wyEPLdVx4LxTsQ');
// <meta name="alexaVerifyID" content="f+e-Ww4=[Pp4wyEPLdVx4LxTsQ">

Meta::addWebmaster(Webmaster::PINTEREST, 'f+e-Ww4=[Pp4wyEPLdVx4LxTsQ');
// <meta name="p:domain_verify" content="f+e-Ww4=[Pp4wyEPLdVx4LxTsQ">

前のhrefを設定する

Meta::setPrevHref('http://site.com/prev');
// <link rel="prev" href="http://site.com/prev" />

次のhrefを設定します

Meta::setNextHref('http://site.com/next');
// <link rel="next" href="http://site.com/next" />

正規リンクを設定する

Meta::setCanonical('http://site.com');
// <link rel="canonical" href="http://site.com" />

paginator オブジェクトから正規リンク、prev、next を設定します

$news = \App\News::paginate();

Meta::setPaginationLinks($news);

// <link rel="prev" href="http://site.com/prev" />
// <link rel="next" href="http://site.com/next" />
// <link rel="canonical" href="http://site.com" />

hreflang リンクを追加する

Meta::setHrefLang('en', http://site.com/en');
Meta::setHrefLang('ru', http://site.com/ru');

// <link rel="alternate" hreflang="en" href="http://site.com/en" />
// <link rel="alternate" hreflang="ru" href="http://site.com/ru" />

HTMLドキュメントの文字エンコーディングを設定します。

Meta::setCharset();
// <meta charset="utf-8">

Meta::setCharset('ISO-8859-1');
// <meta charset="ISO-8859-1">

ファビコンを設定する

Meta::setFavicon('http://site.com/favicon.ico');
// <link rel="icon" type="image/x-icon" href="http://site.com/favicon.ico" />

Meta::setFavicon('http://site.com/favicon.png');
// <link rel="icon" type="image/png" href="http://site.com/favicon.png" />

Meta::setFavicon('http://site.com/favicon.gif');
// <link rel="icon" type="image/gif" href="http://site.com/favicon.gif" />

Meta::setFavicon('http://site.com/favicon.svg');
// <link rel="icon" type="image/svg+xml" href="http://site.com/favicon.svg" />

//You can set additional attributes
Meta::setFavicon('http://site.com/favicon.svg', ['sizes' => '16x16', 'type' => 'custom_type']);
// <link rel="icon" type="custom_type" href="http://site.com/favicon.svg" sizes="16x16" />

カスタムリンクタグを追加する

Meta::addLink('apple-touch-icon-precomposed', [
    'href' => 'http://site.com',
    'id' => 'id:213'
]);
// <link rel="apple-touch-icon-precomposed" href="http://site.com" id="id:213" />

CSS ファイルにリンクを追加する

Meta::addStyle('style.css', 'http://site.com/style.css');
// <link media="all" type="text/css" rel="stylesheet" href="http://site.com/style.css" />


// You can override or add attributes
Meta::addStyle('style.css', 'http://site.com/style.css', [
    'media' => 'custom', 'defer', 'async'
]);

// <link media="custom" type="text/css" rel="stylesheet" href="http://site.com/style.css" defer async />

スクリプトファイルへのリンクを追加する

Meta::addScript('script.js', 'http://site.com/script.js');
// <script src="http://site.com/script.js"></script>

// You can override or add attributes
Meta::addScript('script.js', 'http://site.com/script.js', ['async', 'defer', 'id' => 'hj2b3424iu2-dfsfsd']);
// <script src="http://site.com/script.js" async defer id="hj2b3424iu2-dfsfsd"></script>

// You can specify placement. By default, for scripts it's footer
Meta::addScript('script.js', 'http://site.com/script.js', [], 'custom_placement');
// <script src="http://site.com/script.js" async defer id="hj2b3424iu2-dfsfsd"></script>

カスタムタグを登録する 私たちのパッケージにはさまざまな拡張方法があります。その 1 つは、新しいタグの作成です。新しいクラスを作成し、友人やlaravelコミュニティと共有することができます。素晴らしいタグが本当に役立つと思われる場合は、新しいプルリクエストを作成することもできます。

class FacebookPixelTag implements \Butschster\Head\Contracts\MetaTags\Entities\TagInterface {

    private $pixel_id;

    public function __construct(string $id)
    {
        $this->pixel_id = $id
    }
   
    public function getPlacement(): string
    {
        return 'footer'
    }

    public function toArray()
    {
        return [
            'type' => 'facebook_pixel_tag',
            'pixel_id' => $this->pixel_id
        ];
    }
    
    public function toHtml()
    {
        return '<script type="text/javascript">...</script>'
    }
}

Meta::addTag('facebook.pixel', new FacebookPixelTag('42b3h23-34234'));
// <script type="text/javascript">...</script>

TagsCollectionからタグを登録する

$tags = new \Butschster\Head\MetaTags\TagsCollection([
    ...
]);
Meta::registerTags($tags);

// You can specify the placement 
Meta::registerTags($tags, 'footer');

名前でタグを取得する

Meta::getTag('author');

名前でタグを削除する

Meta::removeTag('author');

メタタグを追加する

Meta::addMeta('author', [
    'content' => 'butschster',
]);
// <meta name="author" content="butschster">

CSRFトークンタグを追加します。

Meta::addCsrfToken();
// <meta name="csrf-token" content="....">

すべてのタグを削除します

Meta::reset();

必要なパッケージを含める

Meta::includePackages('jquery', 'vuejs');
Meta::includePackages(['jquery', 'vuejs']);

Will load registered packages with names jquery and vuejs and append tags from there to Meta

新しいパッケージを登録し、このパッケージのすべてのタグを登録します

Meta::setTitle('Current title');

$package = new \Butschster\Head\Packages\Package('custom_package');
$package->setTitle('New title');

// Will replace "Current title" to "New title" after package registration
Meta::registerPackage($package);

同じ名前のパッケージを置き換える パッケージを新しいものに置き換えると、古いタグが削除されます

$package = new \Butschster\Head\Packages\Package('custom_package');
$package->setTitle('Custom title');

$newPackage = new \Butschster\Head\Packages\Package('custom_package');
$newPackage->setTitle('New title');

// Will replace "Current title" to "New title" after package registration
Meta::registerPackage($package);
Meta::replacePackage($newPackage);

パッケージを名前で削除します

$package = new \Butschster\Head\Packages\Package('custom_package');
$package->setTitle('Custom title');

// Will replace "Current title" to "New title" after package registration
Meta::registerPackage($package);
Meta::removePackage('custom_package');

名前でパッケージを取得

$package = new \Butschster\Head\Packages\Package('custom_package');
$package->setTitle('Custom title');

// Will replace "Current title" to "New title" after package registration
Meta::registerPackage($package);

$package = Meta::getPackage('custom_package');

メタインターフェースの使用

パッケージには、オブジェクトからメタタグを設定するのに役立つさまざまなインターフェイスがあります。

瀬尾タグ

namespace App;
use Butschster\Head\Contracts\MetaTags\SeoMetaTagsInterface;
use Butschster\Head\Contracts\MetaTags\RobotsTagsInterface;

class Page extends Model implements SeoMetaTagsInterface, RobotsTagsInterface {

    public function getTitle(): ?string
    {
        return $this->title;
    }

    public function getDescription(): ?string
    {
        return $this->description;
    }

    public function getKeywords()
    {
        return $this->keywords;
    }

    public function getRobots(): ?string
    {
        return 'noindex, nofollow';
    }
}

// Controller
use Butschster\Head\Facades\Meta;

class PageController extends Controller {

    public function show(\App\Page $page)
    {
        Meta::setMetaFrom($page);
    }
}

メタ拡張

メタオブジェクトにはMacroable特性が含まれており、それを拡張できます。

例えば

//Service Provider
Meta::macro('registerSeoMetaTagsForPage', function (\App\Page $page) {
    $this
        ->prependTitle($page->title)
        ->setKeywords($page->meta_keywords)
        ->setDescription($page->meta_description);
 
});

// Controller
use Butschster\Head\Facades\Meta;

class PageController extends Controller {

    public function show(\App\Page $page)
    {
        Meta::registerSeoMetaTagsForPage($page);
    }
}

マクロ可能な特性に関するちょっとした情報https://unnikked.ga/ Understanding- the-laravel-macroable-trait-dab051f09172

メタタグの配置

デフォルトでは、タグは先頭の配置に配置されます。独自の配置を指定し、利用可能なすべての方法を使用できます。

Meta::placement('twitter.meta')
    ->addMeta('twitter:card', [
        'content' => 'summary_large_image',
    ])
    ->includePackages('twitter')

// There is the method for footer placement
Meta::footer()->...
    
// View
<body>
    ...
    @meta_tags('twitter.meta')
    ...
    
    @meta_tags('footer')
</body>

パッケージ

パッケージオブジェクトにはメタオブジェクトと同じメソッドがあります。これを使用して、カスタムタグセットを拡張および作成できます。

\Butschster\Head\Packages\Package

このクラスはButschster\Head\MetaTags\Metaクラスを拡張します
このクラスはIlluminate\Contracts\Support\Htmlableインターフェースを実装します

新しいパッケージを作成し、PackageManager に登録します。

$package = new \Butschster\Head\Packages\Package('jquery');
PackageManager::register($package);

// or
PackageManager::create('jquery', function($package) {
    ...
});

パッケージの名前を取得する

$package = new \Butschster\Head\Packages\Package('jquery');

$package->getName(); // jquery

CSS ファイルにリンクを追加する

$package = new \Butschster\Head\Packages\Package('jquery');

$package->addStyle('style.css', 'http://site.com/style.css');
// <link media="all" type="text/css" rel="stylesheet" href="http://site.com/style.css" />


// You can change or add attributes
$package->addStyle('style.css', 'http://site.com/style.css', [
    'media' => 'custom', 'defer', 'async'
]);

// <link media="custom" type="text/css" rel="stylesheet" href="http://site.com/style.css" defer async />

スクリプトファイルへのリンクを追加する

$package = new \Butschster\Head\Packages\Package('jquery');

$package->addScript('script.js', 'http://site.com/script.js');
// <script src="http://site.com/script.js"></script>

// You can change or add attributes
$package->addScript('script.js', 'http://site.com/script.js', ['async', 'defer', 'id' => 'hj2b3424iu2-dfsfsd']);
// <script src="http://site.com/script.js" async defer id="hj2b3424iu2-dfsfsd"></script>

// You can placement. By default it's footer
$package->addScript('script.js', 'http://site.com/script.js', [], 'custom_placement');
// <script src="http://site.com/script.js" async defer id="hj2b3424iu2-dfsfsd"></script>

Meta::includePackages('jquery')->placement('custom_placement')->toHtml();

利用可能なパッケージ

OpenGraphPackage

Butschster\Head\Packages\Entities\OpenGraphPackage

このパッケージを使用して OpenGraph メタタグを管理できます

$og = new Butschster\Head\Packages\Entities\OpenGraphPackage('some_name');

$og->setType('website')
   ->setSiteName('My awesome site')
   ->setTitle('Post title');
   
// You can render itself

$og->toHtml();
// <meta name="og:type" content="website">
// <meta name="og:site_name" content="My awesome site">
// <meta name="og:title" content="Post title">

// Or just register this package in Meta class and it will be rendered automatically
Meta::registerPackage($og);

setTypeオブジェクトのタイプを設定します (例: 「video.movie」)。

$og->setType('website');
// <meta name="og:type" content="website">

setTitleグラフ内に表示されるオブジェクトのタイトルを設定します (例: 「The Rock」)。

$og->setTitle('Post title');
// <meta name="og:title" content="Post title">

setDescription説明を設定します

$og->setDescription('View the album on Flickr.');
// <meta name="og:description" content="View the album on Flickr.">

setSiteNameサイト名を設定します。

$og->setSiteName('My awesome site');
// <meta name="og:site_name" content="My awesome site">

setUrlグラフ内で永続 ID として使用されるオブジェクトの正規 URL を設定します。

$og->setUrl('https://site.com');
// <meta name="og:url" content="https://site.com">

setLocaleこれらのタグがマークアップされるロケールを設定します。 language_TERRITORY 形式の

$og->setLocale('en_US');
// <meta name="og:locale" content="en_US">

代替ロケールの追加

$og->addAlternateLocale('en_US', 'ru_RU');
// <meta name="og:locale:alternate" content="en_US">
// <meta name="og:locale:alternate" content="ru_RU">

addImageグラフ内のオブジェクトを表す画像 URL を追加します。

$og->addImage('http://site.com');
// <meta name="og:image" content="http://site.com">

// You can pass properties
$og->addImage('http://site.com', [
    'secure_url' => 'https://site.com',
    'type' => 'image/png'
]);

// <meta name="og:image" content="http://site.com">
// <meta name="og:image:secure_url" content="https://site.com">
// <meta name="og:image:type" content="image/png">

addVideoグラフ内のオブジェクトを表す画像 URL を追加します。

$og->addVideo('http://site.com');
// <meta name="og:video" content="http://site.com">

// You can pass properties
$og->addVideo('http://site.com', [
    'secure_url' => 'https://site.com',
    'type' => 'application/x-shockwave-flash'
]);

// <meta name="og:video" content="http://site.com">
// <meta name="og:video:secure_url" content="https://site.com">
// <meta name="og:video:type" content="application/x-shockwave-flash">

Twitterカードパッケージ

Butschster\Head\Packages\Entities\TwitterCardPackage

このパッケージを使用して Twitter カードのメタタグを管理できます

$card = new Butschster\Head\Packages\Entities\TwitterCardPackage('some_name');

$card->setType('summary')
   ->setSite('@username')
   ->setTitle('Post title');
   
// You can render itself

$card->toHtml();
// <meta name="twitter:card" content="summary">
// <meta name="twitter:site" content="@username">
// <meta name="twitter:title" content="Post title">

// Or just register this package in Meta class and it will be rendered automatically
Meta::registerPackage($card);

setTypeカードのタイプを設定します: summary、summary_large_image、player、app

$card->setType('summary');
// <meta name="twitter:card" content="summary">

setSiteカードフッターで使用される Web サイトの @username を設定します。

$card->setSite('@username');
// <meta name="twitter:site" content="@username">

setCreatorコンテンツ作成者/作成者の @username を設定します。

$card->setCreator('@username');
// <meta name="twitter:creator" content="@username">

setTitleタイトルを設定します

$card->setTitle('Post title');
// <meta name="twitter:title" content="Post title">

setDescription説明を設定します

$card->setDescription('View the album on Flickr.');
// <meta name="twitter:title" content="View the album on Flickr.">

setImagesummary次のタイプのカードの画像を設定します。summary_large_image

$card->setImage('https://site.com');
// <meta name="twitter:image" content="https://site.com">

setVideo次のタイプのカードにビデオを設定します。player

$card->setVideo('https://site.com/video.mp4', ['width' => 1920, 'height' => 1280]);
// <meta name="twitter:player" content="https://site.com/video.mp4">
// <meta name="twitter:player:width" content="1920">
// <meta name="twitter:player:height" content="1280">

addMetaカスタムメタタグを設定します

$card->addMeta('image:alt', 'Picture of Pavel Buchnev');
// <meta name="twitter:image:alt" content="Picture of Pavel Buchnev">

パッケージマネージャー API

パッケージマネージャーは、パッケージまたはプリセットのストアを提供します。名前で取得できます。

新しいパッケージを作成する

PackageManager::create('jquery', function($package) {
    ...
});

新しいパッケージを登録する

$package = new \Butschster\Head\Packages\Package('jquery');

PackageManager::register($package);

登録されているすべてのパッケージを取得する

PackageManager::getPackages(): array;

登録されたパッケージを名前で取得します

PackageManager::create('jquery', function($package) {
    ...
});

PackageManager::getPackage('jquery'); 
// Will return the registered pacakge or null;

依存関係

パッケージには依存関係が存在する場合があります。

PackageManager::create('jquery', function($package) {
    $package->addScript('jquery.js', 'http://site.com/jquery.min.js');
});

PackageManager::create('bootstrap4', function($package) {
    $package->requires('jquery');
    $package->addScript('bootstrap4.js', 'http://site.com/bootstrap4.min.js');
    $package->addStyle('bootstrap4.css', 'http://site.com/bootstrap4.min.css');
});

Meta::includePackages('bootstrap4'); 
// Will load jquery package also
// Head
// <link media="all" type="text/css" rel="stylesheet" href="http://site.com/bootstrap4.min.css" />

// Footer
// <script src="http://site.com/jquery.min.js"></script>
// <script src="http://site.com/bootstrap4.min.js"></script>

ヘルパークラス

鬼ごっこ

\Butschster\Head\MetaTags\Entities\Tag

新しいタグを作成する

$tag = new \Butschster\Head\MetaTags\Entities\Tag('meta', [
    'name' => 'author',
    'content' => 'butschster'
]);
// or
$tag = \Butschster\Head\MetaTags\Entities\Tag::meta([
    'name' => 'author',
    'content' => 'butschster'
]);
$tag->toHtml();
// <meta name="author" content="butschster">

// Closed tag
$tag = new \Butschster\Head\MetaTags\Entities\Tag('link', [
    'rel' => 'favicon',
    'href' => 'http://site.com'
], true);
// or
$tag = \Butschster\Head\MetaTags\Entities\Tag::link([
    'rel' => 'favicon',
    'href' => 'http://site.com'
]);

$tag->toHtml();
// <link rel="favicon" href="http://site.com" />

// Tag with anonymous function
$tag = new \Butschster\Head\MetaTags\Entities\Tag('meta', [
    'name' => 'csrf-token',
    'content' => function () {
        return Session::token();
    }
]);

$tag->toHtml();
// <meta name="csrf-token" content="8760b1d530d60d2cba6fe81cb12d67c0">

配置を設定する

$tag = new \Butschster\Head\MetaTags\Entities\Tag(...);
$tag->setPlacement('footer');

配置を取得する

$tag = new \Butschster\Head\MetaTags\Entities\Tag(...);
$tag->getPlacement() // Will return specified placement;

可視性条件を設定する

$tag = new \Butschster\Head\MetaTags\Entities\Tag(...);
$tag->visibleWhen(function () {
    return Request::ip() === '127.0.0.1';
});

タイトル

\Butschster\Head\MetaTags\Entities\Title

このクラスはタイトルの生成を担当します

タイトルのデフォルト部分を設定する

$title = new \Butschster\Head\MetaTags\Entities\Title();

$title->setTitle('Laravel');

$title->toHtml(); // <title>Laravel</title>

タイトルの新しい部分を先頭に追加する

$title = new \Butschster\Head\MetaTags\Entities\Title();

$title->setTitle('Laravel');
$title->prepend('Index page');

$title->toHtml(); // <title>Index page | Laravel</title>

デフォルトのタイトル部分の区切り文字を変更する

$title = new \Butschster\Head\MetaTags\Entities\Title();

$title->setTitle('Laravel');
$title->prepend('Index page');
$title->setSeparator('-');

$title->toHtml(); // <title>Index page - Laravel</title>

最大長を指定します (デフォルトの長さは 255)

$title = new \Butschster\Head\MetaTags\Entities\Title('Lorem Ipsum is simply dummy text of the printing and typesetting');

$title->setMaxLength(20);

$title->toHtml(); // <title>Lorem Ipsum is simpl...</title>

説明

\Butschster\Head\MetaTags\Entities\Description

脚本

\Butschster\Head\MetaTags\Entities\Script

このクラスはスクリプトリンクの生成を担当します

use Butschster\Head\MetaTags\Entities\Script;

$script = new Script('jquery.js', 'http://site.com/script.js', ['defer', 'async']);

$script->toHtml(); 
// <script src="http://site.com/script.js" defer async></script>

Meta::addTag($script);

スタイル

\Butschster\Head\MetaTags\Entities\Style

このクラスは CSS リンクの生成を担当します

use Butschster\Head\MetaTags\Entities\Style;

$style = new Style('style.css', 'http://site.com/style.css');

$style->toHtml(); 
// <link media="all" type="text/css" rel="stylesheet" href="http://site.com/style.css" />

Meta::addTag($style);

ファビコン

\Butschster\Head\MetaTags\Entities\Favicon

このクラスはファビコンリンクの生成を担当します

\Butschster\Head\MetaTags\Entities\Comment

このクラスはタグのラッパーであり、タグにコメントを追加できるようになります。

use Butschster\Head\MetaTags\Entities\Comment;
use Butschster\Head\MetaTags\Entities\Favicon;

$favicon = new Favicon('http://site.com/favicon.ico');
$comment = new Comment($favicon, 'Favicon');

Meta::addTag('favicon', $comment);

// Will render
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="http://site.com/favicon.ico" />
<!-- /Favicon -->

条件付きコメント

\Butschster\Head\MetaTags\Entities\ConditionalComment

このクラスはタグのラッパーであり、タグに条件付きコメントを追加できます。

use Butschster\Head\MetaTags\Entities\ConditionalComment;
use Butschster\Head\MetaTags\Entities\Favicon;

$favicon = new Favicon('http://site.com/favicon.ico');
$comment = new ConditionalComment($favicon, 'IE 6');

Meta::addTag('favicon', $comment);
<!--[if IE 6]>
<link rel="icon" type="image/x-icon" href="http://site.com/favicon.ico" />
<![endif]-->

グーグルアナリティクス

ヘッダー配置あり！

use Butschster\Head\MetaTags\Entities\GoogleAnalytics;
$script = new GoogleAnalytics('UA-12345678-1');

Meta::addTag('google.analytics', $script);

戻ります

<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-12345678-1', 'auto');
    ga('send', 'pageview');
</script>

Googleタグマネージャー

ヘッダー配置あり！

use Butschster\Head\MetaTags\Entities\GoogleTagManager;
$script = new GoogleTagManager('UA-12345678-1');

Meta::addTag('google.tagmanager', $script);

戻ります

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'UA-12345678-1');
</script>

ヤンデックス・メトリカ

フッター配置あり！

use \Butschster\Head\MetaTags\Entities\YandexMetrika;
$script = new YandexMetrika('20925319');

Meta::addTag('yandex.metrika', $script);

戻ります

<script type="text/javascript">
    (function (m, e, t, r, i, k, a) {
        m[i] = m[i] || function () {
            (m[i].a = m[i].a || []).push(arguments)
        };
        m[i].l = 1 * new Date();
        k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
    })
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(20925319, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true});
</script>
<noscript>
    <div><img src="https://mc.yandex.ru/watch/20925319" style="position:absolute; left:-9999px;" alt=""/></div>
</noscript>

クリックマップ設定を変更する

$script = new YandexMetrika('20925319');

$script->clickmap(bool);

ウェブバイザーの設定を変更する

$script = new YandexMetrika('20925319');

$script->webvisor(bool);

トラックリンク設定を変更する

$script = new YandexMetrika('20925319');

$script->trackLinks(bool);

正確なトラックバウンス設定を変更する

$script = new YandexMetrika('20925319');

$script->accurateTrackBounce(bool);

トラックハッシュ設定を変更する

$script = new YandexMetrika('20925319');

$script->trackHash(bool);

eコマース設定を変更する

$script = new YandexMetrika('20925319');

$script->eCommerce(string $containerName);

代替 CDN を使用する

$script = new YandexMetrika('20925319');

$script->useCDN();

noscriptタグを無効にする

$script = new YandexMetrika('20925319');

$script->disableNoScript();

JavaScript変数

use \Butschster\Head\MetaTags\Entities\JavascriptVariables;

$variables = new JavascriptVariables([
    'string' => 'Hello world',
    'number' => 4815162342,
    'bool' => true,
    'nullable' => null
]);

// you can put new variable
$variables->put('array', ['jquery', 'vuejs']);

Meta::addTag('variables', $variables);

戻ります

<script>
    window.array = ["jquery", "vuejs"];
    window.string = 'Hello world';
    window.number = 4815162342;
    window.bool = true;
    window.nullable = null;
</script>

ネームスペースを変更できる

use \Butschster\Head\MetaTags\Entities\JavascriptVariables;

$variables = new JavascriptVariables([
    'string' => 'Hello world',
    'number' => 4815162342,
], 'custom');

戻ります

<script>
    window.custom = window.custom || {};
    custom.string = 'Hello world';
    custom.number = 4815162342;
</script>

ユースケース

複数のファビコン

そのために独自のパッケージを使用できます。

まず、MetaTagsServiceProvider でパッケージを作成します。App\Providers\MetaTagsServiceProvider

namespace App\Providers;

use Butschster\Head\MetaTags\Entities\Favicon;
use Butschster\Head\MetaTags\Entities\ConditionalComment;
use Butschster\Head\Facades\PackageManager;
use Butschster\Head\Packages\Package;

class MetaTagsServiceProvider extends ServiceProvider {

    ...
    
    protected function packages()
    {
        PackageManager::create('favicons', function(Package $package) {
            $sizes = ['16x16', '32x32', '64x64'];
    
            foreach ($sizes as $size) {
                $package->addTag(
                    'favicon.'.$size, 
                    new Favicon('http://site.com/favicon-'.$size.'.png', [
                        'sizes' => $size
                    ])
                );
            }
    
            $package->addTag('favicon.ie', new ConditionalComment(
                new Favicon('http://site.com/favicon-ie.png'), 'IE gt 6'
            ));
        });
    }
    
    ...
}

次に、このパッケージを次のpackagesセクションに追加しますconfig/meta_tags.php。

...
'packages' => [
    'favicons'
],
...

そして、各ページの head セクションには次のような内容が表示されます。

<head>
    ...
    <title>...</title>
    <link rel="icon" type="image/png" href="http://site.com/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="http://site.com/favicon-32x32.png" sizes="32x32"/>
    <link rel="icon" type="image/png" href="http://site.com/favicon-64x64.png" sizes="64x64"/>
    <!--[if IE gt 6]>
    <link rel="icon" type="image/png" href="http://site.com/favicon-ie.png" />
    <![endif]-->
    ...
</head>

延長中

Meta クラスを拡張したい場合は、で行うことができますApp\Providers\MetaTagsServiceProvider。メソッドをオーバーライドするだけですregisterMeta。

namespace App\Providers;

use Butschster\Head\MetaTags\Meta;
use Butschster\Head\Contracts\MetaTags\MetaInterface;
use Butschster\Head\Contracts\Packages\ManagerInterface;

class MetaTagsServiceProvider {

    ...

    protected function registerMeta(): void
    {
        $this->app->singleton(MetaInterface::class, function () {
            $meta = new Meta(
                $this->app[ManagerInterface::class],
                $this->app['config']
            );
    
    
            // It just an imagination, you can automatically 
            // add favicon if it exists
            if (file_exists(public_path('favicon.ico'))) {
                $meta->setFavicon('/favicon.ico');
            }
    
            $meta->includePackages('fonts', 'assets');
            
            // This method gets default values from config and creates tags
            // If you don't want to use default values just remove it.
            $meta->initialize();
    
            return $meta;
        });
    }

    ...
}

inertiajs または vue-meta での使用

JSプロジェクトの値を使用して、メタオブジェクトを配列に簡単に変換できます。

$meta = Meta::setTitle('Laravel')
    ->setDescription('Awesome page')
    ->setKeywords('php, laravel, ...');

dd($meta->toArray());

[
    'head' => [
        [
            'tag' => 'title',
            'content' => 'Laravel',
        ],
        [
            'name' => 'description',
            'content' => 'Awesome page',
            'type' => 'tag',
            'tag' => 'meta',
        ],
        [
            'name' => 'keywords',
            'content' => 'php, laravel, ...',
            'type' => 'tag',
            'tag' => 'meta',
        ],
    ]
]

inertiaJ の例

use Inertia\Inertia;
use Butschster\Head\MetaTags\MetaInterface;
use Butschster\Head\Hydrator\VueMetaHydrator;

class EventsController extends Controller
{
    protected $meta;
 
    public function __contruct(MetaInterface $meta)
    {
        $this->meta = $meta;
    }
    
    public function show(Event $event, VueMetaHydrator $hydrator)
    {
        $this->meta->setTitle('Laravel')
            ->setDescription('Awesome page')
            ->setKeywords('php, laravel, ...');
    
        return Inertia::render('Event/Show', [
            'event' => $event->only('id', 'title', 'start_date', 'description'),
            
            // this.$page.props.meta...
            'meta' => $hydrator->hydrate($this->meta)
        ]);
    }
}

について

Laravel プロジェクトで SEO メタタグを管理するための最も強力で拡張可能なツール

リリース 36

v3.0-ベータ1最新 2023 年 9 月 10 日

+ 35 リリース

このプロジェクトのスポンサーになる

貢献者9

言語

PHP100.0%

Laravel プロジェクトで SEO メタタグを管理するための最も強力で拡張可能なツール

貢献する

特徴

要件

インストールと構成

使用法

コントローラ

ビュー

配置

パッケージ

コントローラでのパッケージの使用

グローバルパッケージの設定

API

メタ

メソッド

メタインターフェースの使用

メタ拡張

メタタグの配置

パッケージ

利用可能なパッケージ

OpenGraphPackage

Twitterカードパッケージ

パッケージマネージャー API

依存関係

ヘルパークラス

鬼ごっこ

タイトル

説明

脚本

スタイル

ファビコン

コメント

条件付きコメント

グーグルアナリティクス

Googleタグマネージャー

ヤンデックス・メトリカ

JavaScript変数

ユースケース

複数のファビコン

延長中

inertiajs または vue-meta での使用

について

トピック

リソース

ライセンス

出演者

ウォッチャー

フォーク

リリース 36

このプロジェクトのスポンサーになる

貢献者9

言語

フッター

フッターナビゲーション

No responses yet

コメントを残す コメントをキャンセル

Latest Comments

コメントを残すコメントをキャンセル