2015年11月28日土曜日

Blogger.com (blogspot)のツイッターカードにサムネイルを設定する 2016年版


過去に当ブログのURLをツイッターに投稿するとツイートにプレビューが表示されるように設定した手順を書きました。
Blogger.com(blogspot)のブログにツイッターカード(リンク先のプレビュー)を設定する

あとで分かった次の2点について追記します。
投稿ごとのサムネイル画像の表示
投稿ごとの説明文(description)の表示


環境

・Blogger.com (blogspot)


最低限必要なmetaタグの設定

マイブログの左メニューからテンプレートを開き、HTMLの編集をクリックします。

<head>タグのすぐ下または、</head>タグのすぐ上に次の4行をコピーして貼り付けます。




投稿ごとにサムネイル画像を表示する

テンプレートを開き、HTMLの編集に
<b:includable id='mobile-post' var='post'>
という行が2カ所あるので
2カ所ともその下に次のタグを入力します。

これで投稿の1枚目の画像がサムネイル表示されます。
画像が投稿されていなければサムネイルには何も表示されません。



投稿ごとに説明文(description)を表示する

ツイッターカードの説明文(description)は長い文字は途中で省略されてしまうので100文字程度の文章を考えて設定するといいと思います。
投稿ごとに説明文を次のHTMLタグで入力します。




課題

Blogger.comのレイアウトデータタグはヘルプに載っていないものが多く、投稿毎に<head>~</head>の内側にmetaタグを追加する方法が不明です。
今回追加したmetaタグは<head>~</head>の外側に記述しているのでHTMLの文法エラーですが、ツイッターカードが文法エラーを無視して認識してくれるのでよしとしています。

ただしスマートフォン用ツイッター公式アプリではこの設定では期待通りに表示されませんでした。


関連ブログ

[セキュリティ] Twitterの「このリンクは安全ではない」「このリクエストを保留しています」の対策2015年版
ツイッターのツイート履歴CSVを文字化けしないようにExcelに取り込む方法
[Android] アプリからツイートするとハッシュタグが消える(URLエンコード漏れ)
ツイッターAPIの検索で複数の画像URLが取得できない対策方法

以上、参考になれば幸いです。

0 件のコメント:

コメントを投稿