おすすめ記事ピックアップ
昨今、OPG！OPG！とよく聞くようになりました。OPGとは簡単に言えばFacebookやTwitterなどのSNSで、ページがシェアされたときに引用の見栄えが良くなる設定のことです。
Blogger（ブロガー）で、OPGのTwitter Card（ツイッターカード）を設定する方法を説明いたします。基本的にBlogger使いの神様クリボウさんのサイトのやり方のままです。まずクリボウさんの記事を一読ください。
Blogger ブログを Twitter Cards に対応させる方法それでも良くわからない人向けに、わかりづらい点の補足を加えたいと思います。またTwitterのアカウントを取得していることを前提に話しを進めます。Twitterをもっていなければ、この機会にTwitterを初めてみましょう。
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html
BloggerのTwitter Cardの概要
クリボウさんの記事を見ても、何をやっているのかわからない人は、全体の概要がつかめていないのだと思います。作業の内容としては、Twitter Cardに対応させるために、Bloggerに特定のコードを挿入する必要があります。HTMLの編集からコードを挿入します。
そのコードがあると、TwitterではTwitter Cardの情報を作ることができます。「Card validator」というサイトで、コードが正しく設定されているかチェックできます。
そしてTwitterへ申請が必要です。「Card validator」というサイトから申請を行います。
Bloggerへコードを追記する
Bloggerへ下記コードを挿入します（クリボウさんからの引用です）。<meta content='summary' name='twitter:card'/>
<meta content='@kuribo_blogger' name='twitter:site'/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
<meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
要注意：黄色い部分は、自分のTwitterアカウントを挿入しましょう。このコードを挿入する場所がとても重要です。「テンプレート→HTMLの編集」からHTMLの編集画面に入りましょう。そして、かならず＜head＞の真下に設置しましょう。少し下のほうに設置したら、動きませんでした。ここはとても重要です。コードの設置が完了したら、テンプレートを保存しましょう。
TwitterにログインしてCard validatorで確認
コードの設置が成功したら、TwitterへログインしてCard validatorで確認しましょう。Card validator
https://cards-dev.twitter.com/validator
自分のBloggerの記事のURLを入れて、プリビューを押しましょう。引用部分が画像付きで紹介されれば成功です。※下記は登録済みの画像です。実際は左側の表示がちょっと異なります。
Card validatorへ登録する
正しく表示されたら「Request Approval」が表示されます。クリックしましょう。
登録画面が出てきます。ほとんどの部分は自動で記載されます。NameやEmailやTwitter Usenameなどが記載されていなければ、使っているものを入力しましょう。
「Website Information」の「Descriotion」は、Bloggerのサイト名でも入力しましょう。
普通のサイトであれば、その下のチェックは不要です。アダルトっぽいサイトの場合に使うのかなと推測しています。
最後にTwitterのアカウントを入力しましょう。これで完了です。
メールを確認して完了
下記のメールが届きます。Getをクリックして完成です。
