FIRST CHTools

FIRST CH TOOLS / SEO・AI / 08 OGP WIZARD

OGPメタタグ生成ウィザード

タイトル・説明・URL・画像URLを3ステップで入力し、SNSでシェアされたときのカード表示（OGP）を X / Facebook 風にプレビューしながら、og: と twitter: のmetaタグ一式を生成します。既存ページの確認は、ページのソース（<head>部分）を貼り付けて読み取れます。

カードに大きく出る2項目です。下のプレビューで切れ方を確かめながら決めます。

検収・確認用。URLを直接取りに行く処理はありません

URLを入れるだけで確認したい場合は、サーバー側で取得する OGP確認（URL入力版）（apps.first-ch.com）をご利用ください。生成＝このツール（端末内で完結）／確認＝apps（サーバーで取得）の分担です。

X (Twitter)

Facebook

※実際の見た目の最終確認は各SNS公式の検証ツール（Card Validator / シェアデバッガー）でも行えます。

How to Use

  1. 1 内容タイトルと説明を入力します。既存ページを確認したいときはソースを貼り付けて読み取ります。
  2. 2 URL・画像ページURLと画像URLを入れ、X / Facebook 風プレビューで見え方を確認します。
  3. 3 生成必須項目の充足状況を確認し、metaタグ一式をコピーして<head>に貼り付けます。

OGPの確認方法（OGPチェッカーとして使う）

公開済みのページや納品前のページのOGPが正しく設定されているかは、次の手順で確認できます。

  1. 確認したいページをブラウザで開き、右クリック →「ページのソースを表示」で HTML を表示します。
  2. <head> から </head> までをコピーし、ステップ1の「既存ページのHTMLから読み取る」に貼り付けて「HTMLから読み取り」を押します。
  3. 読み取りが済むと生成ステップへ進み、必須項目（og:title / og:description / og:image）が揃っているかを「設定済／未設定／要確認」で表示します。og:image と og:url が相対パスのときは「要確認」になります。
  4. 上のプレビューで、X と Facebook でのカードの見え方（タイトル・説明の切れ方、OGP画像の表示）を確認します。

読み取る項目と、タグが無いときに代わりに使う値は次のとおりです。

項目読み取るタグ（無いときの代替）
タイトルog:title（<title>）
説明og:description（meta name="description"）
ページURLog:url（link rel="canonical"）
画像og:image
サイト名og:site_name
種別og:type（website / article / profile）・twitter:card（summary / summary_large_image）

OGP画像の確認について: プレビューの画像は、ブラウザが og:image のURLから直接読み込んで表示します。読み込めないときは「画像なし（og:image 未設定 or 読み込み失敗）」と出るので、URLの誤りや非公開の画像に気づけます。画像枠は大きいカード（summary_large_image）で 1.91:1、小さいカード（summary）で正方形で、はみ出す部分は切り取って表示します。画像のピクセル寸法そのものは判定しません。

貼り付けたHTMLは端末内で読み取るだけで、どこにも送信しません。URLを入れるだけで確認したいときは OGP確認（URL入力版）（apps.first-ch.com・サーバー側で取得）を使えます。SNSは一度取得したカード情報をしばらく保持するため、タグを直したのに表示が変わらないときは Facebook のシェアデバッガーで再取得します。

About This Tool

OGP（Open Graph Protocol）は、SNSやチャットでURLを共有したときに表示されるカード（タイトル・説明・画像）を制御するmetaタグの仕様です。 設定漏れはシェア時の見た目を大きく損なうため、当社ではサイト納品前の検収チェック項目としてOGP確認を標準化しています。本ツールの生成ステップでは、その検収項目である og:title / og:description / og:image の充足状況をその場で表示します。 なお、URLを入力するだけの自動取得はブラウザのセキュリティ制約（CORS）上できないため、既存ページの確認は「ソース貼り付け」方式を採っています。処理はすべて端末内で完結します。 URL入力で確認したい場合は、サーバー側で取得する OGP確認（URL入力版）を別サイト（apps.first-ch.com）に用意しています。タグの生成はこのツール（ファイルもテキストも端末から出ません）、URLでの確認は apps という分担で、本サイトのブラウザ内処理の方針は変えていません。

Other Tools