ツイッターカードに本文を入れる

投稿：2019-03-11

背景

ブログ記事を紹介するツイートに表示されるツイッターカード、あれが記事の本文になっているのを見た事がありますよね？自分のサイトでもやりたい。こういう奴。

注意

以前、ツイッターカードをサポートした際に概要を固定の文言「個人サイトです。」にしていて、今回の修正で本文を入れます。当時のはツイッター独自の形式で、これは今でも使えますが、これからカードをサポートされる方は他のサービスと共通の形式を使ったほうが手間が減ると思います。

ツイッターカードの仕組み

ここに載っています。
Summary card ? Twitter Developers

テンプレート

トップレベルのdefault.html.epからツイッターカードのテンプレートを呼び出します。

<!DOCTYPE html>
<html lang="ja">
<head>
%= include "google_analytics"
%= include "google_adsense"
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><%= $page_title %></title>
<link rel="stylesheet" href="<%= $rootpath %>ppmod.css" />
<link rel="shortcut icon" href="<%= $rootpath %>favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
%= include "twitter"
<%== $tag_link %>
</head>
<body>
<%= content %>
</body>
</html>

ツイッターカードのテンプレートtwitter.html.epがスタッシュ$twitter_descriptionを埋め込みます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<%= $twitter_site %>" />
<meta name="twitter:title" content="<%= $page_title %>" />
<meta name="twitter:description" content="<%= $twitter_description %>" />
<meta name="twitter:image" content="<%= $twitter_image %>" />

カードのデフォルト

アプリケーションのstartupにカードのデフォルトを設定しておきます。

# stashのデフォルト
$self->defaults(
	twitter_site => '@lemorin_jp',
	twitter_title => "ホーム - ルモーリン",
	twitter_description => "個人サイト",
	twitter_image => "https://www.lemorin.jp/twitter_card.jpg",
);

コントローラー

記事を表示するコントローラーArticle.pmの原稿を読み出した所でスタッシュ$twitter_descriptionを設定します。その後で、レンダーを呼び出せばテンプレートが展開されて、ツイッターカードの設定が入ります。カードに見せたいのは本文なので、記事からタグを抜き、タイトルと最初の見出しを削除して本文としています。

@html = $self->PpDraft($article);

# ツイッターカードの概要を設定
my $description = Mojo::DOM->new->parse("@html")->all_text;
$description = substr $description, 0, 128;
$description =~ s#\s+# #g;
$description =~ s#^ ##;
$description =~ s# $##;
# 頭２個はタイトルと見出しなので削除
$description =~ s#^[^ ]+ ##;
$description =~ s#^[^ ]+ ##;
$self->stash(twitter_description => $description);

カードのチェック

チェックできるサイトがあります。こちらのサイトにURLを入力すると、ツイッターカードがどう見えるのか分かります。

Card Validator | Twitter Developers