ブログ

ワードプレス twitterカードの極意

ワードプレスのTwitterボタンでの拡散よく使いますよね?でもちゃんと考えたことありますか?今回はこのサイトのJINを例にしながら効率的なTwitterでの魅せ方について考えていきましょう。せっかく宣伝するなら効果的にしたいものです。

Twitterでの見え方

ワードプレスの機能としてOGPという機能があります。これが記事をTwitterなどのSNSに拡散するときにキレイに整形してtwitterにTwitterカードとして組み込んで見せやすくしてくれる機能です。

このTwitterカードは現在のワードでは一般的に2種類選べます。どちらを選ぶかにより見え方が変わってきます。SummaryとSummary_Large_Imageという2種類が選べます。使用しているワードプレスによって簡単にこの設定が変更できるはずです。

ワードプレスの中でこの変数は使えますので手動でheaderなどをいじってもらってもいけますがWebエンジニアでなくブロガーで行くなら有料のテーマでこういったものはワンタッチで選べる環境をおすすめします。私はJINを使っています

Summary

こちらはアイキャッチ画像をほぼ正方形にくり抜いたものと説明文をその横に並べています。文章でつるならこちらのほうがいいかもしれませんが。

summary_large_image

こちらは画像が長方形に切り取られます。ほぼ原型をとどめた形での切り抜きになりますが多少周りがこの絵だと削られています。下記がもとの画像になります。上下がtwitterカードでは切られているのが分かるかと思います

僕らがカリスマブロガーであれば、どちらでも読んでもらえますが、僕らはツイートを拾って読んでもらうところが勝負です。

見え方としては Summary_large_imageを使ったほうがTwitterのタイムラインの中で面積を占め、画像によってはインパクトをつけることが出来ます。膨大な数のツイートを見ている中でいかに拾ってもらうか。それを考えたらLargeがいいと確信しています。

画像のサイズの考察

ワードプレスからtwitterで使用する画像の比率は 1.91:1となっています。この比率に合わせた画像であればほぼ切り取られずに意図どおりの画像としてTwitterでもカードが作成されます。

例えば下記は800×418の画像を準備し投稿下見たものです。正確には1.91の比率だと418.8程度の縦幅になるので1−2ピクセル犠牲になるかもしれないとおもったものです

用意した画像(800×419)

四隅に■を置いてみました

twitter上に展開されたブログカード

若干上下がカットされちゃいました。横も多少キレてはいますが縦よりは少ないカットです。

1.91:1の比率でいくつか下記の参照させていただいたブログからの抜粋となりますがココらへんで画像を用意する。もしくは切り取られることを意識して真ん中に必要なコンテツが入っているように画像を準備しましょう。

800×419
860×450
1200×628

参照サイト

古いアイキャッチ画像が使われる

アイキャッチ画像が気に入らなくて差し替えることありませんか?その場合に結構な頻度でせっかく買えたのにtwitter上で再度拡散したのに置き換わらないこと多くありませんか?

これはtwitterが無駄なトランザクションを増やさないためにサーバー上に以前の画像をキャッシュしているケースで起こることが多いです。実はこれ自分でリセットかけることができるのですね。

こちらのページになります。

ここでリセットしたい URLを入力してボタンを押せばリセットが可能です。これで急ぎの変更にも対応ができるわけですね。

 

JINでのtwitterカードの変更方法

最後に私の使っているJINの場合を紹介しましょう。有料のテーマだと設定が変更できる場合が多いです。またプラグインを追加することにより変更が可能になります。JIN場合の紹介をします。JINは下記の順で設定できます。カスタマイズを押すとブログとその左にメニューがでてきます。そこからSNS設定を見つけてください。

外観⇒カスタマイズ⇒SNS設定(OGP)⇒Twitterのカードタイプ

こちらでSummary_large_imageをえらんでもらえればバッチリです。

 

 

この設定の上にtwitterのユーザー名がいれることができます。これを設定しておくと他の方がページをシェアしてくれたときにカードないに自分のtwitterへのメンションが追加されシェアされたことがわかります。ぜひ入れましょう。

JINでのサイト紹介時の画像の選択

ちなみにこちらのページではトップページをtwitterで拡散するときの画像も選択できます。外観⇒カスタマイズ⇒SNS設定(OGP)⇒トップページのOGP画像で設定ください

SNSボタンのデザイン

一番上にあるこちらの設定は記事ないのSNSボタンのデザインが変わります。

①の設定:色付きのカラフルなボタン

②の設定:白抜きの控えめなボタン

僕は1が好みですね。ぜひ押してください的な感じです。

まとめ

せっかくかいた記事の紹介です。かっこよく見せていきたいですね。twitterを主戦場にされている方はぜひ画像のサイズも気にしてさらに設定はLargeにしてガンガン攻めていきましょう。

こういった機能はもちろんプラグインでもできますし自分でHeaderに追加することも可能です。でも僕らブロガーはやっぱり記事執筆に集中したいですよね。そういう意味ではある程度カスタマイズができる有料テーマをおすすめしたいです。僕はこれで結構時間セーブができてるな。お得だなと感じます。

こちら参考までに

ワードプレステーマをJINにしたよ

 

ではでは