こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。
ツイッターで記事のURLをシェアするとウェブサイトによって表示が違います。
1. URLがそのまま表示されるパターン
2. 小さな画像とサイト名と説明文とURLが表示されるパターン
3. 横いっぱいの大きな画像とサイト名と説明文とURLが全部表示されるパターン
上記の「1」「2」「3」はウェブサイト側がツイッターの投稿に対応しているかどうかで表示される形式が変わってきます。もちろん「1〜3」どの表示であってもサイト運営上の問題はありません。
ただ、理解しておくべきは「3」の場合は記事をシェアしてくれるユーザーの数が増えるという点です。記事をシェアするということは自分自身のタイムラインにも投稿が表示されることになりますよね?
そのためシェアする側としては自分自身のフォローさんに興味を持ってもらえるインパクトが欲しいわけです。たとえば上記に書き出した「1〜3」であれば「3」がもっとも情報量が多く魅力的に見えます。
以下で詳しく解説させていただきますね。
ツイッターで記事を共有するユーザーが増えた秘密
結論から言えばウェブサイト側を「3」に対応させると記事のシェア率が伸びます。
理由は上記の通りです。記事をシェアする際に「内容(URL)が魅力的に見える」から。フォロワーさんもアクセスするウェブサイトの情報を事前に理解できるのは嬉しいですよね。安心感だってあります。
以下の通り大半のウェブサイトはURL投稿時に「2」が表示されます。左側に小さな画像が入っていますよね。
ちなみに理想と言われる「3」の状態が以下です。大きな画像が表示されています。
投稿時のプレビュー画面は「画像・サイト名・説明文」の説明文が表示されません。以下が実際の画面です。
ウェブサイトによっては小さな画像すら認識しないタイプのURLもあります。
あなたが運営しているウェブサイトはいかがでしょうか?実際に自分自身のウェブサイトがカード表示に対応しているかどうかは以下からチェックできます。実際にURLを入れて状態をご確認くださいませ。
▼Card validator(Twitter公式)
https://cards-dev.twitter.com/validator
※URLの確認にはログインが必要です
最短で手軽に表示対応させる方法
無料プラグイン「All in One SEO」を追加でインストールすれば対応可能です。
ただ導入しているテーマに「SEO設定が搭載されている場合」はご注意ください。テーマ側のSEOとプラグイン側のSEOがバッティングしてしまうので検索エンジンから拒否される可能も出てきてしまいます。
カンタンに言えばあなたが使っているワードプレスのテーマ側にSEO機能が一切なければ「All in One SEO」を有効化すれば自動的にツイッターの表示に対応できます。
機能のバッティングを避ける方法
もしSEOのバッティングを避けたいなら独自に機能を追加すればOKです。
//アイキャッチをツイッター投稿時に表示するスクリプト
function twitter_eyecatch_image() {
if( is_front_page() || is_home() || is_singular() ){
global $post;
$twitter_ogp_title = '';
$twitter_ogp_descr = '';
$twitter_ogp_url = '';
$twitter_ogp_img = '';
$twitter_insert = '';
if( is_singular() ) {
setup_postdata($post);
$twitter_ogp_title = $post->post_title;
$twitter_ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
$twitter_ogp_url = get_permalink();
wp_reset_postdata();
} elseif ( is_front_page() || is_home() ) {
$twitter_ogp_title = get_bloginfo('name');
$twitter_ogp_descr = get_bloginfo('description');
$twitter_ogp_url = home_url();
}
$twitter_ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';
if ( is_singular() && has_post_thumbnail() ) {
$ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
$twitter_ogp_img = $ps_thumb[0];
} else {
$twitter_ogp_img = "アイキャッチ画像がない場合の指定(URLパス)";
}
$twitter_insert .= '<meta property="og:title" content="'.esc_attr($twitter_ogp_title).'" />' . "\n";
$twitter_insert .= '<meta property="og:description" content="'.esc_attr($twitter_ogp_descr).'" />' . "\n";
$twitter_insert .= '<meta property="og:type" content="'.$twitter_ogp_type.'" />' . "\n";
$twitter_insert .= '<meta property="og:url" content="'.esc_url($twitter_ogp_url).'" />' . "\n";
$twitter_insert .= '<meta property="og:image" content="'.esc_url($twitter_ogp_img).'" />' . "\n";
$twitter_insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
$twitter_insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
$twitter_insert .= '<meta name="twitter:site" content="ツイッターに登録したユーザー名" />' . "\n";
$twitter_insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";
echo $twitter_insert;
}
}
add_action('wp_head','twitter_eyecatch_image');
注意点としては「画像差し込み(アイキャッチ画像が設定されていない場合)」や「ツイッターのユーザー名」は設定いただく必要があります。画像はサーバー上にアップしたファイルを指定しましょう。
むずかしい設定もせずカンタンに表示対応させたい方へ
各種設定をワードプレスの管理画面から行えるプラグインをご用意いたしました。
使い方はカンタン。ただプラグインを有効化するだけ。もし同時に「アイキャッチ画像がない場合の指定」を行いたい場合は管理画面の「設定 > Twitterカードの設定」から設定を行うことも可能です。
選択ボタンを押せばメディア内からも指定(またはアップロードも可)ができます。
以下が選択した状態ですね。
もしプラグインをご入用の方は以下のURLから詳細をチェックお願いいたします。
▼ツイッターでURLのシェア率が大幅に増加したプラグインを見る
⇒ カード形式で記事が投稿できるプラグインをチェックする
まとめ
本日は「ツイッターで共有しやすいURLを設定する方法」をご紹介いたしました。
個人的にずっと作りたかったプラグインなので実現して良かったです。試作から動作チェックまで実装に数年はかかっていますので興味があればぜひお試しください。動かなければ即日対応いたします。
有効化すれば「アイキャッチ画像をURL投稿時に自動連携」できるプラグイン。ぜひご活用くださいませ。
補足
ちなみにカードを小さく表示したい方へ向けて「切り替えボタン」もご用意しております。カードに表示される画像の大きさは運営者さまの好みもあるので気に入った方でご利用くださいませ。以下のスクリーンショットにある「カードの画像サイズを選べる機能」はプラグインのバージョン1.0.1以降で搭載されました。
▼最新式のWordPress(ver5.7.2)で安全に動作するプラグインURLはこちら
⇒ 返金保証付き便利プラグインを試す
プラグインを有効化する手順は以下にまとめていますので併せてご一読ください。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する