Facebookには記事をシェアをする機能があります。シェアをすると自分のFacebookのタイムラインに記事が表示されるのですが、一部のアプリを使ってシェアした場合、私の記事が文字化けしてしまうことが判明しました。文字化けはシェアしてくれた方にも申し訳ないので修正しました。

文字化け

実際にシェアしていただいた記事は私が釣りに行ったときの記事です。

よく見るとタイトルところが見事に文字化けしています。

このタイトルにおかしな単語が入っているのでは？と疑ったのですが、他の記事もそうだったので記事単体ではなくブログ全体の何かがおかしいと判断。

文字化けなのできっと文字コード。

FacebookだからOGP関連で何か問題。

どちらかに原因があると思い調べてみました。

私のブログ構造

私のブログはWordPressで作られています。

プラグインでFacebookのOGPを指定している人もいると思いますが、私はOGPを操作したい（＝シェアされた時に表示される内容が自由に決められる）ので以下の方法を使用しています。

上記方法を参考にしてOGPをしている方はJetpackというプラグインが悪さする場合もあるのでご注意ください。

文字化けを修正

では、文字化けを修正していきます。

どこに原因があるかなんてわからないので片っ端から可能性を潰していく作戦。

そしてようやく辿り着いたのがOGP内での言語指定です。

日本語したサポートしていないブログの場合は以下のコードをOGPの指定の箇所に一緒に記述します。

<meta property="og:locale" content="ja_JP" />

そうすることで適切に翻訳が行われるそうです。

以前ブログで紹介したOGPの指定の方法を修正すると以下の形となります。（以下のソースはコンチクワブログさんを参考に少し弄ったもの）

<meta property="fb:admins" content="自分のFacebook ID" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:locale" content="ja_JP" />
<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[0].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
     echo '<meta property="og:image" content="http://webmemo.biz/wp-content/uploads/akame-fb-feed.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:image" content="http://webmemo.biz/wp-content/uploads/akame-fb-feed.jpg">';echo "\n";
}
?>

プラグインでOGPを指定している人はこのような現象は起こらないかもしれません。ただプラグインを入れなくても平気なものはなるべく入れたくない、OGPの内容を任意のものにしたい、そういう人はいると思います。

少なくも私はその1人です。

OGPを自作している方はご注意ください。

一部のアプリからシェアした場合に文字化けする可能性があります。

参考までに

今回文字化けを確認したのはiPad miniで「Mr.Reader」のBufferでシェアした場合です。

Mr. Reader 1.11.2（￥350）
カテゴリ: ニュース, ソーシャルネットワーキング
販売元: Oliver Fürniß – Oliver Fuerniss（サイズ: 6 MB）

まとめ

上手く表示されていると思っていたFacebookのシェア。OGPを上手く指定していないと文字化けします。知っている人からすると当たり前のことかもしれません。私は指定できることを私は知りませんでした。一部で文字化けして困っていた方はお試しください。また文字化けに気づいていないだけでどこかで文字化けしているかもしれませんしていない方はぜひ。

それではこれからもあかめ（@mk_mizuho）をよろしくお願いします。

* ブログの更新にiPhoneアプリのするぷろ for iOSを使用しました

＼ この情報を周りの人にも教える ／