検索とシェアのためのメタタグを、プレビュー付きで
このメタタグ生成ツールは、Googleの検索結果での表示や、Facebook・LinkedIn・X・Slack・Discord・WhatsAppでリンクがシェアされたときの見え方を決めるHTMLを書き出します。タイトル、説明文、正規URL、シェア画像を入力するだけで、主要なSEOタグ、Open Graphタグ、Twitterカードタグが正しくエスケープされた状態で生成され、そのまま<code><head></code>に貼り付けられます。検索スニペットと各SNSカードのプレビューもリアルタイムで確認できます。既存ページのheadを貼り付ければ、そのタグを読み込んで改善できます。すべてブラウザー内で動作します。
メタタグを生成する方法
- 1タイトルと説明文を入力します。Googleに省略されそうな長さになるとカウンターが赤くなります。目安はタイトルが約600ピクセル（≈60文字）、説明文が約160文字です。
- 2ページの正規URL、サイト名、絶対パスの画像URL（推奨は1200 × 630ピクセル）と代替テキストを入力します。
- 3Open Graphのタイプ、ロケール、Twitterカードの種類を選び、Xのアカウント名を追加します。検索結果に出したくないページではインデックスを許可のチェックを外します。
- 4Google・Facebook・LinkedIn・Xのプレビューを確認したらHTMLに切り替え、含めるグループを選んで、ページの
<head>にタグをコピーします。 - 5既存ページを編集するには、インポートをクリックしてHTMLまたはページのソースを貼り付けます。
SEOで重要なタグ
- <title>
- 最も重要なページ内シグナルであり、検索結果でクリックされる見出しです。主なトピックを先頭に置き、ページごとに固有にし、最後にブランド名を付けます。役に立たない、長すぎる、キーワードを詰め込みすぎたタイトルは、Googleが書き換えます。
- meta description
- 順位の要因ではありませんが、タイトル下のスニペットとしてよく使われるため、クリック率に影響します。訪問する理由を添えて、ページの内容を120〜160文字で要約しましょう。
- canonical
- <link rel="canonical">は、同じコンテンツに複数のアドレスでアクセスできる場合（トラッキング用パラメーター、httpとhttps、末尾のスラッシュなど）に優先するURLを示します。
- robots
- noindexはページを検索結果から除外し、nofollowはクローラーにリンクをたどらないよう伝えます。index, followがデフォルトなので、変更したときだけタグが書き出されます。
- viewport & charset
- 厳密にはSEOタグではありませんが、すべてのページに必要です。UTF-8とレスポンシブなviewportは、モバイルファーストインデックスの前提条件です。
- keywords
- GoogleとBingは10年以上前から順位付けにこのタグを使っていません。サイト内検索や別のシステムが読み取る場合にだけ含めましょう。
Open Graph：シェアされたリンクの見え方
Open Graph（OGP）はFacebookが導入したプロトコルで、今ではLinkedIn、Slack、Discord、WhatsApp、Telegram、iMessage、Pinterestなど、ほぼすべてのプラットフォームが読み取ります。必須のタグはog:title、og:description、og:image、og:url、og:typeで、og:site_nameとog:localeでカードをさらに整えます。
カードの出来は画像で決まります。絶対パスのhttps:// URLで、1200 × 630ピクセル（比率1.91:1）、5MB未満のJPEG・PNG・WebPを使い、プラットフォームごとに切り抜き方が違うため文字やロゴは端から離して配置しましょう。プラットフォームはカードをキャッシュします。タグを変えたら、FacebookのシェアデバッガーやLinkedInのPost Inspectorで更新するか、クエリ文字列を付けたURLでシェアしてください。
Twitter / Xカード
Xは独自のtwitter:cardタグでレイアウトを決めます。全幅の画像ならsummary_large_image、小さな正方形のサムネイルならsummaryです。twitter:siteとtwitter:creatorはサイトと作成者のアカウント名を示します。タイトル、説明文、画像はOpen Graphのタグで代用されるため、このツールはOpen Graphがオフのときだけtwitter:title、twitter:description、twitter:imageを書き出し、重複したマークアップを避けます。
現在のXでは、大きな画像のカードは画像の上にタイトルが重なり、その下にドメインが表示されます。説明文はsummaryカードでのみ、一部のクライアントで表示されます。
タイトルの長さ：文字数とピクセル
Googleはタイトルを文字数ではなく表示幅で省略します。デスクトップでは、20ピクセルのArial系フォントで約600ピクセルが上限で、文字によって約50〜60文字に相当します（「WWW」は「iii」の3倍の幅です）。カウンターはブラウザー内でそのフォントを使ってタイトルを測るので、実際の文言を反映します。説明文は約920ピクセルで切られ、デスクトップでおよそ155〜160文字、モバイルではそれより短くなります。
省略はペナルティではなく、末尾が隠れるだけですが、重要な語を前に置けば確実に目に入ります。タイトルと説明文をページの見える内容と一致させると、Googleがそのまま使う可能性が高くなります。
タグを置く場所
これらのタグはすべてページの<head>要素内に置き、サーバーが返すHTMLに含まれている必要があります。リンクプレビューのクローラーはJavaScriptを実行しないため、クライアント側のコードで追加したタグはFacebook、LinkedIn、Xからは見えません。Next.js、Nuxt、Astroなどのフレームワークでは、メタデータAPIを使ってサーバー側でレンダリングしましょう。属性値はすべてHTMLエスケープされるので、タイトル内の引用符やアンパサンドでマークアップが壊れることはありません。
あわせて、クローラーがページにアクセスできるようにするrobots.txt、正規URLを列挙するXMLサイトマップ、検索結果にアイコンを表示するファビコンも用意しましょう。
よくある質問
- メタタイトルとメタディスクリプションの理想的な長さは？
- タイトルは約50〜60文字（約600ピクセル未満）、説明文は120〜160文字が目安です。カウンターに両方が表示され、Googleに省略されそうなときは赤くなります。
- OGP画像のサイズはどれくらいがよいですか？
- 1200 × 630ピクセル（1.91:1）なら、Facebook、LinkedIn、X、メッセージアプリで使えます。絶対パスのhttps URLを使い、5MB未満に抑え、重要な内容は中央に配置しましょう。
- リンクのプレビューに古い画像やタイトルが表示されるのはなぜ？
- プラットフォームがリンクプレビューをキャッシュしているためです。FacebookのシェアデバッガーやLinkedInのPost InspectorでURLを再取得させてください。Xは約1週間後、または新しいクエリ文字列を付けたURLならすぐにキャッシュを更新します。
- Open GraphとTwitterのタグは両方必要ですか？
- ほとんどのプラットフォームにはOpen Graphが必要で、Xには少なくともtwitter:cardが必要です。Xはog:title、og:description、og:imageで代用するため、Open Graphがあれば他のTwitterタグは省略できます。
- meta keywordsタグはSEOに効果がありますか？
- いいえ。GoogleとBingは何年も前から順位付けにこのタグを使っていません。ここでは任意項目で、社内のシステムが読み取る場合にだけ役立ちます。
- 既存ページのメタタグを編集できますか？
- はい。インポートをクリックしてページのHTML（ページのソースでも可）を貼り付けると、タイトル、説明文、canonical、Open Graph、Twitter、robotsの値がフォームに読み込まれます。
- シェア画像がプレビューに表示されないのはなぜ？
- URLは絶対パス（https://…）で、公開されている必要があります。他サイトでの画像表示をブロックするサーバーもありますが、実際のプラットフォームはサーバー側で画像を取得するため、本番では表示される場合があります。
- 何かアップロードされますか？
- いいえ。タグはブラウザー内で生成されます。プレビューに表示するため、入力したURLからシェア画像だけを読み込みます。