OGP・メタタグ チェッカー

HTMLソースを貼り付けるだけでOGP（Open Graph Protocol）とTwitter Cardのメタタグを一括検証。不足しているタグや絶対URLになっていないog:imageを検出し、SNSでシェアしたときの見え方をカード形式でプレビュー表示できます。

SNSでの見え方を決めるメタタグを点検する

リンクをSNSへ貼ったときに表示されるタイトル・説明・画像は、ページの `` に書いた OGP と Twitter Card のメタタグが決めています。このツールは HTML を貼り付けるだけでそれらを抽出し、不足しているタグや値の不備を指摘したうえで、実際のカードに近い形でプレビューします。

**最も多い不備が `og:image` を相対パスで書いてしまうことです。** SNS のクローラーは自分のサーバーから画像を取りに行くため、`/img/ogp.png` のような相対パスでは解決できず、**画像だけが欠けたカードになります。** 必ず `https://` から始まる絶対URLで書いてください。**もう一つ知っておきたいのが、SNS側はクロール結果をキャッシュするという点です。** タグを直しても以前の内容が表示され続けることがあり、その場合は各サービスのデバッグツールで再取得を促す必要があります。なお Twitter Card は `twitter:` が無ければ `og:` を使うため、両方を重複して書く必要はありません。

使い方

  1. HTMLソースを貼り付ける `` の中身だけでも、ページ全体でもかまいません。
  2. サンプルで挙動を確かめる 良い例と悪い例が用意してあるので、判定の違いを先に見ておけます。
  3. 指摘された項目を読む **不足しているタグと、絶対URLになっていない `og:image` が指摘されます。**
  4. プレビューで見え方を確認する タイトルの折り返しや説明の切れ方を、貼る前に確かめられます。

使いこなすためのヒント

  • og:imageは横1200×縦630px（アスペクト比1.91:1）が推奨サイズです。小さすぎる画像や比率が違う画像は、SNS側でトリミングされて意図しない見え方になることがあります。
  • Facebook・LINE・Slackなどog:titleやog:descriptionを見るクローラーと、X（Twitter）専用のtwitter:title・twitter:descriptionは別物です。両方を設定しておくと、どちらの媒体でも正しく表示されます。
  • twitter:cardが未設定の場合、Xはog:title・og:descriptionへフォールバックして表示を試みますが、画像が正しく表示されない場合があるため明示的な設定を推奨します。
  • og:urlには正規化されたページのURL（httpsの絶対URL）を指定してください。パラメータ付きURLとの重複コンテンツ判定を避ける効果もあります。
  • メタタグを変更した直後にSNSでシェアしても古いプレビューがキャッシュされて表示されることがあります。Facebookのシェアデバッガーなど各SNSが提供する再取得ツールでキャッシュを更新しましょう。

活用シーン

記事を公開する前に確認する

**公開してからSNSで崩れて見えると、キャッシュのせいで直しても戻りません。** 先に見ておくのが確実です。

テンプレートの実装を検証する

CMSやフレームワークが出力した `` を貼れば、意図どおりのタグが入っているかを確かめられます。

画像の差し替えを点検する

**新しい `og:image` が絶対URLになっているかは、見落とされやすい箇所です。**

他サイトの書き方を参考にする

うまく表示されているページのソースを貼って、どのタグを揃えているかを見られます。

OGPの用語

og:title
カードに表示される見出しです。**`` とは別に指定でき、SNS向けに短く言い換えることもできます。**</dd> <dt class="glossary-term" id="glossary-1">og:description</dt> <dd class="glossary-definition">カードの説明文です。長すぎると途中で切られるため、要点を前に置きます。</dd> <dt class="glossary-term" id="glossary-2">og:image</dt> <dd class="glossary-definition">カードの画像です。**必ず絶対URLで指定してください。** 横1200×縦630ピクセル程度が扱いやすい大きさです。</dd> <dt class="glossary-term" id="glossary-3">og:type</dt> <dd class="glossary-definition">ページの種類です。記事なら `article`、それ以外は `website` が一般的です。</dd> <dt class="glossary-term" id="glossary-4">twitter:card</dt> <dd class="glossary-definition">カードの形を指定します。`summary_large_image` にすると画像が大きく表示されます。</dd> <dt class="glossary-term" id="glossary-5">og:url</dt> <dd class="glossary-definition">そのページの正規URLです。**共有時に集約される先になるため、パラメータ付きのURLを書かないよう注意します。**</dd> </dl> </div> </div> </div> <div class="row mt-4 section-faq"> <div class="col-md-12"> <div class="faq-card"> <h2 class="h4"><svg class="svg-icon-inline me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-help-circle" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 16v.01" /> <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483" /> </svg>よくある質問</h2> <div class="accordion accordion-flush mt-3" id="faq-accordion"> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-0"> og:imageを設定してもSNSで画像が表示されないのはなぜですか？ </button> </h3> <div id="faq-0" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">最も多い原因は画像URLが相対パス（<code>/img/a.png</code>など）になっていることです。多くのクローラーは相対URLを解決できないため、必ず<code>https://</code>から始まる絶対URLを指定してください。またサーバーがクローラーのUser-Agentをブロックしている場合や、画像サイズが小さすぎる場合も表示されないことがあります。</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1"> og:titleとtitleタグは両方書く必要がありますか？ </button> </h3> <div id="faq-1" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">はい、役割が異なるため両方の設置を推奨します。<code><title></code>は検索結果のタイトルやブラウザタブに使われ、<code>og:title</code>はSNSでシェアされたときのカードタイトルに使われます。og:titleが無い場合、多くのクローラーは<code><title></code>にフォールバックしますが、必ずしも意図通りの文言にならないことがあります。</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-2"> twitter:cardの値は何を選べばよいですか？ </button> </h3> <div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">一般的な記事・ブログページでは、画像を大きく表示する<code>summary_large_image</code>が推奨されます。画像を小さく添える程度で十分な場合は<code>summary</code>を使います。<code>app</code>や<code>player</code>はそれぞれアプリ誘導・動画/音声埋め込み専用のため、通常のWebページには使いません。</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-3"> メタタグを修正したのにSNSのプレビューが更新されません。なぜですか？ </button> </h3> <div id="faq-3" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">SNS各社はクロール結果をキャッシュしているため、修正後も古い内容が表示され続けることがあります。Facebook・LINEなら「シェアデバッガー」、Xなら「Card Validator」など各SNSが提供する再取得ツールでキャッシュの更新をリクエストする必要があります。</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-4"> OGPタグが1つも無いとどうなりますか？ </button> </h3> <div id="faq-4" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">多くのクローラーは<code><title></code>と<code>meta description</code>にフォールバックしてプレビューを生成しようとしますが、画像は表示されずリンクとテキストのみの地味な見た目になりがちです。クリック率に影響するため、最低限<code>og:title</code>・<code>og:description</code>・<code>og:image</code>の3つは設定することをおすすめします。</div> </div> </div> </div> </div> </div> </div> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"og:imageを設定してもSNSで画像が表示されないのはなぜですか？","acceptedAnswer":{"@type":"Answer","text":"最も多い原因は画像URLが相対パス（/img/a.pngなど）になっていることです。多くのクローラーは相対URLを解決できないため、必ずhttps://から始まる絶対URLを指定してください。またサーバーがクローラーのUser-Agentをブロックしている場合や、画像サイズが小さすぎる場合も表示されないことがあります。"}},{"@type":"Question","name":"og:titleとtitleタグは両方書く必要がありますか？","acceptedAnswer":{"@type":"Answer","text":"はい、役割が異なるため両方の設置を推奨します。<title>は検索結果のタイトルやブラウザタブに使われ、og:titleはSNSでシェアされたときのカードタイトルに使われます。og:titleが無い場合、多くのクローラーは<title>にフォールバックしますが、必ずしも意図通りの文言にならないことがあります。"}},{"@type":"Question","name":"twitter:cardの値は何を選べばよいですか？","acceptedAnswer":{"@type":"Answer","text":"一般的な記事・ブログページでは、画像を大きく表示するsummary_large_imageが推奨されます。画像を小さく添える程度で十分な場合はsummaryを使います。appやplayerはそれぞれアプリ誘導・動画/音声埋め込み専用のため、通常のWebページには使いません。"}},{"@type":"Question","name":"メタタグを修正したのにSNSのプレビューが更新されません。なぜですか？","acceptedAnswer":{"@type":"Answer","text":"SNS各社はクロール結果をキャッシュしているため、修正後も古い内容が表示され続けることがあります。Facebook・LINEなら「シェアデバッガー」、Xなら「Card Validator」など各SNSが提供する再取得ツールでキャッシュの更新をリクエストする必要があります。"}},{"@type":"Question","name":"OGPタグが1つも無いとどうなりますか？","acceptedAnswer":{"@type":"Answer","text":"多くのクローラーは<title>とmeta descriptionにフォールバックしてプレビューを生成しようとしますが、画像は表示されずリンクとテキストのみの地味な見た目になりがちです。クリック率に影響するため、最低限og:title・og:description・og:imageの3つは設定することをおすすめします。"}}]}</script> <div class="row mt-4 section-article"> <div class="col-md-12"> <div class="article-card"> <img src="https://toolbase.cc/img/toolkun.png" alt="ツールくん" style="float:right;width:56px;margin:0 0 .5rem 1.25rem;opacity:.9"> <h2 class="h4">余談ですが ― OGPが生まれた理由 ― Facebookが「いいね」を機能させるために作った仕組み</h2> <p>Open Graph Protocol（OGP）は2010年、Facebookが自社の「いいね！」ボタンを普及させる目的で策定した仕様です。当時のWebページは、SNSでシェアされても投稿には単なるリンクとタイトルしか表示されず、クリック率が伸び悩んでいました。Facebookは「ページ自身がSNS向けの表示内容を宣言できれば、もっと魅力的なシェア体験を作れる」と考え、<code><meta property="og:xxx"></code>という独自の名前空間をHTMLに追加する形でOGPを設計しました。</p> <p>興味深いのは、OGPが元々<strong>RDFa</strong>（構造化データを記述するためのW3C仕様）を土台にしている点です。Facebookは既存の標準規格を流用することで、ブラウザベンダーや他社の協力なしに、既存のHTMLにmetaタグを追加するだけで新機能を実現できる設計にしました。この「後方互換性を壊さずに拡張する」発想が功を奏し、OGPはFacebook以外のプラットフォーム（Slack・LINE・Discordなど）にも事実上の標準として広まりました。</p> <p>Twitterは当初OGPに追従せず、独自の<strong>Twitter Cards</strong>（<code>twitter:xxx</code>）という別の名前空間を採用しました。これは技術的な必然というより、競合であるFacebook発の規格をそのまま採用したくなかった事情もあると言われています。結果として、現在でも多くのサイトはog:系とtwitter:系の両方のタグを重複して記述する必要があり、これがOGPバリデーターのようなツールが今も必要とされる理由の一つです。</p> <div class="related-trivia"> <p class="related-trivia-label"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-books" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M9 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M5 8h4" /> <path d="M9 16h4" /> <path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041" /> <path d="M14 9l4 -1" /> <path d="M16 16l3.923 -.98" /> </svg> 関連する余談を読む </p> <ul class="related-trivia-list"> <li> <a href="https://toolbase.cc/dev/seo/jsonld_validator"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>余談ですが ― JSON-LDがMicrodata・RDFaを置き換えた理由</span> </a> </li> <li> <a href="https://toolbase.cc/dev/server/security_headers_checker"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>余談ですが ― securityheaders.comと、クリックジャッキング対策の歴史</span> </a> </li> </ul> </div> <div class="trivia-collection-link"> <a href="https://toolbase.cc/trivia"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-library" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1" /> <path d="M11 7h5" /> <path d="M11 10h6" /> <path d="M11 13h3" /> </svg> すべての余談を見る </a> </div> </div> </div> </div> </div> <div class="container"> <div class="row mt-4 section-related"> <div class="col-md-12"> <p class="related-tools-label">このツールを見ている人は、こんなツールも見ています</p> <div class="row g-3"> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/robots_txt" class="text-decoration-none tool-card-link" title="robots.txt の内容を貼り付けて構文チェック。User-agent・Disallow・Allow・Sitemap ディレクティブを解析し、クローラーへのアクセスルールを可視化します。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-robot" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4" /> <path d="M12 2v2" /> <path d="M9 12v9" /> <path d="M15 12v9" /> <path d="M5 16l4 -2" /> <path d="M15 14l4 2" /> <path d="M9 18h6" /> <path d="M10 8v.01" /> <path d="M14 8v.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">robots.txt チェッカー</p> <p class="mb-0 text-muted small">robots.txt の内容を貼り付けて構文チェック。User-agent・Disallow・Allow・Sitemap ディレクティブを解析し、クローラーへのアクセスルールを可視化します。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/sitemap_validator" class="text-decoration-none tool-card-link" title="sitemap.xml の内容を貼り付けるだけで sitemaps.org プロトコルへの準拠を検証します。urlset のネームスペース・loc の必須チェック・lastmod や priority の形式エラーを一覧表示し、Google の5万件上限もチェックします。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sitemap" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M15 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1" /> <path d="M12 9l0 3" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">sitemap.xml チェッカー</p> <p class="mb-0 text-muted small">sitemap.xml の内容を貼り付けるだけで sitemaps.org プロトコルへの準拠を検証します。urlset のネームスペース・loc の必須チェック・lastmod や priority の形式エラーを一覧表示し、Google の5万件上限もチェックします。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/jsonld_validator" class="text-decoration-none tool-card-link" title="HTMLソースやJSON-LDを貼り付けるだけでFAQPage・BreadcrumbList・Articleなどの構造化データを検証。必須プロパティの過不足やGoogleリッチリザルトで見逃しがちなミスを一覧表示し、公開前のセルフチェックに役立ちます。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-schema" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 2h5v4h-5l0 -4" /> <path d="M15 10h5v4h-5l0 -4" /> <path d="M5 18h5v4h-5l0 -4" /> <path d="M5 10h5v4h-5l0 -4" /> <path d="M10 12h5" /> <path d="M7.5 6v4" /> <path d="M7.5 14v4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">JSON-LD構造化データ チェッカー</p> <p class="mb-0 text-muted small">HTMLソースやJSON-LDを貼り付けるだけでFAQPage・BreadcrumbList・Articleなどの構造化データを検証。必須プロパティの過不足やGoogleリッチリザルトで見逃しがちなミスを一覧表示し、公開前のセルフチェックに役立ちます。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/ads_txt" class="text-decoration-none tool-card-link" title="ads.txtの内容を貼り付けるだけで構文エラーを検出。DOMAIN・PUBLISHER_ID・RELATIONSHIP（DIRECT/RESELLER）の各フィールドを行ごとに検証し、広告枠の不正な転売（ドメインスプーフィング）対策に必須のファイルを正しく設置できているか確認できます。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-ad-2" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M11.933 5h-6.933v16h13v-8" /> <path d="M14 17h-5" /> <path d="M9 13h5v-4h-5v4" /> <path d="M15 5v-2" /> <path d="M18 6l2 -2" /> <path d="M19 9h2" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">ads.txt チェッカー</p> <p class="mb-0 text-muted small">ads.txtの内容を貼り付けるだけで構文エラーを検出。DOMAIN・PUBLISHER_ID・RELATIONSHIP（DIRECT/RESELLER）の各フィールドを行ごとに検証し、広告枠の不正な転売（ドメインスプーフィング）対策に必須のファイルを正しく設置できている...</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/hreflang_validator" class="text-decoration-none tool-card-link" title="HTMLの<head>に記述したhreflangタグを貼り付けるだけで、x-defaultの有無・自己参照の欠落・言語コードの妥当性・重複宣言といった多言語サイト運営でよくある設定ミスを自動検出できる検証ツールです。国際SEO対策のセルフチェックに。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-world-www" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" /> <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" /> <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" /> <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" /> <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" /> <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" /> <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">hreflangタグ チェッカー</p> <p class="mb-0 text-muted small">HTMLの<head>に記述したhreflangタグを貼り付けるだけで、x-defaultの有無・自己参照の欠落・言語コードの妥当性・重複宣言といった多言語サイト運営でよくある設定ミスを自動検出できる検証ツールです。国際SEO対策のセルフチェックに。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/dev/seo/manifest_validator" class="text-decoration-none tool-card-link" title="manifest.jsonの内容を貼り付けるだけでPWAのインストール条件を満たしているか検証。name・start_url・display・iconsなどの必須項目とmaskableアイコンの有無をチェックし、不備を一覧表示します。"> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-app-window" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /> <path d="M6 8h.01" /> <path d="M9 8h.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Web App Manifest（manifest.json）チェッカー</p> <p class="mb-0 text-muted small">manifest.jsonの内容を貼り付けるだけでPWAのインストール条件を満たしているか検証。name・start_url・display・iconsなどの必須項目とmaskableアイコンの有無をチェックし、不備を一覧表示します。</p> </div> </div> </div> </div> </a> </div> </div> </div> </div> </div> </main> <footer> <div class="container mt-4"> <div class="row"> <div class="col-12"> <div class="d-flex align-items-center gap-3 my-3"> <hr class="flex-grow-1 m-0"> <img src="https://toolbase.cc/img/toolkun-up.png" alt="" style="height:40px; opacity:.75;"> <hr class="flex-grow-1 m-0"> </div> <p class="text-center text-secondary small mt-3 mb-3">本サイトの計算結果・掲載情報は参考目的のものであり、正確性・最新性を保証するものではありません。これらの利用により生じた損害について責任を負いかねます。</p> <p class="text-center mb-3"> <a href="https://toolbase.cc/about" class="text-muted small me-3">Toolbaseとは</a> <a href="https://toolbase.cc/feedback?tool=dev.seo.ogp_validator" class="text-muted small me-3">フィードバック</a> <a href="https://toolbase.cc/terms" class="text-muted small me-3">利用規約</a> <a href="https://toolbase.cc/privacy" class="text-muted small me-3">プライバシーポリシー</a> <a href="https://toolbase.cc/licenses" class="text-muted small me-3">オープンソースライセンス表記</a> <a href="#" onclick="showCookieSettings(); return false;" class="text-muted small">Cookie 設定</a> </p> <p class="text-center mb-3" style="font-size:.75rem;"> <a href="https://toolbase.cc/dev/seo/ogp_validator" hreflang="ja" class="text-body fw-semibold">日本語</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/en/dev/seo/ogp_validator" hreflang="en" class="text-muted">English</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh/dev/seo/ogp_validator" hreflang="zh" class="text-muted">简体中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh-Hant/dev/seo/ogp_validator" hreflang="zh-Hant" class="text-muted">繁體中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/es/dev/seo/ogp_validator" hreflang="es" class="text-muted">Español</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/pt/dev/seo/ogp_validator" hreflang="pt" class="text-muted">Português</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/de/dev/seo/ogp_validator" hreflang="de" class="text-muted">Deutsch</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/fr/dev/seo/ogp_validator" hreflang="fr" class="text-muted">Français</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/it/dev/seo/ogp_validator" hreflang="it" class="text-muted">Italiano</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/ko/dev/seo/ogp_validator" hreflang="ko" class="text-muted">한국어</a> </p> <p class="text-center"> <a href="https://codebase.co.jp" target="_blank" class="text-muted" style="font-size:.75rem; opacity:.6;">Codebase Inc.</a> </p> </div> </div> </div> </footer> <div class="modal fade" id="toolSearchModal" tabindex="-1" aria-hidden="true" data-endpoint="https://toolbase.cc/search-index.json" data-error-message="ツール一覧を読み込めませんでした。通信環境を確認して、もう一度お試しください。"> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <div class="input-group"> <span class="input-group-text bg-white border-end-0"><svg class="svg-icon-inline text-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" /> </svg></span> <input type="text" id="toolSearchInput" class="form-control border-start-0" placeholder="ツールを検索..." autocomplete="off"> </div> <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-0"> <ul id="toolSearchResults" class="list-group list-group-flush"></ul> <p id="toolSearchEmpty" class="text-muted text-center py-4 px-3 d-none mb-0">該当するツールが見つかりません</p> </div> </div> </div> </div> <div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1090"></div> <link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/app-DJY5gZmy.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/bootstrap.bundle.min-CYJJg-x7.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/favorites-CHkhC6V5.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/toast-wr68XIKP.js" /><script type="module" src="https://toolbase.cc/build/assets/app-DJY5gZmy.js"></script> <link rel="preload" as="style" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/index-BQgUPmBB2.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/vue.esm-bundler-CZulxOyf.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/_plugin-vue_export-helper-BDNMzG2s.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/csrf-DLdgo79t.js" /><link rel="stylesheet" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><script type="module" src="https://toolbase.cc/build/assets/index-BQgUPmBB2.js"></script></body> </html>