現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ドキュメント

【JavaScript入門】document.titleとは?ページタイトルの取得・変更方法を初心者向けに解説

投稿日:2019年5月2日 更新日:

JavaScriptのdocument.titleとは?ページタイトルの取得・変更方法を初心者向けに解説

document.title は、HTML 文書の <title> タグに設定されている「ページタイトル」を取得・変更するためのプロパティです。
ブラウザのタブに表示されるタイトルを動的に変更したいときに利用できます。



document.titleとは?

document.title は、HTML 文書のタイトルを参照・設定するためのプロパティです。

document.title;
document.title = “新しいタイトル”;

対象となるのは、HTML の次の部分です:

<title>ページタイトル</title>

この値を JavaScript から読み取ったり、書き換えたりできます。



使用例

例1:ページタイトルを表示する

document.write(“タイトル:” + document.title);

→ 現在のページタイトルがそのまま表示されます。

例2:タイトルを変数に代入する

docTitle = document.title;

→ ページタイトルが変数 docTitle に代入されます。

例3:ページタイトルを動的に変更する

document.title = “JavaScript学習ページ”;

→ ブラウザのタブに表示されるタイトルが変更されます。

document.title を使うメリット

  • ページ内容に応じてタイトルを動的に変更できる
  • ユーザーの操作に合わせてタイトルを変える演出が可能
  • SPA(シングルページアプリ)などでよく利用される

注意点

  • SEO の観点では、タイトルの動的変更は慎重に行う必要がある
  • 検索エンジンは基本的に初期タイトルを評価する
  • ユーザーが混乱しないよう、意味のある変更にとどめることが重要



まとめ

  • document.title はページタイトルを取得・変更するプロパティ
  • ブラウザのタブに表示されるタイトルを動的に変更できる
  • SEO への影響を考慮しつつ適切に利用することが大切

関連リンク

-ドキュメント
-

執筆者:

関連記事

【JavaScript入門】document.openとdocument.closeの使い方|書き出し処理の仕組みと注意点を解説

JavaScriptのdocument.openとdocument.closeとは?使い方・注意点を初心者向けに解説 document.open() と document.close() は、HTML …

【JavaScript入門】document.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説

JavaScriptのdocument.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説 document.applets、document.embeds、d …

【JavaScript入門】document.cookieとは?クッキーの読み書き・有効期限・削除方法を初心者向けに解説

JavaScriptのdocument.cookieとは?クッキーの読み書き方法と有効期限の設定を初心者向けに解説 document.cookie は、ブラウザに保存される「クッキー(Cookie)」 …

【JavaScript入門】document.fgColorとは?文字色の取得・変更方法と注意点を初心者向けに解説

JavaScriptのdocument.fgColorとは?文字色の取得・変更方法を初心者向けに解説 document.fgColor は、HTML ドキュメント全体の文字色(前景色)を取得・変更する …

【JavaScript入門】document.bgColorとは?背景色の取得・変更方法と注意点を初心者向けに解説

JavaScriptのdocument.bgColorとは?背景色の取得・変更方法を初心者向けに解説 document.bgColor は、HTML ドキュメント全体の背景色を取得・変更するためのプロ …