OGPとは｜メタタグの基礎・og:imageの推奨サイズ・SNSカード表示の仕組み

記事のURLをXやFacebook、LINE、Slackなどに貼り付けたとき、タイトル・説明文・サムネイル画像がひとつのきれいな「カード」として展開された経験はないでしょうか。この見栄えを決めているのがOGP（Open Graph Protocol）と呼ばれるメタタグの仕組みです。本記事では、OGPとメタタグの基礎、主要なタグの役割、SNSがカードを生成する流れ、そして画像の推奨サイズや設定の確認方法までを順を追って解説します。

OGPとメタタグとは

メタタグとは、HTMLの<head>内に記述する「ページに関する情報（メタデータ）」のことです。ブラウザの画面には直接表示されませんが、検索エンジンやSNS、各種ツールがページの内容を理解するための手がかりになります。ページのタイトルや説明文、文字コード、表示倍率などがメタタグで指定されます。

OGP（Open Graph Protocol）は、もともとFacebookが提唱した規格で、「このページをSNSでシェアしたとき、どんなタイトル・説明・画像で見せたいか」をページ側から指定するためのメタタグ群です。og:という接頭辞が付いているのが特徴で、現在ではFacebookに限らず、X（旧Twitter）、LINE、Slack、Discordなど多くのサービスがこの情報を読み取ってカードを表示します。

つまりOGPは、「シェアされたときの見た目を、サイト運営者が自分でコントロールするための仕組み」です。設定していないと、SNS側が本文から推測した中途半端な情報や、画像なしの寂しいリンクとして表示されてしまうことがあります。必要なタグをまとめて生成したいときは、メタタグ生成ツールを使うと、入力した内容から正しい形式のタグを一括で作成できます。

title・descriptionの役割

OGP固有のタグに入る前に、まず土台となる基本のメタタグを押さえておきましょう。これらは検索結果（SEO）でもSNSでも共通して使われる、もっとも重要な要素です。

titleは、そのページが何のページなのかを一言で表す最重要のテキストです。検索結果ではクリックを左右する見出しになり、SNSでもog:titleが未設定ならこの値が代わりに使われます。長すぎると途中で省略されるため、要点を前半に置いて簡潔にまとめるのがコツです。

descriptionは、ページの内容を120文字前後で要約した説明文です。検索エンジンが必ずそのまま表示するわけではありませんが、ユーザーがクリックするかどうかの判断材料になります。SNSのカードでも、og:descriptionがなければこの値が説明文として使われます。titleとdescriptionは、OGPと検索の両方を支える基礎なので、どのページでも必ず設定しておきましょう。

og:title・og:image・og:typeの意味

ここからがOGP固有のタグです。代表的なものを整理します。いずれも<meta property="og:..." content="...">という形式で記述します。

• og:title：シェア時に表示されるタイトル。未設定なら<title>が使われます。SNS向けに、より短く魅力的な見出しにすることもできます。
• og:description：シェア時の説明文。カード内でタイトルの下に表示されます。
• og:image：カードのサムネイル画像のURL。視認性を大きく左右する、見栄えの要です。
• og:url：ページの正規URL。複数のURLで同じ内容が見られる場合に、どれを代表とするかを示します。
• og:type：ページの種類。通常のページはwebsite、記事ならarticleを指定します。
• og:site_name：サイト名。カードの補助情報として表示されます。

このうち、最低限そろえておきたいのはog:title・og:description・og:image・og:url・og:typeの5つです。特にog:imageは、カードの印象とクリック率を大きく左右するため、必ず適切な画像を指定しておきたいタグです。

<meta property="og:title" content="OGPとは">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:type" content="article">

これらのタグを一つひとつ手書きすると記述ミスが起きやすいため、メタタグ生成ツールでまとめて生成し、コピーして貼り付けるのが確実です。

SNSカード表示の仕組みとtwitter:card

SNSにURLを貼ると、なぜ自動でカードが表示されるのでしょうか。仕組みはおおむね次の流れです。

• ユーザーがURLを投稿、またはプレビューを開く。
• SNS側のクローラー（情報収集プログラム）がそのページにアクセスする。
• ページの<head>内のOGPタグを読み取り、タイトル・説明・画像を取得する。
• 取得した情報をもとに、カード形式のプレビューを生成して表示する。

X（旧Twitter）はOGPに加えて、独自のtwitter:cardというメタタグも参照します。代表的な値は、大きな画像を上部に表示するsummary_large_imageと、小さな正方形画像を横に並べるsummaryの2つです。横長の画像でインパクトを出したい記事ではsummary_large_imageを指定するのが一般的です。

なお、多くのSNSはクローラーが取得した内容をキャッシュ（一時保存）します。そのためOGPを修正してもすぐには反映されないことがあり、各サービスが提供するデバッグツールでキャッシュの再取得を促す必要がある場合があります。

og:imageの推奨サイズと作り方

カードの第一印象を決めるのがog:imageです。各SNSで安定してきれいに表示させるための定番サイズは、横1200×縦630ピクセル（おおよそ1.91:1の横長比率）です。このサイズを基準にしておけば、主要なSNSで大きな画像カードとして適切に表示されます。

• 推奨サイズ：1200×630ピクセル。最低でも横600ピクセル以上を確保すると安心です。
• 比率：1.91:1の横長。正方形や縦長は意図しないトリミングが起きやすくなります。
• ファイル形式：PNGまたはJPEG。容量が大きすぎると取得に失敗することがあるため、適度に圧縮します。
• 文字の配置：端は切れる可能性があるため、重要なテキストは中央寄りに配置します。

画像のURLは、相対パスではなくhttps://から始まる絶対URLで指定するのが鉄則です。相対パスだとクローラーが画像を取得できず、カードに画像が表示されない原因になります。1200×630のシェア画像を手早く用意したいときは、OGP画像生成ツールを使うと、タイトル文字を入れた最適サイズの画像をその場で作成できます。デザインソフトを開かなくても、推奨比率に沿った画像が用意できるので便利です。

設定の確認方法

OGPは設定して終わりではなく、実際に正しく読み取られるかを確認することが大切です。確認には主に次の方法があります。

1. ページのソースを確認する

ブラウザでページを開き、ソース表示で<head>内にog:タグが正しく出力されているかを確認します。タグの綴り間違いや、og:imageが絶対URLになっているかを目視でチェックできます。

2. 各SNSのデバッグツールで確認する

FacebookやXなど主要なSNSは、URLを入力するとクローラーが実際に取得した内容をプレビューできるデバッグツールを提供しています。ここで画像やタイトルが意図どおり表示されるかを確認し、修正後はキャッシュの再取得を実行します。

OGPとメタタグは、検索とSNSの両方であなたのページの「顔」を作る基礎です。まずはtitle・descriptionを整え、og:title・og:image・og:type・twitter:cardといった主要タグを設定し、1200×630の画像を用意するところから始めましょう。タグの生成はメタタグ生成ツール、画像の作成はOGP画像生成ツールを使えば、専門知識がなくても整った状態を素早く用意できます。

なお本記事は一般的な情報の提供を目的としたものです。OGPやtwitter:cardの仕様、推奨サイズ、キャッシュの挙動は各サービスの都合で変更されることがあります。実際の設定にあたっては、最新の公式情報を確認のうえで判断してください。