風一家長、お父さん台風来たる

はい!そういうわけでございまして。
昨晩台風のど直撃を受けた沖縄からお届けしております。

いやービックリ。
沖縄に移住してボチボチ3年近くになりますが、こんなに強烈な風は初めてでした。

一晩中ドッタンバッタン。ビュオオォォ。
釣られて猫ズが大暴れ。にゃおおぉぉー!
(原因は後者の可能性が高いですが)とてもグッスリ眠れたものではなく。

現在沖縄から九州地方をゆるやかに北上中とのことですので、
予想進行ルートにお住まいの方は風と猫にどうぞお気をつけくださいませ。


さてさて、本日は『Facebook』のお話です。

みなさま、Facebookはお使いですか?
→ふむふむ、お使いですね。

では、Webサイトの記事のシェアはよく行いますか?
→ふむふむ、面白そうな記事があったら、すぐシェアしちゃう方ですか。なるほどなるほど。

あれ?このWebサイトの記事はあまりシェアされていn(自主規制)

Facebookでは、投稿欄にWebサイトの記事のURLを貼り付けると、↓こんな感じで自動的に「画像付きリンク」を生成してくれます。

ただURLを表示するよりも、見る人のココロをグッと惹きつける、ステキな機能ですねえ。
WebサイトをWordPressで作っている場合は、アイキャッチ画像と本文抜粋が表示されるようです。

ところがこの機能、投稿時に「画像部分」が表示されないことがありまして。

こんな感じに。これでは折角のシェアが台無しです。
(このまま投稿すると「画像なしリンク」が生成されてしまいます)

他のWebサイトの記事をシェアするならまだ良いのですが……これが自分のWebサイトの記事だった時にはもう。

・絶対「いいね!」がガッポガッポなハズだったのに!
・画像が表示されなかったから「いいね!」が控えめなんだ!そうに違いない!
・いやー、そうならそうと言ってくれればいいのにー。ビックリしたわー、あははー。

的な、現実逃避が捗ります。

……何の話でしたっけ?

そう!そんな困った問題を解決するための仕組みがこちら!

Facebook Debugger

URL:https://developers.facebook.com/tools/debug/

Facebookが一般公開しているデバッグ(問題解決)ツールです。
「入力欄」がひとつと、「ボタン」がひとつ、とってもシンプルな作りになっていますね。

使い方はとってもカンタン。

STEP1 まずはタブを「シェアデバッガー」にあわせて、記事のURLを入力しましょう。
STEP2 入力したら、横にある「デバッグ」ボタンをクリックします。

何やら怪しげなメッセージが表示されましたよ?

実はFacebookは、誰かが最初にシェアを行うと、「スクレイピング」と言って、記事内を探索して「タイトル、説明、サムネイル画像」など「画像付きリンク」を生成するために必要な情報を自分のサーバー上にキャッシュ(保存)する、という動きをするようになっていまして、誰もシェアを行っていない状態では、これらの情報がまだ無い状態なのです。


Facebookクローラー
コンテンツはウェブページの形でFacebookにシェアされるのが最も一般的です。リンクが初めてシェアされると、FacebookクローラーはURLでHTMLをスクレイピングして、タイトル、説明、サムネイル画像など、Facebook上のコンテンツに関する情報を収集、キャッシュ、表示します。
参考URL:https://developers.facebook.com/docs/sharing/webmasters/crawler


STEP3 「新しい情報を取得」ボタンを押して、1回目のスクレイピングをしてもらいましょう。

記事のタイトルと本文は取得できたようです…が、肝心の画像がありませんね。

STEP4 そんな時は「もう一度スクレイピング」ボタンを押してみましょう。

おー!画像が表示されました。

この状態でシェアを行うと、確実に画像付きリンクが生成されるようになります。
試しにやってみましょうか、Facebookの投稿欄に記事URLをコピペ、と。

バッチリ!


自分のWebサイトで記事を書いている場合、一番最初にシェアするのは大体自分自身ですので、
後の人のためにも、表示されない状態が起こらないよう、デバッグツールでしっかり解消しておきましょう。

ふー、めでたしめでたし。

あれ?そう言えばワタシのシェアの後に誰も続いていn(自主規制)

0