OGP（Open Graph Protocol）とは？（サンプルコード付）

SEOとは切っても切り離せないOGP（Open Graph Protocol）について解説いたします。
OGPがSEOとは切っても切り離せないと言える理由を挙げてみたいと思います。

• SEOのタイムラインでエンゲージメントが発生しやすい投稿がネガティブなわけがない
• サイト内に簡潔なメタデータが増えることが何も意味ないことがない
• 前述の要因が巡り巡ってユーザーの行動を引き起こす

ということだと考えています。
では、進めていきたいと思います。

OGPの概略

OGP（Open Graph Protocol）はSNSのタイムラインに適切な情報表示をするためのコード（プロトコル）です。
OGPタグを適切に設定することで、X（Twitter）やFacebookのタイムラインで綺麗に標示したい内容を表示することが出来るようになります。
そのOGPの大本のについては、以下の本家サイトをご覧ください。

1ページ構成のサイトで、リファレンスも綺麗にまとまっています。
取り立てて難しいわけではありませんので、以下、当サイトのOGPと本家サイトのリファレンスのサンプルコードを書いていこうと思います。

OGPのサンプルコード

当サイトのサンプルコード

当サイトのトップページで設定している記述例です。

<meta property="og:locale" content="ja_JP" />
<meta property="og:site_name" content="SEM LABORATORY - SEO/MEO/YouTube動画/SNS/デジタル広告に強いマーケティング" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SEM LABORATORY - SEO/MEO/YouTube動画/SNS/デジタル広告に強いマーケティング" />
<meta property="og:description" content="SEMラボラトリーは大阪のSEO対策に特化した専門会社です。SEO/MEO/YouTube動画/SNS/デジタル広告に関するコラムを配信しています。生成AIをフル活用し、独自の制作技術・ノウハウに基づいた施策・対策で高い効果を実現します。SEO、MEO、YouTube動画、SNS、広告にワンセットで取り組みクライアント様のビジネスを成功に導きます。" />
<meta property="og:url" content="https://www.semlaboratory.jp/" />
<meta property="og:image" content="https://www.semlaboratory.jp/wp-content/uploads/2025/01/top-main_241205.png" />
<meta property="og:image:secure_url" content="https://www.semlaboratory.jp/wp-content/uploads/2025/01/top-main_241205.png" />
<meta property="og:image:width" content="1450" />
<meta property="og:image:height" content="816" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@semlaboratory" />
<meta name="twitter:title" content="SEM LABORATORY - SEO/MEO/YouTube動画/SNS/デジタル広告に強いマーケティング" />
<meta name="twitter:description" content="SEMラボラトリーは大阪のSEO対策に特化した専門会社です。SEO/MEO/YouTube動画/SNS/デジタル広告に関するコラムを配信しています。生成AIをフル活用し、独自の制作技術・ノウハウに基づいた施策・対策で高い効果を実現します。SEO、MEO、YouTube動画、SNS、広告にワンセットで取り組みクライアント様のビジネスを成功に導きます。" />
<meta name="twitter:creator" content="@hayax" />
<meta name="twitter:image" content="https://www.semlaboratory.jp/wp-content/uploads/2025/01/top-main_241205.png" />

プラグインを使って配信しているため、これで完璧というわけではありませんが、ひとまずポイントは押さえていますので、それでいいかなと考えています。
完璧を望まれる場合、個別にページごとに設定することをおすすめいたします。

ベーシックな記述

最低限、記述しなければいけないベーシックラインというところでしょうか。

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

オプション記述

細かいオプションを指定する記述となるようです。

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

画像メディアを指定する記述

画像ファイル、画像メディアを指定する際の記述です。

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

動画メディアを指定する記述

動画ファイル、動画メディアを指定する際の記述です。

<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

オーディオメディアを指定する記述

オーディオファイル、オーディオメディアを指定する際の記述です。

<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

厳密な括りかどうかは分かりませんが、”音楽データ”と”オーディオデータ”は別物と区切られているようでした。
オーディオなのか音楽なのか・・・など細かい指定もあるようですが、あまり気にしなくてもいいような・・・。

補足・その他

細かいことを言い出すとキリがないんですが、これだけは見ておいていただきたいという項目が「Implementations」という項目です。
「Implementations」とは日本語で「実装」という意味を持つ言葉です。
ここに書かれている項目は、本家の記述とは異なり、専用媒体で利用するために作られた記述のものです。
オフィシャルだけどオフィシャルではない・・・的な、そんな立ち位置でしょうか。

これらのOGPは本家が作成したというわけではないタグです。

元々、別の記事でも書いたことですが、一言で”メタタグ”と言われるタグは、そもそも広義な意味を持ち、可視化されない隠されたデータを記述するタグのことを指しています。
私たちは、OGPもメタタグの一種だという認識なんですが、そんなメタタグはブラウザが”サポートしてる”とか”サポートしてない”というのは無関係な記述です。
それと同義の働きを持つ気jつが「Implementations」の項目に書かれている記述です。

ケースとしては以下の様に書かれています。

• Facebook Object Debugger – Facebook’s official parser and debugger
• Google Rich Snippets Testing Tool – Open Graph protocol support in specific verticals and Search Engines.
• PHP Validator and Markup Generator – OGP 2011 input validator and markup generator in PHP5 objects
• PHP Consumer – a small library for accessing of Open Graph Protocol data in PHP
• OpenGraphNode in PHP – a simple parser for PHP
• PyOpenGraph – a library written in Python for parsing Open Graph protocol information from web sites
• OpenGraph Ruby – Ruby Gem which parses web pages and extracts Open Graph protocol markup
• OpenGraph for Java – small Java class used to represent the Open Graph protocol
• RDF::RDFa::Parser – Perl RDFa parser which understands the Open Graph protocol
• WordPress plugin – Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
• Alternate WordPress OGP plugin – A simple lightweight WordPress plugin which adds Open Graph metadata to WordPress powered sites.

見たこともないOGPがあります。

あとは、それぞれ本家サイトからリンクを辿っていただき、仕様をご確認いただきたい次第です。
特に、facebookは必須かなと思います。

締め

OGPについて以上です。

よく見るOGPかどうかは分かりませんが、OGP自体に何の意味があるか分かっていないと、無駄に労力を使ってしまいそうな、そんな感じがします。
OGP自体にSEO効果があるかどうかは分かりませんが、”タイムラインやメディアにOGPデータがどのように表示されるか？”というのは途轍もなく重要になります。
一つでも多くのクリックやエンゲージメントを獲得することを考えてたいなら、絶対に理解しておきたい項目ですね。

是非いろいろな情報に触れてみてください。