ツイッターで記事を共有するユーザーが増えた秘密

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ツイッターで記事の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はこちら
返金保証付き便利プラグインを試す

プラグインを有効化する手順は以下にまとめていますので併せてご一読ください。

【手順】ZIP形式ファイルのワードプレスプラグインを管理画面からアップロードして有効化する方法

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください