ツイッターに普通にリンクを貼ると、こんなふうにurlの文字が並ぶ感じですが、yahooニュースとか朝日新聞などのリンクを貼ると

こんなふうに説明文や画像付きのリンク設定ツイートになります。どうすればこんな風にできるのか？疑問に思う人も少なくないと思います。このやり方を調べて、実際にやってみたんです。簡単にできますよ！

google広告

ツイッターカードと言うそうです

これ、ツイッターカードって言うんですね。Twitterカード — Twitter Developers。カードの種類はいろいろありますが、そういえば最近動画を入れてるものもありますね。見ていて手が止まり、実際にコンテンツを見ることが少なくないです。スマホの場合、文をクリックするより、こちらのほうが押しやすいというメリットもあります。カードの種類を検討したい方は、「ツイッター　カード」と検索するか、公式ページ（参考：カードタイプ — Twitter Developers）をどうぞ。

ちなみに、ブログとfacebookを連携されている方は、同じ設定「OGP」を設定してから、後からツイッターカードを入れるほうが簡単だそうです。（参考：Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK） | 編集長ブログ―安田英久 | Web担当者Forum）

メタタグを埋め込めば良さそう

ツイッターカード

上記の公式ページを見ると、メタタグが埋め込んでありますね。カードのタイトルやディスクリプション、イメージ画像を入れるところがあります。これをヘッダーに書き込めばいいというのは直感的に分かりますが、サイトの中の内容の違うページを組み込む場合、コードを書かなくてはいけないことも直感的に分かりました。正直、面倒くさい。。。

プラグインでやる方法もあります。All in One SEO Packをプラグインで入れている方は、簡単にできるみたいなので「All in One SEO Pack　ツイッターカード」などで情報を探してみるのがおすすめです。

管理人はプラグインも入れたくないので、さらに情報を探してみると、

プラグイン不要でTwitterカードをコピペでサクッと設置する方法（寝ログ）

寝ログさんが書いてくださっていました。中身も本当に素晴らしい！しかも途中に//でつけてくださっている説明もとても分かりやすいのでこのまま使わせていただきました。本当にありがとうございます。

トップページの画像のみ変更

寝ログさんの説明通りにやりました。@設定、header.phpにget_template_partを埋め込むなど。変えたのは以下の二点。記事のサムネイル画像を入れてない場合、代わりに使う画像です。管理人は直リンクで入れました。
変更しました。テーマ内imagesフォルダに必要な画像をアップロードしています。

} else {//投稿にサムネイルも画像も無い場合の処理
$ogp_image = get_template_directory_uri().'/images/（表示したい画像ファイル名）.jpg';
$img_url = $ogp_image;
echo '<meta name="twitter:image" content="'.$ogp_image.'">';echo "\n";
}

} else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
//$img_url = get_template_directory_uri().'/images/（表示したい画像ファイル名）.png';
echo '<meta name="twitter:image" content="'.$img_url.'">';echo "\n";
}

追記

実際に運用してみて少し不具合が。。。

  • ssl化したサイトの一つで、 getimagesize　でファイルが開けず、Redirection limit reachedというエラーが出ました。このサイトはやむなく　getimagesizeの処理をあきらめました。行頭に//を追加
  • 初期設定では投稿ページのみに、タイトル・ディスクリプションなどのツイッターカードが作成されますが、固定ページではできません。固定ページも含める場合は　is_single()　→　is_single() || is_page()などと工夫する必要があります

画像はぱくたそ-フリー写真素材・無料ダウンロードさんから。いつもお世話になっています。素敵な写真をありがとうございます。

広告