webページにfacebook連携を設定する

html haml

OGPの使い方

htmlタグにxmlnsを指定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

metaタグ

<meta property="fb:app_id" content="facebookのアプリID" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" />
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />

html5での指定方法

html5でマークアップしたい場合

<!DOCTYPE html>
<html lang='ja'>
  <head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#'>

hamlでの記述方法

hamlの場合、オプションはhashで渡せば良いので

!!!
%html{lang: "ja"}
  %head{prefix: "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"}

Debug

OGPが設定できているかのデバッグには

facebookデバッガー