FC2ブログでTwitterカードを設定してみたよ。

このエントリーをはてなブックマークに追加

やあ、Fellow FC2 Bloggersの皆さん。 今日も元気にブログってますか?

ブログをやっている皆さんなら感じることも多いと思うんですが、
いくら個人ブログで収入があるわけでも見返りがあるわけでなくとも、やっぱりブログをやる以上はアクセス数って気に成るものじゃないですか。多ければ多いほど、やっぱりブログを更新するモチベーションになるわけで。

で、ブロガーさんの多くがご自身のブログの宣伝に使っていらっしゃるのは、やっぱりSNSが主だと思うんですね。

特にTwitterは利用している方も多く、お手軽にブログの記事を拡散できる便利なツールだと思います。私もいつもTwitterにブログの更新通知を流したりしてます。

ただ、普通にTwitterに更新通知を流しても...

Twitterカードなし

こんな感じで、文字とURLがただただ並んだ感じになっちゃって、目を惹く要素がないですよね。もしかしたら、ブログへのリンクが貼ってあること自体気付いてもらえないかも...

最近(と言っても去年ですが)FC2ブログに追加された「メタタグ」の機能を使えば↓

メタタグ

↑上の画面にはブログ管理画面の「環境設定」⇒「ブログの設定」から入ります。
ただ、何もいじってなければデフォルトで「有効にする」になってるはず。

facebookだとこう

facebookに投稿する時には、自動的に画像付きのリンクが更新できるのに...

一番よく使うTwitterでこそ、こういう機能を使いたいじゃないですか?
ただ、Twitterに設定する時には、手動で簡単な操作が必要とのことで。

ということで今回は、Twitterにブログへの画像付きリンクを掲載する方法、
いわゆる「Twitterカード」をFC2ブログに設定する方法をご紹介したいと思います。
少しでも皆さんのお役に立てればこれ幸い。

では、早速やっていきましょう!


①ブログのテンプレートにコードを貼付


まず、さっきの「メタタグ」の設定を有効にしたまま、以下のコードをブログのテンプレート、htmlのところに貼り付けます。
下の3行の「Twitterのアカウント名」のところをご自身のアカウント名に手入力で変更してください。


<meta content="summary" name="twitter:card">
<meta content="@Twitterのアカウント名" name="twitter:site">
<meta content="@Twitterのアカウント名" name="twitter:creator">



貼り付ける場所は、html内の< head >から< /head >の間です。
下の画像みたいな感じに貼り付ければOK。

HTMLに貼り付けよう

FC2ブログの方でしなければいけない設定はこれだけです。簡単でしょ?



②Twitter Cards Validatorで承認をもらう


では次に、Twitter側での操作を。

Twitterカードを作るためには、Twitter Card Validatorというサイトで承認をもらわなければいけません。

URLは以下のとおり↓

https://cards-dev.twitter.com/validator

ここのサイトに飛ぶと...

Twitter Card Validator

こんな画面が出てきます。
"Card URL"のところに、カードを作成したい記事のURLをコピペすると...

Validしたところ

こんな感じで見本が作成されると同時に、Twitterカード作成の承認が自動的にもらえます。超簡単!

ということで、この作業後にTwitterで記事のページをつぶやいてみると...



一気に目を惹く感じになりました!
さっきの単なる文字の羅列より、何の記事を書いているのかが分かりやすくなりますよね。

ちなみにカードに使われる画像は、記事内の一番上にある画像が使われるようになるんですが、
FC2ブログの記事更新画面につい最近追加された、
「アイキャッチ画像を選択する」
という機能を使えば、任意の画像に変更することもできるんです。

アイキャッチ画像を選択する

↑こんな感じで。

ただこの機能、一個だけ不便な点があります。

実はTwitterカードの設定、ブログ全体に適用させて、今後更新する記事全てに対して自動でカード生成...っていうのができないみたいで、

一度記事を公開状態にして記事個別のURLを作成して、毎回Card Validatorのサイトで承認をもらってから、自分の手作業でツイートしなければいけない...って作業が必要なのがちょっとだけ面倒な気がしますね。
もしサイト全体に自動的に適用させる方法をご存知の方いらっしゃいましたら、ぜひご教授いただきたく...


【追記】
上の記述、嘘でした。一度ブログのトップページにカードを設定したら、次の記事も以前に書いた記事にも自動的に適用されるみたいです。失礼いたしました。


以上がTwitterカードの設定方法でした!
とっても簡単にできて、読む人にとっても見やすくなると思うので、皆さんも是非やってみてはいかがでしょうか?

関連記事
スポンサーサイト
Theme: 日記 - Genre: ブログ

Comment

Leave a Reply


管理者にだけ表示を許可する

Trackback

2016/08/07 (Sun) 00:07

これまで「Twitter Cards の サムネイル画像」等で言及してきましたが FC2には画像を引用する変数がないので 記事NOに対応した画像を別に用意する方法を取っていました。 この度、編集画面に「アイキャッチ画像」の設定項目が新設されているのを発見!! 「記事の見出し画像を設定できます。SNS通知(OGPタグ)などに利用できます。」 FC2総合インフォメーションでも、5/...

cinema-days 映画な日々 - http://iwa40.blog6.fc2.com/blog-entry-5480.html
2016/10/14 (Fri) 04:52

FC2ブログからTwitterに画像付き記事をツィートしてみたところ、簡単にできました。詳しくはコチラを参考にするとよいと思います。※メタタグの設定はtwitter:cardとtwitter:siteだけで十分です。ところが自分のPCで見る限りは、左図のようにちゃんと表紙の画像とタイトル、省略された説明文が表示されているのにもかかわらず、「画像とタイトルだけでなく内容もつぶやいて」との反応が...

「メジャーな漫画の紹介はもういらない」というあなたにおすすめする漫画 - http://papepo1.blog.fc2.com/blog-entry-20.html