ツイッターカードに本文を入れる
投稿: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# $##; # 頭2個はタイトルと見出しなので削除 $description =~ s#^[^ ]+ ##; $description =~ s#^[^ ]+ ##; $self->stash(twitter_description => $description);
チェックできるサイトがあります。 こちらのサイトにURLを入力すると、ツイッターカードがどう見えるのか分かります。
Card Validator | Twitter Developers