Clipboard01

いつも御世話になってます。ハイパー特価ブロガーの伝助です。最近、メインブログの「激安速報!! ~特価品伝道者~」でTwitterカードを設定したので、設定方法を記録しておきます。
TwitterカードとはツイッターでURLをつぶやくとブログ記事なら記事タイトル・見出し画像・本文の一部が表示される機能です。割とコンパクトに情報が確認できるので、つぶやく側にとっても見る側にとっても便利です。 ブロガーなら必ず行うべき事の一つですね。以下は参考例。

ライブドアブログだと最初からブログテンプレートに入ってることが多いですが、そのままだと画像が大きく表示される設定になってます。小さくしたい場合は「ブログ設定」の「カスタマイズ」からHTMLに以下のようにタグを付け加えます(太字部分)。

<$OGP$>

<meta content="summary" name="twitter:card">


</html>

※<$OGP$>は古いテンプレートを使っていて、Twitterカードが表示されない場合のみ記入。

参考リンク:Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定(OGP対応)

-------------

そして難しいのが見出し画像の設定。良く考えて画像をトリミングする必要があります。以下ツイートは失敗例。何の画像かよくわかないことになってます。

こちらは成功例。大事な500ポイントの情報がハッキリ見えてます。

正方形の画像にすれば問題ないですが、正方形にすると今度はブログ側の「注目の記事」の見出し画像が、上下が切れた感じになってしまいます。
Clipboard01

というわけで、自分は可能な限り以下のような画像を設定していこうとおもいます。真ん中に重要な要素(Twitterカードの画像)、そしてサイドにも何かしら画像があるように(「注目の記事」の画像枠にピッタリおさまるように)、という感じです。
Clipboard01