ogp画像・とは？初心者にも分かる基本解説と設定のコツ共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

ogp画像とは？

ogp画像（Open Graph Protocol の画像）は、ソーシャルメディアで記事がシェアされたときに表示される「サムネイル画像」です。ウェブサイトのヘッダーに設定するメタタグの一つで、SNS上の第一印象を決める大事な要素です。

ogp画像が重要な理由

ソーシャルメディアでの表示は、クリック率に大きく影響します。魅力的な画像を設定すると、友だちやフォロワーが気づきやすく、記事の内容を伝える手助けになります。

基本的な設定と使い方

ogp画像を設定するには、記事のHTMLのhead部分にいくつかのメタタグを追加します。最も大事なタグは og:image です。絶対 URL を指定しましょう。相対パスは避け、https:// から始まるURLを使います。

主なOGタグの役割は次のとおりです。

og:image：表示に使われる画像のURLを設定します。

og:title：SNS上に表示されるタイトルを決めます。

og:description：記事の概要を示します。

og:url：ページのURLを指定します。

og:type：ページの種類（website など）を示します。

次に、これらのタグを実際のHTMLの head 部分に書きます。例として、以下の内容を head に配置します（内容は説明用なので実コードとしてはそのまま使わないでください）。

例の内容（説明用）: og:image に表示したい画像の URL、og:title に記事のタイトル、og:description に要約、og:url にページの URL、og:type を website に設定します。

実際には、以下のような設定をページの head に追加します（URL やタイトルは自分のサイトに合わせて置き換えてください）。

・og:image: https://example.com/images/ogp.jpg

・og:title: 「記事のタイトル」

・og:description: 「記事の説明文」

・og:url: https://example.com/article

・og:type: website

<th>項目

説明
og:image	表示に使われる画像のURLを設定します。
og:title	SNS上に表示されるタイトルを決めます。
og:description	記事の概要を示します。
og:url	ページのURLを指定します。
og:type	サイトの種類を示します（website など）。

画像のサイズと推奨設定

推奨サイズは、横幅 1200 ピクセル以上・縦は 630 ピクセル前後、比率はおおよそ 1.91:1 が一般的です。これにより、Facebook や LinkedIn、もしくは Twitter での表示が美しくなります。

ファイル形式は JPG、PNG が主流です。GIF は動きますが、SNS 上での読み込みが遅くなることがあるため、静止画を使う方が無難です。

公開されている URL が常に有効で、キャッシュが原因で古い画像が表示されることがあるため、変更したら何度かデバッガで検証することを推奨します。

テストと検証の方法

記事を公開したら、実際に SNS での表示を確認しましょう。次のツールを使うと、og タグが正しく取得されているかを確認できます。

Facebook Sharing Debugger、LinkedIn Post Inspector、Twitter Card Validator などを使って、og:image が適切に読み込まれるか、文字数が多すぎないかを検証します。

もし表示されない場合は、og:image のURLの綴りミス、サーバーの設定、robots.txt の制限、キャッシュ をチェックします。

実務でのコツと注意点

実務では、記事の「顔」となる ogp画像を、記事の内容とブランドに合わせて選びます。文字を多く入れすぎず、読みやすいフォントとコントラストを意識しましょう。スマホで表示されることを想定して、画像の中央付近に重要な情報を置くと良いです。

まとめとして、ogp画像は SNSでの集客を左右する重要な要素 です。適切に設定すれば、再シェアの機会が増え、訪問者が増える可能性が高まります。

ogp画像の同意語

ogp画像: Open Graph Protocol（OGP）に対応したSNS共有用の画像。og:image属性で指定されるURLの画像です。SNSのプレビューにこの画像が表示されます。
OGP画像: Open Graph Protocol（OGP）に対応したSNS共有用の画像（表記の大文字バリエーション）。
OG画像: Open Graph Protocolに基づく、SNSへ共有したときのサムネイル画像のこと。og:imageで指定します。
Open Graph画像: Open Graphプロトコルで使用される画像。SNSのリンクプレビューに表示される画像を指します。
Open Graphの画像: Open Graphプロトコルに準拠した画像で、SNSのシェア時に表示される画像のこと。
og:image: Open Graph Protocolで使われる公式属性名。metaタグ property="og:image" の値として画像URLを指定します。
og:imageタグの画像: og:imageタグで指定する画像。URLが設定された画像を指します。
Open Graphプロトコルの画像: Open Graphプロトコルの仕様に従って指定される画像。SNSプレビュー用の画像です。
OGP用画像: OGP（Open Graph Protocol）仕様に合わせて用意する画像。SNSのプレビューで正しく表示されるようにします。
Open Graphのサムネイル: Open Graphで使用されるサムネイル画像。リンクを共有したときに表示される小さめの画像です。
SNSシェア用画像: SNSでリンクをシェアする際に表示される画像。og:imageを設定しておくと正しく表示されます。
SNS用OGP画像: SNS共有用にOGP仕様に沿って用意する画像。

ogp画像の対義語・反対語

非OGP画像: Open Graphのog:imageタグで指定されていない、SNSのプレビュー用画像としては使われない画像。
ogp画像なし: ページにog:imageが設定されていない状態。SNSでのシェア時に画像が表示されない可能性がある。
OGP対象外の画像: Open Graphプロトコルの対象外として扱われる画像。og:imageとしての機能は持ちません。
ogp画像以外の画像: og:imageとは別用途で使われる画像。SNSのプレビューには通常用いられません。
ソーシャル共有非対応画像: SNSでの共有時に表示を想定していない、または表示に適さない画像。
内部使用のみの画像: サイト内のデザイン・UI用で、外部へ共有されるOGPプレビューには使われない画像。
公開前テスト用画像: 公開前のテスト用に用意された画像で、最終的にはog:imageとして使用しない可能性が高い。

ogp画像の共起語

ogp画像: Open Graph ProtocolでSNSへ共有表示時に使われる代表画像のこと。ページの印象を決める視覚要素。
og:image: Open Graphの画像を指定するメタタグ。contentに画像URLを設定してSNS上のプレビューに使用される。
og:image:secure_url: HTTPSのURLを指定する og:image のセキュア版URL。ネットワークの安全性向上のために使われることがある。
og:image:width: og:image の表示幅をピクセル単位で示す補足情報。推奨値は通常横幅1200px程度。
og:image:height: og:image の表示高さをピクセル単位で示す補足情報。推奨値は通常高さ630px程度。
og:image:alt: og:image の代替テキスト。画像が表示されない場合に代わりに読ませる説明。
og:title: SNSのシェア時に表示されるタイトル。ページ内容を短く要約する文字列。
og:description: SNSのシェア時に表示される説明文。要点を短く伝える文章。
og:url: シェア対象となるページのURL。実リンクを設定する。
og:type: ページのタイプを示す。website、article など。
og:site_name: SNSに表示されるサイト名。ブランド名として使われることが多い。
Open Graph Protocol: Open Graph Protocol（Open Graphプロトコル）の正式名称。ogタグの仕様全体を指す用語。
OGP画像設定: サイト全体のOGP設定を整える作業。og:imageやog:titleなどを適切に設定すること。
SNSシェア: ソーシャルメディアでの共有のこと。OGPはこの表示を最適化する要素。
リッチプレビュー: SNSで表示されるカード型のプレビュー。画像・タイトル・説明が1つのカードにまとまる表示形式。
サムネイル画像: 投稿リストやプレビューで使われる代表画像のこと。OGP画像と同一にすることが多い。
画像サイズ推奨: OGP画像の推奨解像度・比率のこと。多くは横縦比1.91:1で1200px以上が目安。
1200x630: OGP画像の代表的な推奨サイズ。横長で表示崩れを防ぐのが目的。
1200x628: Twitterカードで大きな画像を表示させる際のよく使われる推奨サイズの一例。
https URL: og:imageにはHTTPSのURLを用いることが推奨される。セキュリティと信頼性の観点から。
metaタグ: og:* の設定はHTMLのmetaタグとしてhead内に書くのが一般的。
headタグ: HTMLのhead部にOGP関連のメタタグを配置する。
twitter:card: Twitterでのカードタイプを指定するタグ。summary_large_image などを選択する。
twitter:image: Twitterで共有時に使われる画像を指定するタグ。og:imageと同じ画像を指定する場合も多い。
twitter:title: Twitterで表示されるタイトル。og:titleと連携して使われることが多い。
twitter:description: Twitterで表示される説明文。og:descriptionと整合させるのが理想。
Twitterカード: Twitter向けのカード表示を制御する仕組み。
WordPress プラグイン: Yoast SEO、Rank Math、All in One SEO などのプラグインでOGP設定を簡便化できる。
OGP検証: Facebook Sharing Debugger などのツールを使い、og:imageやog:titleが正しく設定されているか確認する作業。
代替テキスト: alt属性の日本語説明。視覚障害者支援や検索エンジンの理解の補助となる。
og:image:url: 古いOGP仕様の og:image:url も使われたが現在は og:image が主流。併用されることは少ない。
画像形式: og:image に設定する画像のファイル形式。JPEG、PNG、WebP などが一般的。
WebP: 高効率な画像形式。軽量化され表示速度を改善することがある。
Canva: Canva、Photoshop などのデザインツールを使ってOGP画像を作成する。
画像最適化: OGP画像はファイルサイズを適度に抑えることが推奨。読み込み速度にも影響する。

ogp画像の関連用語

Open Graph Protocol (OGP): SNSでのリンク共有時に表示情報を統一するための規格。Facebookが提唱し、現在は多くのSNSで対応しています。
og:image: ページが共有されたときに表示されるサムネイル画像のURLを指定する、Open Graphの主要な画像プロパティです。
og:title: SNSのプレビューに表示されるタイトル。ページの見出しや要点を短く伝えます。
og:description: SNSのプレビューに表示される説明文。ページの要約を簡潔に表現します。
og:url: 共有時の対象ページのURL。同一性を保つため正確に設定します。
og:type: 対象となるオブジェクトの種類を示します。website、article、videoなどが代表的です。
og:image:width: og:imageの推奨横幅をピクセルで指定します。プラットフォームの表示に影響します。
og:image:height: og:imageの推奨縦幅をピクセルで指定します。
og:image:alt: 画像の代替テキスト。視覚障害者の方にも情報が伝わるよう説明を付けます。
og:image:secure_url: HTTPS版の画像URLを別途指定する場合に使います。
og:site_name: SNSプレビューに表示されるサイト名。ブランド認知の補助になります。
og:locale: ページの言語と地域を示します（例: ja_JP）。
og:locale:alternate: 他の言語バージョンがある場合に追加で指定します。
og:image:type: 画像のMIMEタイプを指定します（例: image/jpeg）。
og:video: 動画オブジェクトを共有する場合のURLを指定します。
og:video:width: 動画の推奨幅（横幅）を指定します。
og:video:height: 動画の推奨高さを指定します。
og:video:type: 動画のMIMEタイプを指定します（例: video/mp4）。
twitter:card: Twitterカードの種類を設定します。summary、summary_large_image など。
twitter:site: Twitterアカウントのハンドル（例 @yoursite）を指定します。
twitter:image: Twitterカード用の画像URLを指定します。
twitter:title: Twitterカードに表示されるタイトルです。
twitter:description: Twitterカードに表示される説明文です。
metaタグ: HTMLのmetaタグ全般。og:* と併せて、検索エンジンとSNSへ情報を伝えます。
schema.org: 検索エンジン向けの構造化データの標準。Open Graphと組み合わせてSEOを強化します。
ImageObject: schema.orgで定義される画像データの型。サイトの画像情報を構造化します。
サムネイル画像: OGPで使う画像のことを指す言葉。視覚的なプレビューとして重要です。