ogpの設定 #OGP

ogpを書くことがあったのでメモ

ogpとは

「Open Graph protocol」の略称
snsでシェアされた時の写真や、説明の表示方法を指定する仕組み。

設定

(ogpというより、head内書き方)

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# twitter: http://ogp.me/ns/twitter#">
        <meta charset="utf-8">
        <title>サイトタイトル</title>
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://shikumi-zukuri.com" />
        <meta property="og:image" content="https://shikumi-zukuri.com/img/ogp.png" />
        <meta property="og:site_name" content="サイトの名前" />
        <meta property="og:description" content="サイトの説明" />
        <meta property="fb:app_id" content="fb_app_ID" />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="@yourtwitteraccount" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
 </head>

prefix

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

このprefixのいまいち分かっていない。
おそらく、ogや、fb、twitterというタグをhead内で使えるようにする為じゃないかなと。
これにより、ogpのサーバに問い合わせるという。

参考

facebook app idの取得方法
https://blog.sixapart.jp/2012-04/fb-app-id.html

ogp本家
http://ogp.me