FC2ブログをTwitterカードに対応させる方法
情報管理LOGの@yoshinonです。
先日、Twitterカードについて記事にしました。
今回は、この情報管理LOGも使っているFC2ブログをTwitterカードに対応させる方法についてです。コピペでできますので、ぜひ参考にしてみてください。
【 FC2ブログをTwitterカードに対応させる方法 】 １．FC2は、OGPに対応しています。でも、OGPとは何？ ２．FC2ブログでOGPを有効にする ３．metaタグを記述する（記述例） |
FC2ブログは、OGPに対応しています。
ん？でも、OGPって何なんでしょう？
OGPというのは、Open Graph Protcolの略称で、FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みのことです。
つまり、OGPが有効になっていれば、SNSでシェアされたときに、タイトルやアイキャッチ画像などが有効に表示されて、アクセス数の向上に期待できそうですね。
ちなみに、Twitterカードに反映された情報管理LOGは、このように表示されます。きちんと、反映されていますよね。
Twitterアナリティクスって知ってます？ https://t.co/1zspOiwxwY 情報管理LOG
— yoshinon (@yoshinon) 2016, 1月 14このOGPですが、FC2ブログでは、デフォルトで対応しているのです。これは、すぐに設定しないと！ですね。
FC2ブログでOGPを有効にするのは、以下の手順でできます。
環境設定→ブログの設定→メタタグの設定
にある、「OGP設定」を有効にしてください。
これだけです。
超簡単ですね。
さて、次にTwitterカードをmetaタグに記述していきます。
Twitterカードって何？という人は、前回の記事を参考にしてみてください。
Bookmarklet: instantly generate a Card for any web page. | Embedly
前回の記事では、かなり汎用性を持たせるためにmetaタグも一般的な記述にしました。
＜一般的なTwitterカードの記述（Summary形式の場合）＞
<meta name=\"twitter:card\" content=\"summary\" />
<meta name=\"twitter:site\" content=\"@自分のTwitteID\" />
<meta name=\"twitter:title\" content=\"ブログやサイトのタイトル\" />
<meta name=\"twitter:description\" content=\"サイトの説明.\" />
<meta name=\"twitter:image\" content=\"表示させたいアイキャッチ画像のURL\" />
<meta name=\"twitter:url\" content=\"ブログやサイトのURL\" />
しかし、FC2ブログでは、テンプレートに変数が使えるために、記述を簡略化できるのです。それどころか、変数を使った方が、色々うまくいくので、もしも「１から書くの大変…」とか思っている人は、以下をコピペして使ってくれれば良いと思います。
＜FC2ブログでのTwitterカードの記述＞
<meta name=\"twitter:card\" content=\"summary\" />
<meta name=\"twitter:site\" content=\"@自分のTwitterID\" />
<meta name=\"twitter:image\" content=\"<%image>\" />
<meta name=\"twitter:title\" content=\"<%blog_name>\" />
<meta name=\"twitter:url\" content=\"<%url>\" />
<meta name=\"twitter:description\" content=\"<%introduction>\" />
<meta name=\"twitter:title\" content=\"<%sub_title>\" />
<meta name=\"twitter:url\" content=\"<%url>blog-entry-<%pno>.html\" />
<meta name=\"twitter:description\" content=\"<!--topentry--><%topentry_discription><!--/topentry-->\" />
上の記述で唯一、自分で入力しなくてはいけないのは、自分のTwitterIDぐらいです（赤字のところ）。
一応、記述する場所ですが、
テンプレートの設定→HTML編集
で、<head>の下あたりにペーストすれば、良いかと思います。
情報管理LOGの眼FC2ブログはTwitterカード設定がラクです
FC2ブログは、広告がウザかったり、色々面倒なことも多いのですが、OGPの設定やTwitterカードの設定の楽さは、数少ない良さの一つかもしれないですね。
Twitterカードの設定自体は、とても簡単なので、よく分からない人は、前回記事と今回のコピペだけでできちゃいますよ。ぜひ、やってみてください。
関係ないですが、これがKindleの月替わりセール対象になっていて、すごく嬉しいです。
- 関連記事
-
- Wunderlistの完了タスクをGoogleスプレッドシートで分析できるようにしてみた
- FC2ブログをTwitterカードに対応させる方法
- Wunderlistで右クリックできるようになっていた（これは便利）