FaceBookリンク投稿時やRSS読込み時にリンク先URLやサムネイル画像が正しく表示されない

Tweet

zamuuでは、HPを制作しているだけでなく、企業向けFaceBook（フェイスブック）ページの制作を行っています。
今回問合せで、『記事がシェアできない』という報告を受けたので、四苦八苦しながら調査した内容を記載します。

あるいみ公開報告書ですね。皆さんのお役に立てば幸いです。

『RSS リーダ内容がシェアできない』

ヒアリングとお客様ページの現状調査を行ったところ、上記のようにRSSリーダで同期された内容がシェアできていないようでした。

RSS Graffitiの仕様

FaceBookとWordPressやブログ記事とを自動同期してくれる『RSS Graffiti』ですが、これが１つ曲者でした。このプラグインはRSSフィードをFBの投稿や指定したページに自動同期してくれるプラグインアプリです。Facebookユーザであれば有名な方かと思います。

PCからは、RSS GraffitiからFBへ同期した内容が表示されますが、その記事の『シェア』についてはRSS Graffitiの機能としてリンクがあるそうです。なので、スマートフォン向けFBアプリではFBの機能でないので、当然『シェア』ボタンは表示されません。
FBのRSS Graffiti は単純に同期するだけならいいけど、仕様的にも機能制限あるから使い方気をつけないといけないですね。

OGP(Open Graphic Protcol)タグの未実装

記事内容やサムネイルを正しくリンクさせるには、HPやブログ側にOGPタグの設定が必要だそうです。HPやブログ側のソースにこのタグで情報を記載しておかないと、FBからの読取が正しく行われません。以下にWP対応の場合のソースサンプルを記載します。

ヘッダータグ内に記載

<!-- ここからOGP -->
<meta property="fb:admins" content="○○○○○○○○○○" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" /><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php
if (is_single()){//投稿ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
     endwhile; endif;
} else {//投稿ページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() && !is_archive()){//投稿にサムネイルがある場合の処理
     $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="○○○○○○○○" />';echo "\n";
}
?>
<!-- ここまでOGP -->

ヘッダー直後に記載

キャッシュ削除とデバッグ

上記、OGPを設定した後は設定内容が正常に表示されるかデバッグします。FaceBook開発者向けのサイトにデバッグツールがあります。>> デバッグツール
こちらを利用すると、FaceBook内で誤ってキャッシュされてしまっている情報もクリアしてくれるそうです。zamuu でもお客さんの新着記事URLをいろいろ入れ替えても記事内容が同じまま更新されない現象がありました。キャッシュ内に残っていたのが原因のようです。

参考サイト

oxynotes
ゲージツ的生き方のススメ
Facebookシェアボタンでサムネイルなどの情報が表示されない！リンクエラーでどうにもならないときの対処法

Tweet