BloggerにTwitterカードを設定する方法【2018年版】
Twitterに画像付きでブログのリンクを貼りたい
ちょっと前から、Bloggerを利用しているこのブログの宣伝用にTwitterを始めたのですが、リンクを貼ったときに、よく見る、枠の付いた写真付きのリンクにならないなーと、ちょっと不満を感じていました。
そこで調べてみると、どうやら枠に囲まれたリンクは「Twitterカード（Twitter Cards）」と呼ばれるもので、ブログにちょいとした設定をすることで表示されるようになるということを知りました。（←すごく今更だけどw）
そうと知ったら、設定してみるに限ります。善は急げで早速取り掛かりましょう！
Blogger（Contempo）にTwitterカードを設定する方法
このブログはBloggerを利用して作成し、デザインテーマにはContempoを使用しています。以下の手順は2018年2月7日時点での説明になります。
ここに「<head>」と入力して検索。見つかったら、「<head>」の下に、後述するTwitterカード用のコードを挿入します。もしくは「</head>」で検索をして、その上でも大丈夫。要は「<head>」と「</head>」の間のどこかに入れれば良いのですが、後からの見つけやすさを考えると「<head>」の直後か、「</head>」の直前がおすすめです。
場所が見つかったら、以下のTwitterカード用のコードをコピペします。（ネットで検索すると、いろいろなコードが紹介されていますが、私の環境では以下のコードが一番問題なく動きました。）
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@ツイッターのアカウント' name='twitter:site'/>
<meta content='@ツイッターのアカウント' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='デフォルト画像のURL' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
後で説明しますが、大きな画像のTwitterカードにしたい場合は「summary」の部分を「summary_large_image」に打ち換えてください。
「ツイッターのアカウント」となっている2ヶ所は、自分のTwitterアカウントに打ち換えてください。
「デフォルト画像のURL」となっている場所は、画像のない記事やトップページの場合に表示させる画像のURLを入れてください。
入力が完了したら「テーマを保存」をクリックして、変更を保存します。
Twitterカードが正しく設定できたかを確認しよう
正しく設定できたかを確かめるために、下記のサイトで確認をしてみましょう。https://cards-dev.twitter.com/validator
「Card URL」に確認してみたいブログ記事のURLを入れて、「Preview card」をクリック。正しく設定が出来ていれば、右側にサンプルが表示されます。ほっ。どうやら上手く設定出来たようです。
HTMLに書き込む「summary」の部分を「summary_large_image」に変えると、こんな風に画像の大きなTwitterカードになります。画像で目を惹きたい場合には、こちらが良さそうですね。
記事タイトルの下に表示される説明文は、各ブログ記事の編集画面で設定します。
各記事の編集画面の右側に「検索向け説明」という項目があります。ここに入力した内容が、Twitterカードの説明文として表示されます。今まで入力したことはなかったけれど、これを機会にちゃんと入れるようにしようと思います。
ということで、無事にTwitterカードの設定が完了しました。Twitterにリンクを投稿するのがちょっと楽しくなりそうです♪
ちなみに、ネットにはいろいろな設定方法紹介記事がありますが、今では設定方法等が変わってしまっているケースも多いので、なるべく新しい記事を参考にするのが良いと思います。
（おしまい）
関連記事
■Bloggerのブログで、複数のラベルを組み合わせて検索する方法 （2019年5月14日）
■ブログを書くのは手段？目的？ ブログが好きな「ゆるブロガー」になりたい！ （2019年4月20日）
■ブログ記事の日付を「年月日」の順番に変更してみた【Blogger Contempo】 （2019/4/6）
■ブログ記事にお洒落なSNSシェアボタンを設置してみた【Blogger Contempo】（2019/4/6）
■ブログの記事に、前後ページへのリンクを自動表示してみた【Blogger Contempo】 （2019/2/11）
■Bloggerのブログで、複数のラベルを組み合わせて検索する方法 （2019年5月14日）
■ブログを書くのは手段？目的？ ブログが好きな「ゆるブロガー」になりたい！ （2019年4月20日）
■ブログ記事の日付を「年月日」の順番に変更してみた【Blogger Contempo】 （2019/4/6）
■ブログ記事にお洒落なSNSシェアボタンを設置してみた【Blogger Contempo】（2019/4/6）
■ブログの記事に、前後ページへのリンクを自動表示してみた【Blogger Contempo】 （2019/2/11）
この記事をシェアする
.jpg)
