簡単に言うと、 Open Graphをオンラインで確認するには、ページのアドレスを無料のOpen GraphデバッガーPromoPilotに貼り付けてください。PromoPilotは、すべてのog:*タグとTwitterカードタグを読み取り、画像の有無とサイズを確認し、マークアップの完全性を評価し、 Facebook 、X（Twitter）、LinkedInのリンクプレビューを表示します。さらに、追加すべき内容の推奨事項も表示されます。登録は不要です。以下に、必要なタグ、必要なog:imageのサイズ、および「スタック」したプレビューを更新する方法を示します。
私は12年間ウェブサイト制作に携わってきましたが、クライアントから「なぜTelegramリンクに画像がないのですか？」という質問を、ランキングに関する質問よりも頻繁に受けます。どこを見ればいいかさえ分かっていれば、たいてい5分で解決できる作業です。
Open Graphデバッガーは何をチェックするのですか？
投稿やメッセージにリンクを挿入すると、プラットフォームは該当ページにアクセスしてOpen Graphタグを探します。タグが見つかった場合は、見やすいカードを作成します。見つからなかった場合は、見つかった情報を使用するか、URLのみを表示します。このツールは、ソーシャルネットワークが読み取れる情報のみをチェックします。
| 何をチェックするのですか？ | 彼は何を見ているのか？ | なぜ企業はこれを必要とするのか？ |
|---|---|---|
| すべてのタグ og:* | og:title、og:description、og:image、og:url、og:type、og:site_name、og:locale | これらの情報から、各サイトはカードのタイトル、説明、および画像を収集します。 |
| Twitterカード | twitter:カード、twitter:タイトル、twitter:説明、twitter:画像 | X (Twitter) はタグを読み取り、タグが存在しない場合は部分的に og |
| オリジナル画像 | 写真はありますか？また、サイズはどれくらいですか？ | 小さな画像がカードの側面に小さなアイコンとして表示される |
| 完全性評価 | 推奨タグはいくつ入力されていますか？ | 簡単な確認事項：すべて揃っていますか？ |
| ネットワークプレビュー | Facebook 、X、LinkedIn用のカード | 投稿前に、記事がどのように表示されるかを確認できます。 |
| 推奨事項 | 追加または修正すべき点はありますか？ | 開発者向け、またはあなた向けの既成タスクリスト |
Open Graphページをオンラインで確認する方法は？
- Open Graphデバッガーを開きます。
- 共有したいページのURLを入力してください。記事、商品、または広告ランディングページのいずれかを選択できます。「チェック」をクリックしてください。
- タグのリストを確認してください。どのタグが設定されているか、どのタグが空であるか、そしてog:urlに外国のアドレスまたはテストアドレスが含まれているかどうかを確認してください。
- 各ネットワークのプレビューを確認してください。タイトルが途切れていないか、画像が見えているか、周辺に重要なテキストが表示されていないかなどを確認してください。
- 推奨されているとおりに不足しているタグを追加し、ページを再度確認してください。
ツールページ：住所入力欄、「チェック」ボタン、チェック項目一覧、よくある質問（FAQ）。
このツールは軽量で、ゲストユーザーは1日あたりの制限内で、ホームページ、カテゴリ、商品、記事といったサイトのすべてのテンプレートを確認できます。無料登録後は、制限が3倍になります。
Open Graphで最もよくあるエラーは何ですか？
他のほとんどのサイトで見られる問題点と、それを修正する手順を以下に示します。
- og:image が指定されていないか、相対 URL で指定されています。ソーシャル ネットワークは
content="/img/cover.jpg"認識できません。httpshttps://で始まる完全な URL が必要です。画像がないと、投稿のリーチが大幅に低下します。 - 画像が小さすぎます。200x200ピクセルのロゴでは、カードの側面が小さな四角形になってしまいます。1200x630ピクセルの画像が必要です。
- サイト全体で共通のロゴ画像を使用してください。すべての記事とソーシャルメディア上のすべての製品は、ロゴ入りで統一されたデザインにする必要があります。ブログとカタログについては、ページのメイン写真から画像を使用してください。
- og:url は、ホームページ、テストドメイン、または
http://バージョンなど、別のアドレスにリンクします。プラットフォームは、すべてのリンクを単一のページに統合できます。 - twitter:card はありません。これがないと、X は小さなカードを表示することがよくあります。より大きな画像を表示するには、
summary_large_image必要です。 - og:title はタイトルに「buy」とブランド名を重複させて表示します。ソーシャルメディアのフィードでは広告のように見えてしまうため、投稿記事のような、活気のある見出しの方が良いでしょう。
最小限の正しいセットは次のようになります。
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">og:image用の画像を準備するにはどうすればよいですか？
カードの中で最も目立つ部分は画像であり、多くの人がここで手を抜いてしまう。私が守っているルールをいくつか紹介しよう。
- サイズは1200×630ピクセルで、向きは横向きです。ソーシャルネットワークは正方形の商品写真の上下をトリミングするため、商品の頭部や足の裏が写らない場合があります。
- 重要なのは中央部分です。プラットフォームによって端の切り抜き方が異なり、モバイルフィードではカードがさらに小さくなります。テキストは大きく、端から離して配置してください。
- テキストは最小限にしてください。タイトルは既に画像の下に表示されています。画像自体には3～6語程度のキャプション、またはキャプションなしで十分です。
- 軽量ファイル。適度なサイズのJPGまたはPNGファイルであれば、すぐに読み込まれ、プラットフォームがタイムアウトすることはありません。
- 各主要ページには専用の画像を用意しましょう。記事や商品については、記事の表紙画像やメインの商品写真など、画像を自動的に作成すると便利です。
良いテスト方法は、スマートフォンのデバッガーでプレビューを開いてみることです。ズームインせずにリンクがはっきりしない場合は、画像を修正する必要があります。
修正後に古いプレビューを更新するにはどうすればよいですか？
よくあるケースとして、タグを修正したにもかかわらず、ソーシャルネットワークが頑固に古い画像を表示してしまうことがあります。原因はキャッシュです。プラットフォームが最初の共有時のプレビューを記憶しているためです。FacebookではFacebook共有デバッガーでデータを再収集すると解決します。LinkedInでは、投稿インスペクターを使用します。Telegram Telegram 、リンクを送信する@WebpageBotボットを使用します。それでも解決しない場合は、アドレスに?v=2のような無害なパラメータを追加してください。プラットフォームにとって、これは新しいリンクとして認識されます。
比較：Open Graphデバッガーと代替ツール
| 道具 | 無料なのは何ですか？ | 制限 | どのような人に適していますか？ |
|---|---|---|---|
| PromoPilot - Open Graphデバッガー | すべてのogとTwitterタグ、og:画像サイズ、 Facebook 、X、LinkedInのプレビュー、推奨事項 | ソーシャルメディアのキャッシュをクリアしません | ソーシャルメディアに公開する前に、すぐにページを確認してください。 |
| デバッガーの共有（メタ） | Facebookプレビューとデータ再収集 | Facebookのみ、アカウントログインが必要です | Facebookで古いプレビューをリセットする |
| LinkedIn投稿検査 | LinkedInのプレビューとキャッシュの更新 | LinkedInのみ、ログインが必要です | LinkedInで宣伝活動をしている方へ |
| Telegramの@WebpageBot | Telegramのリンクプレビューを更新 | Telegramだけがタグを解析しない | Telegramチャンネルオーナー向け |
結論：キャッシュをクリアするには公式プラットフォームデバッガーが必要ですが、各プラットフォームは独自のネットワークしか表示しません。すべてのプレビューと欠落しているタグのリストを一度に確認するには、汎用デバッガーの方が便利です。
ちなみに、PromoPilotには87種類の無料SEOツールがあります。まだタグを作成していない場合は、プレビュー付きのOpen Graphブロックを作成するメタタグジェネレーターに関する記事シリーズをご覧ください。
Open Graphデバッガーはメタタグ分析とどのように違うのですか？
メタタグ分析は、検索エンジンの視点からページを分析します。タイトル、説明、canonicalタグ、hreflangタグ、Open Graphタグはその一例です。デバッガーはソーシャルメディアに特化しており、さまざまなプラットフォーム向けにカードを作成し、画像サイズをチェックし、プレビューに基づいて具体的な推奨事項を提示します。サイトへのリンクがソーシャルメディアやメッセージングアプリで積極的に共有されている場合、デバッガーはより役立ちます。
どちらにも一つ制限があります。それは、サーバーから返されるHTMLを読み取るという点です。ブラウザのスクリプトによってタグが挿入された場合、多くのソーシャルネットワークではそれらを認識できません。これはウェブサイト側で修正する必要があります。もう一つ重要な点として、デバッガーはタグをチェックしますが、共有自体はチェックしません。ページがパスワードで保護されていたり、地域制限がかかっていたり、ボットから保護されていたりする場合、すべてのタグが存在していても、ソーシャルネットワークはページにアクセスできない可能性があります。
無料ツールでは不十分なのはどんな時か？
デバッガーで確認すると、ページに og:image がないことがわかります。しかし、ページが数千ページもある場合、手動で画像を挿入することは不可能です。次のような場合に専門家の助けが必要になります。
- 各製品または記事には、自動的に収集された独自のプレビュー画像が必要です。
- このサイトはスクリプトを使用してタグを返すため、ソーシャルネットワークはそれらを認識しません。
- 広告やメール配信を開始する際、プレビューごとにクリック単価が変わるように設定されています。
- 適切なカードを使った「ウェブサイト＋ Telegramチャンネル＋自動投稿」の組み合わせが必要です。
あなたのウェブサイトのために、私にできることはありますか？
私はヴァレリー・ダニュクです。開発者兼SEOスペシャリストとして12年の経験を持ち、200社以上のクライアントを抱えています。美しいリンクプレビューは無料で提供しており、各プロジェクトに合わせてカスタマイズいたします。
SEOとプロモーション
- ウェブサイトのSEO監査を包括的に実施します。テンプレートタグをすべてチェックし、自動プレビュー画像を設定し、コードを修正します。
ウェブサイトとオンラインストア
- Instagramからウェブサイトへストアを移行する― 商品のプレビューを適切に表示し、簡単に共有できるようにする。
- 新製品のランディングページをたった一晩で作成しました。NordHarvestの事例研究として、ソーシャルメディア用の既成カードも用意しました。
- AIとTelegram経由のアプリケーションを備えた美容整形クリニックのウェブサイト。
- 1001siteのウェブサイト：ソーシャルネットワークのプレビューとTelegramへの自動投稿が自動的に設定されます。
ボットと自動化
Telegramのメッセージアプリで表示がおかしくなるリンクを送ってください。どのタグが欠けているかをお教えします。
結果
- オンラインのOpen Graphチェッカーを使用すると、 Facebook 、X、LinkedInでリンクがどのように表示されるか、またどのタグが欠落しているかを確認できます。
- 最低限必要なのは、og:title、og:type、og:image (1200×630、完全なアドレス)、og:url、および twitter:card です。
- 修正後、Shared Debugger、Post Inspector、@WebpageBot のサイトのキャッシュをリセットします。
- カタログやブログについては、 1001siteのようにプレビュー画像を自動的に収集する必要があります。
フォロワーに投稿を見る前に、 無料のOpen Graphデバッガーで共有しようとしているページを確認しましょう。
情報源
- PromoPilotのOpen Graphデバッガーツールページ - チェック項目一覧とよくある質問。
- Open Graph Protocol (ogp.me) - 必須プロパティとオプションプロパティ。
- Metaの共有デバッガーとLinkedIn投稿インスペクターは、それぞれのプラットフォームの公式ツールです。
