OGPは使わないで、Twitterカードの設定をしました。
いつもサイトを参照させてもらってるしげぞうさんがTwitterを始められたのでフォローしていたら、こんなツイートが。
ちょうどTwitterカードを使ってみようと思っていたところだったので、さっそく設定してみました。Facebookは使わないので、Twitterだけの設定にしました。
OGP設定 WordPress編
「プラグイン不要でWordPressにOGPを設置する方法」
http://t.co/mcn0y7ArGd
— sigezo (@sigezo150) 2015, 4月 11
目次
この記事は、こちらのしげぞうさんの記事を元にしております。
プラグイン不要でWordPressにOGPを設置する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う
しげぞうさんのOGP設定を元にTwitter専用に変更
Facebook部分の削除だけにしようかとも思ったのですが、OGPを使わない記述に変更しました。コードが簡単になるし、header.phpの変更箇所も減るので。
参考資料:Twitterカードとオープングラフ|Twitter Developers スタートガイド
ogp.phpをTwitter専用に変更してファイル名をtwicard.phpに
しげぞうさん作のogp.phpを元に、twicard.phpを作成しました。OGPを使っていないのでファイル名を変えました。
- 変更点
- Facebook用記述を削除
- OGPの記述をTwitterの記述に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!-- Twtterカード 始まり --> <?php if (is_single()){// 投稿記事 if(have_posts()): while(have_posts()): the_post(); echo '<meta name="twitter:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から endwhile; endif; echo '<meta name="twitter:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル echo '<meta name="twitter:url" content="'; the_permalink(); echo '">';echo "\n";//投稿記事パーマリンク } else {//投稿記事以外(ホーム、カテゴリーなど) echo '<meta name="twitter:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文 echo '<meta name="twitter:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル echo '<meta name="twitter:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURL } ?> <meta name="twitter:site_name" content="<?php bloginfo('name'); ?>"> <?php $str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる if (is_single() or is_page()){//投稿記事か固定ページの場合 if (has_post_thumbnail()){//アイキャッチがある場合 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); echo '<meta name="twitter:image" content="'.$image[0].'">';echo "\n"; } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合 echo '<meta name="twitter:image" content="'.$imgurl[2].'">';echo "\n"; } else {//画像が1つも無い場合 echo '<meta name="twitter:image" content="【デフォルト画像のURL】">';echo "\n"; } } else {//投稿記事や固定ページ以外の場合(ホーム、カテゴリーなど) echo '<meta name="twitter:image" content="【デフォルト画像のURL】">';echo "\n"; } ?> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="【Twitterのアカウント】"> <meta name="twitter:creator" content="【製作者のアカウント】"> <meta name="twitter:domain" content="【自分のドメイン】" /> <!-- Twtterカード 終わり --> |
水色行の【】の5箇所を自分用に変更します。
twicard.phpを呼び出す記述をheader.phpに追加
39 40 41 |
<!-- Twitterカード --> <?php get_template_part('twicard');?> </head> |
</head>の直前に追加します。
Card validatorで表示を確認
Card validatorで表示を確認してみます。こんな感じです。
以前は、Card validatorを実行しないとTwitterカードが使えるようにはならなかったらしいですが、今は必要無いようです。でも、表示確認はしますよね。どっちみち。
もしかしてTwitterカードってメタタグだけ設置しておけば申請必要なくなったって事?
https://t.co/JPdiR5h4m3
— sigezo (@sigezo150) 2015, 4月 11
TwitterカードのOverviewを確認してみたら、日英で異なる内容でした。
- 簡単な5つの手順で始める
- 3.検証ツールでURLを実行して申請
- Get started in 5 simple steps
- 3.Run your URL against the validator tool to test. If you are working with a Player Card, request approval for whitelisting. All other Cards do not need whitelisting.
- ValidatorでURLをテストしてください。Playerカードの場合は承認申請してください。他のカードは申請不要です。
まとめ
写真つきとかいろんな形式のツイートがTLに流れてて、「どうやってやるんだろう?」と思ってはいたけど、他の作業に追われていたりして、調べることなくそのままにしていました。そしたら、必要な情報がTwitterから転がり込んできた(^^)
Twitterって面白いしくみだな~とあらためて思います。Twitterカードの設定もしたし、これからしっかり活用していきたいと思います。
この記事へのコメントはこちら