Twitterなどで送付したときに、展開されてサムネイル画像や、概要が出たりして、便利だと思ったことはありませんか。以下のようなものです。Graph(OG)というプロトコルでメタデータとして記述しているのです。Protocolとは公式ページは以下のリンクです。ogp.meこのように、このリンクは埋め込みとして機能していて、ただ単にURLがあるよりは情報量が違いますね。Protocolとはコンテンツをリッチに埋め込むためのプロトコルということができます。Graphに対応しているわけではなくて、あくまでもプロトコルの一つにすぎません。Protocolを使うときは、htmlの属性として宣言することが推奨されています。以下のように宣言します。基本的なメタデータ以下の表のメタデータを<head>の中に<meta>タグで書き込みます。注意点としてはページごとにそれぞれ固有のものを指定するのが望ましいです。下にもありますが、ページをシェアするとog:urlなどはURLに対してIDを発行します。IDとは、永続的にそのページを特定するものです。シェアするとそのURLにIDが付与され、永続化される。構造化されたメタデータog:imageはさらにメタデータを付与できます。イメージが何であるかで、キャプションではなく、視覚障害者や表示されなかった時にイメージを言葉として伝える役割がある。og:image系を使うのなら使うべき。Metadataが出るのに対して、og:imageにするとエラーが消えます。理由がわからないので、StackOverFlowなどで聞いて、答えがでたら追記します。以下のように同じ属性を複数指定することができます。最初に定義したのがルートタグになります。拡散されやすいコンテンツにするには必須です。以下のように二つの同じコンテンツのリンクがあるとすると、どっちに行ってみたいと思いますか。keisukeyamashita.comもちろん、見た目だけで安直に「こっちがいい!」と決めることはできないので、効果に関してはA/Bテストなどを検証してください。デバッグだいたい概要を掴めてきたので、実装に入ります。Developersのシェアデバッカーというものを使用します。自分のポートフォリオサイトを検証します。ちなみに私のポートフォリオサイトの<head>タグは以下の通りです。content="ALL">はクローラーのための設定なので気にしないでください。デバックを見てみる以下のような結果が出ました。重要なのは何がだめかと何が設定されているかです。結果をもとに実装・修正するまず、修正しろと言われているものを考えます。Propertyですが、トップURLと一致しているため「もしトップURLじゃなくて別のページなら、ページ固有に指定しろよ」のケースもあるようです。portfolio">propertyでした。今回はシングルページアプリケーションなので修正する必要がないので無視します。Missingですが、フェイスブックのアプリ登録から指定するべきです。Facebookが管理者情報を管理するのに使います。Facebookがいいね!だったりを管理するのに使うそうです。アドテクの分野かなと思います。FacebookインサイトでFacebookアプリケーションを作る以下のリンクにいって、「ページインサイトを見る」を押してください。www.facebook.com「アプリを作成」をおします。開発者登録、アプリケーションを登録します。以下の箇所でfb:app_idを取得します。プライバシーポリシーは以下の通りに設定しますが、今回は長くなるので設定せずfb:app_idは仮です。書き方は以下のリンクを参照してください。watashinoikigai.com以下をすべて変更したあとのものです。再度デバッグ再度、デバッカーで行うと以下のようになりました。