ポートフォリオの作り方をゼロから徹底解説

【2021年最新版】OGPのサイズと作り方・設置方法を徹底解説【初心者向け】

この記事を読むのに必要な時間は約 14 分です。

OGPのサイズとOGPの作り方や設置方法を徹底解説します。

TwitterやfacebookをはじめとしたSNSにサイトの概要を魅力的に伝える為に必要不可欠なOGPを適切に設定しましょう。
サイト制作初心者の方にも分かりやすくOGP画像について解説いたします!

OGPって何?

OGPとは「Open Graph Protcol」の略称です。
WebページがTwitterやfacebook等のSNSでシェアされた際にタイムライン等に表示されるサムネイル画像やページタイトル、説明文などを指します。

OGPを正しく設定することで、SNSのタイムラインを見ているユーザーに対してWebページの内容を魅力的に伝える事ができます。

また、OGPは各ページで設定する事ができます。

OGP画像のサイズ

Twitter(ツイッター)やfacebook(フェイスブック)で使われるOGP画像のサイズは以下です。

横幅1200px 高さ630px

1200×630のOGP画像が1枚あれば全て対応されます。

LINEは中心の正方形に必要な情報を載せる
LINEも1200×630のOGPで良いのですが、中心の正方形部分のみが表示されます。
左右は自動的に切り抜かれるので、重要な情報は中心の630×630の正方形エリアに入れておきましょう。

OGP画像の作り方

Photoshop(フォトショップ)を使ったOGP画像の作り方です。
完全オリジナルのOGP画像を自作してみましょう!

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
STEP.1
新規ドキュメントを作成
Photoshopを立ち上げ、[ Ctrl + N ] で新規ドキュメントを作成。

ドキュメントの設定は下記です。
幅:1200px
高さ:630px
解像度:72ピクセル/インチ
カラーモード:RGBカラー
設定ができたら [ 作成 ] をクリックします。
STEP.2
空のドキュメントが完成
OGPサイズの空ドキュメントが作成されました。
STEP.3
背景を作成
左のツールバーから [ 塗りつぶしツール(G) ] を選択します。
好きな色を決めて画面をドラッグするとベタ塗りされます。
写真や図形、イラスト等を配置して彩ってみるのも良いでしょう。
STEP.4
文字を入力
ツールバーから [ 文字ツール(T) ] を選択します。

中心の正方形エリアに文字が収まるように入力しましょう。
文字ツールの使い方はコチラで徹底解説しています。
デザインが完成しました。
FINISH
JPEGで保存
[ Ctrl + Shift + S ] を押して [ 名前を付けて保存 ] を開きます。

ファイルの種類:JPEG
任意の場所を選択し、右下の [ 保存 ] をクリックしたら完成。

当ページでは大まかな流れのみ解説しています。
より詳しくPhotoshopの使い方を学びたい方は当サイトの「ゼロから始めるPhotoshop」で完全解説しています。
商用利用可能な高品質バナーテンプレート
ソーシャルメディア用のバナーテンプレートを紹介しています。
全て商用利用可能!ノンデザイナーの方でも超短時間でプロの品質が出せます。

OGPを設置する

作成したOGP画像をサイトに設置しましょう。

HTMLにOGPタグを記述

<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページ概要">
<meta property="og:type" content="ページタイプ TOPページは「website」、TOP以外は「article」">
<meta property="og:url" content="ページのURL https://から始まる絶対パスで入力。">
<meta property="og:image" content="OGP画像のパス https://から始まる絶対パスで入力。">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="カードの種類「summaryまたはsummary_large_image」">
<meta name="twitter:site" content="Twitterアカウント名「@を含むアカウント名」">

上記タグをコピペし、対象HTMLのhead内に記述します。
URLは相対パスではなく絶対パスで入力しましょう。

ワードプレスの場合

例えばワードプレステーマの「sango」を使っている場合は下記の手順でOGP画像を登録できます。

STEP.1
カスタマイズをクリック
ログインした状態で画面上部の [ カスタマイズ ] をクリックします。
STEP.2
トップページのOGP画像をクリック
左メニューの [ サイトの基本設定 ] → [ トップページのOGP画像 ] をクリックします。
FINISH
設定完了
画像を設定したらTOPページ用のOGP画像の設定完了です。
なお、投稿ページ等のOGPにはアイキャッチ画像が使われる優秀な仕様です。

国内最速サーバーのConoHaWINGを使えば有料テーマのsangoがお得に使えますよ。
詳しくはConoHa WING公式サイトで確認できます。
初月の31日間が無料なので超お得!
プラグイン「All in One SEO Pack」を活用
WordPressプラグインの「All in One SEO Pack」でOGPの設定ができます。
[ 管理画面左メニュー ] → [ ソーシャルネットワーク ] からTwitterやfacebook等の設定が可能です。
機能が少ないテーマにはオススメのプラグインです。

OGPが表示されるかチェック

登録したOGPが正常に表示されるか確認しましょう。
「OGP確認」にアクセスし、対象のURLを入力します。

STEP.1
OGP確認にアクセス
登録したOGPが正常に表示されるか確認しましょう。
[ OGP確認 ] にアクセスします。
STEP.2
URLを入力して確認する
対象のURLを入力します。
あとは [ 確認する ] をクリックするだけ。
FINISH
確認完了
facebook、Twitter、はてなブックマーク、LINEでの見え方が確認できます。
超便利です!

おわりに

以上、OGPのサイズと作り方についてでした。

サイズは1200×630、中心の正方形エリアに重要な情報は入れておけば問題ありません。
あとは確実にOGPタグを設置し、表示確認を怠らないようにしましょう。

ではまた!

ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!