メタタグの書き方と検索結果・SNSプレビューの確認方法

それぞれのタグの役割

タグ	用途
<title>	ブラウザのタブに出るページ名。多くの場合、検索結果の見出しにもなる
meta description	検索エンジンがタイトルの下に表示することがある要約
link rel="canonical"	同じ内容に複数のURLがあるとき、どれが正規のURLかを示す
meta robots	検索結果に出さない（noindex）、リンクをたどらない（nofollow）よう求める
Open Graph（og:*）	チャットアプリやSNSでリンクを共有したときのタイトル・説明・画像
twitter:card	Xでのカードの形。X専用タグがなければOpen Graphのタイトル・説明・画像を使う

例：パン屋の商品ページ

1. メタタグ作成を開く。
2. 「基本」に次のように入力する。
   • 「タイトル（title）」：天然酵母の食パン｜丘の上ベーカリー
   • 「説明文（meta description）」：毎朝少量ずつ焼き上げる天然酵母の食パン。正午までのご注文で当日お受け取りいただけます。
   • 「正規URL（canonical）」：https://bakery.example/shokupan/
3. 「検索結果に表示する（index）」「ページ内のリンクをたどる（follow）」はどちらもオンのまま。既定の動作なので robots タグは出力されません。
4. Open Graphの欄で「画像URL（og:image）」に https://bakery.example/images/shokupan-1200x630.jpg、「サイト名」に 丘の上ベーカリー、「言語・地域」に ja_JP を入力する。OGタイトル・説明文・URLは空欄なら基本の項目が使われます。
5. 「カードの種類」はXで大きな画像を出すなら summary_large_image。
6. 「プレビュー（目安）」と長さの表示を確認し、「HTMLをコピー」を押してページの <head> 内に貼り付ける。

生成されるHTML：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>天然酵母の食パン｜丘の上ベーカリー</title>
<meta name="description" content="毎朝少量ずつ焼き上げる天然酵母の食パン。正午までのご注文で当日お受け取りいただけます。">
<link rel="canonical" href="https://bakery.example/shokupan/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="天然酵母の食パン｜丘の上ベーカリー">
<meta property="og:description" content="毎朝少量ずつ焼き上げる天然酵母の食パン。正午までのご注文で当日お受け取りいただけます。">
<meta property="og:url" content="https://bakery.example/shokupan/">
<meta property="og:image" content="https://bakery.example/images/shokupan-1200x630.jpg">
<meta property="og:site_name" content="丘の上ベーカリー">
<meta property="og:locale" content="ja_JP">

<!-- X (Twitter) card: title, description and image fall back to Open Graph -->
<meta name="twitter:card" content="summary_large_image">

プレビューの見方

検索結果とSNSカードのプレビューは目安です。タイトルや説明文をどこまで表示するかは検索エンジンが決め、ページの内容から書き換えられることもあります。SNSごとに画像の切り抜き方も異なります。プレビューと長さの表示（「短め」「目安の範囲内」「途中で省略される可能性があります」）は、明らかに長すぎる・短すぎる文章を見つけるために使い、実際の表示を保証するものとは考えないでください。

プレビューは og:image のURLから画像を読み込みません。カードに画像を表示して確認したいときは、手元の画像を選んでください。プレビューにだけ使われ、出力には含まれません。

文章のコツ

• タイトルは、ページの内容が分かる言葉を前に置き、具体的に書く（「トップ」より「天然酵母の食パン｜丘の上ベーカリー」）。
• 説明文は読む人に向けて、ページで何が分かるか・何ができるかを書く。検索順位の評価には使われませんが、分かりやすいとクリックされやすくなります。
• ページごとに別のタイトルと説明文を付ける。

よくあるトラブル

• SNSで古いタイトルや画像が出る：チャットアプリやSNSはリンクのプレビューをキャッシュします。再取得するツールを用意しているサービスもありますが、反映に時間がかかることがあります。
• 共有しても画像が出ない：ログインなしで誰でも開ける https:// から始まる絶対URLにします。大きなカードには1200 × 630 px程度が向いています。
• noindexにしたのにrobots.txtでもブロックしている：robots.txtでクロールを止めると、検索エンジンは noindex を読めません。検索結果から外したいなら、クロールは許可して noindex を使います。robots.txtでできること・できないことはrobots.txt作成を参照してください。
• 正規URLが相対パスや別サイトになっている：このページの正規版の完全なURLを書きます。
• meta keywords：主要な検索エンジンは keywords メタタグを使っていないため、このツールは出力しません。