bon now

METAタグでogという要素を用いることでSlackにリンクをきれいに出すことができることに気づいたのがちょっと前。 その流れでTwitterにもきっときれいに投稿されるはずだと思って試して駄目だったのが昨日の出来事である。 今日はそのTwitterにカード表示するという対応を実践した。

Wordpressだとプラグインがあって勝手にやってくれるらしい。
僕はMiddlemanなので、METAタグ生成用のGemライブラリを導入した。
Middleman MetaTags - GitHub

実際使ってみてなんだけど、デフォルト設定の仕方とか知識不足でよくわからなかったので、 結局 layoutsディレクトリ配下のファイルにerb式で埋め込んだ。 個別の記事とTOPページで生成されるMETAタグの内容が異なるので結局2つ用意した感じ。 以下は個別記事の例。

1
2
3
4
5
6
7
<% set_meta_tags site: "bon now" %>
<% set_meta_tags title: current_article.title %>
<% set_meta_tags description: Nokogiri::HTML(current_article.body).at_css('p').text %>
<% set_meta_tags twitter_author: "@bontar0" %>
<% set_meta_tags pull_image: "https://www.bon10.dev/img/logo.png" %>

<%= auto_display_meta_tags %>

注目部分としてはNokogiri使ってコンテンツの最初だけ切り取っているところかな？ 本当は300文字以内にしなきゃいけないんだけど、多分大丈夫とおもって対策してない。 これでちゃんとMiddlemanブログでもTwitterに記事がカード形式で表示されるようになった！

今後の対応としてはアイキャッチ画像だけど、設定する予定がないので多分ずっとこのまま。

以上、これだけでもだいぶ勉強になった改善であった。
(IFTTTがちゃんと連携してくれないとTwitterに投稿されないという問題は残っているが……)