OGPのサイズとOGPの作り方や設置方法を徹底解説します。
X(旧Twitter)やfacebookをはじめとしたSNS、LINEといったコミュニケーションツールでサイトの概要を魅力的に伝える為に必要不可欠なOGPを適切に設定できる知識がゼロからマスターできます。
サイト制作初心者の方にも分かりやすくOGP画像の作り方と設置について解説いたします！
この記事の目次
OGPとは「Open Graph Protcol」の略称です。
WebページがX(旧Twitter)やfacebook、LINEなどのSNSでシェアされた際にタイムライン等に表示されるサムネイル画像やページタイトル、説明文などを指します。
OGPを正しく設定することで、SNSのタイムラインを見ているユーザーに対してWebページの内容を魅力的に伝える事が可能。
また、OGPはサイト内の各ページで設定する事ができますよ。
X(旧Twitter ツイッター)やfacebook（フェイスブック）で使われるOGP画像のサイズは以下です。
1200×630のOGP画像が1枚あれば全て対応できます。
左右は自動的に切り抜かれるので、重要な情報は中心の630×630の正方形エリアに入れておきましょう。
Photoshop（フォトショップ）を使ったOGP画像の作り方です。
完全オリジナルのOGP画像を自作してみましょう！
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
ドキュメントの設定は下記です。
幅：1200px 高さ：630px
解像度：72ピクセル/インチ
カラーモード：RGBカラー
設定ができたら [ 作成 ] をクリックします。
好きな色を決めて画面をドラッグするとベタ塗りされます。
(Mac：Command + Shift + S)
ファイルの種類：JPEG
任意の場所を選択し、右下の [ 保存 ] をクリックしたら完成。
当ページでは大まかな流れのみ解説しています。
より詳しくPhotoshopの使い方を学びたい方は当サイトの「ゼロから始めるPhotoshop」で完全解説しています。
全て商用利用可能！ノンデザイナーの方でも超短時間でプロの品質が出せます。
作成した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="Xアカウント名(旧Twitter)「@を含むアカウント名」">上記タグをコピペし、対象HTMLのhead内に記述します。
URLは相対パスではなく絶対パスで入力しましょう。
ワードプレスの場合
例えばワードプレステーマの「sango」を使っている場合は、下記の手順でTOPページのOGP画像を登録できます。各ページのOGPはアイキャッチ画像がそれに相当します。
なお、投稿ページ等のOGPにはアイキャッチ画像が使われる優秀な仕様です。
国内最速サーバーのConoHaWINGを使えば有料テーマのsangoがお得に使えますよ。
詳しくはConoHa WING公式サイト
初月の31日間が無料なので超お得！
[ 管理画面左メニュー ] → [ ソーシャルネットワーク ] からX(旧Twitter)やfacebook等の設定が可能です。
機能が少ないテーマにはオススメのプラグインです。
登録したOGPが正常に表示されるか確認しましょう。
「OGP確認」にアクセスし、対象のURLを入力します。
あとは [ 確認する ] をクリックするだけ。
超便利です！
OGP画像に使える高品質なロゴ素材です。
全て商用利用可能なのでサクッと公開可能ですよ！
「ちゃんと使える人」で無いと作れないですよ。
小さなファビコンでも視認性抜群！
色替えは誰でも数クリックで可能です。
ダウンロードする
Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！
様々なフライヤーのテンプレート50選
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選
下記記事で良質な素材を紹介しております。併せてチェックしてください！
以上、OGPのサイズと作り方についてでした。
サイズは1200×630、中心の正方形エリアに重要な情報は入れておけば問題ありません。
あとは確実にOGPタグを設置し、表示確認を怠らないようにしましょう。
ではまた！
ファビコンやバナー、OGPやSNSの投稿サイズ等、Web制作に役立つサイズ情報について徹底解説しています。サイズ情報だけでなく、具体的な作り方も分かりやすく解説します！
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう！
