メタタグとOpen Graphタグとは？
メタタグとは、ページの<head>にある短いHTMLの行で、人ではなく機械に向けてページを説明するものです。検索エンジンは、検索結果のために<title>とメタディスクリプションを読み取ります。SNSアプリやメッセンジャーは、Open Graphタグ（og:title、og:description、og:image）を読み取って、誰かがURLを共有したときに表示されるリンクプレビューのカードを作ります。Xは独自のtwitter:タグも読み取ります。
メタタグ作成ツールは、いくつかの項目からこれらすべてを書き出すので、正確な書き方を覚えておく必要はありません。このツールは、7つのプラットフォームでリンクがどう見えるかも表示し、既存のページのHTMLで不足しているタグや壊れているタグをチェックすることもできます。
メタタグを作成してリンクプレビューを確認する方法
タグを生成
- ページタイトル。カウンターに文字数と、Googleのパソコン表示での上限（約580 px）に対するおおよそのピクセル幅が表示され、省略されそうな場合や短すぎる場合は警告が出ます。
- 説明。160文字を超えるか70文字未満だと、カウンターが警告します。
- ページのURL（canonicalリンクと
og:urlに使用）、シェア画像のURL（1200 x 630、httpsから始まる絶対URL）、画像の代替テキスト。 - サイト名と種類：website、article、product、profile、video.other、music.song、bookから選びます。
- Xのカードタイプ（大きい画像か小さい正方形）とXのユーザー名。
- テーマカラー、ロケール（例：
en_US、en_IN、hi_IN）、Robots（index/noindex、follow/nofollow）。 - 右側のリンクプレビューを確認します。ボタンで「すべて」か、Google、Facebook、X、LinkedIn、WhatsApp、Slack、iMessageのいずれかだけを表示できます。
- タグをコピーをクリックし、まとめてページの
<head>に貼り付けます。
HTMLをチェック
- 公開中のページを開いてソースを表示し（Ctrl+U、MacではCmd+Option+U）、すべてコピーして「HTMLをチェック」タブに貼り付けます。「サンプルを試す」で使い方を確認できます。
- スコア（「y項目中x項目をクリア」）と一覧を確認します。各タグに「検出」「チェック」「不足」のいずれかが表示され、短い修正方法が添えられています。
- プレビューが、貼り付けたページの見え方に切り替わります。作成ツールでこのタグを編集をクリックするとフォームに読み込まれるので、修正してきれいなタグ一式をコピーしましょう。
メタタグの一覧：長さとサイズ
| タグ | 使うところ | 目安 |
|---|---|---|
<title> | Google、ブラウザのタブ、シェア時の代替 | 約50〜60文字。Googleは幅（パソコンで約580 px）で省略する |
meta name="description" | Googleのスニペット、シェア時の代替 | 約120〜155文字。Googleが書き換えることもある |
link rel="canonical" | 検索エンジン | そのページの唯一のメインURL（絶対URL） |
og:title、og:description | Facebook、LinkedIn、WhatsApp、Slack、iMessageなどほとんどのアプリ | シェア用の別バージョンにしたい場合を除き、タイトルと説明文と同じ |
og:image | すべてのリンクプレビュー | 1200 x 630 px（1.91:1）、JPGまたはPNG、httpsの絶対URL。ほどほどの軽さに（数百KBなら速く読み込まれる） |
og:image:alt | 一部のアプリのスクリーンリーダー | 画像の短い説明 |
og:type、og:site_name、og:locale | SNSアプリ | 通常はwebsiteかarticle、ブランド名、例：en_US |
twitter:card | X | 横長のカードならsummary_large_image、小さい正方形ならsummary |
meta name="robots" | 検索エンジン | 検索に出したくないページでない限り、index, followのままに |
meta name="theme-color" | スマホのブラウザ | 一部のスマホでブラウザのバーに色を付ける |
生成されるタグには、すべてのページに必要なmeta charsetとmeta viewportも含まれます。プラットフォームの上限や表示ルールは変わるので、文字数は執筆時点での目安として扱ってください。
メタタグ作成ツールが必要な人
- 小規模ビジネスのサイト：手作りやシンプルなホスティングで作られ、誰もシェア用のタグを追加しておらず、WhatsAppでリンクがURLだけで表示されてしまうサイト。
- ブロガー：記事ごとにシェアされやすいタイトルと画像を用意したい人。
- 開発者：ランディングページや個人プロジェクト用に、正確でそのままコピーできるheadのタグが欲しい人。
- マーケター：メールや広告を出す前にキャンペーンページを確認し、プレビューに間違った画像が出ないようにしたい人。
- クリエイター：講座や商品のページを公開するときに、ファンがInstagramのストーリーズ、X、LinkedInでシェアしても正しく表示されるようにしたい人。
メタタグのコツとよくある間違い
- 画像はhttpsの絶対URLにしましょう。
/images/og.jpgやhttp://は失敗することが多く、チェッカーはどちらも警告します。 - 重要な文字は画像の中央に置きましょう。WhatsAppなどのアプリは、正方形や小さなサムネイルに切り抜きます。OG画像作成ツールで作りましょう。
- ページごとに固有のタイトルと説明文を書きましょう。サイト内で重複していると、どの検索結果も同じに見えてしまいます。
- メインのキーワードはタイトルの前のほうに入れましょう。ただし人に向けて書くこと。キーワードを詰め込んだタイトルは書き換えられます。
- 公開後にnoindexをうっかり残さないようにしましょう。チェッカーは見つけると警告します。
- キャッシュに注意しましょう。タグを変更した後も、プラットフォームはしばらく古いプレビューを表示することがあります。FacebookとLinkedInには更新用の独自のデバッグツールがあり、そのほかは時間とともに更新されます。
- 説明文を一度にたくさん書くときは、文字数カウンターで長さを確認しましょう。
このツールとプラットフォームのデバッガーやCMSプラグインの違い
Facebookのシェアデバッガー、LinkedInのPost Inspectorなどのツールは、公開中のページを取得して、そのプラットフォームでの見え方を正確に表示し、キャッシュを更新することもできます。公開後に使いましょう。対応しているのは自社のプラットフォームだけで、ページがオンラインである必要があります。
WordPressなどのCMS向けのSEOプラグインは、これらのタグを自動で書き出すので、そうしたシステムを使っているならそれが最善の選択です。このツールはその中間に位置します。ページの公開前から使え、7つのプレビューを並べて表示し、手作りのページや静的ホスティングを含むあらゆるサイト向けにプレーンなHTMLを提供します。
仕組み：取得もアップロードも行いません
タグとプレビューはブラウザ内で作成されます。チェッカーは貼り付けたHTMLを解析するだけで、サイトにリクエストを送ることはないため、ログインが必要なステージング環境のページにも使えます。Biolinkoには何も送信されません。外部へのリクエストはシェア画像だけで、プレビューに表示するために、入力したURLからブラウザが読み込みます。
リンクプレビューとリンクインバイオ
リンクインバイオのURLは、プロフィール、DM、メール署名、WhatsAppなどで、おそらくいちばんよく共有するリンクです。biolinko.me/yournameのようなBiolinkoのページは、プロフィールから独自のタイトル、説明文、シェア画像を設定するので、コードを編集しなくても、どこでもきれいにプレビューされます。小規模ビジネス向けリンクインバイオをご覧になるか、無料ページを作成しましょう。
2026年10月8日更新