OpenGraph画像とは

OpenGraph画像は、Twitter、Facebook、Open Graphプレビューで表示されるOpenGraphタグで使用される画像です。

OpenGraph画像は静的または動的にすることができます。これは、OpenGraphジェネレーターで生成されるか、他のツールで生成されるかによって異なります。

OpenGraphジェネレーターで生成された画像は通常、提供されたメタデータに基づいて生成され、そのメタデータは通常静的であるため、静的です。たとえば、ブログ記事のメタデータを提供した場合、OpenGraphジェネレーターはそのメタデータに基づいて静的なOpenGraph画像を生成します。

一方、他のツールで生成された画像は動的である可能性があります。たとえば、サーバーサイドレンダリングフレームワークを使用してOpenGraph画像を生成する場合、これらの画像はユーザーの行動、時間、天気などの情報に基づいて生成される可能性があります。

ツールを使用してOpenGraph画像を作成する

OpenGraphのHTMLコード

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

このHTMLコードにより、ページのOpenGraphでhttps://example.com/og-image.pngこの画像が表示されます。

プレビュー効果

OG画像を作成した後、多くのウェブサイトがオンラインプレビューとデバッグツールを提供し、問題の診断を支援します。以下は一般的なツールです：