HTMLメタ抽出ツール|タグ解析

HTMLソースからtitle・description・OGP・robots等のメタ情報を一括抽出します。

HTMLメタ抽出ツール|タグ解析とは

HTMLソースコードを貼り付けるだけでtitle・description・OGP・robots・Twitter Cardなどのメタ情報を一括抽出できる無料ツールです。OGP確認やHTMLタグ取得に役立ち、URLから取得できないログイン必須ページや開発中のHTMLも解析できます。

使い方

  1. 1解析したいページのHTMLソースをコピーします(ブラウザで「ページのソースを表示」を開きCtrl+A→Ctrl+C)。
  2. 2コピーしたHTMLを入力欄に貼り付けます(<head>部分のみでも可)。
  3. 3「メタ情報を抽出」ボタンをクリックします。
  4. 4抽出されたtitle・description・OGP・Twitter Card等の情報を確認します。

メリット・特徴

  • title・description・canonical・OGP・Twitter Cardを一括抽出
  • URLアクセス不要のためログイン必須ページや未公開ページも解析可能
  • ブラウザ上で処理されるためHTMLが外部に送信されない
  • <head>部分のみの貼り付けでも正確に解析
  • OGPタグの設定漏れや記述ミスを素早く発見
  • 登録・インストール不要で即座に利用可能
01

HTMLメタ情報の種類と役割

HTMLの<head>内には検索エンジン・SNS・ブラウザに対してページの情報を伝えるさまざまなメタタグが存在します。それぞれの役割を理解することでSEOとSNS最適化の両面で正確な設定ができるようになります。

検索エンジン向けメタタグ

<title>タグは検索結果のタイトルとして表示される最重要タグです。<meta name="description">は検索結果のスニペットとして表示され、クリック率に影響します。<link rel="canonical">は正規URLを指定し重複コンテンツを防ぎます。<meta name="robots">はページのクロールとインデックスを制御します。これらをこのツールで一括確認することで設定漏れや記述ミスを素早く発見できます。

OGP(Open Graph Protocol)タグ

OGPタグはFacebook・LinkedIn・Slackなどのプラットフォームでページがシェアされた際のプレビュー表示を制御します。og:title(プレビューのタイトル)・og:description(プレビューの説明文)・og:image(サムネイル画像URL)・og:url(正規URL)・og:type(コンテンツの種類)が主要なOGPタグです。og:imageは最低1200×630pxの画像を指定することを推奨します。

Twitter Card(X Card)タグ

Twitter(現X)でのシェア時のプレビューを制御するタグです。twitter:cardでカードの種類(summary・summary_large_image等)を指定します。twitter:titleとtwitter:descriptionはOGPタグが設定されている場合は省略できますが、Twitter固有の文言を設定したい場合は明示的に記述してください。twitter:imageはOGPのog:imageとは別に設定することもできます。

02

メタ情報の最適化とSEOへの影響

メタタグの適切な設定はSEOと検索流入の改善に直結します。特にtitleとdescriptionは検索結果の見た目と直接関わるため、キーワードとユーザーへの訴求を意識した設定が重要です。

titleタグの最適な書き方

titleタグは検索結果に表示される最重要要素です。最適な文字数は30〜60文字(日本語の場合)で、ページの内容を正確に表す主要キーワードを含めてください。ブランド名は末尾に「|ブランド名」の形で付ける場合が多いです。Googleは長すぎるtitleを自動的に省略するため、重要な情報は前半に配置してください。

descriptionの効果的な記述方法

meta descriptionはGoogleが直接ランキングに使用するシグナルではありませんが、検索結果のスニペットとして表示されクリック率に影響します。120〜160文字程度で、ページの主要なコンテンツと行動喚起(call to action)を含めることを推奨します。Googleは設定されたdescriptionを無視して本文から自動生成することがありますが、適切なdescriptionを設定することでスニペットの品質を高めることができます。

OGP画像の設定と確認

OGP画像(og:image)が正しく設定されているかはSNSシェア時のエンゲージメントに大きく影響します。画像URLは絶対URLで指定し、推奨サイズは1200×630px(アスペクト比1.91:1)です。このツールで og:imageのURLを抽出した後、FacebookのSharing DebuggerやTwitterのCard Validatorで実際のプレビューを確認するのがベストプラクティスです。

よくある質問(FAQ)

URLを入力するのではなくHTMLを貼り付けるのはなぜですか?
URLから直接取得するツールと異なり、ログイン必須ページや未公開のHTMLのメタタグも確認できます。また開発中のローカル環境のHTMLや、コードレビュー時に変更前後の差分確認にも使えます。
OGPタグやTwitter Cardタグも抽出されますか?
はい。title・description・canonical・og:title・og:description・og:image・og:url・twitter:card・twitter:title・twitter:descriptionなどすべての標準メタタグを抽出して表示します。
<head>部分だけ貼り付ければ十分ですか?
はい。ページ全体のHTMLでなく、<head>セクションのみを貼り付けても正しく解析されます。ブラウザのソースビュー(Ctrl+U)で<head>から</head>の部分のみをコピーして使えます。
robotsメタタグも確認できますか?
はい。<meta name="robots" content="noindex,nofollow">のようなrobots指定も抽出して表示します。noindex・nofollow・noarchive・noimageindex等の設定内容も確認できます。
JavaScript動的レンダリングのSPAページは解析できますか?
このツールは入力されたHTMLソースを静的に解析します。JavaScriptで動的に生成されるメタタグ(React・Next.js等のCSRページ)は、ブラウザの開発者ツールで「要素の検証」からコピーしたHTMLを貼り付けることで確認できます。
OGPとは何ですか?
OGP(Open Graph Protocol)はFacebook・Twitter・LINEなどのSNSでURLをシェアした際のプレビュー表示を制御するメタタグ仕様です。og:title・og:description・og:imageが正しく設定されているかをこのツールで確認できます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →