メタタグ生成

本当に重要な短いリスト

古いチュートリアルに並ぶメタタグの大半は無視されています。今もユーザーの目に触れる内容に影響するのは、次のわずかなものだけです。

• <title> — ページ内で最も重要な要素。検索結果でクリックされる見出しであり、ブラウザのタブ名でもあります。
• <meta name="description"> — ランキング要因ではありませんが、通常はタイトル下のスニペットになるため、クリック率に直接影響します。
• <link rel="canonical"> — 同じ内容が複数のアドレスで到達できる場合に、どの URL が正規版かを検索エンジンに伝えます。
• Open Graph と Twitter カードのプロパティ — SNS やメッセージアプリで共有されたときのプレビューカードを制御します。

目立って不在なのが <meta name="keywords"> です。長年の濫用を経て、Google は 2009 年にランキングでの利用停止を認めました。ここに含めているのは、一部の社内検索システムが今も読むからにすぎません。

長さの上限は文字数ではなくピクセル

検索エンジンはタイトルと説明文を固定のピクセル幅に収まるよう切り詰めます。したがって細い文字が多いタイトルは、大文字だらけのタイトルより多くの文字が入ります。文字数はあくまで実用的な近似で、タイトル約 60 文字・説明文約 160 文字ならデスクトップの上限に収まることがほとんどです。モバイルの結果はさらに狭くなります。

上限を超えてもエラーではありません。説明文はスニペットであって契約ではなく、クエリにより合致する箇所があれば検索エンジンは平然と書き換えます。重要な語を前に置き、切り詰められても意味が残るようにしてください。

Open Graph と、Twitter 用タグが多くの場合は任意である理由

Open Graph は Facebook 発祥ですが、今では LinkedIn、Slack、Discord、WhatsApp、iMessage をはじめ大半のプラットフォームが読む事実上の標準です。作業のほぼすべてを担うのは 4 つのプロパティ、og:title、og:description、og:url、og:image です。

Twitter のパーサーは独自タグがない場合に Open Graph へフォールバックします。したがって twitter:* を一式そろえる必要があるのは、そのプラットフォームだけ別のタイトル・説明・画像にしたいときだけです。明示的に指定する価値があるのは twitter:card で、大きなヒーロー画像のレイアウトかコンパクトなサムネイルかを選択します。

プレビュー画像を正しく設定する

多くの実装がつまずくのがここです。絶対 URL を使ってください。相対パスはどのクローラーでも壊れます。サイズは 1200 × 630 ピクセル、つまり切り抜きなしで大きなカードを埋める 1.91:1 の比率が目安です。ファイルは 1 MB 未満に抑え、JPEG か PNG を使い、認証・Cookie・リダイレクト連鎖なしで公開アクセスできる URL にしてください。画像上の文字は大きくします。カードは本来のサイズのごく一部で表示されることが多いためです。

キャッシュと、変更が反映されない理由

主要なプラットフォームはいずれもプレビューを積極的にキャッシュし、数日に及ぶこともあります。タグを更新しても、キャッシュが切れるかプラットフォーム自身のデバッグツールで強制更新するまで、古いカードが表示され続けます。Facebook、LinkedIn、Twitter はそれぞれツールを提供しています。更新後もおかしい場合は、クローラーが実際にページへ到達できるか確認してください。ログイン壁、robots.txt によるブロック、地域制限はいずれも空のカードを生みます。