今頃ですが、ブログをTwitter Cardに対応してみました^^;

2014年2月7日2017年8月8日

Contents

1. Twitter Cardを知らなかった
2. Twitter Cardを登録してみます
3. やったこと
4. FacebookのOGP再設定
5. 設定後

Twitter Cardを知らなかった

Twitterカードという存在を初めて知りましたtato（@tato3104）です。^^;知ったのはアズさん（@azur256）さんのこの記事です。

Twitter Analytics ってのがあるらしいので覗いてみたら、これはブロガー必携のツールだろうと思った

Twitter Cardを登録してみます

Twitter アナリティクスを紹介する記事ですが、これを有効にするにはTwitter Cardを登録しないといけないのですね。それだけならいいのですが、FacebookのOGPを設定しておくと楽だそう。でも全然やっていませんでした

やったこと

ブログのヘッダー(header.php)にコードを入れます
以下のコードを入力しました。

<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">

コードを入れた後、以下のサイトでブログURLを入力してTwitterカードを登録します。
Card Validator | Twitter Developers

FacebookのOGP再設定

FacebookのOGPはJetpackで設定できるのですが、確認してみたら警告だらけでした！Open Graph デバッガーでしらべることができます。プラグインでも設定できますけどヘッダーにコードを入れました。

<!-- ここからOGP -->
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋を表示
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
     echo '<meta property="og:image" content="https://tatomac.net/wp-content/uploads/2014/01/image.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:image" content="https://tatomac.net/wp-content/uploads/2014/01/image.jpg">';echo "\n";
}
?>
<!-- ここまでOGP -->

Open Graph デバッガー：Facebook