Social Meta Tags プラグインを使ってみた - GRAV -
GRAV のプラグインに 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があればその内容をタグに設定します。
イメージに関しては設定前に、800ｘ800のサイズに加工するようにしました。
Twitterの仕様で正方形のほうがきれいに表示されるらしいので、それに合わせました。
ページのメタタグが正常に機能するか（TwitterCardが表示されるか）は以下のページで確認できます。
https://cards-dev.twitter.com/validator
カードがレンダリングされなくてもログに「Card loaded successfully」と出ていればメタデータは正常です。
これで先に追加したのTweetボタンと組み合わせて、リンクをクリックするだけで、ツイート内にページの情報が入力され、見た目のいいTwitterCard で表示されるようになりました。
画像やページの内容がTwitterCardに反映するまでには多少時間がかかります。または一度目は反映しないので確認する場合は何回か試してみてください。
Last edited: 2024-07-31 02:07