OGPは使わないで、Twitterカードの設定をしました。

2015/04/14 2015/04/23

いつもサイトを参照させてもらってるしげぞうさんがTwitterを始められたのでフォローしていたら、こんなツイートが。
ちょうどTwitterカードを使ってみようと思っていたところだったので、さっそく設定してみました。Facebookは使わないので、Twitterだけの設定にしました。

OGP設定　WordPress編「プラグイン不要でWordPressにOGPを設置する方法」 http://t.co/mcn0y7ArGd

— sigezo (@sigezo150) 2015, 4月 11

1 しげぞうさんのOGP設定を元にTwitter専用に変更
- 1.1 ogp.phpをTwitter専用に変更してファイル名をtwicard.phpに
- 1.2 twicard.phpを呼び出す記述をheader.phpに追加
2 Card validatorで表示を確認
3 まとめ

この記事は、こちらのしげぞうさんの記事を元にしております。
プラグイン不要でWordPressにOGPを設置する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う

しげぞうさんのOGP設定を元にTwitter専用に変更

Facebook部分の削除だけにしようかとも思ったのですが、OGPを使わない記述に変更しました。コードが簡単になるし、header.phpの変更箇所も減るので。
参考資料：Twitterカードとオープングラフ｜Twitter Developers スタートガイド

ogp.phpをTwitter専用に変更してファイル名をtwicard.phpに

しげぞうさん作のogp.phpを元に、twicard.phpを作成しました。OGPを使っていないのでファイル名を変えました。

Facebook用記述を削除
OGPの記述をTwitterの記述に変更

<!-- 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カード 終わり -->

<?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

}

<?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";

}

水色行の【】の５箇所を自分用に変更します。

twicard.phpを呼び出す記述をheader.phpに追加

<!-- Twitterカード -->
<?php get_template_part('twicard');?>
</head>

<?php get_template_part('twicard');?>

</head>

</head>の直前に追加します。

Card validatorで表示を確認

Card validatorで表示を確認してみます。こんな感じです。
Twitter Card Validator 表示例｜ツイッターカード
以前は、Card validatorを実行しないとTwitterカードが使えるようにはならなかったらしいですが、今は必要無いようです。でも、表示確認はしますよね。どっちみち。

もしかしてTwitterカードってメタタグだけ設置しておけば申請必要なくなったって事？ https://t.co/JPdiR5h4m3

— sigezo (@sigezo150) 2015, 4月 11

TwitterカードのOverviewを確認してみたら、日英で異なる内容でした。

3.検証ツールでURLを実行して申請

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カードの設定もしたし、これからしっかり活用していきたいと思います。

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

OGPは使わないで、Twitterカードの設定をしました。

しげぞうさんのOGP設定を元にTwitter専用に変更

ogp.phpをTwitter専用に変更してファイル名をtwicard.phpに

twicard.phpを呼び出す記述をheader.phpに追加

Card validatorで表示を確認

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

しげぞうさんのOGP設定を元にTwitter専用に変更

ogp.phpをTwitter専用に変更してファイル名をtwicard.phpに

twicard.phpを呼び出す記述をheader.phpに追加

Card validatorで表示を確認

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル