SphinxにTwitter Cardを出力させる

Sphinx（実際はAblogですが）にTwitter cardを出力させてみます。

実際にはmake html（ablog build）一発では出力されず、出力後にhtmlファイルの修正が必要になります。

目次

  1. Twitter Cardとは
  2. HTMLにおけるTwitter Cardの設定の仕方
  3. SphinxでのMetaタグ出力
  4. metaタグのnameにどうやってコロンを入れるか

Twitter Cardとは

Twitterのタイムラインを眺めていると、ウェブサイトを紹介するツイートにそのサイトのアイキャッチ画像が表示されていることがあります。これをhtmlのヘッダにメタタグを設定することで実現します。

HTMLにおけるTwitter Cardの設定の仕方

Cards Markup Tag Reference を参照してください。

最低限必要なタグはこれです。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="サイトの説明文" />
<meta name="twitter:image" content="アイキャッチ画像の絶対URL"

これを<head>と</head>の間に書きます。

SphinxでのMetaタグ出力

SphinxからHTML出力するときのメタタグの指定は、metaディレクティブで行います。

.. meta::
   :nameの内容: contentの内容

ちょっとわかりにくいのですが、これをHTML出力するとこうなります。

<meta name="nameの内容" content="contentの内容" />

card、title、description、imageのそれぞれにmetaディレクティブを書きます。つまり、metaディレクティブが少なくとも4つ必要になります。

ここで問題が発生します。

Sphinxのディレクティブのオプションにはコロンが使えません。

metaタグのnameにどうやってコロンを入れるか

￥でエスケープしてみる

￥でコロンをエスケープすると、エラーが出ずに通ります。しかし、￥（バックスラッシュ）も一緒にタグに出力されてしまいます。

HTMLエンコードしてみる

HTML内に＜や＞を書くときのようにエンコードしてみます。ところが、ビルドするとエンコード用の＆もエンコードされてしまいます。 まあ、エンコードがうまくいってもTwitterが認識してくれるとは限らないのですが。

テキストエディタで直す

仕方がないので、テキストエディタで直すことにします。

自動化したいなあ。 Linuxの人ならgrepとsedで置換してしまうのでしょうねえ。

Pythonで画像を拡大縮小（リサイズ）する（Pillow編）   Pythonで画像を読み込み、表示し、保存する（OpenCV編）

公開日

広告

PCカテゴリの投稿