Open Graphタグ
技術＆インフラFacebookなどのソーシャルメディアで共有された際のコンテンツの表示（プレビュー）を制御するメタタグです。
定義
OGタグ（Open Graphタグ）は、ウェブページの`<head>`セクションに配置されるHTMLメタタグで、そのページのURLがソーシャルメディアプラットフォーム、メッセージングアプリ、リンクプレビューを生成するその他のサービスで共有された際の表示を制御します。このプロトコルは2010年にFacebookによって作成され、以来ウェブ全体のリンクプレビューの普遍的な標準となっています。OGタグは4つのコアプロパティを定義します：`og:title`（プレビューに表示される見出し）、`og:description`（要約テキスト）、`og:image`（プレビューサムネイル）、`og:url`（正規リンク）。`og:type`、`og:site_name`、`og:locale`などの追加プロパティがさらなるコンテキストを提供します。OGタグがない場合、プラットフォームはページをスクレイピングして何を表示するか推測しようとしますが、これは壊れた画像、切り詰められたテキスト、または無関係なコンテンツを生成することがよくあります。
重要な理由
ソーシャルメディアで共有されるすべてのリンクはプレビューカードを生成します。そのカードは、人々がクリックするかどうかを決める前に見る最初の、そしてしばしば唯一のものです。適切に設定されたOG画像、明確なタイトル、説得力のある説明は、一般的または欠落したプレビューと比較してクリックスルー率を何倍にも増やすことができます。ソーシャルチャネルを通じて[フリップブック](/glossary/flipbook)を配信する出版社にとって、プレビューカードはコンテンツのミニチュア広告として機能します。OGタグはWhatsApp、Slack、iMessageなどのメッセージングアプリでのリンク表示にも影響し、ソーシャルメディアフィードをはるかに超えてクリック行動に影響を与えます。
FlipLinkでの使い方
FlipLinkの[SEOとソーシャルプレビュー](/features/seo-and-social-previews)機能を使用すると、各パブリケーションのOGタグを設定できます。パブリケーション設定を通じてカスタムタイトル、説明、プレビュー画像を設定すると、FlipLinkが正しい`og:title`、`og:description`、`og:image`、`og:url`、`og:type`メタタグを自動生成します。これにより、共有されるすべてのフリップブックリンクが、HTMLの編集なしで洗練されたブランド化されたプレビューカードを表示します。OG画像はフリップブックのカバーページまたはソーシャル共有用にデザインされたカスタムグラフィックにできます。
セットアップチェックリスト
ソーシャル共有の効果を最大化するために、OGタグを正しく設定するための手順：
1. **og:titleの設定** - 60文字以内に収めます。ブランド名だけでなく、コンテンツのトピックを含む説明的なタイトルを使用します。例：「春コレクションカタログ | ブランド名」を「ブランド名」だけにしないでください。
2. **og:descriptionの記述** - 120〜155文字を目標にします。バリュープロポジションまたはコールトゥアクションを含めます。フリップブック内で読者が何を見つけるかを説明します。
3. **og:imageの選択** - 少なくとも1200x630ピクセルの画像を使用します。フリップブックのカバーページが適していますが、テキストオーバーレイ付きのカスタムソーシャルグラフィックの方がパフォーマンスが良い場合があります。サムネイルとして表示されるため、小さなテキストが多すぎる画像は避けてください。
4. **og:urlの確認** - これはパブリケーションの[正規URL](/glossary/canonical-url)である必要があります。フリップブックが複数のURLからアクセス可能な場合、og:urlはプライマリURLを指す必要があります。
5. **og:typeの設定** - ランディングページには「website」、個別のパブリケーションやブログ投稿には「article」を使用します。
6. **共有前のテスト** - FacebookのSharing Debugger、TwitterのCard Validator、LinkedInのPost Inspectorを使用して、公開共有する前にリンクがどのように表示されるかプレビューします。
よくある質問
**OGタグを設定しないとどうなりますか？**
ソーシャルプラットフォームがページを分析してタイトル、説明、画像を推測しようとします。結果は予測不能です。ページからランダムな画像、切り詰められたHTMLタイトル、またはプレビューなしが表示される可能性があります。明示的なOGタグを設定することで、この不確実性を完全に排除できます。
**OGタグはSEOランキングに影響しますか？**
OGタグは検索エンジンのランキングに直接影響しません。ただし、共有リンクのクリックスルー率に大きく影響し、トラフィックを生み出します。より多くのトラフィックとエンゲージメントは、時間の経過とともに間接的に検索可視性を改善する可能性があります。
**OGタグはTwitter Cardsと同じですか？**
Twitterには独自のメタタグ（`twitter:card`、`twitter:title`、`twitter:image`）がありますが、Twitter固有のタグが存在しない場合はOGタグにフォールバックします。LinkedIn、WhatsApp、Slack、iMessageを含むほとんどのプラットフォームは、リンクプレビューの主要ソースとしてOGタグを使用しています。
技術的な詳細
OGタグは`<head>`要素内の簡潔なHTML構造に従います：
- `og:title` - プレビューに表示されるタイトル。ページの`<title>`タグにナビゲーションパンくずリストやサイト全体のサフィックスが含まれており、ソーシャルコンテキストでは意味をなさない場合は、異なるものにする必要があります。
- `og:description` - 簡潔な要約。検索エンジン用のメタディスクリプションとは異なり、OGディスクリプションはソーシャルコンテキスト向けに最適化する必要があります：より短く、より直接的で、アクション指向に。
- `og:image` - 画像ファイルへの絶対URL。Facebookは1200x630ピクセルを推奨しています。200x200ピクセルより小さい画像は一部のプラットフォームでレンダリングされない場合があります。
- `og:type` - コンテンツを分類します。一般的な値は「website」、「article」、「product」、「video.other」です。
- `og:url` - 正規URL。同じコンテンツが複数のURLからアクセス可能な場合、プレビューカードの重複を防ぎます。
- `og:locale` - コンテンツの言語を指定します（例：「en_US」、「ja_JP」）。多言語パブリケーションに便利です。
URLが共有されると、プラットフォームのクローラーがページを取得し、HTMLからOGタグを読み取り、結果をキャッシュします。そのため、古いプレビューをすでにキャッシュしたプラットフォームでは、OGタグの変更がすぐに反映されません。タグを更新した後は、各プラットフォームのデバッグツールを使用して再スクレイプを強制してください。
関連用語
決済ゲートウェイ
Stripeなど、FlipLinkを通じたドキュメント販売のオンライン決済を処理するサービスです。
PDF.js
WebブラウザでPDFファイルを直接レンダリングするMozillaのオープンソースJavaScriptライブラリです。
PWA（プログレッシブWebアプリ）
オフラインでも動作し、ネイティブアプリのようにデバイスにインストールできるWebアプリケーションです。
レスポンシブデザイン
あらゆる画面サイズやデバイスに適切に表示されるよう、レイアウトとコンテンツを自動調整する設計手法です。
レスポンシブ埋め込み
フリップブックのサイズをコンテナや画面幅に合わせて自動調整する埋め込みコードです。
関連機能
他の言語で利用可能
PDFを
もっと活用しませんか？
FlipLinkを活用して、PDFから魅力的でインタラクティブなコンテンツを作成している多くの企業に加わりませんか。クレジットカード不要で無料スタートできます。