保守を引き継いだサイトのソースを開いたら、全ページの title が社名だけになっていた、ということが以前ありました。クライアントからは「検索で出てきても、どのページか分からないと言われる」という相談でした。

検索結果に並ぶ青い見出しと、その下の短い説明文。読者はこの2つを見て、どのページを開くかを決めています。見出しは HTML の title 要素、説明文は meta description をもとに作られます。

どちらも head の中に1行書くだけなんですが、書き方次第で検索結果での見え方が変わります。そのときクライアントに説明した、2つの役割の違いと、ページごとに書き分けるときの考え方をまとめておきます。

title は順位とクリックの両方に関わる

title 要素は、そのページの題名です。検索結果の見出し、ブラウザのタブ、ブックマークの名前に使われます。

Google は title を、ページの内容を知る手がかりの1つとして使っています。同時に、検索結果で読者が最初に読む文字でもあるんです。順位のためだけでなく、読んだ人が「自分の探しているページだ」と分かるように書くことが大切だと考えています。

<head>
  <meta charset="utf-8">
  <title>WordPress保守の料金と作業内容｜株式会社サンプル</title>
  <meta name="description" content="WordPressの保守で行う作業（更新・バックアップ・表示確認）と、プランごとの月額料金をまとめています。">
</head>

検索結果の見出しは書き換えられることがある

ここはよく聞かれるところですが、検索結果の見出しは、title がそのまま使われるとは限りません。Google は、ページの h1 や見出し、そのページへのリンクの文言なども参考にして、見出しを作ることがあります。

title が長すぎる、中身と合っていない、全ページ同じ、キーワードを並べただけ、といった場合に書き換えられやすくなります。逆に、中身を正しく短く表した title であれば、そのまま使われることが多いです。

文字数の目安は全角30字前後

Google は、title の文字数の上限を公表していません。検索結果の見出しは文字数ではなく表示の幅で切られるため、端末や使われている文字によって、どこで切れるかが変わるんです。

目安としては、全角30字前後を超えると、後ろが「...」で切れることが多くなります。ただし、30字を超えたら検索の評価が下がるというものではありません。

個人的には、文字数をぴったり合わせることより、後ろが切れても意味が通るように、伝えたいことを前に置くほうが大事だと思っています。

主題を前に、サイト名は後ろに置く

title は「そのページの主題｜サイト名」の順に書くのが基本です。サイト名を前に置くと、切れたときに残るのがサイト名だけになり、何のページかが分からなくなってしまいます。

トップページは、サイト名そのものが主題なので、サイト名と何をしているサイトかを並べます。区切りの記号は「｜」や「-」がよく使われます。どれを使うかより、サイトの中で揃えておくことのほうが大切です。

ページごとに固有の title にする

全ページ同じ title、「ホーム」「お知らせ」のように中身の分からない title では、検索結果でページの区別がつきません。冒頭のサイトもまさにこの状態でした。ページごとに、そのページにしか無い題名を付けます。

meta description は順位ではなくクリックに効く

meta description は、ページの内容の要約です。Google は、meta description を順位を決める要因としては使っていないと説明しています。

それでも書く意味があるのは、検索結果の説明文（スニペット）として表示されることがあるからなんです。説明文は、読者がそのページを開くかどうかを決める材料になります。順位は変わらなくても、クリックされる割合に効きます。

Google が書き換えることも多い

説明文は、書いた meta description がそのまま出るとは限りません。検索した言葉に合わせて、Google が本文の一部を抜き出して説明文にすることがよくあります。

とはいえ、書き換えられることがあるからといって、空欄にしてよいわけではありません。meta description が無いと、本文の先頭近くにある、メニューの文字などが説明文に使われることがあります。ページの中身を正しく要約した文が使われる場面は、確実にあります。

書き方と文字数の目安

meta description も、Google は文字数の上限を決めていません。表示は幅で切られ、スマートフォンではパソコンより短く切れることが多くなります。案件では、最初の全角80字ほどで要点が伝わるように書くようにしていて、こうしておくとどの端末でも困りません。

• 何が書いてあるページか、誰に向けたページかを書く
• 料金・対応範囲・所要時間など、そのページにしか無い具体的な情報を入れる
• ページごとに違う文にする。全ページ同じ文なら、書かないほうがまだ良い
• キーワードを並べない。読んで意味の通る文にする

SNS で共有されたときの題名と説明文は、og:title と og:description で別に指定できます。何も指定しないと SNS 側が title などから拾いますが、表示は SNS ごとに異なります。

WordPress でテンプレートごとに出し分ける

WordPress では、header.php に title を直接書かず、テーマで title-tag の機能を有効にして、WordPress に出力させるのが基本です。投稿・固定ページ・カテゴリ・検索結果など、ページの種類に応じた title が自動で作られ、一覧の2ページ目以降にはページ番号も付きます。

// title は WordPress に出力させる（header.php に <title> を書かない）
add_action("after_setup_theme", function () {
  add_theme_support("title-tag");
});

// 区切りの記号を変える（前後に半角スペースが入ります）
add_filter("document_title_separator", function () {
  return "｜";
});

// トップページだけ、決めた文言にする
add_filter("pre_get_document_title", function ($title) {
  if (is_front_page()) {
    return "WordPress制作代行・構築代行｜株式会社サンプル";
  }
  return $title;
});

meta description は WordPress 本体には出力する機能が無いので、ページの種類ごとに文を選んで出力します。私は、投稿は抜粋欄、カテゴリやタグは「説明」欄に書いた文を使うようにしています。こうすると、記事を書く人が管理画面から書き分けられます。

add_action("wp_head", function () {
  if (is_front_page()) {
    $desc = "デザインデータから WordPress のオリジナルテーマを構築します。";
  } elseif (is_singular()) {
    // 抜粋欄に書いた文。空なら本文の先頭から作られる
    $desc = get_the_excerpt(get_queried_object_id());
  } elseif (is_category() || is_tag() || is_tax()) {
    // カテゴリやタグの「説明」欄
    $desc = term_description();
  } else {
    return;
  }
  $desc = trim(preg_replace("/\s+/u", " ", wp_strip_all_tags($desc)));
  if ($desc === "") {
    return;
  }
  echo '<meta name="description" content="' . esc_attr(mb_substr($desc, 0, 120)) . '">' . "\n";
}, 1);

SEO 系のプラグインを入れている場合は、プラグインが title と meta description を出力しています。自分のコードでも出すと二重になるので、どちらか一方にしてください。引き継いだサイトでこの二重出力を見かけることは何度かあります。ページのソースを開いて、meta name="description" が1つだけかを確かめます。

まとめ

1. title は「主題｜サイト名」の順に。後ろが切れても意味が通るように書く
2. 文字数は全角30字前後が目安。厳密な上限は無い
3. title も meta description もページごとに固有にする
4. meta description は順位ではなくクリックに効く。そのページにしか無い情報を入れる
5. WordPress では title-tag を使い、description はページの種類ごとに出し分ける

テンプレートごとの出し分けまで組み込みます

ワプラボの WordPress 制作では、投稿・固定ページ・カテゴリ・一覧のそれぞれで、title と meta description が管理画面から書き分けられるようにテーマを組んでいます。全ページ同じ title になっている、description が出ていない、といった既存サイトの見直しも承っています。