みなさん、OGPという言葉をご存知でしょうか？OGPとは「Open Graph Protcol」の略で、主に「Facebook」「Twitter」といったSNS（Social Networking Service）で投稿をする際に、記事やWEBページのURLを貼り付ける時に表示されるサムネイル画像を表示させるためのHTMLのタグのことをいいます。
そもそもOGP（Open Graph Protocol）とは？
上にも書きましたが、OGPとは「Open Graph Protocol」オープン・グラフ・プロトコルの略称で、任意のWEBページをリッチなSocial Graphオブジェクトに変換することができます。
OGP：metaタグの設定（方法）
HTMLのhead内にmetaタグとして設定します。meta propertyに各OGPの種類、contentの中にそれぞれの値を設定します。
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />Open Graph Protocolの中身（例）
このような感じになっています。
| 名称 | 値 | 説明 |
|---|---|---|
| og:type | article | ページタイプ |
| og:description | 夏目漱石吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な | 説明文 |
| og:title | 吾輩は猫である | ページタイトル |
| og:url | https://cocoon2.eguweb.net/2624/ | ページURL |
| og:image | https://cocoon2.eguweb.net/wp-content/uploads/2021/06/sigmund-LCun3uxh-z0-unsplash.jpg | 画像URL |
| og:site_name | cocoon | サイト名 |
| og:locale | ja_JP | ロケール |
| article:published_time | 2021-09-07T20:24:42+09:00 | – |
| article:modified_time | 2021-09-07T20:24:42+09:00 | – |
| article:section | Uncategorized | – |
OGP解析ツールが便利
OGPがちゃんと設定されていて、どのように表示されるのか？を確認する方法としては、「OGP解析ツール」が便利です。
OGP画像シミュレータ
FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。そんな時に便利なのがこのOGP画像シミュレータ。デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。
ogp.buta3.net
入力したURLを解析し、サイト内のOGP（Open Graph Protocol）とTwitterカードを表示します。
URLを入れると、どのような画像が表示されて、どのような結果になるのかが分かります。
URLを入力して「解析する」を押すだけで、いろいろなパターンのOGPが表示されるので便利です。
まとめ
OGP設定をすることで、SNSでの投稿やシェアをした際の記事投稿が見やすくなって、シェアをされやすくもなります。
SNSを活用して多くの人にシェアを広げるためにも、OGPを活用してみましょう😃
