エンジニアスキルの整理倉庫

Laravelで使用できるSEOライブラリの調査

Laravelで作るWebサイトにSEOを導入するために、ツール等を検索した結果、色々ヒットしたので、簡単にまとめてみました。


今回はGithubに公開されているものから、SEO用のmetaタグを一通り出力してくれるものを３つピックアップしています。


■artesaos/seotools

下記のタグ出力を補完してくれるライブラリです。

  • 一般的なSEO用metaタグ
  • OpenGraphタグ
  • Twitterカード用タグ
  • JSON LDデータ
  • etc.


ontrollerでコンテンツデータをもとにmetaタグ用のデータをセットし、Viewで出力したいタグのファサードを記述する、というシンプルな構造です。セットアップ時に作成される”config/seotools.php”にタグごとの初期値を入れておけば、Controllerで値をセットしていないタグに関しても、適切なタグ出力が可能となります。

また、SEOMeta::addMeta()を使用すれば、特殊なタグネームに関しても対応可能です。


特徴としては、ファサードが充実しており、ソースコードの可読性が高いです。

例えば、Twitterカード用のファサードを例にとります。


<?php
use Artesaos\SEOTools\Facades\TwitterCard;
TwitterCard::addValue($key, $value); // value can be string or array
TwitterCard::setType($type); // type of twitter card tag
TwitterCard::setTitle($type); // title of twitter card tag
TwitterCard::setSite($type); // site of twitter card tag
TwitterCard::setDescription($type); // description of twitter card tag
TwitterCard::setUrl($type); // url of twitter card tag
TwitterCard::setImage($url); // add image url



実際のコーディングでは、

TwitterCard::addValue($key, $value)
　          ->setType($type)
            ->setImage($url)
            ->setTitle($title)
            ->setDescription($description)
            ->setUrl($url)
            ->setSite($name);

のように記述可能です。


Viewで出力する場合は、下記を記述します。

TwitterCard::generate();


■romanzipp/Laravel-SEO

下記のタグ出力を補完してくれます。

  • 一般的なSEO用タグ
  • OpenGraphタグ
  • Twitterカード用タグ
  • JSON LDデータ
  • prefetch/preloadリンク
  • etc.


artesaos/seotoolsと同じように、Contloeerでタグ用データをセットし、Viewで出力しますが、ファサードは用意されていません。ControllerからViewへSEOクラス変数を渡し、blade内でメソッドを呼び出すことで、metaタグを出力します。特殊なタグを追加する場合は、add()、addmany()、addif()などのメソッドがあります。特徴的な機能として、は下記の2点です(他にもありますが、全部を追い切れていません)。


・同種タグに関する記述の省略

例えば、SEOタグ、OpenGraphタグ、Twitterカード用タグには、"title"、description等の同じ意味を持つタグがありますが、これらはまとめて記述することが可能です。

例えば、

seo()->title("hoge");

のように"title"の値をセットすると、タグ出力時は、

<title>hoge</title>
<meta property="og:title" content="hoge" />
<meta name="twitter:title" content="hoge" />

と、３種類まとめて出力されます。


・section機能

SEOクラスにsectionというメソッドがあります。sectionごとにタグ用データを使い分けることが可能です。

seo()->title("Title1");
seo()->section("secondary")->title("Title2");

View側でタグを使い分けたい時は重宝しそうです。


■butschster/LaravelMetaTags


SEO関連のmetaタグだけではなく、<script>等などのhtmlタグの出力のコントロールを可能とするライブラリです。SEO関連のタグに関しては、下記の出力をサポートしています。

  • 一般的なSEO用タグ
  • OpenGraphタグ
  • Twitterカード用タグ
  • etc.


インストール・設定を行うとconfig/meta_tags.phpが作成され、各metaタグのデフォルト値はここに記載することになります。


基本的に、Controllerでmetaタグの値をセットし、Viewで出力する、というこれまでの2つと同様の使い方ですが、Controller側でタグをコントロールすることを主眼に置いているようです。<script>やcssのリンクもControllerで設定可能なので、Controllerで状況判断してブラウザ側の見た目や動作をコントロールする、ということをサポートしてくれます。


他に特徴的なのは「パッケージ」という概念でしょうか。LaravelMetaTagsでいう「パッケージ（Package）」は、機能を1つにまとめたクラスのようなものです。

例えば、フロントエンドフレームワークであるBootStrap4.5に関するリンクを作成するケースを考えます。BootStrap4.5を使用するには、cssのリンクと<body>の一番最後に、jquery、popper.js、bootstrap.jsの<script>リンクを置く必要があります。これをServiceProvider等に記述する場合、下記のようになります。

PackageManager::create("jquery", function($package) {
    $package->addScript("jquery.js", "https://code.jquery.com/jquery-3.5.1.slim.min.js");
});
PackageManager::create("bootstrap4.5", function($package) {
    $package->requires("jquery");
    $package->addScript("bootstrap4.5.js", "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js");
    $package->addScript("popper.js", "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js");
    $package->addStyle("bootstrap4.5.css", "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");


Viewの出力は以下の通り。

Meta::includePackages("bootstrap4.5"); //出力
//ページ上部
<link media="all" type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
// ページ下部
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>



場合によっては、CSSスタイルシートはカスタムしたものと使い分けたい、ということもあるかもしれません。その場合は、新たにパッケージを追加します。

ackageManager::create("bootstrap4.5-custom", function($package) {
    $package->requires("jquery");
    $package->addScript("bootstrap4.5.js", "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js");
    $package->addScript("popper.js", "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js");
    $package->addStyle("bootstrap4.5.css", "https://example.com/css/custom.css");
});


View出力は下記。

Meta::includePackages("bootstrap4.5-custom");


パッケージは、たくさんの種別があり、Twitterカード、OpenGrasphの他、FaviconやGoogle Analytics、Google TagManager等、機能がかなり豊富です。その分使いこなすにはそれなりの時間を必要になりそうです。



一覧へ戻る