2016年04月04日


Seesaa のブログで超簡単に Twitter カードを使う。超簡単に、記事毎の画像も指定できます。



記事コンテンツの先頭に以下のコードを貼り付けます
<% if:page_name eq 'article' -%>
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:image" content="画像のURL" >
<meta name="twitter:site" content="@ユーザ名" >
<meta name="twitter:title" content="<% article.subject | tag_strip %>">
<meta name="twitter:description" content="<% article.body | tag_strip | oneline | text_summary(100) %>">
<% /if -%>

Twitter カードの表示に記事の本文の先頭部分を表示したいので、コンテンツ => 記事 => コンテンツHTML編集 で貼り付けます。ここでの画像は、記事毎の画像を指定しなかった時の画像です。どこかにアップロードしておいて、URL を指定します。

記事毎の画像

Twitter カードでは、後から指定された画像用の META 要素が使用されるようなので、記事毎の画像は記事の先頭に META 要素をそのまま貼り付けます

表示の確認

画像を変更した場合は必ず実行しておきます。

▼ Card validator
https://cards-dev.twitter.com/validator

記事の URL を指定して Preview card ボタンをクリックします








関連する記事

Seesaa ブログで Twitter カードを使用する方法





posted by at 13:17 | WEBサービス | このブログの読者になる | 更新情報をチェックする