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で適用可能

正しく概要を伝え、多くのユーザの関心を惹くためにWebページには必ずOGPを設定しましょう