シェア画像の設定

シェア画像（OGP画像）は、ブログ記事のURLがSNSやチャットでシェアされたときに、リンクのプレビューとして表示される画像です。
この記事では、シェア画像の背景・文字色・フォントの設定方法を説明します。

シェア画像（OGP画像）とは

ブログ記事のURLがX・Slackなどでシェアされると、リンクのプレビュー画像が表示されます。
vibelyでは、記事を公開すると、設定した背景画像に記事タイトルと投稿者を重ねた画像が自動で作られます。

設定ページを開く

左メニューの「受講生アウトプット」→「ブログ」を開き、「公開・通知設定」タブを選びます。
その中の「シェア画像」の項目で設定します。

設定できる項目

• OGPの背景画像
  シェア時に表示される画像の背景です。
  「高さ630px × 幅1200px」のサイズで、クリックまたはドラッグ＆ドロップでアップロードします。
  未設定の場合は、vibelyの標準デザインが使われます。

• 文字の色
  記事タイトルや投稿者名の文字色です（初期値は #333333）。

• フォント
  「ゴシック体」または「明朝体」から選べます。

• Instagramストーリーズの背景画像
  Instagramストーリーズ用の縦長画像です（縦長1080px × 1920px推奨）。
  未設定の場合は、デフォルトの背景が使われます。

設定したら「保存」を押します。
「OGP設定を保存しました」と表示されれば完了です。

背景画像の寸法

アップロードした背景画像の上に記事タイトルなどが重なった状態で表示されます。
文字が表示される位置を参考に、背景画像を作成ください。

OGPの背景画像

画像サイズ：高さ630px - 幅1200px

Instagramストーリーズの背景画像

画像サイズ：高さ1920px - 幅1080px

プレビューで確認する

「OGP画像プレビュー」を押すと、実際に作られるシェア画像を確認できます。
「ストーリーズ画像プレビュー」を押すと、Instagramストーリーズ用の画像を確認できます。

シェア画像が作られる仕組み

記事を公開すると、設定した背景画像の上に、記事タイトル（上部）と投稿者（下部）が、選んだ文字色・フォントで自動的に描かれます。
画像のサイズは1200×630px（SNSの標準サイズ）です。
記事のタイトルを変更すると、シェア画像も自動的に作り直されます。