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カードを設定してみました […]

  関連記事

ブログ
アドベントカレンダーを題材にしてブログ記事を量産するためのネタメモ

アドベントカレンダーのまとめ記事を書くまでがアドベントカレンダー。 &mdash …

LINE BOT API
LINE BOT APIを使ってPHPで画像検索BOT作ってみました

先日、1万名先着で trial 公開された LINE BOT API が、巷でず …

よかった探し
2013年よかった探しリース

結城浩さんのサイトで「よかった探しリース」という企画が開かれていることを知りまし …

グラフ
PageSpeed Insights でサイト内のリソースだけを対象に分析する方法

先日の改善ネタに引き続き PageSpeed Insights の小ネタです。 …

回転木馬
Twitter BootstrapのCarouselがIEで動かないときの対応策

Twitter BootstrapのCarouselをIE9で見ると、アニメーシ …

Facebook広告
いいね!が増えるとFacebookから無料広告クーポンがもらえるらしい

とあるFacebookページが50「いいね!」に達したら、3,500円分の広告ク …

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

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

ブログ
ブログのヘッダー画像をイラストレーターのドイコマコさんに描いてもらいました!

もしかしたら気付いていた方もいたでしょうか? 先日からこのブログのヘッダー部分を …

スタンプ
PCブラウザ版に追加されたというFacebookスタンプを使ってみた

Facebookでメッセージ打ってたら、たまたま新機能のお知らせでスタンプが使え …

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

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