ページタイトルと説明文を設定する方法

titleとmeta descriptionの役割

titleタグは、ブラウザのタブやブックマークに表示されるページの名前です。短くても内容が伝わる文言にすると、複数タブの中でも見分けやすくなります。

meta descriptionは、ページの内容を要約した説明文です。SNSでURLを共有したときの説明や、共有相手がページ概要を把握する手がかりになります。

どちらもHTMLのhead内に書く基本的な要素です。OGPを設定する前提としても、まずこの2つを整えておくと土台がしっかりします。

良いタイトルと説明文の考え方

中身を整えるときに意識したいポイントを挙げます。

タイトルと説明文は、別々に考えるより、セットで内容が一致するように書くと読み手が混乱しません。次の点を踏まえると、過不足のない表現にまとまります。

• titleは内容が一目で分かる具体的な表現にする
• 長すぎるタイトルは末尾が切れるため要点を前に置く
• descriptionはページの要約を1〜2文で簡潔に書く
• タイトルと説明で内容が食い違わないようにする

最短手順：まずこの3ステップで完了

ページタイトルと説明文を設定は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

設定する手順

HTMLに設定する流れは次のとおりです。

titleとmeta descriptionはどちらもheadの中に書きます。先に文言を決めてから記述すると、後で迷わずに進められます。

1. ページの内容を一言で表すタイトル文を決める
2. HTMLのhead内にtitleタグを書き、その文言を入れる
3. 同じくhead内にmeta descriptionを追加し、要約文を入れる
4. ページを開き、ブラウザのタブにタイトルが反映されているか確認する
5. SNSでの見え方も整えるなら、続けてog:title・og:descriptionを設定する

OGPとの関係

titleやmeta descriptionは、ブラウザや共有相手が見る基本情報です。一方、SNSのカードに表示されるのはog:titleやog:descriptionです。両者は似ていますが別物で、SNS向けの見せ方を整えるにはOGPも設定する必要があります。

基本の流れとしては、まずtitleとmeta descriptionで土台を整え、そのうえでSNS共有を意識する場合にog:系を追加する、という順番が分かりやすいです。

ギガサイト便で確認する

ギガサイト便にHTMLをドロップすると、その場で 〇〇.giga-site.com の共有URLが発行されます。titleやmeta descriptionを書き込んだHTMLを公開すれば、ブラウザのタブ表示や共有時の見え方をすぐ確認できます。

文言を直したくなったら、同じURLのままファイルを差し替えられます。リンクを送り直さずに、タイトルや説明を調整しながら最適な表現を探せます。

公開URLにはnoindexが付くため、調整中のページが検索結果に出ることはありません。ただしnoindexは閲覧制限ではないため、見せたくない相手がいる場合は認証を併用してください。