新しい
広告が嫌いですか? 行く 広告なし 今日
Open Graphタグ — Slackでのリンクが見栄えを悪くしないようにする
掲載日
Open Graphタグは、Slack、LinkedIn、Twitter、Discordでリンクを共有するときに表示される画像、タイトル、説明を制御します。6つの必須タグ、og:imageのサイズ設定方法、そしてプレビューが実際に動くかをテストする方法を学びましょう。
広告 削除する？
SlackにURLを貼り付けたとき、豊かなプレビュー（大きな画像、タイトル、2行の要約）が表示されない代わりに、ただのリンクまたはページの中間のランダムな文が表示されます。チームメンバーはそれでもクリックしますが、何を見ようとしているのかまったくわかりません。
Open Graphタグがそれを解決します。それはページのHTML内のいくつかの行です。 <meta> に記述されたものです。 <head> Slack、LinkedIn、Twitter、Discord、および他のすべてのプラットフォームが、URLを共有したときに何を表示すべきかを正確に伝えます。これらを省略すると、プラットフォームは間違った推測をします。
Open Graphタグとは？
Open Graph（OG）は2010年にFacebookが導入したプロトコルで、ウェブページがFacebook上で共有されたときにどのように表示されるかを制御できるようにするものです。そのアイデアはシンプルでした：HTMLに構造化されたメタデータを追加し、プラットフォームが適切なタイトル、説明、画像を取得できるようにするのです。 <head> これにより、プラットフォームは推測する必要がなくなります。
それがうまく機能したため、すべての主要プラットフォームがそれを採用しました。現在、Slack、LinkedIn、Twitter/X、Discord、iMessage、WhatsApp、TelegramすべてがOGタグを読み取り、リンクプレビューを生成しています。Facebookもまだそれらを使用しています。
6つの必須Open Graphタグ
これらの6つのタグは、共有したいすべてのページに含まれるべきです。どれかを省略すると、プラットフォームがその空白を埋めますが、通常は誤りになります。
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />- og:title — プレビューに表示される見出し。70文字以内に保ちましょう。サイト名をただコピーするのではなく、OG見出しがサイト名を含まなくてもより強力な表現になるようにしてください。
<title>og:description - — タイトルの下にある2行の要約。150～200文字が最適です。役に立つ情報を提供し、曖昧な表現を避けましょう。 og:image
- — プレビューカードに表示される画像。これはリンクの外観を決めるタグです。サイズについての詳細は下記をご覧ください。 og:url
- — このページのcanonical URLです。常にフルURL（ ）を使用してください。これにより、同じコンテンツが異なるURLからリンクされた場合に、重複したプレビューが防げます。
https://og:type - — 多くのページには を使用してください。ブログ記事には
websiteを使用し、articleを併用してください。article:published_timeとarticle:author. - og:site_name — あなたのブランド名。一部のプラットフォームはタイトルと別にこれを表示するため、短く保ちましょう。
Twitter/X Cardタグ
Twitterは独自のシステム「Twitter Cards」を持っています。良い点は、Twitter Cardタグが欠落している場合にOGタグに自動的にフォールバックする点です。悪い点は、フォールバックが完全ではなく、大きな画像カードを表示しない限り、Twitterは明示的にオプトインする必要があります。
OGタグにこれらのタグを追加してください：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />重要なタグは twitter:cardです。これを summary_large_image に設定すると、大きなカードが表示されます。これを summary に設定すると、小さなサムネイルが表示されます。このタグがないと、Twitterはデフォルトで summary に切り替わり、あなたが丁寧に作成したOG画像が消えてしまいます。
og:image — プレビューを決定するタグ
1つのタグを正しく設定するなら、それは og:imageです。プレビューが空でもクリックされる可能性はありますが、ぼやけた、引き伸ばされた、または欠落した画像を持つプレビューはクリックされません。
推奨サイズ
- 1200 × 630ピクセル — Facebook、LinkedIn、Twitter、Slackで共通の標準で、すべてのプラットフォームに適用されます。
- 最小サイズ：600 × 315ピクセル — 小さいサイズだと、一部のプラットフォームでは画像がまったく表示されません。
- ファイルサイズ：8MB未満 — Facebookおよび多くのプラットフォームは大きなファイルを拒否します。
- フォーマット：JPGまたはPNG — 写真にはJPG、グラフィックにテキストがある場合はPNGを使用してください。
エッジから重要なコンテンツを離すようにしてください
異なるプラットフォームはOG画像を異なる方法でカットします。Slackは広いカードを表示し、LinkedInは一部の状況で正方形にカットし、モバイルアプリはそれぞれの処理を行います。ロゴ、テキスト、焦点を中央の安全ゾーン（画像の内側80%程度）に保つようにし、重要な要素がカットされないようにしてください。
サイトにOpen Graphタグを追加する方法
シンプルなHTMLサイト
タグをHTMLの <head> 内に貼り付け、閉じる </head> タグの前に配置してください：
<head>
<!-- your existing tags -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description." />
<meta property="og:image" content="https://yoursite.com/og.jpg" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
<meta name="twitter:card" content="summary_large_image" />
</head>WordPress
WordPressを運営している場合は、コードを編集する必要はありません。Yoast SEO、Rank Math、All in One SEOなどのプラグインがOGタグを自動で処理します。インストール後、投稿またはページ編集画面の「ソーシャル」セクションを探し、各コンテンツに対して独自のOG見出し、説明、画像を設定できます。
Next.jsおよびReactアプリ
Next.js App Routerでは、 metadata をインポートするだけで、 page.tsx:
export const metadata = {
openGraph: {
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
url: 'https://yoursite.com/page/',
type: 'website',
siteName: 'Site Name',
},
twitter: {
card: 'summary_large_image',
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
},
};に使用できます。
Open Graphタグをテストする方法
- タグが正しく機能していることを前提にしないでください。プラットフォームはプレビューを積極的にキャッシュしており、キャッシュされたバージョンは数日古い場合があります。以下のツールを使用して確認し、リフレッシュを行ってください： Facebookシェアデバガー
- — Facebookが読み取っている内容を表示し、キャッシュをクリアして再取得できます。 LinkedIn投稿インスペクタ
- — LinkedInはキャッシュを強くするため、これが唯一の信頼できるリフレッシュ方法です。 Twitter Card Validator
- OGPチェッカー — Twitter/Xでのプレビューを確認できます。
の OGPチェッカー IO Toolsは迅速な診断に便利です — 任意のURLを貼り付け、FacebookおよびTwitter Cardタグを1つのビューで取得できるため、欠落したタグを確認するのに複数のデバガーを切り替える必要がありません。
完全に正確なOGタグを最初から作成する必要がある場合は、 HTMLメタタグ生成ツール が正確なマークアップを出力します。
5つのよくあるOpen Graphミス
- 相対的な画像URLを使用する —
og:imageは絶対URL（https://yoursite.com/image.jpg）でなければなりません。相対パス（/images/og.jpg）は静黙的に失敗し、画像が読み込まれません。 - サイト全体に1つのOG画像を使用する — ホームページには1つのフォールバック画像が適していますが、ブログ記事、商品ページ、リターゲティングページはそれぞれに適した画像が必要です。一般的なサイト全体の画像はプレビューの文脈を失わせます。
- 忘れる
twitter:card— これがないと、Twitterは小さなサムネイルにデフォルトで切り替わります。たとえ1200×630の完全なOG画像がある場合でも、常に明示的に追加してください。 - 変更を公開する前にキャッシュをリフレッシュしない — プラットフォームはOGデータを積極的にキャッシュしています。タグを更新した後、プラットフォームのデバガーを使用して再取得を強制し、古いプレビューが数日間表示され続けることを防ぎましょう。
- og:descriptionに見出しのように書く — 説明フィールドはタイトルに含まれていない情報を追加する必要があります：読者が学ぶこと、対象者、解決する問題など。
広告なしで楽しみたいですか?
今すぐ広告なしで
恵 スコアボードが到着しました！
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
広告 削除する？
必見ツール
すべて表示広告 削除する？
参加する
価値ある無料ツールの提供を継続するためにご協力ください
広告 削除する？