新しい
広告が嫌いですか? 行く 広告なし 今日
Open Graphタグ Slackでリンクがひどく見えるのを止める
更新日
あなたは数週間かけてアプリを構築しました。Slackでのリンクプレビューは「未命名」という表示と破損したアイコンを表示しています。これはOpen Graphの問題です。10分で解決できます。
広告 削除する？
あなたは3週間かけてアプリを開発しました。Slackでのリンクプレビューは「Untitled」とあなたのフッターのロゴのサムネイルを表示しています。これはOpen Graphの問題であり、約10分で解決できます。
Open Graphタグとは何ですか？
Open Graph (og:) は2010年にFacebookが導入したプロトコルで、現在の主要なプラットフォームすべてがリンクプレビューを生成するために使用しています。Slack、Twitter、LinkedIn、iMessageがURLを展開する際、ページを取得し、 <meta> タグを検索し、それらを使ってカードを作成します。 og: タグがなければ、予測します。その予測は通常、間違っています。
実際に重要なタグ
タグ
| 何をしますか | 必須か | プレビューカードに表示される見出し |
|---|---|---|
og:title | はい | サブタイトル／要約テキスト（200文字以内を保つ） |
og:description | はい | プレビュー画像。絶対URLでなければなりません。 |
og:image | はい | ページのcanonical URL |
og:url | はい | 推奨 |
og:type | ほとんどのページ用に | プレビューするには website 投稿用に article Twitter/Xカードのサイズを制御します。 |
twitter:card | ほとんどのページ用に | Controls the Twitter/X card size. Use summary_large_image. |
twitter:title | オプション | ほとんどのクライアントで og:title デフォルトになります。 |
twitter:description | オプション | ほとんどのクライアントで og:description |
twitter:image | オプション | ほとんどのクライアントで og:image |
最も多くの人に誤解を招くのは og:image. 絶対URL（相対パスは不可）でなければなりません。理想的には1200×630px、8MB未満です。Slackは特に、サイズ要件を満たさない画像を静かにスキップします。少なくとも600px幅を確保してください。そうしないと画像は表示されません。
完全なOGタグセット
ページの <head> に配置してください。プレースホルダーの値を置き換えてください：
<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />ブログ記事や記事の場合、 og:type に article を変更し、著者と公開日を追加してください：
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />タグをデプロイせずに確認する方法
最も速い方法は、URLを IO Tools Open Graph Checkerに貼り付けることです。ページを取得し、タグをパースし、Slack（または他のプラットフォーム）が見ることになる内容を正確に表示します。ログインは不要で、拡張機能のインストールも不要です。
ローカルホストのURLや公開できないステージング環境を確認したい場合、チェック者はそのページにアクセスできません。その場合、ページのソースを確認し、タグが <head>に存在することを手動で確認してください。デプロイ後、チェックを再実行して、ライブバージョンが一致していることを確認してください。
プラットフォーム固有のバリデーター（キャッシュを強制的に再読み込みする場合）
- Facebook/Meta: developers.facebook.com/tools/debug — またFacebookのOGタグキャッシュをクリアします
- LinkedIn: linkedin.com/post-inspector — プレビューが更新後に古くなっている場合に便利です
- Twitter/X: cards-dev.twitter.com/validator — 更新が遅いですが、カードフォーマットを確認するのに適しています
Slackはキャッシュを積極的に使用しています。タグを修正しても古いプレビューが表示され続ける場合、URLにクエリ文字列（例： ?v=2）を追加して共有することで、再取得を強制できます — 本番環境のリンクには不向きですが、QAでは問題ありません。
タグを生成する
完全なタグセットをインタラクティブに生成したい場合、手動でコードするのではなく、 IO Tools HTML Meta Tag Generator はOGタグ、Twitterカード、標準メタタグを一度にカバーします。出力結果をページの <head>.
にコピーしてください。
- 相対画像URL。
/images/og.pngは機能しません。各プラットフォームは、あなたのベースURLの文脈を持たない外部サーバーからOGタグを取得します。常にフルhttps://パスを使用してください。 - すべてのページに同じ画像を使用する。 300×300のアバターをOG画像として使うと、技術的には表示されますが、非常に小さく醜いサムネイルになります。重要なページにはそれぞれ1200×630の画像を作成してください。
- Not setting
og:url. を設定しない。 - 設定しないと、一部のプラットフォームは取得したURLを使用し、他のプラットフォームは自作のcanonicalを生成します。明示的に設定してください。 キャッシュを無効化しない。
- ほとんどのプラットフォームはOGタグを24～72時間キャッシュします。ライブページのタグを更新した場合、上記のプラットフォームバリデーターを使用して、新しい取得を強制してください。
propertyとnameattributes. 属性を混在させる。property=OGタグはname=を使用します。Twitterタグは
を使用します。これらを混在させると、一部のパーサーはタグを完全に無視します。 OGPチェッカーOpen Graphタグは、5分で追加でき、欠落していると見かけが恥ずかしくなるものです。一度修正し、
