Twitter Cards

Twitter 投稿する場合は必須

Twitter を使っている方はご存知かと思いますが、Twitter でリンクを貼り付けてツイートした場合 Twitter Cards が設定されていないサイトの URL を貼り付けると普通のツイートと変わらない地味な見た目となります¹。なので Twitter で記事を紹介したい場合などは設定が必須となります。具体的には以下のような <meta> タグを書いておけば Twitter 投稿時に解釈してくれます:

<meta name="twitter:title" content="コジオニルク"/>
<meta name="twitter:site" content="@kojionilk"/>
<meta name="twitter:description" content="日記帳です。"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:image" content="http://www.kojion.com/twitter.png"/>

ですので、このような内容を自動で生成して含めることができるようにすれば良いわけですが、そのためにテーマを拡張する必要があります。これに関してはふうせん様の記事が非常に参考になりました。

拡張テーマ

拡張テーマを使用します。これに関しては Giscus に書きましたが再掲します。まず mkdocs.yml に拡張テーマを格納するための設定及びディレクトリを用意します。

theme:
  custom_dir: overrides

次に overrides/main.html に以下の内容を記述してください:

{% extends "base.html" %}

{% block extrahead %}
  {% set title = config.site_name %}
  {% if page and page.title and not page.is_homepage %}
    {% set title = page.title ~ " - " ~ config.site_name | striptags %}
  {% endif %}
  {% set description = config.site_description %}
  {% if page and page.meta.description %}
    {% set description = page.meta.description %}
  {% endif %}
  {% set image = config.site_url ~ 'assets/twitter.jpg' %}
  {% if page and page.meta.image %}
    {% set image = config.site_url ~ page.meta.image %}
  {% endif %}
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:title" content="{{ title }}">
  <meta name="twitter:title" content="{{ title }}">
  <meta property="og:description" content="{{ description }}">
  <meta name="twitter:description" content="{{ description }}">
  <meta property="og:image" content="{{ image }}">
  <meta name="twitter:image" content="{{ image }}">
  <meta property="og:url" content="{{ page.canonical_url }}">
{% endblock %}

これにより各 Markdown ファイルの先頭 description や image といったメタデータがあればそれを使用し、なければデフォルトの値を使用するといった挙動となります。ただ、メタデータを記述するために mkdocs.yml に設定が必要なので、この後それを行います。

動作確認

Twitter Card Validator にデプロイしたサイトの対象 URL を貼り付けて Twitter Cards のメタタグが正しく生成されているかを確認します。若しくは Twitter で試しにツイートしてみて、すぐに削除してもよいでしょう。

そのためにそういうサイトのツイートをする際はあえて画面キャプチャしてその画像と一緒にリンクを貼り付けて目立つようにするなど工夫すると良いです ↩

Twitter Cards

Twitter 投稿する場合は必須

拡張テーマ

Meta

動作確認

コメント