We love WP!はい、ごめんください。
雪国新潟のウェブ解析士マスター、小杉です。

WordPress Advent Calendar 2013 の16日目の記事となります。

去年も個人ブログの方で参加しましたが、1年後に独立しているとは夢にも思っていませんでした。

今では WordPress を利用したサイト制作とウェブコンサルティングをやっています。アクセス解析ツールを見たりいじったりもしていますが、最近はウェブカウンセラーなんじゃないかと思い始めました。そんな私ですが、WordPress は今でも大好きです。

WordPress を個人で使っている方も多いと思うので、今日は Facebook と連携するときに知っておくとイイコトを記事にしました。

ちなみに、WP 成分は薄いです。

商品に「○○使用」と書いてあって5%くらいだったり、メロン味と書いてあってメロンを使ってなかったりするくらいの薄さです。スミマセン。

きっかけは、何気なく Facebook を眺めていた時。

FB友達の 笹川さん がブログをアップしたのを Facebook で見て、「ん?」と思ったのです。

Facebookの記事に作成者名?

なんぞこれ?

Facebookの記事に作成者名?

どうやらFacebook のウォールが新しくなった頃からのようです。本人のタイムラインなどには出てきませんが、メインのニュースフィードや埋め込み投稿にも表示されます。

↓このように、埋め込み投稿にも作成者名が表示されます。

 

↓ただ、はてなブックマークなどアプリ連携で投稿したものには表示されていません。代わりにアプリ名が表示されています。リンクを直接シェアしないと表示されないということがわかりました。

 

そこでフィードに流れてくる「リンクをシェアした記事」を見ていましたが、大抵ドメイン名が表示されているだけなんですよね。

笹川さんはライブドアブログとは思えない変態カスタマイズ(褒め言葉)をしているので、そのためかなと本人にお聞きしてみましたがお手上げ状態でした。

ソースを眺めたらすぐにわかった・・・けれど

HTML ソースを調べたところ、meta タグの name=”author” が該当しました。

Facebook との連携について調べてみましたが、解釈できるブラウザもないし、あまり意味がないからいらないよーという記事がたくさん見つかりました。

そんな記事に埋もれているのか、今回の件についての日本語の記事が見当たりませんでしたが、そのものズバリの英語の記事を発見しました。

参考:Optimizing Your Site for the Open Graph (UPDATED)

そのものズバリだ!

さっそく meta タグの name=”author” を入れてみた。

メールアドレスを入れることもあるようですが、今回は Facebook の投稿に作成者名を表示させることが目的なので、表示させたい文字そのものを入れることにしました。

ということで、<meta name=”author” content=”小杉 聖(@mekemoke)” /> などとヘッダに入れれば良いわけですね。日本語もOKです。

WordPress のプラグインで対応しているものはなさそう

Facebook との連携と言っても、OGP 設定とは違うので、プラグインで対応しているものはないように思います(ちゃんと調べていないので、もしあったらそちらで適用されているかと)。
私は WordPress SEO by Yoast を愛用しているのですが、特に設定項目はありませんでした。

そこで、手動でテーマを編集します。

管理画面の、[外観]>[テーマ編集]>header.php をいじるだけで行けます。プログラムも不要で、下記を <head> 〜 </head> に追記するだけなので1分もせずに終わります。

はい、終わりました。

追加したー!・・・けど、表示されない?

実際に表示されるかどうかは、「自分のみ公開」の設定にして Facebook でリンクをシェアしてみるとわかります。わかるんですが・・・どうにもこうにも表示されません。

しかも Facebook のデバッガで確認すると、エラーになっていました。

Facebookのデバッガでエラーが〜

The meta tag on the page was specified with name ‘author’, which matches a configured property of this object type. It will be ignored unless specified with the meta property attribute instead of the meta name attribute.

「meta タグで name 要素に “author” を指定してるみたいだね。でも、property 要素として扱わないと、無視すんよ?」と言われました。

はいスミマセン。OGP として設定しろってことですね。わかります。わかりますけどでもでもだって。

結論:適切な OGP 設定 + HTML レベルの著者情報で OK

OGP の詳しい説明は省きますが、ソーシャルメディアで連携する時にウレシイ設定です。

参考:これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM
参考:Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは – Six Apart ブログ
参考:OGPに何書いたらいいか – MEMOGRAPHIX

結論から言うと、下記の設定を行なっておくことで作成者名は表示されます。

fb:admins もしくは fb:app_id は設定しておく

個人の場合は admins、複数人で更新している場合は app_id が良いようです。
これは片方でも両方でもOK。IDは調べて設定しましょう。

article:author もしくは article:publisher も設定できる

個人の場合は author に自分のFBページ、複数人の場合は publisher に FBページの URL を入れます。ちなみに、日本語版ではこの機能は反映されていないようです…(詳細は上記参考リンク)。
これはどちらか片方にしておきましょう。

私の場合、author と publisher の両方を設定していたことでうまく行かなかったようです。

このブログは個人用なので、fb:admins と article:author を設定しました。
自分の個人事業用のサイトは Facebook ページと連携させたかったので、fb:app_id と article:publisher を設定しました。

app_id の取得を別途しておけば、WordPress SEO by YOAST で fb:app_id と article:publisher をプラグインの設定画面から設定できます。

そして <meta name=”author” content=”作成者名” /> を追加する

追加する場所は <head> 〜 </head> ならどこでも良いようです。さくっといけますね。

というわけで、下記のように作成者を表示することができましたヽ(=´▽`=)ノ

注意点。

今回の流れで気になった点を4つほど。

自由度が高いけど虚偽表示はダメ、ぜったい。

著者表示は単純なドメイン名だけでなく、自分の名前を表示させることができます。

私もふと気づいたものだし、メインのフィードにしか現れないので「著作者が表示されるから、自分の名前を出して信頼を得よう!」とか声高に言うのは早計すぎるので、あくまで小技程度の紹介です。

ただ、自由度が高いので悪用されかねないなあとも思いましたが……、そうなったら Facebook 側で表示することはしなくなるだけでしょうね。

昔の記事に適用されるまでにはタイムラグがありそう

Facebook はデータをキャッシュするので、一度 Facebook でシェアした記事のデータは変わってくれません。OGP はデバッガで更新できるようですが、この作成者名については対応していないのかな?と思いました。

ただ、記事を書いている間に適用されたのを目の当たりにしたので、タイムラグがあるようですね。Facebook では、「自分のみ」の公開範囲で投稿して、全体のニュースフィードを確認してみると良いでしょう。

エラーが消えない

最初のきっかけとなった笹川さんの記事は、デバッガでエラーが出てこないのです。OGP 設定を合わせてみましたが効果なし。

無視するよーと言いつつ表示しているあたり、仕様のよく変わる Facebook のツンデレっぷりがよくわかります。そのうちなんとかなるのかも。

アプリで連携させない

アプリを介すとその情報が入ってしまうので、手動でシェアするようにしましょう。
せっかく書いた思い入れのある記事ですから、読んで欲しいポイントや気持ちを添えてシェアすると良いですよ。

いいね!ボタンだけでなく、シェアボタンを置いておくと楽かもしれませんね。

参考:Share Button – Facebook開発者

ウラ話。

なんていうかもう、WordPress <<< Facebook 的な記事でスミマセン。

実は WP のネタを考えているときに、

WP Test の日本語化とかやろうかなー → 公式が数日前にアップデート → orz
(参考:WordPressテーマユニットテストデータ日本語版を更新したよ! ‹ nuuno

WordPress SEO by YOAST の日本語化しようかなー → 最新版がんばってる方発見 → orz
(これは自分用にまとめました:WordPress SEO by YOAST を日本人が使いたい場合のメモ – NAVER まとめ

となっていてちょっと焦っていたのですが、WordPress 3.8 が出たという情報を振りきって、ムリヤリ WP にこじつけた感が…。

・・・ま、細かいことは気にしない!

明日17日は、あのプライム・ストラテジーの藤 祐太郎さんです!(実は誕生日が一緒だった!)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA