35
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WEBサイトのURLがFacebookでシェアorいいねされた場合の挙動(OGP)

Posted at

WEBサイトのURLがFacebook上でシェア、または、サイトに設置された[いいね]ボタンを押された際、Facebookはどのように下記の例のようなキャプチャを表示しているかというと、

スクリーンショット 2014-02-17 21.55.16.png

Facebookのクローラーが裏側でサイトにアクセスしに来ています(自分でサイトを作っている場合は、WEBサーバのアクセスログをtailしながら確認してみると良く分かる)。
※ただし同じURLは一定期間、Facebook側でキャッシュする模様。

私が試した際のFacebookクローラーのユーザエージェントは次の通り。

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

もしかしてFacebook PC版/スマホ版/アプリ版とかで違うのかも?

自分でサイトを作っている場合、Facebook向けにいい感じにキャプチャ(キャプチャという呼び方でいいのか?)されるようにするには、各ページのHTMLでOGP用のmetaタグで適用される画像や文言を指定します。

OGPの公式サイト:http://ogp.me

スクリプト言語等で動かしている動的なサイトの場合は、各ページでふさわしい画像や文言を設定すればOKなのですが、「面倒なのでサイト内のどのURLがシェアされても一律で同じ表示でいいよ」という場合は、全ページに同じmetaタグを仕込むか、もしくはWEBサーバがApacheであれば、次のようにFacebookクローラーを判定して、クローラー用のページへ飛ばしてしまうという方法があります。

.htaccess
RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} facebookexternalhit
RewriteRule .* /page_for_facebook.html [L]

page_for_facebook.html にOGPタグだけのHTMLを用意しておけば、どのURLがシェアされた場合でもこのOGPで指定されたキャプチャが適用されます。

35
32
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?