GRAV のプラグインに Social Meta Tags というのがあります。

GRAV Plugin Social Meta Tags

SNS 用のメタタグをページに追加してくれるプラグインです。
最近Twitterを利用しているのですが、毎回投稿用に画像を用意したりツイート内容を書くよりも、サイトへのリンクを張ったときに自動でテキストや画像などが表示される「Twitter Card」という機能を利用したほうが、見た目的にも効率的にもいいんじゃなかろうか、と思い至りました。

ということでつけてみました( ゚Д゚)

 

管理画面からインストールするだけなので簡単です。

プラグインの追加から一覧が表示されるので「インストール」ボタンをポチ。

あとはインストールが完了するのを待つだけです。

 

設定項目も最低限です。

設定項目も最低限

Facebook の設定もありますが、今回はTwitterのみ使います。

CardTypeにはコンパクトに表示されるSummary Cardか、大きな画像が表示されるSummary Card with large Imageが選べます。

「Summary Card with large Image」は結構画像が大きいので、Tweetしてもらうのにちょっと気が引けます。

お好みでOKですが、私は一般的な Summary Card にしてみました。

Username にはTwitterのユーザーネーム(@なし)を入力しておきます。

 

https://cards-dev.twitter.com/validator

ページを確認すると、headerタグ内に無事メタタグが追加されていますが、すこし手を加えたほうがいい感じです。

プラグインは Description の内容にPage のDescriptionではなくコンテンツの先頭から文章を切り出して使用しているようです。
もうひとつ、画像はページメディアの先頭のものをそのまま使用しているようです。

これだと少々具合が悪いので、改造してしまいましょう。

Files: [GRAVインストール先]/user/plugins/social-meta-tags/social-meta-tags.php

~~~
            if (!isset($meta['twitter:description'])) {
                $meta['twitter:description']['name']     = 'twitter:description';
                $meta['twitter:description']['property'] = 'twitter:description';
                $meta['twitter:description']['content']  = $this->sanitizeMarkdowns(strip_tags($this->grav['page']->summary()));
            }

            if (!isset($meta['twitter:image'])) {
                if (!empty($this->grav['page']->value('media.image'))) {
                    $images = $this->grav['page']->media()->images();
                    $image  = array_shift($images);

                    $meta['twitter:image']['name']     = 'twitter:image';
                    $meta['twitter:image']['property'] = 'twitter:image';
                    $meta['twitter:image']['content']  = $this->grav['uri']->base() . $image->url();
                }
            }
~~~

ソースでも確認してみると、Descriptionはページのサマリーから切り出しているようです。
イメージの方は予想通り、メディア配列の先頭を使っていました。

希望の動きになるように改造します。

 

Files: [GRAVインストール先]/user/plugins/social-meta-tags/social-meta-tags.php

~~~
            if (!isset($meta['twitter:description'])) {
                $meta['twitter:description']['name']     = 'twitter:description';
                $meta['twitter:description']['property'] = 'twitter:description';
                $meta['twitter:description']['content']  = $this->sanitizeMarkdowns(strip_tags($this->grav['page']->summary()));

                $page = $this->grav['page'];
                foreach ($page->metadata() as $key=>$value)
                {
                    if ($key == 'description' && isset($value['content']))
                    {
                        $meta['twitter:description']['content'] = strip_tags($value['content']);
                    }
                }

            }

            if (!isset($meta['twitter:image'])) {
                if (!empty($this->grav['page']->value('media.image'))) {
                    $images = $this->grav['page']->media()->images();
                    $image  = array_shift($images);

                    $meta['twitter:image']['name']     = 'twitter:image';
                    $meta['twitter:image']['property'] = 'twitter:image';
                    $meta['twitter:image']['content']  = $this->grav['uri']->base() . $image->cropZoom(800,800)->url();
                }

            }
~~~

ページのメタデータ配列にdescriptionがあればその内容をタグに設定します。

イメージに関しては設定前に、800x800のサイズに加工するようにしました。
Twitterの仕様で正方形のほうがきれいに表示されるらしいので、それに合わせました。

ページのメタタグが正常に機能するか(TwitterCardが表示されるか)は以下のページで確認できます。

https://cards-dev.twitter.com/validator

カードがレンダリングされなくてもログに「Card loaded successfully」と出ていればメタデータは正常です。

 

これで先に追加したのTweetボタンと組み合わせて、リンクをクリックするだけで、ツイート内にページの情報が入力され、見た目のいいTwitterCard で表示されるようになりました。

TwitterCard で表示

画像やページの内容がTwitterCardに反映するまでには多少時間がかかります。または一度目は反映しないので確認する場合は何回か試してみてください。

 

ツイート いいんじゃね。と感じたらツイートしてもらえると喜びます。

タイーツ タイーツもできます。

Next Post Previous Post