Webページの概要を、SNS上で効果的に表示するためのHTML要素"OGP"について
OGPってなに？から実装方法まで簡単に説明
OGPってなに？
「Open Graph Protocol」のこと
WebページがFacebookやTwitter、InstagramなどのSNSでシェアされた時に表示される
サイト名や画像、記事タイトル、説明文などを指定し、表示させるHTML要素
OGPを設定しないと、画像やタイトルなどが表示されなかったり、意図しない画像・タイトルが表示されてしまう
ページの概要を正しく伝え、ユーザーの興味を引くためにとても重要な要素です
実装方法（Facebook）
headタグ内に設置します
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# {{prefix属性}}: http://ogp.me/ns/{{prefix属性}}#">
<title>ページタイトル</title>
<meta property="og:title" content="{{タイトル}}" />
<meta property="og:type" content="{{種類}}" />
<meta property="og:url" content="{{URL}}" />
<meta property="og:image" content="{{サムネイル画像のURL}}" />
head prefix～
OGPの宣言タグ
prefix属性にはトップページは「website」、その他のページには「article」を指定
og:title
ページ単体のタイトルを20文字ほどで指定
og:type
OGPを設定するWebページの種類を指定
website／blog／video／articleなどが指定できます。
og:url
OGPを設定するWebページのURLです。相対パスではなく絶対パスを指定
og:image
サムネイル画像を指定します。URLと同様、絶対パスで指定
Facebookでは縦630px×横1200px以上（1：1.91）推奨
その他
音楽、動画ファイルなど各種設定することができます
facebook/twitter/LINE/Instagram/YouTube など多くのSNSで適用可能