OpenGraph og:title og:description og:image
ソーシャルネットワークでページを共有したときの表示を制御します
「OpenGraph og:title og:description og:image」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
OpenGraphとは
OpenGraphはFacebookが導入したメタデータプロトコルで、ソーシャルプラットフォームで共有されたときにページをどのように表示するかを、あらゆるページから指定できるようにします。タグは<head>内に<meta property="og:..." content="...">のペアとして記述し、主要なソーシャルネットワークがスクレイピングします。
主要タグ
実質的に必須となる4つのタグはog:title、og:description、og:image、og:urlです。いずれかが欠けると、魅力のないシェアカードになったり、さらに悪い場合にはプレビューがまったく表示されず、ユーザーに見過ごされたりします。
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
シェアカードに表示される見出しです。ソーシャルネットワーク上で途中までしか表示されないことを避け、1行に収まるように約60文字以内にします。ページの<title>と一致させますが、クリック率を高めるように最適化しても構いません。
og:description
タイトルの下に表示される1〜2文の概要です。120〜160文字を目安にします。興味を引くには十分な長さでありながら、すべてのプラットフォームで全文を表示できる短さです。クリックベイトは避けてください。正直な説明のほうが、長期的には高いエンゲージメントにつながります。
og:image
メイン画像です。1200x630ピクセルのJPGまたはPNG（約5 MB未満）を使用します。必ず絶対URLを指定してください。相対URLでは、スクレイパーが「このページ」がどれかを認識できないため機能しません。og:image:widthとog:image:heightも指定すると、プレビュー生成時の追加リクエストを省略できます。
og:url
ページの正規URLです。ページにすでに<link rel="canonical">がある場合でも設定してください。スクレイパーによってはOGタグを優先するためです。トラッキングパラメーターを削除し、ソーシャルプラットフォームのデータベース上で共有URLが多数の「異なる」ページに分裂しないようにします。
og:type
「website」、「article」、「product」、「video.movie」、「book」など、このコンテンツの種類をプラットフォームに伝えます。ブログ記事ではArticleが最も一般的な選択肢で、article:published_timeやarticle:authorなどの追加タグも利用できるようになります。
og:locale
コンテンツのBCP-47ロケールです（例：「en_US」、「tr_TR」）。og:locale:alternateと組み合わせることで、ページが利用可能な他の言語をネットワークに伝えます。Facebookはこの情報を使ってプレビューを翻訳するかどうかを判断します。
og:site_name
公開元サイトの表示名です。一部のネットワークではカード上のサブタイトルとして表示されます。どの記事を共有してもブランド名が同じように表示されるよう、短くしてすべてのページで統一してください。
カードのテスト
FacebookのSharing DebuggerとLinkedInのPost Inspectorを使うと、スクレイパーが取得する状態でページを取得し、解析されたタグを確認して、キャッシュされたプレビューを更新できます。新しいog:imageをデプロイした後は再スクレイピングが必要です。そうしないと、ユーザーには数日間古い画像が表示されます。
よくある落とし穴
サーバーでレンダリングされたタグは必須です。ほとんどのスクレイパーはJavaScriptを実行しないため、クライアント側でReactが挿入したOGタグは認識されません。初期HTMLに、できればSSRまたはSSGを使ってタグを出力してください。そうしないと、シェアカードはいつまでも汎用的なままです。
理解度チェック
og:imageには、相対パスではなく絶対URLを指定する必要があるのはなぜですか？
まとめ
OpenGraphタグ（og:title、og:description、絶対URLを指定したog:image、og:url、og:type、og:locale、og:site_name）は、ページを共有したときの表示を制御します。タグはサーバー側でレンダリングし、タイトルは60文字未満、説明は約150文字にします。1200x630の画像を使用し、公開前にFacebookのSharing Debuggerでテストしてください。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「OpenGraph og:title og:description og:image」レッスンは無料ですか？
はい。「OpenGraph og:title og:description og:image」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「OpenGraph og:title og:description og:image」で何を学びますか？
ソーシャルネットワークでページを共有したときの表示を制御します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「OpenGraph og:title og:description og:image」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- OpenGraph og:title og:description og:image
- Twitter Cardのmetaタグ
- JSON-LD構造化データの基礎
- 国際化ページのhreflang