はじめに
先日、作成したWebアプリケーションをデプロイしました。URLをラインで共有したところ、普段サイトのURLを共有した時と比べて以下の2点が気になりました。
- 説明文が崩れている点
- 画像がない点
こららについて調べたところ、OGPというものが関わっているようです。OGPについて調べて編集した内容をここに記します。
因みにデプロイしたアプリはこちらです。
https://tutorconnect-11e9659f9c5d.herokuapp.com/
OGPとは
OGP（Open Graph Protocol）とは、WebページのURLがSNSに投稿されたとき「タイトル」「画像」「説明文」などの補足情報を表示するための仕組みです。OGPを設定することにより、そのWebページの魅力をSNSで伝えやすくなります。OGPは、HTMLのheadタグ内にmetaタグで記述します。
OGPタグをいくつかまとめます。
- og:title
ページのタイトルを記述 - og:type
ページの種類を記述（website OR article） - og:url
ページのURLを記述 - og:image
画像のURLを記述 - og:description
ページの説明文を記述
現在のSNS投稿時の表示
LINEではこんな感じです。
OGPを記述
<meta property="og:title" content="TutorConnect">
<meta property="og:type" content="website">
<meta propetry="og:url" content="https://tutorconnect-11e9659f9c5d.herokuapp.com/">
<meta property="og:image" content="https://tutorconnect-11e9659f9c5d.herokuapp.com/icon-orange.png">
<meta property="og:description" content="家庭教師として働く大学生のためのQ&Aプラットフォーム。家庭教師が抱える不安や悩み、日常の課題を共有し、解決策やアドバイスを得ることができる場を提供します。">
OGP記述後のSNS投稿時の表示
画像が加わり、サイトの説明文も整いました。
メタディスクリプション
ついでに、検索時に表示される説明文も記述します。
<meta name="description" content="家庭教師として働く大学生のためのQ&Aプラットフォーム。家庭教師が抱える不安や悩み、日常の課題を共有し、解決策やアドバイスを得ることができる場を提供します。">