Updated:
テクニカルブログ

hexoでtwitter cardの設定を変更する

背景

しばらく使っていなかったtwitterをブログの記事更新の告知に使おうと思って投稿してみました。自分のツイートを見てみると、twitterカードがうまく表示できていませんでした。titleやdescriptionはデフォルトである程度設定してくれているようです。なのでtwitterカードのカスタマイズを行おうと思います。

headタグがあるpartialを探す

OGP関連の記述はheadタグ内にあります。headタグはどのpartialで記述されているのでしょうか。とりあえずthemesディレクトリ配下をgrepしてみました。

1
2
3
4
5
6
7
8
9
10
11
12
$ grep -R twitter themes
themes/landscape/layout/_partial/head.ejs:  <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
themes/landscape/source/css/_variables.styl:color-twitter = #00aced
themes/landscape/source/css/_partial/article.styl:.article-share-twitter
themes/landscape/source/css/_partial/article.styl:    background: color-twitter
themes/landscape/source/css/_partial/article.styl:    text-shadow: 0 1px darken(color-twitter, 20%)
Binary file themes/landscape/source/css/fonts/FontAwesome.otf matches
Binary file themes/landscape/source/css/fonts/fontawesome-webfont.ttf matches
themes/landscape/source/js/script.js:            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
themes/landscape/README.md:twitter:
themes/landscape/README.md:- **twitter** - Twiiter ID
themes/landscape/_config.yml:twitter:

最初に見つかったtheme/landscape/layout/_partial/head.ejsがそれっぽいですね。中身を確認してみます。

1
2
3
4
5
6
23   <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
24   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
25   <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
26   <% if (theme.rss){ %>
27     <link rel="alternate" href="<%= url_for(theme.rss) %>" title="<%= config.title %>" type="application/atom+xml">
28   <% } %>

実際に出力されるHTMLを見ると、25行目の1行でOGP関連のタグを全て出力していることがわかります。カスタマイズするにはopen_graphというヘルパメソッド？がなにをしているのかを理解する必要がありそうです。メソッドがどこで定義されているかを確認します。

open_graphメソッド

open_graphメソッドはどこで定義されているかを確認します。
hexoアプリケーションのTOPでgrepしてみます。

1
2
3
$ grep -R open_graph .
./themes/landscape/layout/_partial/head.ejs:  <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id, twitter_card: 'summary_large_image', image: '/css/images/banner.jpg', twitter_site: '@motoa'}) %>
./node_modules/hexo/lib/plugins/helper/index.js:  helper.register('open_graph', require('./open_graph'));

1行目は先ほどのpartialですね。2行目が定義箇所っぽいですね。該当のファイルの中身を見てみます。

1
2
3
4
5
6
43   helper.register('list_tags', require('./list_tags'));
44   helper.register('list_posts', require('./list_posts'));
45
46   helper.register('open_graph', require('./open_graph'));
47
48   helper.register('number_format', require('./number_format'));

正確には理解できてないですが、open_graphというhelperを登録しているような感じでしょうか。helperの処理はrequire('./open_graph')の戻り値なのでしょう。同じディレクトリにあるopen_graph.jsを見てみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
118   result += meta('twitter:card', twitterCard);
119   result += meta('twitter:title', title);
120   if (description) {
121     result += meta('twitter:description', description, false);
122   }
123
124   if (images.length) {
125     result += meta('twitter:image', images[0], false);
126   }
127
128   if (options.twitter_id) {
129     let twitterId = options.twitter_id;
130     if (twitterId[0] !== '@') twitterId = `@${twitterId}`;
131
132     result += meta('twitter:creator', twitterId);
133   }
134
135   if (options.twitter_site) {
136     result += meta('twitter:site', options.twitter_site, false);
137   }

twitter関連の設定をしている箇所はこんな感じでした。twitterカードの種類（summary, summary_large_image）の設定はtwitterCardという変数で設定されているようです。twitterCardという変数はどこで定義されているのか確認します。

1
42   const twitterCard = options.twitter_card || 'summary';

変数ではなく定数でした。options.twitter_cardが指定されていればそれを、指定されていなければsummaryになるということですね。デフォルトはsummaryになるので、なにも設定していない現在はsummaryになっています。

では、optionsを確認します。

1
30 function openGraphHelper(options = {}) {

optionsはこの関数の引数でした。ということは、open_graphメソッドの引数のハッシュにtwitter_cardというキーでtwitterカードの種類を設定すればできそうですね。

試してみる

theme/landscape/layout/_partial/head.ejsのopen_graphの呼び出しを以下のように変更してみます。

1
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id, twitter_card: 'summary_large_image', image: '/css/images/banner.jpg'}) %>

twitter_cardをsummary_large_imageに指定しました。またその際に表示する画像をimageで指定しています。今回は試しにキービジュアルの画像を指定しています。

確認

twitter card validatorを利用します。TOPページのURLを入力し、Preview cardをクリックします。

twitter card validatorの結果

summary_large_imageで表示できました！

まとめ

hexoのOGP関連の設定をカスタマイズしてみました。今回の設定だと全てのtwitter:imageがキービジュアルの画像になってしまうので、次回は記事ごとにtwitter:imageを変更できるようにしてみたいと思います。