---
title: "ページタイトルと説明文を設定する方法"
description: "title タグと meta description は、ブラウザのタブ・SNS カード・共有時の印象を左右する基本要素です。設定が抜けると何のページか伝わりにくくなります。整えるための役割の理解と設定手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/set-page-title-description"
markdown: "https://giga-site.com/articles/set-page-title-description/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# ページタイトルと説明文を設定する方法

ページのタイトルと説明文は、ブラウザのタブ表示やSNSカード、共有時の印象を左右する基本要素です。設定が抜けていると、何のページか分かりにくくなります。この記事では、titleタグとmeta descriptionの役割と、整えるための手順をまとめます。

> Source HTML: https://giga-site.com/articles/set-page-title-description
> Article index: https://giga-site.com/articles/index.md

## 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は閲覧制限ではないため、見せたくない相手がいる場合は認証を併用してください。

## よくある質問

### titleとmeta descriptionは両方必要ですか。

titleはブラウザのタブやブックマークに表示される必須級の要素です。meta descriptionは内容の要約として共有時に役立ちます。どちらも整えておくと、ページの伝わり方が安定します。

### タイトルが途中で切れて表示されます。

タイトルが長いと末尾が省略されることがあります。要点を前半に置き、短く具体的にまとめると、切れても内容が伝わります。

### meta descriptionとog:descriptionは同じものですか。

別物です。meta descriptionは主にブラウザや共有相手が見る要約で、og:descriptionはSNSカードに表示される説明です。SNSでの見え方を整えるにはog:系も設定してください。

### 設定した文言をすぐ確認できますか。

ギガサイト便ならHTMLをドロップして公開URLを開くだけで、タブのタイトル表示を確認できます。直したいときは同じURLのままファイルを差し替えられます。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [共有ページにファビコンを設定する方法](https://giga-site.com/articles/set-favicon-howto/index.md)
- [誰が共有ページを開いたかアクセスログで確認する方法](https://giga-site.com/articles/access-log-check-who-opened/index.md)
- [OGP画像を設定してSNSのサムネを整える方法](https://giga-site.com/articles/set-ogp-image/index.md)
- [公開を始める日と終わる日を指定して共有する方法](https://giga-site.com/articles/set-publish-start-and-end/index.md)
- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ページタイトルと説明文を設定する方法",
  "description": "title タグと meta description は、ブラウザのタブ・SNS カード・共有時の印象を左右する基本要素です。設定が抜けると何のページか伝わりにくくなります。整えるための役割の理解と設定手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/set-page-title-description",
  "url": "https://giga-site.com/articles/set-page-title-description",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "titleとmeta descriptionは両方必要ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "titleはブラウザのタブやブックマークに表示される必須級の要素です。meta descriptionは内容の要約として共有時に役立ちます。どちらも整えておくと、ページの伝わり方が安定します。"
      }
    },
    {
      "@type": "Question",
      "name": "タイトルが途中で切れて表示されます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "タイトルが長いと末尾が省略されることがあります。要点を前半に置き、短く具体的にまとめると、切れても内容が伝わります。"
      }
    },
    {
      "@type": "Question",
      "name": "meta descriptionとog:descriptionは同じものですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "別物です。meta descriptionは主にブラウザや共有相手が見る要約で、og:descriptionはSNSカードに表示される説明です。SNSでの見え方を整えるにはog:系も設定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "設定した文言をすぐ確認できますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便ならHTMLをドロップして公開URLを開くだけで、タブのタイトル表示を確認できます。直したいときは同じURLのままファイルを差し替えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```