Twitterなどに投稿する場合のカード設定を変更する方法。
Twitter Cards 設定
ブログの記事をTwitterなどで共有した場合に、記事側にカードの設定がないと、URLのみが表示されてサイトのプレビュー画像などが表示されません。FacebookなどSNSサイト毎に独自の設定があります。
Jetpackの共有設定
WordPressのプラグイン「Jetpack」で「共有」を有効にすると自動でTwitter Cardsのタグが埋め込まれます。別途でTwitterカードの設定を行っている場合には、競合してしまう可能性があるので、調整する必要があります。
自動で投稿に追加されるタグ例
<!-- Jetpack Open Graph Tags --> <meta property="og:type" content="article" /> <meta property="og:title" content="棘白ノ太刀【火廣金】レベル５０まで強化してみました" /> <meta property="og:url" content="http://mhf.janjan.net/2018/01/30/white-espinas-g-class-longsword-lv50/" /> <meta property="og:description" content="先日生産した「棘白ノ太刀【火廣金】」をレベル50まで強化してみました。エスピナス希少種の素材使いまくりですが、&hellip;" /> <meta property="article:published_time" content="2018-01-30T14:19:33+00:00" /> <meta property="article:modified_time" content="2018-01-30T14:19:34+00:00" /> <meta property="og:site_name" content="マゴトログモンハンニイキル" /> <meta property="og:image" content="http://mhf.janjan.net/wp/wp-content/uploads/2018/01/mhf-white-espinas-rare-item.png" /> <meta property="og:image:width" content="640" /> <meta property="og:image:height" content="480" /> <meta property="og:locale" content="ja_JP" /> <meta name="twitter:text:title" content="棘白ノ太刀【火廣金】レベル５０まで強化してみました" /> <meta name="twitter:card" content="summary" />
［twitter:card］設定が、summaryなので小さな画像が左に配置されたカードがTwitter側では表示されます。
Twitterでは、この他に大きな画像がレイアウトされたカードを見かけます。 調べてみると、このカードを表示するには、［twitter:card］設定が、summary_large_imageにする必要があることが分かりました。
Jetpack側には、設定がないのでWordPress側でカスタマイズする必要があります。
カードのカスタマイズ
How to change settings for Twitter Cards?
WordPressのサポートで記事を見つけました。function.phpを編集することで自動出力されるタグをカスタマイズすることができます。
［外観｜テーマの編集］メニューで［function.php］に次の関数を追加します。
function my_custom_twitter_card( $og_tags ) {
$og_tags['twitter:site'] = '@maggothand';
$og_tags['twitter:card'] = 'summary_large_image';
return $og_tags;
}
add_filter( 'jetpack_open_graph_tags', 'my_custom_twitter_card', 11 );
保存したら投稿するURLを使って、検証ツールを使って確認します。
大きな画像がレイアウトされたカードが表示されたら変更終了です。表示されない場合には、Logに表示される情報を頼りに関数などを確認します。
Twitterの公式プラグインなどが有効化されていると競合する可能性があるので他のプラグインによる影響も考えられます。
カスタマイズすることでブログ記事など、通常より大きな画像の方が内容を伝えやすくなります。
スポンサーリンク
最後までご覧いただき、ありがとうございました。
