お役立ちサイト ブログ

Twitter Cardsの連携できてる?Card validatorで検証すべし

2016年5月9日

photo-1458570937094-8381d3a9535b

ブログ開始から11カ月経った今この記事を書いてますが、ブログってのは奥が深いというかやることが多いというか…凝り始めると終わりがないですね。

⇒関連:ブログが月間3万PV突破! 11ヶ月目のアクセス数を公開!

動画編集やらDTM作曲やらにハマってしまう私としてはブログにもハマってしまうわけです。時間がいくらあっても足りないですね。

 

そんな時間泥棒なブログですが、アクセスを増やすために欠かせないのがSEO対策SNS対策ですね。

そしてここでは、そんなSNS対策の一つであるツイッターカードがちゃんと機能しているかを検証するツールを紹介します。


ツイッターカードとは?

ツイッターカードって何? という方はこの記事に辿り着いてない気もしますが、一応紹介。こういうやつです。
キャプチャ

もしくは、

キャプチャ

こんなのもあります。

ほかにもいくつかのタイプがあるんですが、大抵このどっちかだと思います。少なくとも私は、不毛にツイッターのタイムラインを大口を開けながら眺めているとこの二つのタイプをよく見かけます。不毛で困っちゃいますね。no hair

 

要は、ツイッター上でブログやサイトをURLのみでなく、アイキャッチ画像やら抜粋文やらと一緒に表示できるのがツイッターカードという機能なのです。

 

これがあるとないとでは、ツイッター上でのクリック率が違います。どれくらい違うかは知りませんが、URLだけだと目につかないからきっと違うと思います。ねえ、そうだよね。

 

ツイッターカードがうまく連携・設定できてるか?

ブログをこのツイッターカードと連携させるにはちょっとした設定が必要です。その辺の説明は長くなるので下記ブログを参照してください。私の出る幕はありません。

⇒参考:クリック率上昇に不可欠!「Twitterカード」の設定方法を解説|ferret

ツイッターカードを設定したら、早速記事をツイッターで呟いて…みるとフォロワーの迷惑かも? 一体俺はどうすれば!!!

という方の役に立つのが、Card validatorです。

Card validatorで検証

上記のURLを開き、ツイッターカードがしっかり連携・設定できてるか検証したいURLをボックスに入力します。

試しに無料web小説 短編2『前科アリの人々』【三文】という記事で試します。URLは「https://storyinvention.com/sanmon-tanpen2-1」なので、これを入力します。

キャプチャ

そして、「Preview card」をクリック!

数秒待つと結果がプレビュー画面に表示されます。

プレビュー画面

キャプチャ

表示されました! 感涙してシェアしてしまいそうです。

このように、設定がうまくできていれば、ツイッターカードのプレビューが表示されます。これがもし失敗すると、「Log」という項目にエラーが表示されたりするので、それを元に原因を探ることとなります。

ただ、エラーコード毎の解決法を調べるのが結構大変なので、よくある間違いを一つずつクリアしては再検証の繰り返し…という流れになりがちです。

 

というわけで、うまくいったら早速ツイッターで記事を呟いてみましょう。ぶつぶつとURLをつぶやくのです。きっとツイッターカードが表示されるはずです。

せっかくなので、最後に成功例と失敗例の比較画像を貼ります。

 

失敗例&成功例

百聞は一見に如かずということで、画像です。

上のツイートが失敗例で、下のツイートが成功例です。

キャプチャ

上は文章+URLのみで、下は画像や本文の一部やらが表示されてますよね。下の方がタイムラインに流れてきたときに気になると思います。

とは言っても、タイムラインがこういう画像の広告で埋めつくされるようになったら、逆に画像無しの方がいい!なんて時代も来るかも知れませんね。

 

まあ、とにかくツイッターカードの検証をするならCard validatorです。

 

不思議な現象

ちなみに、ここまでCard validatorでのツイッターカードの検証について書いてきましたが……

実は! Card validatorではエラーが出ないのに、なぜかツイッターカードが表示されない…というケースもあります。その場合、robots.txtの設定が原因であることが多いようです。

詳細は下記ブログを見てみてください。この辺りは複雑で私も理解し切れてません。

⇒参考:「Twitter Cards Validator」でエラーが出ていないのに画像が表示されない原因はrobots.txtの設定だった|gori.me

 

ですが、大抵はCard validatorで解決できるので、まずはこっちで検証してみる…というのに間違いはなさそうです。

 

ひとこと

ブログは奥が深いですが、ツイッターの設定一つとっても色々あるのでなかなか覚えるのは大変ですね。

でもまあ、日々徐々に色々とやっていけば、人々は愚かではないので段々と覚えられることでしょう。その暁には常々喜々としていられることでしょう。

それではまた!

 

々々々…

 

ー完ー