URLをシェアした時のサムネイル画像は、自分で設定できます！

LPやホームページのURLをSNSでシェアしたい時に、

・アイキャッチ画像が表示されるもの
・文字しか表示されないもの

があると思います。

なぜ画像が表示されるものとされないものがあるのか、
不思議に思いませんか？

実は、URLをシェアしたときの、
・サムネイル画像
・タイトル
・説明文
は自分で設定することができます！

こちらの例で言うと、
・サムネイル画像を、ホームページのヘッダーに
・タイトルを、「ホームページのコーディングポートフォリオ」
・説明文を、「ホームページ(2カラム)のコーディングを実装しました。下層ページは、お問い合わせページ、お菓子のページ、渋谷教室のページを実装しました。」
と設定しています。

これができると、例えばfacebookでシェアした時に、
自分の指定したい画像・タイトル・説明文を表示することができます。

このような、SNSでシェアした時にWebページのタイトルや画像を表示できる仕組みを、OGP(Open Graph Protocol)と言います。

OGPの設定方法
og:urlは、ページのURLを指定
og:typeは、ページの種類を指定
og:titleは、ページのタイトルを指定
og:descriptionは、ページの説明文を指定
og:site_nameは、サイト名を指定
og:imageは、表示する画像のURLを指定

OGPの設定方法

では、どうやって設定すればいいのかと言いますと・・・

HTMLファイルのhead要素に、以下のようなmetaタグを追加するだけでOKです！

<head>
   <meta property="og:url" content="https://v97ug.github.io/prog-school-cooking-site/">
   <meta property="og:type" content="product">
   <meta property="og:title" content="ホームページのコーディング ポートフォリオ">
   <meta property="og:description" content="ホームページ(2カラム)のコーディングを実装しました。下層ページは、お問い合わせページ、お菓子のページ、渋谷教室のページを実装しました。">
   <meta property="og:site_name" content="ホームページのコーディング ポートフォリオ">
   <meta property="og:image" content="https://v97ug.github.io/prog-school-cooking-site/og_image.png">
</head>

OGPのプロパティには、以下のものがあります。