rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

こんな簡単に機能改善!WordPressブログにTwitterカードを設定してみました

      2014/10/04   Twitter, Web ,

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

Twitterカード

@YuG_1224 さんの記事を見て、そういえばうちのブログにはまだ Twitter カード設定してなかったなあと気付いたので、試しに組み込んでみました。

当ブログは WordPress ですが、今回プラグインなどは使わず直接テーマをカスタマイズして設定する方法をご紹介します。

Twitter カードの設定方法

WordPress に Twitter カード用タグを追加する

WordPress のテーマから header.php を開き、下記の Twitter カード用の meta タグを </head> タグの前に追加します。

<!--Twitter Cards-->
<?php
    $_id = get_the_ID();
    $_post = get_post($_id);
    $_content = $_post->post_content;
    $_content = str_replace(array("\r\n", "\r", "\n"), '', $_content);
    $_content = strip_tags($_content);
    $_description = is_front_page() ? get_bloginfo('description') : mb_strimwidth($_content, 0, 100, "...", "utf-8");
    $_thumbnail = wp_get_attachment_url(get_post_thumbnail_id());
?>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ko31">
<meta name="twitter:title" content="<?php if (is_front_page()) { bloginfo('name');} else { wp_title('');}?>">
<meta name="twitter:description" content="<?php echo $_description;?>">
<meta name="twitter:image:src" content="<?php echo $_thumbnail;?>">
<meta name="twitter:domain" content="blog.ko31.com">
<!--//Twitter Cards-->

コード中の「@ko31」は自分の Twitter アカウント、「blog.ko31.com」は自分のブログのホスト名にそれぞれ置き換えてください。

例えば、このページを表示してみて、その HTML ソースがこんな感じに出力されるようになっていれば OK です。

<!--Twitter Cards-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ko31">
<meta name="twitter:title" content="  また争奪戦必至か!?9月15日からジバニャンのチョコボーが発売される!">
<meta name="twitter:description" content="あちこちが妖怪ウォッチ関連グッズで溢れかえる昨今ですが、最近はコンビニにもどっぷり侵食してきて、...">
<meta name="twitter:image:src" content="http://blog.ko31.com/wp-content/uploads/jibanyan_chokobo.jpg">
<meta name="twitter:domain" content="blog.ko31.com">
<!--//Twitter Cards-->

Twitter検証ツールで確認する

次に、Twitter の検証ツールを開きます。

Card URL に自分のブログの URL を入れて、「Preview card」をクリック。

Twitter

Card preview に meta タグで設定した内容が表示された状態が確認できるかと思います。Log も successfully となっているので問題無さそう。

Twitter

※検証時の注意

自分が検証した時は、初め「Preview card」しても Log に “Card type is not whitelisted” という Warning エラーが出ていました。(どうやら URL を Twitter に承認申請してホワイトリスト化してもらう工程が必要っぽい。)「Preview card」の辺りに「request approval」というボタンが表示されるので、それをクリックしてください。(自分の場合、申請から数分後には “Your Twitter card is ready!” というメールが届き、Log も successfully の状態になりました。)

Twitterカード

Twitter カードを試してみる

さてここまででもう準備は整いましたので、実際に先ほどのブログ URL を付けたツイートをしてみました。

お、ちゃんと概要が付加された形式で表示されてますねー。

まとめ

というわけで、こんな簡単に組み込めてしまったようです。ほんと素晴らしいですね!これだと設定しない方がもったいないくらいの感覚。Twitter Analytics を覗きに行くのも、今までよりちょっとだけ楽しくなりそうw

特に Twitter をサイトやビジネスのプロモーションツールとして活用していて、エンゲージメントを上げたいと考えている方であれば、何か理由が無い限り絶対設定しておくべきものかと思います。

Twitter カードは他にも細かい設定ができるので、もっと興味のある方は下記 Twitter の公式サイトの方もご覧になってみてください。

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

Comment

  1. […] こんな簡単に機能改善!WordPressブログにTwitterカードを設定してみました […]

  関連記事

GitHub風カレンダー
D3.jsでブログ更新状況をGitHubカレンダーっぽく見える化できるWPcalendarを試してみた

GUNMAGISGEEK さんで公開されている、ブログの更新状況を GitHub …

アクセス解析
先月の結果は?2015年4月のAnalyticsアクセス数レポートです。

毎月公開しております当ブログのアクセス解析レポート、2015年4月分を紹介します …

セキュリティ
ChromeではgetUserMediaがHTTPS経由でないと動かなくなっていた

Web ブラウザ上でどこかの誰かと動画チャットできる「PERARI」という We …

SUPOCON
「SUPOCON(スポコン)」というスポーツ系動画メディアサイトを公開してみました

「SUPOCON(スポコン)」という、スポーツ動画を集めたサイトを公開してみたの …

20150714_koshien_history
TwitterOAuthで高校野球・歴代甲子園BOTを復活させました

高校野球・歴代甲子園BOT(@koshien_history)という、過去の春夏 …

クリスマスツリー
2015年よかった探しリース

結城浩さんの「よかった探しリース」に2年ぶりに参加してみたいと思います。 ちなみ …

LINE BOT API
LINE BOT API が動かない時に確認するポイント

初めてLINE BOT API でボットを作ってみた記事を昨日書いたのですが、正 …

notify_from_wp
WordPressからLINE Notifyにメッセージを通知してみた

先日いじってみた LINE Notify が面白かったので、今度は WordPr …

Facebook
Facebookで自分のなりすまりアカウントが出たっぽいのでスパム報告をしておきました

Facebookでスパムアカウントによるなりすまり友達申請が目立ってきていますが …

ブラスバンド
【#ブラバン甲子園】高校野球観戦のお供にブラバン応援ツイート中継「ブラバンde甲子園」がマニアックで面白い!

日々熱戦が繰り広げられている夏の甲子園、きっとみなさんも地元校や贔屓校の応援で盛 …