SEOメタタグ・OGPプレビューとは
この無料ツールは、Webページのタイトル（title）とmeta descriptionを入力し、検索結果にどのように表示されるかを参考プレビューで確認しながら、HTMLのメタタグを生成できます。SNSでリンクを共有するときに使われるOGP情報も編集できるため、Webサイトやブログの公開前に文章と共有設定をまとめて準備したい場合に便利です。
タイトルや説明文を入力・修正するとプレビューと生成コードが更新されます。外部サイトからページ情報を読み取るツールではなく、入力内容に基づいてタグを作成するツールです。
このツールでできること
- 検索結果風プレビュー：ページタイトル・meta description・URLの見え方を参考表示します。
- 文字数の確認：タイトルと説明文の入力文字数を表示します。
- OGP情報の設定：サイト名、OGP種別（website／article）、OGPタイトル・説明・画像URLを指定できます。
- HTMLタグの生成：title、description、OGP、Twitterカードなどのタグを入力に応じてまとめて作成します。
- コードの取得：生成したメタタグをコピーするか、HTMLファイルとして保存できます。
使い方：title・descriptionからメタタグを生成する
- ページタイトルを入力する：ページの主題がひと目で分かる、具体的なタイトルを入力します。
- メタディスクリプションを入力する：ページの内容や得られる情報を、読み手に伝わる文章で説明します。
- 必要に応じてURLとサイト名を設定する：ページURLを指定すると、正しい形式の場合にcanonicalタグとog:urlが生成されます。
- OGPを調整する：websiteまたはarticleを選び、必要ならSNS共有向けのタイトル・説明・画像URLを設定します。OGPタイトルと説明が空欄の場合は、通常のタイトルとdescriptionが使われます。
- プレビューとコードを確認する：検索結果風表示・共有カード風表示を見ながら調整し、完成したタグをコピーまたはHTMLで保存します。
入力例：Webサイトの紹介ページ
例えば、Web制作の基礎を説明するページなら、次のように設定できます。
- ページタイトル：HTMLの基本を学ぶ｜サンプルサイト
- description：HTMLを初めて学ぶ人に向けて、タグの役割やページの基本構造をやさしく紹介します。Web制作の第一歩を確認したいときに役立つ入門ガイドです。
- ページURL：https://example.com/html-guide/
- OGP種別：article
- OGP画像URL：画像を公開している場合のみ、そのURLを入力
検索向けのタイトルとSNS向けのタイトルを分けたいときは、OGPタイトルに別の文章を入力してください。入力した内容から、例えばog:title、og:description、og:typeなどのメタタグが組み立てられます。
プレビュー結果と生成コードの見方
検索結果風プレビュー
URL・タイトル・説明文の配置を見ながら、内容が伝わるかを確認します。文字数は目安として利用してください。「何文字なら必ず全文表示される」という固定の保証はなく、実際の検索結果では端末、検索語句、検索エンジンの判断によってタイトルや説明が省略・変更される場合があります。
OGP共有カード風プレビュー
サイト名、OGPタイトル、説明文などを確認できます。OGP画像URLを指定しても、このツールは外部画像を取得・表示しません。カードの見た目は参考イメージで、各SNS上の表示と完全に一致するものではありません。
HTMLタグの出力
入力値に応じて、title、meta description、canonical、og:title、og:description、og:type、og:url、og:site_name、og:image、twitter:cardなどが生成されます。空欄の項目や無効なURLに対応する一部タグは出力されません。OGP画像URLが有効なときはTwitterカードの種類がsummary_large_imageになり、画像URLがないときはsummaryになります。
利用時の注意点
- 生成したタグはWebページのhead内で使用するためのコードです。記事本文にそのまま貼り付けても、SEO設定として正しく反映されるとは限りません。
- WordPressのテーマやSEOプラグインですでにtitle・description・OGPを出力している場合、同じタグを重複して追加しないように確認してください。
- ページURLとOGP画像URLはhttpまたはhttps形式のURLを指定してください。画像はSNSからアクセス可能な公開URLである必要があります。
- このツールはGoogleへの登録、検索順位の判定、SNSのキャッシュ更新、実サイトのタグ検出は行いません。
よくある質問（FAQ）
Q. SEOタイトルとmeta descriptionは何が違いますか？
titleはページの題名、meta descriptionは内容の要約です。どちらもページの情報を伝えるために使われますが、検索結果での表示内容は検索エンジン側で変更されることがあります。
Q. OGPと通常のSEOメタタグは同じものですか？
役割が異なります。titleやdescriptionは主にWebページの基本情報として使い、og:titleやog:descriptionなどはSNS等でのリンク共有向けの情報を指定します。
Q. OGPタイトル・説明文を空欄にするとどうなりますか？
OGPタイトルはページタイトル、OGP説明はmeta descriptionの入力内容を使ってタグが生成されます。別の文章を使いたいときだけ個別に入力してください。
Q. OGP画像を設定すると実際の画像がプレビューされますか？
いいえ。このツールは画像URLをメタタグに出力しますが、外部画像の取得や実際のSNSカードの再現は行いません。公開後の表示は利用先のサービスで確認してください。
Q. 生成したタグをWordPressに貼り付ければよいですか？
WordPressでは通常、テーマやSEOプラグインの専用設定欄からtitle・description・OGPを管理します。まず現在の出力状況を確認し、タグが二重にならない方法で反映してください。このツールからWordPressへ自動設定されることはありません。