検索結果に並んだとき、あなたのページから見えるのはタイトル1行と説明2行だけです。ここをきちんと書くだけで、クリックされる確率は大きく変わります。難しい対策より先に、この2つを整えましょう。
検索結果はこう見えている
検索エンジンは、<title>をタイトルに、meta descriptionを説明文として使います。
<title>、下の説明文がmeta description。この3行が、検索する人が見る全部です。書く場所は<head>の中
<head>
<meta charset="UTF-8">
<title>しまちゃんの自己紹介ページ｜はじめて作ったWebサイト</title>
<meta name="description" content="HTMLとCSSだけで作った自己紹介ページです。作った手順と、つまずいたところをまとめました。">
</head>ページごとに書き分けるのが基本です。サイト内の全ページが同じタイトルだと、検索する人はどれを開けばよいか分かりません。
HTMLheadの中身をそろえようheadに書くタグの全体像は、HTMLコースのこの回で扱っていますtitleの書き方
全角30文字前後が目安です。長いと検索結果で途中から省略されます。
| ✕ 惜しい | ○ 伝わる |
|---|---|
トップページ | しまちゃんの自己紹介ページ |
Home | イラスト制作のポートフォリオ｜しま |
お知らせ | お知らせ｜しまちゃんのページ |
コツは3つです。
- そのページの内容を具体的に——「トップページ」では何のサイトか分からない
- 大事な言葉を前に置く——省略されても意図が伝わる
- サイト名は区切って後ろに——
ページ名｜サイト名の形が定番
descriptionの書き方
全角80〜120文字が目安。順位そのものを上げる要素ではありませんが、クリックされるかどうかを決める大事な2行です。
- そのページで何が分かるかを先に書く
- 続きが読みたくなる具体を入れる（数字・結論・対象読者）
- 全ページ同じ文章にしない
<!-- ✕ 中身が分からない -->
<meta name="description" content="ようこそ。私のサイトです。">
<!-- ○ 何が読めるか分かる -->
<meta name="description" content="HTMLとCSSだけで自己紹介ページを作った記録です。使ったタグ・つまずいた3か所・かかった時間をまとめました。">あわせて効く、地味だけど大事なこと
見出しタグを正しく使う
ページの主題は<h1>に1つ。その下の話題を<h2>、さらに細かい話題を<h3>と、飛ばさずに使います。見出しは、検索エンジンがページの構造を読み取る手がかりになります。
画像にaltを書く
<img src="shima.png" alt="雪の上にとまっているシマエナガ">画像の内容を説明する文が、画像検索の手がかりになります。読み上げソフトを使う人にも伝わるようになるので、ここは必ず書いてください。
ファイル名・フォルダ名は英数字で
/profile/のように内容を表す英単語にすると、URLを見ただけで中身が推測できます。日本語のファイル名は、URLに変換されると読めない文字列になってしまいます。
スマホで読めるようにする
<meta name="viewport" content="width=device-width, initial-scale=1.0">この1行が無いと、スマホでページ全体が縮小表示されます。検索エンジンはスマホでの見え方を基準に評価するので、必ず入れてください。
SNSでの見え方は別に設定する
TwitterやLINEで共有されたときのカードは、og:で始まる別のタグで決まります。titleとdescriptionだけでは、シェア時のサムネイルは出ません。
書いたあとは、拾われているか確かめる
設定しても、検索結果に反映されるまでには時間がかかります。ちゃんと認識されているかは、Googleの無料ツールで確認できます。
べんりワザSearch Consoleで「検索でどう見られているか」を知る検索でどう見られているかを確かめる方法はこちらまとめ
- 検索結果に出るのはtitleとdescriptionの3行。ページごとに書き分ける
- titleは全角30文字前後、大事な言葉を前に。descriptionは80〜120文字で「何が分かるか」
- あわせて見出しの順番・画像のalt・viewportをそろえると土台が固まる
小手先の対策より、この基本をすべてのページに行きわたらせるほうが、ずっと確実に効きます。