今頃ですが、ブログをTwitter Cardに対応してみました^^;
Twitter Cardを知らなかった
Twitterカードという存在を初めて知りましたtato(@tato3104)です。^^;知ったのはアズさん(@azur256)さんのこの記事です。
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 -->
設定後
FacebookのOGPは設定後まもなく動き始めたようですぐに反映されていました。
Twitter Cardもほぼ同時に反映されました。
Facebook OGPについて参考にしたのはこの記事
[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ
これでようやくTwitterアナリティクスを見ることができる!