JekyllテンプレートでのTwitterカードの定義
Twitterカードは、Twitted時にコンテンツを強調表示するための優れた方法です。 利用可能なフォーマットはいくつかありますが、 Summary / w LargeImageが私のお気に入りです。 これが私のhead.htmlインクルードファイルのJekyllでどのように定義したかです:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@alligatorio">
<meta name="twitter:title" content="{{ page.title }}">
{% if page.description %}
<meta name="twitter:description"
content="{{ page.meta_description }}">
{% else %}
<meta name="twitter:description"
content="{{ page.content | strip_html | xml_escape
| truncate: 200 }}">
{% endif %}
いくつかのメモ
ページにメタディスクリプションが定義されていない場合は、Jekyllテンプレートフィルターを使用して投稿の最初の200語を取得します。 PaulStamatiouのトリックに感謝します。 投稿にサムネイルが定義されていない場合は、サイトの一般的なカバー画像を取得します。
明らかに、自分のサイトのTwitterハンドルを反映するようにtwitter:siteを変更する必要があります。 必要に応じて、特定の投稿の作成者のTwitterハンドルにコンテンツを設定してtwitter:creatorを定義することもできます。 おそらくこれについては、投稿の Jekyll FrontMatterで作成者が定義されているかどうかを確認できます。
カードの検証
このツールを使用して、Twitterカードを検証できます。 ラージイメージタイプのサマリーカードには、twitter:card、twitter:site、twitter:title、twitter:descriptionが必要です。